improve dialog and fix quality

SVG-Edit · Dec 10, 2023 · 2a29aeb · 2a29aeb
1 parent 9498ed4
commit 2a29aeb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 22 deletions.
diff --git a/src/editor/dialogs/exportDialog.html b/src/editor/dialogs/exportDialog.html
@@ -3,7 +3,6 @@
         margin: 10px 10px 5px 10px;
         background: #5a6162;
         overflow: auto;
-        text-align: left;
         border: 1px solid #c8c8c8;
     }
 
@@ -12,6 +11,7 @@
     #dialog_content label {
         margin: 10px;
         line-height: 0.3em;
+        color: #fff
     }
 
     #dialog_container {
@@ -56,19 +56,9 @@
     <div class="overlay"></div>
     <div id="dialog_container">
         <div id="dialog_content">
-            <p class="se-select" id="export_select"></p>
-            <p class="se-select">
-                <select id="se-storage-pref">
-                    <option value="PNG">PNG</option>
-                    <option value="JPEG">JPEG</option>
-                    <option value="BMP">BMP</option>
-                    <option value="WEBP">WEBP</option>
-                    <option value="PDF">PDF</option>
-                </select>
-            </p>
-            <p id="se-quality">
-                <elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box>
-            </p>
+            <p id="export_select"></p>
+            <se-select id="se-storage-pref" label="" options="PNG,JPEG,BMP,WEBP,PDF" values="PNG::JPEG::BMP::WEBP::PDF"></se-select>
+            <se-spin-input id="se-quality" label="ui.quality" size="3" min="0" max="100" value="100" step="5" />
         </div>
         <div id="dialog_buttons">
             <button id="export_ok"></button>

diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js
@@ -21,7 +21,7 @@ export class SeExportDialog extends HTMLElement {
     this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel')
     this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref')
     this.$qualityCont = this._shadowRoot.querySelector('#se-quality')
-    this.$input = this._shadowRoot.querySelector('elix-number-spin-box')
+    this.$input = this._shadowRoot.querySelector('#se-quality')
     this.value = 1
   }
 
@@ -33,16 +33,16 @@ export class SeExportDialog extends HTMLElement {
   init (i18next) {
     this.setAttribute('common-ok', i18next.t('common.ok'))
     this.setAttribute('common-cancel', i18next.t('common.cancel'))
-    this.setAttribute('ui-quality', i18next.t('ui.quality'))
     this.setAttribute('ui-export_type_label', i18next.t('ui.export_type_label'))
+    this.value = 100
   }
 
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['dialog', 'common-ok', 'common-cancel', 'ui-quality', 'ui-export_type_label']
+    return ['dialog', 'common-ok', 'common-cancel', 'ui-export_type_label']
   }
 
   /**
@@ -68,10 +68,6 @@ export class SeExportDialog extends HTMLElement {
       case 'common-cancel':
         this.$cancelBtn.textContent = newValue
         break
-      case 'ui-quality':
-        node = this._shadowRoot.querySelector('#se-quality')
-        node.prepend(newValue)
-        break
       case 'ui-export_type_label':
         node = this._shadowRoot.querySelector('#export_select')
         node.textContent = newValue

diff --git a/src/editor/locale/lang.fr.js b/src/editor/locale/lang.fr.js
@@ -21,7 +21,7 @@ export default {
     palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour',
     zoom_level: 'Changer le niveau de zoom',
     panel_action: 'Cliquer pour ouvrir le panel de côté',
-    quality: 'Quality:',
+    quality: 'Qualité:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
     pick_stroke_paint_opacity: 'Pick a Stroke Paint and Opacity',