zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-21 08:06:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

tabs simplification

Browse source
This commit is contained in:
zadam 2019-05-12 10:11:41 +02:00
parent 2dec8f1ad6
commit b9edd0ecc7
2 changed files with 12 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/public/javascripts/services/tab_row.js
View file

@ -9,7 +9,6 @@
const Draggabilly = window.Draggabilly; const Draggabilly = window.Draggabilly;
const TAB_CONTENT_MARGIN = 0;
const TAB_CONTENT_OVERLAP_DISTANCE = 1; const TAB_CONTENT_OVERLAP_DISTANCE = 1;
const TAB_CONTENT_MIN_WIDTH = 24; const TAB_CONTENT_MIN_WIDTH = 24;
@ -40,8 +39,7 @@ const tabTemplate = `
<div class="note-tab-drag-handle"></div> <div class="note-tab-drag-handle"></div>
<div class="note-tab-close"><span>×</span></div> <div class="note-tab-close"><span>×</span></div>
</div> </div>
</div> </div>`;
`;
const defaultTapProperties = { const defaultTapProperties = {
title: 'New tab' title: 'New tab'
@ -62,7 +60,6 @@ class TabRow {
this.el.setAttribute('data-note-tab-row-instance-id', this.instanceId); this.el.setAttribute('data-note-tab-row-instance-id', this.instanceId);
instanceId += 1; instanceId += 1;
this.setupCustomProperties();
this.setupStyleEl(); this.setupStyleEl();
this.setupEvents(); this.setupEvents();
this.layoutTabs(); this.layoutTabs();
@ -81,10 +78,6 @@ class TabRow {
} }
} }
setupCustomProperties() {
this.el.style.setProperty('--tab-content-margin', `${ TAB_CONTENT_MARGIN }px`);
}
setupStyleEl() { setupStyleEl() {
this.styleEl = document.createElement('style'); this.styleEl = document.createElement('style');
this.el.appendChild(this.styleEl); this.el.appendChild(this.styleEl);
@ -115,10 +108,10 @@ class TabRow {
const numberOfTabs = this.tabEls.length; const numberOfTabs = this.tabEls.length;
const tabsContentWidth = this.tabContentEl.clientWidth; const tabsContentWidth = this.tabContentEl.clientWidth;
const tabsCumulativeOverlappedWidth = (numberOfTabs - 1) * TAB_CONTENT_OVERLAP_DISTANCE; const tabsCumulativeOverlappedWidth = (numberOfTabs - 1) * TAB_CONTENT_OVERLAP_DISTANCE;
const targetWidth = (tabsContentWidth - (2 * TAB_CONTENT_MARGIN) + tabsCumulativeOverlappedWidth) / numberOfTabs; const targetWidth = (tabsContentWidth + tabsCumulativeOverlappedWidth) / numberOfTabs;
const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth)); const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
const flooredClampedTargetWidth = Math.floor(clampedTargetWidth); const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
const totalTabsWidthUsingTarget = (flooredClampedTargetWidth * numberOfTabs) + (2 * TAB_CONTENT_MARGIN) - tabsCumulativeOverlappedWidth; const totalTabsWidthUsingTarget = (flooredClampedTargetWidth * numberOfTabs) - tabsCumulativeOverlappedWidth;
const totalExtraWidthDueToFlooring = tabsContentWidth - totalTabsWidthUsingTarget; const totalExtraWidthDueToFlooring = tabsContentWidth - totalTabsWidthUsingTarget;
const widths = []; const widths = [];
@ -129,14 +122,14 @@ class TabRow {
if (extraWidthRemaining > 0) extraWidthRemaining -= 1; if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
} }
return widths return widths;
} }
get tabContentPositions() { get tabContentPositions() {
const positions = []; const positions = [];
const tabContentWidths = this.tabContentWidths; const tabContentWidths = this.tabContentWidths;
let position = TAB_CONTENT_MARGIN; let position = 0;
tabContentWidths.forEach((width, i) => { tabContentWidths.forEach((width, i) => {
const offset = i * TAB_CONTENT_OVERLAP_DISTANCE; const offset = i * TAB_CONTENT_OVERLAP_DISTANCE;
positions.push(position - offset); positions.push(position - offset);
@ -150,7 +143,7 @@ class TabRow {
const positions = []; const positions = [];
this.tabContentPositions.forEach((contentPosition) => { this.tabContentPositions.forEach((contentPosition) => {
positions.push(contentPosition - TAB_CONTENT_MARGIN); positions.push(contentPosition);
}); });
return positions; return positions;
@ -160,17 +153,16 @@ class TabRow {
const tabContentWidths = this.tabContentWidths; const tabContentWidths = this.tabContentWidths;
this.tabEls.forEach((tabEl, i) => { this.tabEls.forEach((tabEl, i) => {
const contentWidth = tabContentWidths[i]; const width = tabContentWidths[i];
const width = contentWidth + (2 * TAB_CONTENT_MARGIN);
tabEl.style.width = width + 'px'; tabEl.style.width = width + 'px';
tabEl.removeAttribute('is-small'); tabEl.removeAttribute('is-small');
tabEl.removeAttribute('is-smaller'); tabEl.removeAttribute('is-smaller');
tabEl.removeAttribute('is-mini'); tabEl.removeAttribute('is-mini');
if (contentWidth < TAB_SIZE_SMALL) tabEl.setAttribute('is-small', ''); if (width < TAB_SIZE_SMALL) tabEl.setAttribute('is-small', '');
if (contentWidth < TAB_SIZE_SMALLER) tabEl.setAttribute('is-smaller', ''); if (width < TAB_SIZE_SMALLER) tabEl.setAttribute('is-smaller', '');
if (contentWidth < TAB_SIZE_MINI) tabEl.setAttribute('is-mini', ''); if (width < TAB_SIZE_MINI) tabEl.setAttribute('is-mini', '');
}); });
let styleHTML = ''; let styleHTML = '';

4
src/public/stylesheets/desktop.css
View file

@ -218,8 +218,8 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
display: flex; display: flex;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: var(--tab-content-margin); left: 0;
right: var(--tab-content-margin); right: 0;
padding: 5px 8px; padding: 5px 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;