frameless design with tabs on top, split for left panel

This commit is contained in:
zadam
2019-12-23 11:52:45 +01:00
parent 613d5f93e8
commit 7c8e7a3f4b
7 changed files with 87 additions and 45 deletions

View File

@@ -11,44 +11,9 @@
<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
<div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) minmax(0, <%= rightPaneWidthPercent %>fr)">
<div id="header" class="hide-in-zen-mode">
<div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
<a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
</div>
<div style="flex-grow: 100; display: flex;">
<button class="btn btn-sm" id="jump-to-note-dialog-button" data-kb-action="JumpToNote">
<span class="bx bx-crosshair"></span>
Jump to note
</button>
<button class="btn btn-sm" id="recent-changes-button" data-kb-action="ShowRecentChanges">
<span class="bx bx-history"></span>
Recent changes
</button>
<button class="btn btn-sm"
id="enter-protected-session-button"
title="Enter protected session to be able to find and view protected notes">
<span class="bx bx-log-in"></span>
Enter protected session
</button>
<button class="btn btn-sm"
id="leave-protected-session-button"
title="Leave protected session so that protected notes are not accessible any more."
style="display: none;">
<span class="bx bx-log-out"></span>
Leave protected session
</button>
</div>
<div id="plugin-buttons">
<div style="display: flex;">
<div class="note-tab-row hide-in-zen-mode">
<div class="note-tab-row-content"></div>
</div>
<div>
@@ -125,6 +90,47 @@
</div>
</div>
<div id="header" class="hide-in-zen-mode">
<div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
<a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
</div>
<div style="flex-grow: 100; display: flex;">
<button class="btn btn-sm" id="jump-to-note-dialog-button" data-kb-action="JumpToNote">
<span class="bx bx-crosshair"></span>
Jump to note
</button>
<button class="btn btn-sm" id="recent-changes-button" data-kb-action="ShowRecentChanges">
<span class="bx bx-history"></span>
Recent changes
</button>
<button class="btn btn-sm"
id="enter-protected-session-button"
title="Enter protected session to be able to find and view protected notes">
<span class="bx bx-log-in"></span>
Enter protected session
</button>
<button class="btn btn-sm"
id="leave-protected-session-button"
title="Leave protected session so that protected notes are not accessible any more."
style="display: none;">
<span class="bx bx-log-out"></span>
Leave protected session
</button>
</div>
<div id="plugin-buttons">
</div>
</div>
<div style="display: flex; height: 100%;">
<div id="left-pane" class="hide-in-zen-mode">
<div id="global-buttons">
@@ -232,6 +238,8 @@
<script src="libraries/dayjs.min.js"></script>
<script src="libraries/split.min.js"></script>
<link href="stylesheets/themes.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/desktop.css" rel="stylesheet">