Merge pull request #25 from OptimistikSAS/tool_imagelib

#tool_imagelib image library menu missing in main menu

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -372,7 +372,7 @@ export default {
       let browser = $('#imgbrowse');
       if (!browser.length) {
         $('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>' +
-        '</div></div>').insertAfter('#svg_docprops');
+        '</div></div>').insertAfter('#svg_editor');
         browser = $('#imgbrowse');
 
         const allLibs = imagelibStrings.select_lib;
@@ -386,8 +386,8 @@ export default {
           left: 0,
           width: '100%'
         });
-
-        const cancel = $('<button>' + uiStrings.common.cancel + '</button>')
+        // eslint-disable-next-line max-len
+        $('<button><img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + uiStrings.common.cancel + '</button>')
           .appendTo(browser)
           .on('click touchend', function () {
             $('#imgbrowse_holder').hide();
@@ -398,8 +398,8 @@ export default {
           });
 
         const leftBlock = $('<span>').css({position: 'absolute', top: 5, left: 10}).appendTo(browser);
-
-        const back = $('<button hidden>' + imagelibStrings.show_list + '</button>')
+        // eslint-disable-next-line max-len
+        const back = $('<button hidden><img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + imagelibStrings.show_list + '</button>')
           .appendTo(leftBlock)
           .on('click touchend', function () {
             frame.attr('src', 'about:blank').hide();
@@ -430,9 +430,6 @@ export default {
           'margin-top': 10
         });
 
-        cancel.prepend($.getSvgIcon('cancel', true));
-        back.prepend($.getSvgIcon('tool_imagelib', true));
-
         imagelibStrings.imgLibs.forEach(function ({name, url, description}) {
           $('<li>')
             .appendTo(libOpts)
@@ -452,21 +449,16 @@ export default {
       }
     }
 
-    const buttons = [{
+    const events = {
       id: 'tool_imagelib',
-      type: 'app_menu',
-      icon: 'imagelib.png',
-      position: 4,
-      events: {
-        mouseup: showBrowser
+      click () {
+        showBrowser();
       }
-    }];
+    };
 
     return {
       svgicons: 'ext-imagelib.xml',
-      buttons: imagelibStrings.buttons.map((button, i) => {
-        return Object.assign(buttons[i], button);
-      }),
+      events,
       callback () {
         $('<style>').text(
           '#imgbrowse_holder {' +

src/editor/images/library.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 211">
+ <g>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
+  <path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
+  <path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
+  <path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
+ </g>
+</svg></svg>

src/editor/index.html

@@ -80,6 +80,7 @@
         <se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
         <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
         <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
+        <se-menu-item id="tool_imagelib" label="Image library"  src="./images/library.svg"></se-menu-item>
         <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
         <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg"></se-menu-item>
         <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>