styling changes of buttons

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "trilium",
       "version": "0.57.3",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",

src/public/app/components/component.js

@@ -13,7 +13,7 @@ import utils from '../services/utils.js';
  */
 export default class Component {
     constructor() {
-        this.componentId = `comp-` + this.sanitizedClassName + '-' + utils.randomString(8);
+        this.componentId = this.sanitizedClassName + '-' + utils.randomString(8);
         /** @type Component[] */
         this.children = [];
         this.initialized = null;

src/public/app/layouts/desktop_layout.js

@@ -143,13 +143,13 @@ export default class DesktopLayout {
                                             .ribbon(new NoteMapRibbonWidget())
                                             .ribbon(new SimilarNotesWidget())
                                             .ribbon(new NoteInfoWidget())
-                                            .button(new EditButton())
                                             .button(new NoteRevisionsButton())
                                             .button(new NoteActionsWidget())
                                     )
                                     .child(new SharedInfoWidget())
                                     .child(new NoteUpdateStatusWidget())
                                     .child(new FloatingButtons()
+                                        .child(new EditButton())
                                         .child(new RelationMapButtons())
                                         .child(new MermaidExportButton())
                                         .child(new BacklinksWidget())

src/public/app/widgets/basic_widget.js

@@ -72,6 +72,7 @@ class BasicWidget extends Component {
     render() {
         this.doRender();
 
+        this.$widget.attr('data-component-id', this.componentId);
         this.$widget.addClass('component')
             .prop('component', this);
 

src/public/app/widgets/bookmark_buttons.js

@@ -24,6 +24,8 @@ export default class BookmarkButtons extends FlexContainer {
                 ? new BookmarkFolderWidget(note)
                 : new OpenNoteButtonWidget().targetNote(note.noteId);
 
+            buttonWidget.class("launcher-button");
+
             this.child(buttonWidget);
 
             this.$widget.append(buttonWidget.render());

src/public/app/widgets/buttons/abstract_button.js

@@ -1,8 +1,8 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
-const TPL = `<span class="button-widget icon-action bx"
+const TPL = `<button class="button-widget no-print" data-toggle="tooltip">
-      data-toggle="tooltip"
+    <span class="bx"></span>
-      title=""></span>`;
+</button>`;
 
 export default class AbstractButtonWidget extends NoteContextAwareWidget {
     isEnabled() {
@@ -22,6 +22,7 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.$iconSpan = this.$widget.find("span");
 
         if (this.settings.onContextMenu) {
             this.$widget.on("contextmenu", e => {
@@ -49,9 +50,9 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
     }
 
     refreshIcon() {
-        for (const className of this.$widget[0].classList) {
+        for (const className of this.$iconSpan[0].classList) {
             if (className.startsWith("bx-")) {
-                this.$widget.removeClass(className);
+                this.$iconSpan.removeClass(className);
             }
         }
 
@@ -59,7 +60,7 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
             ? this.settings.icon()
             : this.settings.icon;
 
-        this.$widget.addClass(icon);
+        this.$iconSpan.addClass(icon);
     }
 
     initialRenderCompleteEvent() {
@@ -87,4 +88,4 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
     onContextMenu(handler) {
         this.settings.onContextMenu = handler;
     }
-}
+}

src/public/app/widgets/buttons/create_pane_button.js

@@ -7,6 +7,7 @@ export default class CreatePaneButton extends OnClickButtonWidget {
         this.icon("bx-dock-right")
             .title("Create new split")
             .titlePlacement("bottom")
-            .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() }));
+            .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() }))
+            .class("icon-action");
     }
 }

src/public/app/widgets/buttons/launcher/abstract_launcher.js

@@ -5,6 +5,8 @@ export default class AbstractLauncher extends OnClickButtonWidget {
     constructor(launcherNote) {
         super();
 
+        this.class("launcher-button");
+
         /** @type {NoteShort} */
         this.launcherNote = launcherNote;
 

src/public/app/widgets/buttons/left_pane_toggle.js

@@ -6,6 +6,8 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
     constructor() {
         super();
 
+        this.class("launcher-button");
+
         this.settings.icon = () => options.is('leftPaneVisible')
             ? "bx-chevrons-left"
             : "bx-chevrons-right";

src/public/app/widgets/buttons/note_revisions_button.js

@@ -7,7 +7,8 @@ export default class NoteRevisionsButton extends CommandButtonWidget {
         this.icon('bx-history')
             .title("Note Revisions")
             .command("showNoteRevisions")
-            .titlePlacement("bottom");
+            .titlePlacement("bottom")
+            .class("icon-action");
     }
 
     isEnabled() {

src/public/app/widgets/buttons/protected_session_status.js

@@ -5,6 +5,8 @@ export default class ProtectedSessionStatusWidget extends CommandButtonWidget {
     constructor() {
         super();
 
+        this.class("launcher-button");
+
         this.settings.icon = () => protectedSessionHolder.isProtectedSessionAvailable()
             ? "bx-check-shield"
             : "bx-shield-quarter";

src/public/app/widgets/buttons/right_dropdown_button.js

@@ -11,7 +11,7 @@ const TPL = `
 
     <button type="button" data-toggle="dropdown" data-placement="right"
             aria-haspopup="true" aria-expanded="false" 
-            class="icon-action bx right-dropdown-button"></button>
+            class="bx right-dropdown-button launcher-button"></button>
     
     <div class="dropdown-menu dropdown-menu-right"></div>
 </div>

src/public/app/widgets/containers/launcher.js

@@ -1,4 +1,3 @@
-import OnClickButtonWidget from "../buttons/onclick_button.js";
 import CalendarWidget from "../buttons/calendar.js";
 import SpacerWidget from "../spacer.js";
 import BookmarkButtons from "../bookmark_buttons.js";
@@ -34,11 +33,14 @@ export default class LauncherWidget extends BasicWidget {
         const launcherType = note.getLabelValue("launcherType");
 
         if (launcherType === 'command') {
-            this.innerWidget = this.initCommandWidget(note);
+            this.innerWidget = this.initCommandWidget(note)
+                .class("launcher-button");
         } else if (launcherType === 'note') {
-            this.innerWidget = new NoteLauncher(note);
+            this.innerWidget = new NoteLauncher(note)
+                .class("launcher-button");
         } else if (launcherType === 'script') {
-            this.innerWidget = new ScriptLauncher(note);
+            this.innerWidget = new ScriptLauncher(note)
+                .class("launcher-button");
         } else if (launcherType === 'customWidget') {
             this.innerWidget = await this.initCustomWidget(note);
         } else if (launcherType === 'builtinWidget') {

src/public/app/widgets/containers/ribbon_container.js

@@ -78,10 +78,6 @@ const TPL = `
         margin-right: 5px;
     }
     
-    .ribbon-button-container .icon-action {
-        padding: 5px;
-    }
-    
     .ribbon-button-container > * {
         position: relative;
         top: -3px;

src/public/app/widgets/floating_buttons/floating_buttons.js

@@ -20,9 +20,22 @@ const TPL = `
             margin-left: 10px;
         }
         
-        .floating-buttons .floating-button {
+        .floating-buttons-children > button {
             font-size: 130%;
             padding: 5px 10px 4px 10px;
+            width: 40px;
+            cursor: pointer;
+            color: var(--button-text-color);
+            background: var(--button-background-color);
+            border-radius: var(--button-border-radius);
+            border: 1px solid transparent;
+            display: flex;
+            justify-content: space-around;
+        }
+        
+        .floating-buttons-children > button:hover {
+            text-decoration: none;
+            border-color: var(--button-border-color);
         }
         
         .floating-buttons.temporarily-hidden {

src/public/app/widgets/floating_buttons/mermaid_export_button.js

@@ -2,8 +2,10 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = `
 <button type="button"
-        class="export-mermaid-button floating-button btn bx bx-export no-print"
+        class="export-mermaid-button no-print"
-        title="Export Mermaid diagram as SVG"></button>
+        title="Export Mermaid diagram as SVG">
+        <span class="bx bx-export"></span>
+</button>
 `;
 
 export default class MermaidExportButton extends NoteContextAwareWidget {

src/public/stylesheets/style.css

@@ -109,7 +109,6 @@ button.close:hover {
 
 .icon-action {
     border: 1px solid transparent;
-    padding: 5px;
     width: 35px;
     height: 35px;
     cursor: pointer;
@@ -863,13 +862,14 @@ body {
     margin: 10px;
 }
 
-#launcher-pane .icon-action {
+#launcher-pane .launcher-button {
     font-size: 150%;
     display: inline-block;
     padding: 15px 15px;
     cursor: pointer;
     border: none;
     color: var(--launcher-pane-text-color);
+    background-color: var(--launcher-pane-background-color);
     width: 53px;
     height: 53px;
 }

src/services/app_info.js

@@ -4,7 +4,7 @@ const build = require('./build');
 const packageJson = require('../../package');
 const {TRILIUM_DATA_DIR} = require('./data_dir');
 
-const APP_DB_VERSION = 206;
+const APP_DB_VERSION = 205;
 const SYNC_VERSION = 28;
 const CLIPPER_PROTOCOL_VERSION = "1.0";