button tweaks

src/public/app/layouts/desktop_layout.js

@@ -35,6 +35,7 @@ import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
 import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
 import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
 import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js";
+import ShowNoteSourceButton from "../widgets/buttons/show_note_source.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -69,7 +70,7 @@ export default class DesktopLayout {
                 .child(new ProtectedSessionStatusWidget())
                 .child(new SyncStatusWidget())
                 .child(new SidebarToggleWidget())
-                .css("width", "50px")
+                .css("width", "54px")
             )
             .child(new SidePaneContainer('left')
                 .hideInZenMode()
@@ -114,11 +115,9 @@ export default class DesktopLayout {
                                 .button(new ButtonWidget()
                                     .icon('bx bx-history')
                                     .title("Note Revisions")
-                                    .command("showNoteRevisions"))
+                                    .command("showNoteRevisions")
-                                .button(new ButtonWidget() // FIXME should be displayed only when applicable
+                                    .titlePlacement("bottom"))
-                                    .icon('bx bx-code')
+                                .button(new ShowNoteSourceButton())
-                                    .title("Show Note Source")
-                                    .command("showNoteSource"))
                                 .button(new NoteActionsWidget())
                         )
                             .child(new NoteUpdateStatusWidget())

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

@@ -1,12 +1,8 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
-const TPL = `
+const TPL = `<span class="button-widget icon-action bx"
-<span class="button-widget" 
       data-toggle="tooltip"
