Fix: main menu style and text #371

editor/images/config.svg

@@ -0,0 +1 @@
+<svg width="64" height="64" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M655.872 960a61.952 61.952 0 0 1-45.376-19.136c-14.912-16.192-62.272-58.24-100.992-58.24-38.464 0-86.528 42.304-100.352 57.216a62.144 62.144 0 0 1-68.224 14.144l-1.28-0.576-117.76-65.088-1.088-0.832a55.552 55.552 0 0 1-18.944-67.52c0.064-0.192 10.816-24.768 10.816-47.168 0-67.968-56-123.392-124.8-123.392h-4.16l-0.768 0.064c-19.712 0-35.776-17.344-40.896-44.096C41.6 603.264 32 552.448 32 512.384c0-40 9.6-90.88 10.048-92.992 5.184-27.136 21.568-44.48 41.664-44.096h4.16c68.8 0 124.8-55.296 124.8-123.328 0-22.4-10.752-46.976-10.88-47.232a55.424 55.424 0 0 1 19.136-67.456l1.216-0.832 124.224-67.456 1.344-0.576a63.36 63.36 0 0 1 67.968 13.952c14.656 15.232 61.184 54.784 98.816 54.784 37.312 0 83.52-38.784 98.112-53.76a63.616 63.616 0 0 1 68.032-13.376l1.28 0.576 120 65.92 1.216 0.832a55.424 55.424 0 0 1 19.072 67.456c-0.128 0.192-10.88 24.768-10.88 47.168 0 67.968 56 123.328 124.8 123.328h4.16c19.968-0.384 36.416 17.024 41.6 44.096 0.512 2.112 10.112 52.992 10.112 92.992 0 40.064-9.6 90.88-10.048 92.992-5.184 27.136-21.632 44.48-41.6 44.032h-4.16c-68.8 0-124.8 55.36-124.8 123.392 0 22.464 10.752 46.976 10.88 47.232a55.36 55.36 0 0 1-19.072 67.392l-1.28 0.896-122.048 66.688-1.344 0.512a56.32 56.32 0 0 1-22.656 4.48z m-6.016-64.832a8.192 8.192 0 0 0 3.648 0.96h0.192l112.128-61.056c-2.688-6.208-15.04-36.16-15.04-67.584 0-93.76 75.008-170.56 169.024-175.296 1.344-7.36 8.704-48.832 8.704-79.808s-7.296-72.384-8.704-79.744c-94.016-4.864-169.024-81.664-169.024-175.36 0-31.424 12.416-61.44 15.104-67.648l-110.4-60.352h-0.448a8.448 8.448 0 0 0-4.16 1.088 309.12 309.12 0 0 1-40.832 33.728c-33.984 23.552-66.176 35.456-95.552 35.456-29.76 0-62.144-12.16-96.384-36.16a312.064 312.064 0 0 1-41.024-34.432 9.088 9.088 0 0 0-4.224-1.024H372.48l-114.304 61.76c2.752 6.272 15.104 36.288 15.104 67.584 0 93.696-75.008 170.496-169.024 175.36-1.408 7.36-8.704 48.704-8.704 79.744s7.36 72.384 8.704 79.744c94.016 4.8 169.024 81.6 169.024 175.36 0 31.424-12.48 61.632-15.104 67.712l108.16 59.52h0.256a8 8 0 0 0 3.584-0.896c2.048-2.112 18.176-19.008 41.408-35.776 34.688-25.088 67.648-37.76 97.92-37.76 30.656 0 63.872 12.928 98.752 38.464 23.36 17.152 39.616 34.24 41.6 36.416z m-137.984-223.104c-88.32 0-160.192-71.68-160.192-159.808s71.872-159.744 160.192-159.744c88.384 0 160.256 71.616 160.256 159.744s-71.872 159.808-160.256 159.808z m0-255.744a96 96 0 0 0 0 191.808 95.936 95.936 0 0 0 0-191.808z"></path></svg>

editor/images/svg_edit_icons.svg

@@ -1027,6 +1027,10 @@
 </svg>
 </g>
 
