make plugins easier to edit when in dev mode

blurymind · Aug 13, 2024 · 86f8033 · 86f8033
1 parent af7a8c0
commit 86f8033
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src/index.html b/src/index.html
@@ -16,14 +16,14 @@
   <div id="app">
 
     <!-- search form -->
-    <div class="app-search">
+    <div class="app-search" id="appSearchTray">
       <form class="menu" autocomplete="off" onkeypress="return event.keyCode != 13;">
         <span class="app-search-field">
           <input id="nodeSearchInput" type="search" class="search-field" placeholder="Search" autocomplete="off" oninput="app.ui.openNodeListMenu('open')" onmouseenter="app.ui.openNodeListMenu('open')">
           <button id="nodeSearchClear" data-bind="click: app.clearSearch">×</button> 
         </span>
 
-        <span>
+        <span id="appSearchOptions">
           <!-- <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> -->
 
           <span class="search-title styled-checkbox">
@@ -176,7 +176,7 @@
     </div> <!-- app-menu -->
 
     <!-- app-opened-documents -->
-    <div class="file-tabs">
+    <div class="file-tabs" id="fileTabsTray">
       <span style="border-radius: 2px; padding: 0 5px;margin-right: 5px" class="bbcode-button" data-bind="click:app.data.trySaveCurrent, text:`${data.isDocumentDirty() ? '💾':'✅'}`"></span>
       <button class="bbcode-button" data-bind="click: function(){
         app.settings.fileTabsVisible(!app.settings.fileTabsVisible())
@@ -424,7 +424,7 @@
     <!-- /ko -->
 
     <!-- app info -->
-    <div class="app-info">
+    <div class="app-info" id="appInfoPanel">
       <span class="app-title" data-bind="text:`${app.settings.documentType()} syntax`"></span>
       <span class="app-version" data-bind="text:app.version"></span>
       <span class="file-name" data-bind="text:

diff --git a/src/public/plugins/index.js b/src/public/plugins/index.js
@@ -120,14 +120,16 @@ export var Plugins = function (app) {
       onPointerDown,
       onDoubleClick,
       id,
+      as ='span',
+      style = ''
     }
   ) => {
     if (document.getElementById(id) !== null) return;
 
-    const button = document.createElement('span');
+    const button = document.createElement(as);
     button.id = id || name || title || iconName;
     button.innerHTML = `
-      <span class="item ${className || ''}" title="${title || ''}" ${onClick ? `onclick="click: app.plugins.${pluginName}.${onClick}"` : ''
+      <span class="item ${className || ''}" style="${style}" title="${title || ''}" ${onClick ? `onclick="click: app.plugins.${pluginName}.${onClick}"` : ''
       }
        ${onPointerDown
         ? ` onpointerdown="app.plugins.${pluginName}.${onPointerDown}"`
@@ -139,7 +141,6 @@ export var Plugins = function (app) {
       }
        >
         <svg class="icon menu-icon icon-file-${iconName} icon-lg icon-fw" style="color:currentColor;"><use xlink:href="public/icons.svg#icon-${iconName}"></use></svg>
-        <span class="hide-when-narrow">&nbsp;</span>
         ${name || ''}
       </span>
     `;

diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js
@@ -175,6 +175,8 @@ export var PluginEditor = function ({
     // edit/commit/test
     document.getElementById('js-editor').style.display =
       mode === 'edit' ? 'block' : 'none';
+    document.getElementById('add-remove-plugin-file').style.display = 
+      mode === 'edit' ? 'flex' : 'none';
     document.getElementById('diff-editor').style.display =
       mode === 'commit' ? 'block' : 'none';
     document.getElementById('plugin-differ-commit').style.display =
@@ -284,7 +286,7 @@ export var PluginEditor = function ({
           key => `<option value="${key}">${key}</option>`
         )}
             </select>
-            <div class="button-group-rounded">
+            <div class="button-group-rounded" id="add-remove-plugin-file">
               <button id="add-plugin-file" onclick="app.plugins.${self.name
         }.onAddNewFile()">+Add</button>
               <button id="remove-plugin-file" onclick="app.plugins.${self.name
@@ -442,10 +444,16 @@ export var PluginEditor = function ({
 
     // create a button in the file menu if in dev mode
     createButton(self.name, {
-      name: 'Edit plugins',
-      attachTo: 'fileMenuDropdown',
+      name: 'Plugins',
+      attachTo: app.settings.developmentModeEnabled() ? 'appHeader': 'fileMenuDropdown',
       onClick: 'onOpenPluginEditor()',
       iconName: 'cog',
+      ...(app.settings.developmentModeEnabled() ? {
+        className: 'bbcode-button',
+        style: 'width: 100px; margin-top: 3px',
+        as: 'div',
+        id: 'pluginEditorButton'
+      } : {})
     });
   });
 };