separate html code into their own modules

This commit is contained in:
JFH
2021-12-03 23:13:20 +01:00
parent f7fe164c50
commit 42d1a2f342
32 changed files with 2052 additions and 1470 deletions

View File

@@ -0,0 +1,66 @@
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #5a6162;
}
#dialog_content p,
#dialog_content select,
#dialog_content label {
margin: 10px;
line-height: 1.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 440px;
z-index: 50001;
background: #5a6162;
border: 1px outset #777;
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.8em;
}
#dialog_container,
#dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
</style>
<elix-dialog id="dialog_box" aria-label="SVG-Edit storage preferences" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p id="notificationNote"> </p>
<select id="se-storage-pref">
<option value="prefsAndContent" id="prefsAndContent"></option>
<option value="prefsOnly" id="prefsOnly"></option>
<option value="noPrefsOrContent" id="noPrefsOrContent"></option>
</select>
<label title="" id="se-remember-title">
<input type="checkbox" id="se-remember" value="" checked>
</label>
</div>
<div id="dialog_buttons">
<button id="storage_ok"></button>
<button id="storage_cancel"></button>
</div>
</div>
</elix-dialog>

View File

@@ -1,70 +1,8 @@
const template = document.createElement('template');
template.innerHTML = `
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #5a6162;
}
import storageDialogHTML from './storageDialog.html';
#dialog_content p, #dialog_content select, #dialog_content label {
margin: 10px;
line-height: 1.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 440px;
z-index: 50001;
background: #5a6162;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
#dialog_container, #dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
</style>
<elix-dialog id="dialog_box" aria-label="SVG-Edit storage preferences" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p id="notificationNote"> </p>
<select id="se-storage-pref">
<option value="prefsAndContent" id="prefsAndContent"></option>
<option value="prefsOnly" id="prefsOnly"></option>
<option value="noPrefsOrContent" id="noPrefsOrContent"></option>
</select>
<label title="" id="se-remember-title">
<input type="checkbox" id="se-remember" value="" checked>
</label>
</div>
<div id="dialog_buttons">
<button id="storage_ok"></button>
<button id="storage_cancel"></button>
</div>
</div>
</elix-dialog>
`;
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = storageDialogHTML;
/**
* @class SeStorageDialog
*/