+<g id="config">
+<svg width="64" height="64" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M655.872 960a61.952 61.952 0 0 1-45.376-19.136c-14.912-16.192-62.272-58.24-100.992-58.24-38.464 0-86.528 42.304-100.352 57.216a62.144 62.144 0 0 1-68.224 14.144l-1.28-0.576-117.76-65.088-1.088-0.832a55.552 55.552 0 0 1-18.944-67.52c0.064-0.192 10.816-24.768 10.816-47.168 0-67.968-56-123.392-124.8-123.392h-4.16l-0.768 0.064c-19.712 0-35.776-17.344-40.896-44.096C41.6 603.264 32 552.448 32 512.384c0-40 9.6-90.88 10.048-92.992 5.184-27.136 21.568-44.48 41.664-44.096h4.16c68.8 0 124.8-55.296 124.8-123.328 0-22.4-10.752-46.976-10.88-47.232a55.424 55.424 0 0 1 19.136-67.456l1.216-0.832 124.224-67.456 1.344-0.576a63.36 63.36 0 0 1 67.968 13.952c14.656 15.232 61.184 54.784 98.816 54.784 37.312 0 83.52-38.784 98.112-53.76a63.616 63.616 0 0 1 68.032-13.376l1.28 0.576 120 65.92 1.216 0.832a55.424 55.424 0 0 1 19.072 67.456c-0.128 0.192-10.88 24.768-10.88 47.168 0 67.968 56 123.328 124.8 123.328h4.16c19.968-0.384 36.416 17.024 41.6 44.096 0.512 2.112 10.112 52.992 10.112 92.992 0 40.064-9.6 90.88-10.048 92.992-5.184 27.136-21.632 44.48-41.6 44.032h-4.16c-68.8 0-124.8 55.36-124.8 123.392 0 22.464 10.752 46.976 10.88 47.232a55.36 55.36 0 0 1-19.072 67.392l-1.28 0.896-122.048 66.688-1.344 0.512a56.32 56.32 0 0 1-22.656 4.48z m-6.016-64.832a8.192 8.192 0 0 0 3.648 0.96h0.192l112.128-61.056c-2.688-6.208-15.04-36.16-15.04-67.584 0-93.76 75.008-170.56 169.024-175.296 1.344-7.36 8.704-48.832 8.704-79.808s-7.296-72.384-8.704-79.744c-94.016-4.864-169.024-81.664-169.024-175.36 0-31.424 12.416-61.44 15.104-67.648l-110.4-60.352h-0.448a8.448 8.448 0 0 0-4.16 1.088 309.12 309.12 0 0 1-40.832 33.728c-33.984 23.552-66.176 35.456-95.552 35.456-29.76 0-62.144-12.16-96.384-36.16a312.064 312.064 0 0 1-41.024-34.432 9.088 9.088 0 0 0-4.224-1.024H372.48l-114.304 61.76c2.752 6.272 15.104 36.288 15.104 67.584 0 93.696-75.008 170.496-169.024 175.36-1.408 7.36-8.704 48.704-8.704 79.744s7.36 72.384 8.704 79.744c94.016 4.8 169.024 81.6 169.024 175.36 0 31.424-12.48 61.632-15.104 67.712l108.16 59.52h0.256a8 8 0 0 0 3.584-0.896c2.048-2.112 18.176-19.008 41.408-35.776 34.688-25.088 67.648-37.76 97.92-37.76 30.656 0 63.872 12.928 98.752 38.464 23.36 17.152 39.616 34.24 41.6 36.416z m-137.984-223.104c-88.32 0-160.192-71.68-160.192-159.808s71.872-159.744 160.192-159.744c88.384 0 160.256 71.616 160.256 159.744s-71.872 159.808-160.256 159.808z m0-255.744a96 96 0 0 0 0 191.808 95.936 95.936 0 0 0 0-191.808z"></path></svg>
+</g>
+
 <g id="svg_eof"/>
 
 </svg>

editor/locale/locale.js

