mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
update tab title upon its change
This commit is contained in:
parent
0e13678f7c
commit
9f38ea6ee7
@ -70,7 +70,7 @@ export class LoadResults {
|
|||||||
return Object.keys(this.noteIdToSourceId);
|
return Object.keys(this.noteIdToSourceId);
|
||||||
}
|
}
|
||||||
|
|
||||||
isNoteReloaded(noteId, sourceId) {
|
isNoteReloaded(noteId, sourceId = null) {
|
||||||
if (!noteId) {
|
if (!noteId) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -14,8 +14,8 @@ import keyboardActionService from "../services/keyboard_actions.js";
|
|||||||
|
|
||||||
const Draggabilly = window.Draggabilly;
|
const Draggabilly = window.Draggabilly;
|
||||||
|
|
||||||
const TAB_CONTENT_MIN_WIDTH = 24;
|
const TAB_CONTAINER_MIN_WIDTH = 24;
|
||||||
const TAB_CONTENT_MAX_WIDTH = 240;
|
const TAB_CONTAINER_MAX_WIDTH = 240;
|
||||||
const NEW_TAB_WIDTH = 32;
|
const NEW_TAB_WIDTH = 32;
|
||||||
const MIN_FILLER_WIDTH = 50;
|
const MIN_FILLER_WIDTH = 50;
|
||||||
|
|
||||||
@ -55,7 +55,7 @@ const TAB_ROW_TPL = `
|
|||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
.note-tab-row .note-tab-row-content {
|
.note-tab-row .note-tab-row-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -230,7 +230,7 @@ const TAB_ROW_TPL = `
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="note-tab-row-content"></div>
|
<div class="note-tab-row-container"></div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
export default class TabRowWidget extends BasicWidget {
|
export default class TabRowWidget extends BasicWidget {
|
||||||
@ -304,24 +304,24 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
return Array.prototype.slice.call(this.$widget.find('.note-tab'));
|
return Array.prototype.slice.call(this.$widget.find('.note-tab'));
|
||||||
}
|
}
|
||||||
|
|
||||||
get $tabContent() {
|
get $tabContainer() {
|
||||||
return this.$widget.find('.note-tab-row-content');
|
return this.$widget.find('.note-tab-row-container');
|
||||||
}
|
}
|
||||||
|
|
||||||
get tabContentWidths() {
|
get tabWidths() {
|
||||||
const numberOfTabs = this.tabEls.length;
|
const numberOfTabs = this.tabEls.length;
|
||||||
const tabsContentWidth = this.$tabContent[0].clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH;
|
const tabsContainerWidth = this.$tabContainer[0].clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH;
|
||||||
const targetWidth = tabsContentWidth / numberOfTabs;
|
const targetWidth = tabsContainerWidth / numberOfTabs;
|
||||||
const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
|
const clampedTargetWidth = Math.max(TAB_CONTAINER_MIN_WIDTH, Math.min(TAB_CONTAINER_MAX_WIDTH, targetWidth));
|
||||||
const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
|
const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
|
||||||
const totalTabsWidthUsingTarget = flooredClampedTargetWidth * numberOfTabs;
|
const totalTabsWidthUsingTarget = flooredClampedTargetWidth * numberOfTabs;
|
||||||
const totalExtraWidthDueToFlooring = tabsContentWidth - totalTabsWidthUsingTarget;
|
const totalExtraWidthDueToFlooring = tabsContainerWidth - totalTabsWidthUsingTarget;
|
||||||
|
|
||||||
const widths = [];
|
const widths = [];
|
||||||
let extraWidthRemaining = totalExtraWidthDueToFlooring;
|
let extraWidthRemaining = totalExtraWidthDueToFlooring;
|
||||||
|
|
||||||
for (let i = 0; i < numberOfTabs; i += 1) {
|
for (let i = 0; i < numberOfTabs; i += 1) {
|
||||||
const extraWidth = flooredClampedTargetWidth < TAB_CONTENT_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0;
|
const extraWidth = flooredClampedTargetWidth < TAB_CONTAINER_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0;
|
||||||
widths.push(flooredClampedTargetWidth + extraWidth);
|
widths.push(flooredClampedTargetWidth + extraWidth);
|
||||||
if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
|
if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
|
||||||
}
|
}
|
||||||
@ -335,10 +335,9 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
|
|
||||||
getTabPositions() {
|
getTabPositions() {
|
||||||
const tabPositions = [];
|
const tabPositions = [];
|
||||||
const tabContentWidths = this.tabContentWidths;
|
|
||||||
|
|
||||||
let position = 0;
|
let position = 0;
|
||||||
tabContentWidths.forEach(width => {
|
this.tabWidths.forEach(width => {
|
||||||
tabPositions.push(position);
|
tabPositions.push(position);
|
||||||
position += width;
|
position += width;
|
||||||
});
|
});
|
||||||
@ -350,10 +349,10 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
layoutTabs() {
|
layoutTabs() {
|
||||||
const tabContentWidths = this.tabContentWidths;
|
const tabContainerWidths = this.tabWidths;
|
||||||
|
|
||||||
this.tabEls.forEach((tabEl, i) => {
|
this.tabEls.forEach((tabEl, i) => {
|
||||||
const width = tabContentWidths[i];
|
const width = tabContainerWidths[i];
|
||||||
|
|
||||||
tabEl.style.width = width + 'px';
|
tabEl.style.width = width + 'px';
|
||||||
tabEl.removeAttribute('is-small');
|
tabEl.removeAttribute('is-small');
|
||||||
@ -529,7 +528,7 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
const draggabilly = new Draggabilly(tabEl, {
|
const draggabilly = new Draggabilly(tabEl, {
|
||||||
axis: 'x',
|
axis: 'x',
|
||||||
handle: '.note-tab-drag-handle',
|
handle: '.note-tab-drag-handle',
|
||||||
containment: this.$tabContent[0]
|
containment: this.$tabContainer[0]
|
||||||
});
|
});
|
||||||
|
|
||||||
this.draggabillies.push(draggabilly);
|
this.draggabillies.push(draggabilly);
|
||||||
@ -602,7 +601,7 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
setupNewButton() {
|
setupNewButton() {
|
||||||
this.$newTab = $(NEW_TAB_BUTTON_TPL);
|
this.$newTab = $(NEW_TAB_BUTTON_TPL);
|
||||||
|
|
||||||
this.$tabContent.append(this.$newTab);
|
this.$tabContainer.append(this.$newTab);
|
||||||
|
|
||||||
this.$newTab.on('click', _ => this.trigger('newTab'));
|
this.$newTab.on('click', _ => this.trigger('newTab'));
|
||||||
}
|
}
|
||||||
@ -610,7 +609,7 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
setupFiller() {
|
setupFiller() {
|
||||||
this.$filler = $(FILLER_TPL);
|
this.$filler = $(FILLER_TPL);
|
||||||
|
|
||||||
this.$tabContent.append(this.$filler);
|
this.$tabContainer.append(this.$filler);
|
||||||
}
|
}
|
||||||
|
|
||||||
closest(value, array) {
|
closest(value, array) {
|
||||||
@ -632,6 +631,10 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
|
|
||||||
const {note} = this.appContext.getTabContextById(tabId);
|
const {note} = this.appContext.getTabContextById(tabId);
|
||||||
|
|
||||||
|
this.updateTab($tab, note);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTab($tab, note) {
|
||||||
if (!note || !$tab.length) {
|
if (!note || !$tab.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -649,6 +652,16 @@ export default class TabRowWidget extends BasicWidget {
|
|||||||
$tab.addClass(utils.getMimeTypeClass(note.mime));
|
$tab.addClass(utils.getMimeTypeClass(note.mime));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async entitiesReloadedListener({loadResults}) {
|
||||||
|
for (const tabContext of this.appContext.getTabContexts()) {
|
||||||
|
if (loadResults.isNoteReloaded(tabContext.noteId)) {
|
||||||
|
const $tab = this.getTabById(tabContext.tabId);
|
||||||
|
|
||||||
|
this.updateTab($tab, tabContext.note);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
protectedSessionStartedListener() {
|
protectedSessionStartedListener() {
|
||||||
// FIXME
|
// FIXME
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user