mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
frameless design with tabs on top, split for left panel
This commit is contained in:
zadam
parent
613d5f93e8
commit
7c8e7a3f4b
@ -52,6 +52,7 @@ async function createMainWindow() {
|
||||
webPreferences: {
|
||||
nodeIntegration: true
|
||||
},
|
||||
frame: false,
|
||||
icon: path.join(__dirname, 'images/app-icons/png/256x256' + (env.isDev() ? '-dev' : '') + '.png')
|
||||
});
|
||||
|
||||
|
||||
3
libraries/split.min.js
vendored
Normal file
3
libraries/split.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -286,6 +286,11 @@ function registerEntrypoints() {
|
||||
|
||||
searchNotesService.searchInSubtree(node.data.noteId);
|
||||
});
|
||||
|
||||
Split(['#left-pane', '#center-pane'], {
|
||||
sizes: [25, 75],
|
||||
gutterSize: 5
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -14,6 +14,7 @@ const Draggabilly = window.Draggabilly;
|
||||
const TAB_CONTENT_MIN_WIDTH = 24;
|
||||
const TAB_CONTENT_MAX_WIDTH = 240;
|
||||
const NEW_TAB_WIDTH = 32;
|
||||
const MIN_FILLER_WIDTH = 50;
|
||||
|
||||
const TAB_SIZE_SMALL = 84;
|
||||
const TAB_SIZE_SMALLER = 60;
|
||||
@ -29,7 +30,9 @@ const tabTemplate = `
|
||||
</div>`;
|
||||
|
||||
const newTabButtonTemplate = `<div class="note-new-tab" title="Add new tab">+</div>`;
|
||||
const fillerTemplate = `<div class="tab-row-filler"></div>`;
|
||||
const fillerTemplate = `<div class="tab-row-filler">
|
||||
<div class="tab-row-border"></div>
|
||||
</div>`;
|
||||
|
||||
class TabRow {
|
||||
constructor(el) {
|
||||
@ -102,7 +105,7 @@ class TabRow {
|
||||
|
||||
get tabContentWidths() {
|
||||
const numberOfTabs = this.tabEls.length;
|
||||
const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH;
|
||||
const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH;
|
||||
const targetWidth = tabsContentWidth / numberOfTabs;
|
||||
const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
|
||||
const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
|
||||
@ -119,7 +122,7 @@ class TabRow {
|
||||
}
|
||||
|
||||
if (this.fillerEl) {
|
||||
this.fillerEl.style.width = extraWidthRemaining + "px";
|
||||
this.fillerEl.style.width = (extraWidthRemaining + MIN_FILLER_WIDTH) + "px";
|
||||
}
|
||||
|
||||
return widths;
|
||||
|
||||
@ -14,13 +14,31 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
background-color: var(--accented-background-color);
|
||||
}
|
||||
|
||||
.gutter:hover {
|
||||
background-color: var(--main-border-color);
|
||||
}
|
||||
|
||||
.gutter.gutter-horizontal {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.gutter.gutter-vertical {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
#center-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#note-tab-container {
|
||||
min-height: 0;
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
@ -195,6 +213,8 @@ body {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 33px;
|
||||
min-height: 33px;
|
||||
width: 100%;
|
||||
background: var(--main-background-color);
|
||||
border-radius: 5px 5px 0 0;
|
||||
overflow: hidden;
|
||||
@ -240,8 +260,14 @@ body {
|
||||
}
|
||||
|
||||
.tab-row-filler {
|
||||
-webkit-app-region: drag;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.tab-row-filler .tab-row-border {
|
||||
position: relative;
|
||||
background: linear-gradient(to right, var(--main-border-color), transparent);
|
||||
height: 1px;
|
||||
margin-top: 32px;
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
<div class="note-tab-row hide-in-zen-mode">
|
||||
<div class="note-tab-row-content"></div>
|
||||
</div>
|
||||
|
||||
<div id="note-tab-container">
|
||||
<div class="note-tab-content note-tab-content-template">
|
||||
<div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user