separate html code into their own modules
This commit is contained in:
JFH
@@ -1,231 +1,7 @@
|
||||
import editorPreferencesDialog from './editorPreferencesDialog.html';
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Force the scroll bar to appear so we see it hide when overlay opens. */
|
||||
body::-webkit-scrollbar {
|
||||
background: lightgray;
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: darkgray;
|
||||
}
|
||||
.toolbar_button button {
|
||||
border:1px solid #dedede;
|
||||
line-height:130%;
|
||||
float: left;
|
||||
background: #E8E8E8 none;
|
||||
padding:5px 10px 5px 7px; /* Firefox */
|
||||
line-height:17px; /* Safari */
|
||||
margin: 5px 20px 0 0;
|
||||
border: 1px var(--border-color) solid;
|
||||
border-top-color: #FFF;
|
||||
border-left-color: #FFF;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar_button button:hover {
|
||||
border: 1px #e0a874 solid;
|
||||
border-top-color: #fcd9ba;
|
||||
border-left-color: #fcd9ba;
|
||||
background-color: #FFC;
|
||||
}
|
||||
.toolbar_button button:active {
|
||||
background-color: #F4E284;
|
||||
border-left: 1px solid #663300;
|
||||
border-top: 1px solid #663300;
|
||||
}
|
||||
|
||||
.toolbar_button button .svg_icon {
|
||||
margin: 0 3px -3px 0 !important;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.color_block {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.color_block svg {
|
||||
display: block;
|
||||
}
|
||||
#bg_blocks {
|
||||
overflow: auto;
|
||||
margin-left: 30px;
|
||||
}
|
||||
#bg_blocks .color_block {
|
||||
position: static;
|
||||
}
|
||||
#svginfo_bg_note {
|
||||
font-size: .9em;
|
||||
font-style: italic;
|
||||
color: #444;
|
||||
}
|
||||
#svg_prefs #svg_prefs_container {
|
||||
padding: 10px;
|
||||
background-color: #5a6162;
|
||||
color: #c5c5c5;
|
||||
border: 1px outset #777;
|
||||
opacity: 1.0;
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
font-size: .8em;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
#tool_prefs_back {
|
||||
margin-left: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#tool_prefs_save {
|
||||
width: 30%;
|
||||
background-color: #c79605;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
#tool_prefs_cancel {
|
||||
width: 30%;
|
||||
background-color: #c8c8c8;
|
||||
}
|
||||
|
||||
#svg_prefs #svg_docprops_prefs {
|
||||
float: left;
|
||||
width: 221px;
|
||||
margin: 5px .7em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#svg_prefs_container fieldset + fieldset {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#svg_prefs legend {
|
||||
max-width: 195px;
|
||||
}
|
||||
|
||||
#svg_prefs_container > fieldset > legend {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#svg_prefs fieldset {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
#svg_prefs_container label {
|
||||
display: block;
|
||||
margin: .5em;
|
||||
}
|
||||
#svg_prefs_container div.color_block {
|
||||
float: left;
|
||||
margin: 2px;
|
||||
padding: 20px;
|
||||
border: 1px solid #6f6f6f;
|
||||
}
|
||||
|
||||
#change_background div.cur_background {
|
||||
border: 2px solid blue;
|
||||
padding: 19px;
|
||||
}
|
||||
#canvas_bg_url {
|
||||
display: block;
|
||||
width: 96%;
|
||||
}
|
||||
#svg_prefs button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
|
||||
<div id="svg_prefs_container">
|
||||
<div id="tool_prefs_back" class="toolbar_button">
|
||||
<button id="tool_prefs_save"></button>
|
||||
<button id="tool_prefs_cancel"></button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend id="svginfo_editor_prefs"></legend>
|
||||
<label>
|
||||
<span id="svginfo_lang"></span>
|
||||
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
|
||||
<select id="lang_select">
|
||||
<option id="lang_ar" value="ar">العربية</option>
|
||||
<option id="lang_cs" value="cs">Čeština</option>
|
||||
<option id="lang_de" value="de">Deutsch</option>
|
||||
<option id="lang_en" value="en" selected="selected">English</option>
|
||||
<option id="lang_es" value="es">Español</option>
|
||||
<option id="lang_fa" value="fa">فارسی</option>
|
||||
<option id="lang_fr" value="fr">Français</option>
|
||||
<option id="lang_fy" value="fy">Frysk</option>
|
||||
<option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
|
||||
<option id="lang_it" value="it">Italiano</option>
|
||||
<option id="lang_ja" value="ja">日本語</option>
|
||||
<option id="lang_nl" value="nl">Nederlands</option>
|
||||
<option id="lang_pl" value="pl">Polski</option>
|
||||
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
|
||||
<option id="lang_ro" value="ro">Română</option>
|
||||
<option id="lang_ru" value="ru">Русский</option>
|
||||
<option id="lang_sk" value="sk">Slovenčina</option>
|
||||
<option id="lang_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</option>
|
||||
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
|
||||
</select>
|
||||
</label>
|
||||
<fieldset id="change_background">
|
||||
<legend id="svginfo_change_background"></legend>
|
||||
<div id="bg_blocks"></div>
|
||||
<label>
|
||||
<span id="svginfo_bg_url"></span>
|
||||
<input type="text" id="canvas_bg_url" />
|
||||
</label>
|
||||
<p id="svginfo_bg_note"></p>
|
||||
</fieldset>
|
||||
<fieldset id="change_grid">
|
||||
<legend id="svginfo_grid_settings"></legend>
|
||||
<label for="svginfo_snap_onoff">
|
||||
<span id="svginfo_snap_onoff"></span>
|
||||
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
|
||||
</label>
|
||||
<label for="grid_snapping_step">
|
||||
<span id="svginfo_snap_step"></span>
|
||||
<input type="text" id="grid_snapping_step" size="3" value="10" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_grid_color"></span>
|
||||
<input type="text" id="grid_color" size="3" value="#000" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="units_rulers">
|
||||
<legend id="svginfo_units_rulers"></legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff"></span>
|
||||
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_unit"></span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</elix-dialog>
|
||||
`;
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = editorPreferencesDialog;
|
||||
/**
|
||||
* @class SeEditPrefsDialog
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user