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

View File

@ -5,6 +5,14 @@ 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: 20em;
}
@ -59,10 +67,9 @@ const TPL = `
}
</style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
Actions
<span class="caret"></span>
</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-cog"></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>
<div class="dropdown-item protect-button">

View File

@ -24,7 +24,7 @@ const TPL = `
}
</style>
<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>
</button>
<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">
<style>
.quick-search {
padding: 4px 10px 10px;
}
.quick-search .dropdown-menu {

View File

@ -8,29 +8,25 @@ const TPL = `
<div class="sync-status-widget">
<style>
.sync-status-widget {
height: 35px;
box-sizing: border-box;
}
.sync-status {
height: 34px;
box-sizing: border-box;
}
.sync-status .sync-status-icon {
height: 34px;
font-size: 180%;
font-size: 150%;
display: inline-block;
padding: 10px;
position: relative;
padding-left: 10px;
padding-right: 10px;
}
.sync-status .sync-status-sub-icon {
font-size: 40%;
position: absolute;
left: 7px;
top: 20px;
left: 9px;
top: 24px;
}
.sync-status .sync-status-icon span {
@ -44,37 +40,31 @@ const TPL = `
</style>
<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"
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 class="sync-status-icon sync-status-connected-with-changes"
<span class="sync-status-icon sync-status-connected-with-changes bx-wifi"
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>">
<span class="bx bx-wifi"></span>
<span class="bx bxs-star sync-status-sub-icon"></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"
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 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"
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>
<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"
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 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"
title="Sync with the server is in progress.">
<span class="bx bx-analyse bx-spin"></span>
</span>
</div>
</div>

View File

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