Replaced the Delete button by code snippet tools (#167)

* Replaced the Delete button with a dropdown menu with additonal options

* Restore position on the code list after import

* Changes to the toast messages

* Adjusted minimum editor width to fix the new button

* Hide Editor when app is running and prevent save editor code file to the recent menu

* Fixed resize behavior when code editor is hidden

* Fixed messages

* Fixed resize behavior on edge case of closing app on narrow window

* Added option to copy (save as) the code snipped

* Simplified code

src/app/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../fonts/fontello.eot?68595656');
-  src: url('../fonts/fontello.eot?68595656#iefix') format('embedded-opentype'),
-       url('../fonts/fontello.woff2?68595656') format('woff2'),
-       url('../fonts/fontello.woff?68595656') format('woff'),
-       url('../fonts/fontello.ttf?68595656') format('truetype'),
-       url('../fonts/fontello.svg?68595656#fontello') format('svg');
+  src: url('../fonts/fontello.eot?38105295');
+  src: url('../fonts/fontello.eot?38105295#iefix') format('embedded-opentype'),
+       url('../fonts/fontello.woff2?38105295') format('woff2'),
+       url('../fonts/fontello.woff?38105295') format('woff'),
+       url('../fonts/fontello.ttf?38105295') format('truetype'),
+       url('../fonts/fontello.svg?38105295#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -50,8 +50,21 @@
 .icon-keyboard:before { content: '\e809'; } /* '' */
 .icon-sound-on:before { content: '\e80a'; } /* '' */
 .icon-sound-off:before { content: '\e80b'; } /* '' */
+.icon-sun:before { content: '\e80c'; } /* '' */
+.icon-moon:before { content: '\e80d'; } /* '' */
+.icon-menu-outline:before { content: '\e80e'; } /* '' */
+.icon-wrench:before { content: '\e80f'; } /* '' */
+.icon-edit:before { content: '\e810'; } /* '' */
+.icon-edit-1:before { content: '\e811'; } /* '' */
+.icon-export:before { content: '\e812'; } /* '' */
+.icon-export-1:before { content: '\e813'; } /* '' */
+.icon-import:before { content: '\e814'; } /* '' */
+.icon-export-2:before { content: '\e815'; } /* '' */
 .icon-slack:before { content: '\e900'; } /* '' */
+.icon-download:before { content: '\f02e'; } /* '' */
+.icon-upload:before { content: '\f02f'; } /* '' */
 .icon-github:before { content: '\f09b'; } /* '' */
+.icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-donate:before { content: '\f0f4'; } /* '' */
 .icon-gamepad:before { content: '\f11b'; } /* '' */
 .icon-eraser:before { content: '\f12d'; } /* '' */

src/app/editor.ejs

@@ -42,9 +42,17 @@
             <select id="code-selector">
               <option value="0">&lt;&lt; New Code &gt;&gt;</option>
             </select>
-            <button title="Delete the Code" class="delete" style="visibility: hidden;">
-              <i class="icon-trash"></i>
-              <span>DELETE</span>
+            <button title="Code Tools" class="more-options" id="more-options">
+              <i class="icon-wrench"></i>
+              <div class="dropdown" id="more-options-dropdown">
+                <ul>
+                  <li><a href="#" id="rename-option"><i class="icon-edit"></i> Rename</a></li>
+                  <li><a href="#" id="saveas-option"><i class="icon-save"></i> Save as</a></li>
+                  <li><a href="#" id="delete-option"><i class="icon-trash"></i> Delete</a></li>
+                  <li><a href="#" id="export-option"><i class="icon-upload"></i> Export</a></li>
+                  <li><a href="#" id="import-option"><i class="icon-download"></i> Import</a></li>
+                </ul>
+              </div>
             </button>
           </h4>
         </div>
@@ -100,6 +108,7 @@
         <input type="text" name="codeName" class="modal_dialog_input" />
         <button value="ok">OK</button>
         <button value="cancel" class="modal_dialog_cancel">Cancel</button>
+        <input type="hidden" id="actionType" value="save" />
       </form>
     </dialog>
     <dialog id="delete-dialog" class="modal_dialog" closed>