buttons on the left improvements

This commit is contained in:
zadam 2021-05-18 22:49:47 +02:00
parent 845f5d15c4
commit 8c1c9b00e2
6 changed files with 28 additions and 38 deletions

View File

@ -5,24 +5,18 @@ const TPL = `
<div class="global-menu-wrapper"> <div class="global-menu-wrapper">
<style> <style>
.global-menu-wrapper { .global-menu-wrapper {
height: 35px;
box-sizing: border-box; box-sizing: border-box;
} }
.global-menu { .global-menu {
height: 34px;
box-sizing: border-box; box-sizing: border-box;
} }
.global-menu button { .global-menu button {
height: 34px; padding: 10px;
border: none;
font-size: 150%; font-size: 150%;
padding-left: 10px; border: none;
padding-right: 10px; border-radius: 0 !important;
position: relative;
top: -2px;
border-radius: 0;
} }
.global-menu button:hover { .global-menu button:hover {
@ -35,9 +29,7 @@ const TPL = `
</style> </style>
<div class="dropdown global-menu"> <div class="dropdown global-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm" title="Menu"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm bx bx-menu" title="Menu"></button>
<span class="bx bx-menu"></span>
</button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item options-button" data-trigger-command="showOptions"> <a class="dropdown-item options-button" data-trigger-command="showOptions">
<span class="bx bx-slider"></span> <span class="bx bx-slider"></span>

View File

@ -5,6 +5,14 @@ import utils from "../services/utils.js";
const TPL = ` const TPL = `
<div class="dropdown note-actions"> <div class="dropdown note-actions">
<style> <style>
.note-actions-button {
font-size: 120% !important;
}
.note-actions-button::after {
display: none !important; // disabling the standard caret
}
.note-actions .dropdown-menu { .note-actions .dropdown-menu {
width: 20em; width: 20em;
} }
@ -59,10 +67,9 @@ const TPL = `
} }
</style> </style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle"> <button type="button" data-toggle="dropdown" aria-haspopup="true"
Actions aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-cog"></button>
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right"> <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="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
<div class="dropdown-item protect-button"> <div class="dropdown-item protect-button">

View File

@ -24,7 +24,7 @@ const TPL = `
} }
</style> </style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
Type: <span class="note-type-desc"></span> <span class="note-type-desc"></span>
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div> <div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>

View File

@ -10,6 +10,7 @@ const TPL = `
<div class="quick-search input-group input-group-sm"> <div class="quick-search input-group input-group-sm">
<style> <style>
.quick-search { .quick-search {
padding: 4px 10px 10px;
} }
.quick-search .dropdown-menu { .quick-search .dropdown-menu {

View File

@ -8,29 +8,25 @@ const TPL = `
<div class="sync-status-widget"> <div class="sync-status-widget">
<style> <style>
.sync-status-widget { .sync-status-widget {
height: 35px;
box-sizing: border-box; box-sizing: border-box;
} }
.sync-status { .sync-status {
height: 34px;
box-sizing: border-box; box-sizing: border-box;
} }
.sync-status .sync-status-icon { .sync-status .sync-status-icon {
height: 34px; font-size: 150%;
font-size: 180%;
display: inline-block; display: inline-block;
padding: 10px;
position: relative; position: relative;
padding-left: 10px;
padding-right: 10px;
} }
.sync-status .sync-status-sub-icon { .sync-status .sync-status-sub-icon {
font-size: 40%; font-size: 40%;
position: absolute; position: absolute;
left: 7px; left: 9px;
top: 20px; top: 24px;
} }
.sync-status .sync-status-icon span { .sync-status .sync-status-icon span {
@ -44,37 +40,31 @@ const TPL = `
</style> </style>
<div class="sync-status"> <div class="sync-status">
<span class="sync-status-icon sync-status-unknown" <span class="sync-status-icon sync-status-unknown bx bx-time"
data-toggle="tooltip" data-toggle="tooltip"
title="<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>"> title="<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>">
<span class="bx bx-time"></span>
</span> </span>
<span class="sync-status-icon sync-status-connected-with-changes" <span class="sync-status-icon sync-status-connected-with-changes bx-wifi"
data-toggle="tooltip" data-toggle="tooltip"
title="<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>"> title="<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
<span class="bx bx-wifi"></span>
<span class="bx bxs-star sync-status-sub-icon"></span> <span class="bx bxs-star sync-status-sub-icon"></span>
</span> </span>
<span class="sync-status-icon sync-status-connected-no-changes" <span class="sync-status-icon sync-status-connected-no-changes bx bx-wifi"
data-toggle="tooltip" data-toggle="tooltip"
title="<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>"> title="<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>">
<span class="bx bx-wifi"></span>
</span> </span>
<span class="sync-status-icon sync-status-disconnected-with-changes" <span class="sync-status-icon sync-status-disconnected-with-changes bx bx-wifi-off"
data-toggle="tooltip" data-toggle="tooltip"
title="<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>"> title="<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
<span class="bx bx-wifi-off"></span>
<span class="bx bxs-star sync-status-sub-icon"></span> <span class="bx bxs-star sync-status-sub-icon"></span>
</span> </span>
<span class="sync-status-icon sync-status-disconnected-no-changes" <span class="sync-status-icon sync-status-disconnected-no-changes bx bx-wifi-off"
data-toggle="tooltip" data-toggle="tooltip"
title="<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>"> title="<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>">
<span class="bx bx-wifi-off"></span>
</span> </span>
<span class="sync-status-icon sync-status-in-progress" <span class="sync-status-icon sync-status-in-progress bx bx-analyse bx-spin"
data-toggle="tooltip" data-toggle="tooltip"
title="Sync with the server is in progress."> title="Sync with the server is in progress.">
<span class="bx bx-analyse bx-spin"></span>
</span> </span>
</div> </div>
</div> </div>

View File

@ -930,7 +930,7 @@ ul.fancytree-container li {
} }
.button-widget .bx { .button-widget .bx {
font-size: 180%; font-size: 150%;
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: 10px; padding: 10px;