@@ -205,6 +205,8 @@ export const readLang = async function (langData) {
     tool_import: tools.import_doc,
     tool_open: tools.open_doc,
     tool_save: tools.save_doc,
+    tool_editor_prefs: config.editor_prefs,
+    tool_editor_homepage: tools.editor_homepage,
 
     svginfo_units_rulers: config.units_and_rulers,
     svginfo_rulers_onoff: config.show_rulers,

editor/svg-editor-es.html

@@ -108,15 +108,11 @@
           New Image (N)
         </li>
         <li id="tool_open" style="display:none;">
-          <div id="fileinputs">
+          <div></div>
-            <div></div>
-          </div>
           Open SVG
         </li>
         <li id="tool_import" style="display:none;">
-          <div id="fileinputs_import">
+          <div></div>
-            <div></div>
-          </div>
           Import Image
         </li>
         <li id="tool_save">
@@ -131,15 +127,15 @@
           <div></div>
           Document Properties (D)
         </li>
+        <li id="tool_editor_prefs">
+          <div></div>
+          Editor Preferences
+        </li>
+        <li id="tool_editor_homepage">
+          <div></div>
+          SVG-Edit Home Page
+        </li>
       </ul>
-      <p>
-        <a href="https://github.com/SVG-Edit/svgedit" target="_blank">
-          SVG-edit Home Page
-        </a>
-      </p>
-      <button id="tool_prefs_option">
-        Editor Options
-      </button>
     </div>
   </div>
   <div id="tools_top" class="tools_panel">

editor/svg-editor.css

@@ -431,7 +431,7 @@ div.palette_item:first-child {
   padding-left: 7px;
   margin: -5px;
   overflow: auto;
-  cursor: default;
+  cursor: pointer;
 }
 
 #main_menu li:hover {
@@ -1246,10 +1246,6 @@ ul li.current {
   margin-left: 0;
 }
 
-#tool_prefs_option {
-  float: right;
-}
-
 .toolbar_button button {
   border:1px solid #dedede;
   line-height:130%;
@@ -1264,6 +1260,7 @@ ul li.current {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
+  cursor: pointer;
 }
 
 .toolbar_button button:hover {

editor/svg-editor.js

@@ -57,6 +57,9 @@ if (!$.loadingStylesheets) {
   $.loadingStylesheets = [];
 }
 */
+
+const homePage = 'https://github.com/SVG-Edit/svgedit';
+
 const stylesheet = 'svg-editor.css';
 if (!$.loadingStylesheets.includes(stylesheet)) {
   $.loadingStylesheets.push(stylesheet);
@@ -1276,7 +1279,8 @@ editor.init = function () {
         node_delete: 'node_delete.png',
         node_clone: 'node_clone.png',
 
-        globe_link: 'globe_link.png'
+        globe_link: 'globe_link.png',
+        config: 'config.png'
       },
       placement: {
         '#logo': 'logo',
@@ -1284,10 +1288,12 @@ editor.init = function () {
         '#tool_clear div,#layer_new': 'new_image',
         '#tool_save div': 'save',
         '#tool_export div': 'export',
-        '#tool_open div div': 'open',
+        '#tool_open div': 'open',
-        '#tool_import div div': 'import',
+        '#tool_import div': 'import',
         '#tool_source': 'source',
         '#tool_docprops > div': 'docprops',
+        '#tool_editor_prefs > div': 'config',
+        '#tool_editor_homepage > div': 'globe_link',
         '#tool_wireframe': 'wireframe',
 
         '#tool_undo': 'undo',
@@ -4724,6 +4730,14 @@ editor.init = function () {
     $('#svg_prefs').show();
   };
 
+  /**
+  *
+  * @returns {void}
+  */
+  const openHomePage = function () {
+    window.open(homePage, '_blank');
+  };
+
   /**
   *
   * @returns {void}
@@ -5608,9 +5622,12 @@ editor.init = function () {
         key: ['esc', false, false], hidekey: true},
       {sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},
       {sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
-      {sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup'},
+      {sel: '#tool_docprops', fn: showDocProperties, evt: 'click'},
       {sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},
-      {sel: '#tool_prefs_option', fn () { showPreferences(); return false; }, evt: 'mouseup'},
+      {sel: '#tool_editor_prefs', fn: showPreferences, evt: 'click'},
+      {sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},
+      {sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},
+      {sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},
       {sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected,
         evt: 'click', key: ['del/backspace', true]},
       {sel: '#tool_reorient', fn: reorientPath, evt: 'click'},
@@ -6209,10 +6226,12 @@ editor.init = function () {
         reader.readAsText(this.files[0]);
       }
     });
-    $('#tool_open').show().prepend(open);
+    $('#tool_open').show();
+    $(window).on('openImage', () => open.click());
 
     const imgImport = $('<input type="file">').change(importImage);
-    $('#tool_import').show().prepend(imgImport);
+    $('#tool_import').show();
+    $(window).on('importImage', () => imgImport.click());
   }
 
   updateCanvas(true);