-      title="">
+      title=""></span>`;
-    <span class="bx"></span>
-</span>
-`;
 
 export default class ButtonWidget extends NoteContextAwareWidget {
     isEnabled() {
@@ -44,11 +40,14 @@ export default class ButtonWidget extends NoteContextAwareWidget {
     }
 
     refreshIcon() {
+        for (const className of this.$widget[0].classList) {
+            if (className.startsWith("bx-")) {
+                this.$widget.removeClass(className);
+            }
+        }
+
         this.$widget
             .attr("title", this.settings.title)
-        this.$widget.find("span.bx")
-            .removeClass()
-            .addClass("bx")
             .addClass(this.settings.icon);
     }
 

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

@@ -2,34 +2,15 @@ import BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
 
 const TPL = `
-<div class="global-menu-wrapper">
+<div class="dropdown global-menu dropright">
     <style>
-    .global-menu-wrapper {
-        box-sizing: border-box;
-    }
-    
-    .global-menu {
-        box-sizing: border-box;
-    }
-    
-    .global-menu button {
-        padding: 15px 15px;
-        font-size: 150%;
-        border: none;
-        border-radius: 0 !important;
-    }
-    
-    .global-menu button:hover {
-        background-color: var(--hover-item-background-color);
-    }
-    
     .global-menu .dropdown-menu {
         width: 20em;
     }
     </style>
 
-    <div class="dropdown global-menu dropright">
+    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="icon-action bx bx-menu" title="Menu"></button>
-        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm bx bx-menu" title="Menu"></button>
+
     <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item options-button" data-trigger-command="showOptions">
             <span class="bx bx-slider"></span>
@@ -95,7 +76,6 @@ const TPL = `
             Logout
         </a>
     </div>
-    </div>
 </div>
 `;
 

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

@@ -4,14 +4,6 @@ import utils from "../../services/utils.js";
 const TPL = `
 <div class="dropdown note-actions">
     <style>    
-    .note-actions-button {
-        font-size: 120% !important;
-    }
-    
-    .note-actions-button::after {
-        display: none !important; // disabling the standard caret
-    }
-    
     .note-actions .dropdown-menu {
         width: 15em;
     }
@@ -24,12 +16,11 @@ const TPL = `
     </style>
 
     <button type="button" data-toggle="dropdown" aria-haspopup="true" 
-        aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-dots-vertical-rounded"></button>
+        aria-expanded="false" class="icon-action bx bx-dots-vertical-rounded"></button>
 
     <div class="dropdown-menu dropdown-menu-right">
         <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
         <a data-trigger-command="findInText" class="dropdown-item">Search in note <kbd data-command="findInText"></a>
-        <a data-trigger-command="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-command="showLinkMap"></kbd> Link map</a>
         <a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"><kbd data-command="openNoteExternally"></kbd> Open note externally</a>
         <a class="dropdown-item import-files-button">Import files</a>
         <a class="dropdown-item export-note-button">Export note</a>

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

@@ -0,0 +1,16 @@
+import ButtonWidget from "./button_widget.js";
+
+export default class ShowNoteSourceButton extends ButtonWidget {
+    isEnabled() {
+        return super.isEnabled() && this.note && ['text', 'relation-map'].includes(this.note.type);
+    }
+
+    constructor() {
+        super();
+
+        this.icon('bx bx-code')
+            .title("Show Note Source")
+            .command("showNoteSource")
+            .titlePlacement("bottom");
+    }
+}

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

@@ -57,15 +57,14 @@ const TPL = `
     .section-button-container {
         display: flex;
         border-bottom: 1px solid var(--main-border-color); 
-        margin-right: 10px;
+        margin-right: 5px;
     }
     
-    .section-button-container .bx {
+    .section-button-container .icon-action {
         padding: 5px;
-        font-size: 150%;
         position: relative;
         top: -3px;
-        margin-right: 5px;
+        margin-left: 10px;
     }
     
     .section-body {

src/public/app/widgets/type_property_widgets/note_info_widget.js

@@ -46,7 +46,7 @@ const TPL = `
 
             <th title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">Note size:</th>
            
-            <td>
+            <td colspan="3">
                 <button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
                     <span class="bx bx-calculator"></span> calculate
                 </button>

src/public/stylesheets/style.css

@@ -24,14 +24,6 @@ code, kbd, pre, samp {
     font-family: var(--font-family-monospace);
 }
 
-button.btn, button.btn-sm {
-    font-size: inherit;
-}
-
-.btn-micro {
-    padding: 0 10px 0 10px;
-}
-
 .input-group-text {
     background-color: var(--accented-background-color) !important;
     color: var(--muted-text-color) !important;
@@ -81,11 +73,6 @@ button.close:hover {
     overflow-x: hidden;
 }
 
-.icon-action:hover:not(.disabled) {
-    text-decoration: none;
-    border-color: var(--button-border-color);
-}
-
 .icon-action {
     border: 1px solid transparent;
     border-radius: 3px;
@@ -93,6 +80,12 @@ button.close:hover {
     cursor: pointer;
     font-size: 1.5em;
     color: var(--main-text-color);
+    background: var(--button-background-color);
+}
+
+.icon-action:hover:not(.disabled) {
+    text-decoration: none;
+    border-color: var(--button-border-color);
 }
 
 .icon-action.disabled {
@@ -237,6 +230,15 @@ div.ui-tooltip {
 
 .btn {
     border-radius: var(--button-border-radius);
+    border-color: var(--button-border-color);
+}
+
+button.btn, button.btn-sm {
+    font-size: inherit;
+}
+
+.btn-micro {
+    padding: 0 10px 0 10px;
 }
 
 .btn.btn-primary {
@@ -260,10 +262,6 @@ div.ui-tooltip {
     color: var(--button-text-color);
 }
 
-.btn:not(.btn-primary):hover {
-    border-color: var(--button-border-color);
-}
-
 .btn.active:not(.btn-primary) {
     background-color: var(--button-disabled-background-color) !important;
     opacity: 0.4;
@@ -885,20 +883,15 @@ ul.fancytree-container li {
     margin: 10px;
 }
 
-.button-widget .bx {
+#launcher-pane .icon-action {
-    font-size: 120%;
-
-}
-
-#launcher-pane .button-widget .bx {
     font-size: 150%;
     display: inline-block;
-    position: relative;
     padding: 15px 15px;
     cursor: pointer;
+    border: none;
 }
 
-.button-widget:hover .bx {
+#launcher-pane .icon-action:hover {
     background-color: var(--hover-item-background-color);
 }