gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

layout changes

Browse Source
This commit is contained in:
zadam 2021-06-13 22:55:31 +02:00
parent e054a1694e
commit fb31acc8e0
30 changed files with 125 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/public/app/layouts/desktop_layout.js
View File

@ -52,6 +52,7 @@ export default class DesktopLayout {
.setParent(appContext) .setParent(appContext)
.child(new FlexContainer("column") .child(new FlexContainer("column")
.id("launcher-pane") .id("launcher-pane")
.css("width", "53px")
.child(new GlobalMenuWidget()) .child(new GlobalMenuWidget())
.child(new ButtonWidget() .child(new ButtonWidget()
.icon("bx-file-blank") .icon("bx-file-blank")
@ -71,12 +72,12 @@ export default class DesktopLayout {
.command("showRecentChanges")) .command("showRecentChanges"))
.child(new SpacerWidget(40, 0)) .child(new SpacerWidget(40, 0))
.child(new FlexContainer("column") .child(new FlexContainer("column")
.id("plugin-buttons")) .id("plugin-buttons")
.contentSized())
.child(new SpacerWidget(0, 1000)) .child(new SpacerWidget(0, 1000))
.child(new ProtectedSessionStatusWidget()) .child(new ProtectedSessionStatusWidget())
.child(new SyncStatusWidget()) .child(new SyncStatusWidget())
.child(new LeftPaneToggleWidget()) .child(new LeftPaneToggleWidget())
.css("width", "54px")
) )
.child(new LeftPaneContainer() .child(new LeftPaneContainer()
.child(new QuickSearchWidget()) .child(new QuickSearchWidget())
@ -93,14 +94,18 @@ export default class DesktopLayout {
) )
.child(new FlexContainer('row') .child(new FlexContainer('row')
.filling() .filling()
.collapsible()
.child(new FlexContainer('column') .child(new FlexContainer('column')
.filling() .filling()
.collapsible()
.id('center-pane') .id('center-pane')
.child(new SplitNoteContainer(() => .child(new SplitNoteContainer(() =>
new FlexContainer('column') new FlexContainer('column')
.css("flex-grow", "1") .css("flex-grow", "1")
.collapsible()
.child(new FlexContainer('row').class('title-row') .child(new FlexContainer('row').class('title-row')
.css('align-items: center;') .css("height", "50px")
.css('align-items', "center")
.cssBlock('.title-row > * { margin: 5px; }') .cssBlock('.title-row > * { margin: 5px; }')
.child(new NoteIconWidget()) .child(new NoteIconWidget())
.child(new NoteTitleWidget()) .child(new NoteTitleWidget())
@ -130,9 +135,10 @@ export default class DesktopLayout {
.titlePlacement("bottom")) .titlePlacement("bottom"))
.button(new NoteActionsWidget()) .button(new NoteActionsWidget())
) )
.child(new NoteUpdateStatusWidget()) .child(new NoteUpdateStatusWidget())
.child( .child(
new ScrollingContainer() new ScrollingContainer()
.filling()
.child(new SqlTableSchemasWidget()) .child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget()) .child(new NoteDetailWidget())
.child(new NoteListWidget()) .child(new NoteListWidget())

17
src/public/app/services/note_list_renderer.js
View File

@ -1,37 +1,36 @@
import linkService from "./link.js"; import linkService from "./link.js";
import noteContentRenderer from "./note_content_renderer.js"; import noteContentRenderer from "./note_content_renderer.js";
import froca from "./froca.js"; import froca from "./froca.js";
import attributeService from "./attributes.js";
import attributeRenderer from "./attribute_renderer.js"; import attributeRenderer from "./attribute_renderer.js";
const TPL = ` const TPL = `
<div class="note-list"> <div class="note-list-widget">
<style> <style>
.note-list { .note-list-widget {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 100%; height: 100%;
} }
.note-list.grid-view .note-list-container { .note-list-widget.grid-view .note-list-widget-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.note-list.grid-view .note-book-card { .note-list-widget.grid-view .note-book-card {
flex-basis: 300px; flex-basis: 300px;
border: 1px solid transparent; border: 1px solid transparent;
} }
.note-list.grid-view .note-expander { .note-list-widget.grid-view .note-expander {
display: none; display: none;
} }
.note-list.grid-view .note-book-card { .note-list-widget.grid-view .note-book-card {
max-height: 300px; max-height: 300px;
} }
.note-list.grid-view .note-book-card:hover { .note-list-widget.grid-view .note-book-card:hover {
cursor: pointer; cursor: pointer;
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
background: var(--more-accented-background-color); background: var(--more-accented-background-color);
@ -199,7 +198,7 @@ class NoteListRenderer {
this.$noteList.show(); this.$noteList.show();
const $container = this.$noteList.find('.note-list-container').empty(); const $container = this.$noteList.find('.note-list-widget-container').empty();
const startIdx = (this.page - 1) * this.pageSize; const startIdx = (this.page - 1) * this.pageSize;
const endIdx = startIdx + this.pageSize; const endIdx = startIdx + this.pageSize;

3
src/public/app/widgets/basic_widget.js
View File

@ -26,7 +26,7 @@ class BasicWidget extends Component {
} }
contentSized() { contentSized() {
console.log("Using contentSized() is deprecated NOOP and it is recommended to remove its use."); this.css("contain", "none");
return this; return this;
} }
@ -39,6 +39,7 @@ class BasicWidget extends Component {
collapsible() { collapsible() {
this.css('min-height', '0'); this.css('min-height', '0');
this.css('min-width', '0');
return this; return this;
} }

9
src/public/app/widgets/buttons/global_menu.js
View File

@ -4,6 +4,11 @@ import utils from "../../services/utils.js";
const TPL = ` const TPL = `
<div class="dropdown global-menu dropright"> <div class="dropdown global-menu dropright">
<style> <style>
.global-menu {
width: 53px;
height: 53px;
}
.global-menu .dropdown-menu { .global-menu .dropdown-menu {
width: 20em; width: 20em;
} }
@ -12,8 +17,8 @@ const TPL = `
background-image: url("images/icon-bw.png"); background-image: url("images/icon-bw.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 45%; background-position: 50% 45%;
width: 53px; width: 100%;
height: 53px; height: 100%;
} }
.global-menu-button:hover { .global-menu-button:hover {

5
src/public/app/widgets/buttons/note_actions.js
View File

@ -4,6 +4,11 @@ import utils from "../../services/utils.js";
const TPL = ` const TPL = `
<div class="dropdown note-actions"> <div class="dropdown note-actions">
<style> <style>
.note-actions {
width: 35px;
height: 35px;
}
.note-actions .dropdown-menu { .note-actions .dropdown-menu {
width: 15em; width: 15em;
} }

1
src/public/app/widgets/collapsible_widget.js
View File

@ -16,6 +16,7 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(WIDGET_TPL); this.$widget = $(WIDGET_TPL);
this.contentSized();
this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId); this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
this.$bodyWrapper = this.$widget.find('.body-wrapper'); this.$bodyWrapper = this.$widget.find('.body-wrapper');

1
src/public/app/widgets/containers/left_pane_container.js
View File

@ -7,6 +7,7 @@ export default class LeftPaneContainer extends FlexContainer {
this.id('left-pane'); this.id('left-pane');
this.css('height', '100%'); this.css('height', '100%');
this.collapsible();
} }
isEnabled() { isEnabled() {

4
src/public/app/widgets/containers/ribbon_container.js
View File

@ -78,6 +78,9 @@ const TPL = `
.ribbon-button-container .icon-action { .ribbon-button-container .icon-action {
padding: 5px; padding: 5px;
}
.ribbon-button-container > * {
position: relative; position: relative;
top: -3px; top: -3px;
margin-left: 10px; margin-left: 10px;
@ -115,6 +118,7 @@ export default class RibbonContainer extends NoteContextAwareWidget {
constructor() { constructor() {
super(); super();
this.contentSized();
this.ribbonWidgets = []; this.ribbonWidgets = [];
this.buttonWidgets = []; this.buttonWidgets = [];
} }

1
src/public/app/widgets/containers/right_pane_container.js
View File

@ -7,6 +7,7 @@ export default class RightPaneContainer extends FlexContainer {
this.id('right-pane'); this.id('right-pane');
this.css('height', '100%'); this.css('height', '100%');
this.collapsible();
} }
isEnabled() { isEnabled() {

2
src/public/app/widgets/containers/scrolling_container.js
View File

@ -4,7 +4,7 @@ export default class ScrollingContainer extends Container {
constructor() { constructor() {
super(); super();
this.css('height: 100%; overflow: auto;'); this.css('overflow', 'auto');
} }
async noteSwitchedEvent({noteContext, notePath}) { async noteSwitchedEvent({noteContext, notePath}) {

3
src/public/app/widgets/containers/split_note_container.js
View File

@ -8,8 +8,9 @@ export default class SplitNoteContainer extends FlexContainer {
this.widgetFactory = widgetFactory; this.widgetFactory = widgetFactory;
this.widgets = {}; this.widgets = {};
this.class('note-split-container-widget'); this.class('split-note-container-widget');
this.css('flex-grow', '1'); this.css('flex-grow', '1');
this.collapsible();
} }
async newNoteContextCreatedEvent({noteContext}) { async newNoteContextCreatedEvent({noteContext}) {

22
src/public/app/widgets/note_icon.js
View File

@ -2,15 +2,17 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
import attributeService from "../services/attributes.js"; import attributeService from "../services/attributes.js";
const TPL = ` const TPL = `
<div class="note-icon-container dropdown"> <div class="note-icon-widget dropdown">
<style> <style>
.note-icon-container { .note-icon-widget {
padding-top: 3px; padding-top: 3px;
padding-left: 7px; padding-left: 7px;
margin-right: 0; margin-right: 0;
width: 50px;
height: 50px;
} }
.note-icon-container button.note-icon { .note-icon-widget button.note-icon {
font-size: 180%; font-size: 180%;
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
@ -19,18 +21,18 @@ const TPL = `
color: var(--main-text-color); color: var(--main-text-color);
} }
.note-icon-container button.note-icon:hover { .note-icon-widget button.note-icon:hover {
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
} }
.note-icon-container .dropdown-menu { .note-icon-widget .dropdown-menu {
border-radius: 10px; border-radius: 10px;
border-width: 2px; border-width: 2px;
box-shadow: 10px 10px 93px -25px black; box-shadow: 10px 10px 93px -25px black;
padding: 10px 15px 10px 15px !important; padding: 10px 15px 10px 15px !important;
} }
.note-icon-container .filter-row { .note-icon-widget .filter-row {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
padding-right: 20px; padding-right: 20px;
@ -38,19 +40,19 @@ const TPL = `
align-items: baseline; align-items: baseline;
} }
.note-icon-container .filter-row span { .note-icon-widget .filter-row span {
display: block; display: block;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
font-weight: bold; font-weight: bold;
} }
.note-icon-container .icon-list { .note-icon-widget .icon-list {
height: 500px; height: 500px;
overflow: auto; overflow: auto;
} }
.note-icon-container .icon-list span { .note-icon-widget .icon-list span {
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
@ -58,7 +60,7 @@ const TPL = `
font-size: 180%; font-size: 180%;
} }
.note-icon-container .icon-list span:hover { .note-icon-widget .icon-list span:hover {
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
} }
</style> </style>

9
src/public/app/widgets/note_title.js
View File

@ -6,20 +6,21 @@ import SpacedUpdate from "../services/spaced_update.js";
import appContext from "../services/app_context.js"; import appContext from "../services/app_context.js";
const TPL = ` const TPL = `
<div class="note-title-container"> <div class="note-title-widget">
<style> <style>
.note-title-container { .note-title-widget {
flex-grow: 1000; flex-grow: 1000;
height: 100%;
} }
.note-title-container input.note-title { .note-title-widget input.note-title {
font-size: 180%; font-size: 180%;
border: 0; border: 0;
min-width: 5em; min-width: 5em;
width: 100%; width: 100%;
} }
.note-title-container input.note-title.protected { .note-title-widget input.note-title.protected {
text-shadow: 4px 4px 4px var(--muted-text-color); text-shadow: 4px 4px 4px var(--muted-text-color);
} }
</style> </style>

2
src/public/app/widgets/note_type.js
View File

@ -15,7 +15,7 @@ const NOTE_TYPES = [
]; ];
const TPL = ` const TPL = `
<div class="dropdown note-type"> <div class="dropdown note-type-widget">
<style> <style>
.note-type-dropdown { .note-type-dropdown {
max-height: 500px; max-height: 500px;

3
src/public/app/widgets/quick_search.js
View File

@ -10,7 +10,8 @@ const TPL = `
<div class="quick-search input-group input-group-sm"> <div class="quick-search input-group input-group-sm">
<style> <style>
.quick-search { .quick-search {
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 0px;
height: 50px;
} }
.quick-search button, .quick-search input { .quick-search button, .quick-search input {

7
src/public/app/widgets/ribbon_widgets/basic_properties.js
View File

@ -21,7 +21,7 @@ const TPL = `
} }
</style> </style>
<div class="note-type-container" style="display: flex"> <div class="note-type-container">
<span>Note type:</span> &nbsp; <span>Note type:</span> &nbsp;
</div> </div>
@ -32,8 +32,8 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
constructor() { constructor() {
super(); super();
this.noteTypeWidget = new NoteTypeWidget(); this.noteTypeWidget = new NoteTypeWidget().contentSized();
this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget(); this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget().contentSized();
this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget); this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget);
} }
@ -52,6 +52,7 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$widget.find(".note-type-container").append(this.noteTypeWidget.render()); this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render()); this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());

2
src/public/app/widgets/ribbon_widgets/book_properties.js
View File

@ -1,5 +1,4 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js";
import server from "../../services/server.js";
import attributeService from "../../services/attributes.js"; import attributeService from "../../services/attributes.js";
const TPL = ` const TPL = `
@ -58,6 +57,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$viewTypeSelect = this.$widget.find('.view-type-select'); this.$viewTypeSelect = this.$widget.find('.view-type-select');
this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val())); this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));

1
src/public/app/widgets/ribbon_widgets/file_properties.js
View File

@ -70,6 +70,7 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$fileNoteId = this.$widget.find(".file-note-id"); this.$fileNoteId = this.$widget.find(".file-note-id");
this.$fileName = this.$widget.find(".file-filename"); this.$fileName = this.$widget.find(".file-filename");
this.$fileType = this.$widget.find(".file-filetype"); this.$fileType = this.$widget.find(".file-filetype");

1
src/public/app/widgets/ribbon_widgets/image_properties.js
View File

@ -52,6 +52,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard"); this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision"); this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input"); this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");

1
src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js
View File

@ -38,6 +38,7 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$container = this.$widget.find('.inherited-attributes-container'); this.$container = this.$widget.find('.inherited-attributes-container');
this.$widget.append(this.attributeDetailWidget.render()); this.$widget.append(this.attributeDetailWidget.render());

3
src/public/app/widgets/ribbon_widgets/link_map.js
View File

@ -52,6 +52,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$container = this.$widget.find(".link-map-container"); this.$container = this.$widget.find(".link-map-container");
this.openState = 'small'; this.openState = 'small';
@ -177,7 +178,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
renderData(data, zoomToFit = true, zoomPadding = 10) { renderData(data, zoomToFit = true, zoomPadding = 10) {
this.graph.graphData(data); this.graph.graphData(data);
if (zoomToFit) { if (zoomToFit && data.nodes.length > 1) {
setTimeout(() => this.graph.zoomToFit(400, zoomPadding), 1000); setTimeout(() => this.graph.zoomToFit(400, zoomPadding), 1000);
} }
} }

1
src/public/app/widgets/ribbon_widgets/note_info_widget.js
View File

@ -76,6 +76,7 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$noteId = this.$widget.find(".note-info-note-id"); this.$noteId = this.$widget.find(".note-info-note-id");
this.$dateCreated = this.$widget.find(".note-info-date-created"); this.$dateCreated = this.$widget.find(".note-info-date-created");

1
src/public/app/widgets/ribbon_widgets/note_paths.js
View File

@ -50,6 +50,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$notePathIntro = this.$widget.find(".note-path-intro"); this.$notePathIntro = this.$widget.find(".note-path-intro");
this.$notePathList = this.$widget.find(".note-path-list"); this.$notePathList = this.$widget.find(".note-path-list");

1
src/public/app/widgets/ribbon_widgets/note_properties.js
View File

@ -30,6 +30,7 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$pageUrl = this.$widget.find('.page-url'); this.$pageUrl = this.$widget.find('.page-url');
} }

10
src/public/app/widgets/ribbon_widgets/owned_attribute_list.js
View File

@ -25,8 +25,13 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
constructor() { constructor() {
super(); super();
this.attributeDetailWidget = new AttributeDetailWidget().setParent(this); this.attributeDetailWidget = new AttributeDetailWidget()
this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this); .contentSized()
.setParent(this);
this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget)
.contentSized()
.setParent(this);
this.child(this.attributeEditorWidget, this.attributeDetailWidget); this.child(this.attributeEditorWidget, this.attributeDetailWidget);
} }
@ -41,6 +46,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render()); this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
this.$widget.append(this.attributeDetailWidget.render()); this.$widget.append(this.attributeDetailWidget.render());

1
src/public/app/widgets/ribbon_widgets/promoted_attributes.js
View File

@ -37,6 +37,7 @@ const TPL = `
export default class PromotedAttributesWidget extends NoteContextAwareWidget { export default class PromotedAttributesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$container = this.$widget.find(".promoted-attributes-container"); this.$container = this.$widget.find(".promoted-attributes-container");
} }

2
src/public/app/widgets/ribbon_widgets/search_definition.js
View File

@ -223,9 +223,9 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$component = this.$widget.find('.search-definition-widget'); this.$component = this.$widget.find('.search-definition-widget');
this.$widget.on('click', '[data-search-option-add]', async event => { this.$widget.on('click', '[data-search-option-add]', async event => {
const searchOptionName = $(event.target).attr('data-search-option-add'); const searchOptionName = $(event.target).attr('data-search-option-add');
const clazz = OPTION_CLASSES.find(SearchOptionClass => SearchOptionClass.optionName === searchOptionName); const clazz = OPTION_CLASSES.find(SearchOptionClass => SearchOptionClass.optionName === searchOptionName);

1
src/public/app/widgets/ribbon_widgets/similar_notes.js
View File

@ -47,6 +47,7 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.contentSized();
this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper"); this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
} }

58
src/public/app/widgets/tab_row.js
View File

@ -43,9 +43,9 @@ const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab" data-trigger-command="open
const FILLER_TPL = `<div class="tab-row-filler"></div>`; const FILLER_TPL = `<div class="tab-row-filler"></div>`;
const TAB_ROW_TPL = ` const TAB_ROW_TPL = `
<div class="note-tab-row"> <div class="tab-row-widget">
<style> <style>
.note-tab-row { .tab-row-widget {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
width: 100%; width: 100%;
@ -54,19 +54,19 @@ const TAB_ROW_TPL = `
margin-top: 2px; margin-top: 2px;
} }
.note-tab-row * { .tab-row-widget * {
box-sizing: inherit; box-sizing: inherit;
font: inherit; font: inherit;
} }
.note-tab-row .note-tab-row-container { .tab-row-widget .tab-row-widget-container {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.note-tab-row .note-tab { .tab-row-widget .note-tab {
position: absolute; position: absolute;
left: 0; left: 0;
width: 240px; width: 240px;
@ -103,22 +103,22 @@ const TAB_ROW_TPL = `
left: 0; left: 0;
} }
.note-tab-row .note-tab[active] { .tab-row-widget .note-tab[active] {
z-index: 5; z-index: 5;
} }
.note-tab-row .note-tab, .tab-row-widget .note-tab,
.note-tab-row .note-tab * { .tab-row-widget .note-tab * {
user-select: none; user-select: none;
cursor: default; cursor: default;
} }
.note-tab-row .note-tab.note-tab-was-just-added { .tab-row-widget .note-tab.note-tab-was-just-added {
top: 10px; top: 10px;
animation: note-tab-was-just-added 120ms forwards ease-in-out; animation: note-tab-was-just-added 120ms forwards ease-in-out;
} }
.note-tab-row .note-tab .note-tab-wrapper { .tab-row-widget .note-tab .note-tab-wrapper {
position: absolute; position: absolute;
display: flex; display: flex;
top: 0; top: 0;
@ -134,35 +134,35 @@ const TAB_ROW_TPL = `
background-color: var(--inactive-tab-background-color); background-color: var(--inactive-tab-background-color);
} }
.note-tab-row .note-tab[active] .note-tab-wrapper { .tab-row-widget .note-tab[active] .note-tab-wrapper {
font-weight: bold; font-weight: bold;
color: var(--active-tab-text-color); color: var(--active-tab-text-color);
background-color : var(--active-tab-background-color); background-color : var(--active-tab-background-color);
} }
.note-tab-row .note-tab[is-mini] .note-tab-wrapper { .tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }
.note-tab-row .note-tab .note-tab-title { .tab-row-widget .note-tab .note-tab-title {
flex: 1; flex: 1;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.note-tab-row .note-tab .note-tab-icon { .tab-row-widget .note-tab .note-tab-icon {
position: relative; position: relative;
top: -1px; top: -1px;
padding-right: 3px; padding-right: 3px;
} }
.note-tab-row .note-tab[is-small] .note-tab-title { .tab-row-widget .note-tab[is-small] .note-tab-title {
margin-left: 0; margin-left: 0;
} }
.note-tab-row .note-tab .note-tab-drag-handle { .tab-row-widget .note-tab .note-tab-drag-handle {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -172,7 +172,7 @@ const TAB_ROW_TPL = `
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.note-tab-row .note-tab .note-tab-close { .tab-row-widget .note-tab .note-tab-close {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
border-radius: 50%; border-radius: 50%;
@ -180,24 +180,24 @@ const TAB_ROW_TPL = `
text-align: center; text-align: center;
} }
.note-tab-row .note-tab .note-tab-close span { .tab-row-widget .note-tab .note-tab-close span {
font-size: 24px; font-size: 24px;
position: relative; position: relative;
top: -6px; top: -6px;
} }
.note-tab-row .note-tab .note-tab-close:hover { .tab-row-widget .note-tab .note-tab-close:hover {
background-color: var(--hover-item-background-color); background-color: var(--hover-item-background-color);
color: var(--hover-item-text-color); color: var(--hover-item-text-color);
} }
.note-tab-row .note-tab[is-smaller] .note-tab-close { .tab-row-widget .note-tab[is-smaller] .note-tab-close {
margin-left: auto; margin-left: auto;
} }
.note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close { .tab-row-widget .note-tab[is-mini]:not([active]) .note-tab-close {
display: none; display: none;
} }
.note-tab-row .note-tab[is-mini][active] .note-tab-close { .tab-row-widget .note-tab[is-mini][active] .note-tab-close {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -221,13 +221,13 @@ const TAB_ROW_TPL = `
top: 0; top: 0;
} }
} }
.note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging), .tab-row-widget.tab-row-widget-is-sorting .note-tab:not(.note-tab-is-dragging),
.note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged { .tab-row-widget:not(.tab-row-widget-is-sorting) .note-tab.note-tab-was-just-dragged {
transition: transform 120ms ease-in-out; transition: transform 120ms ease-in-out;
} }
</style> </style>
<div class="note-tab-row-container"></div> <div class="tab-row-widget-container"></div>
</div>`; </div>`;
export default class TabRowWidget extends BasicWidget { export default class TabRowWidget extends BasicWidget {
@ -296,7 +296,7 @@ export default class TabRowWidget extends BasicWidget {
} }
get $tabContainer() { get $tabContainer() {
return this.$widget.find('.note-tab-row-container'); return this.$widget.find('.tab-row-widget-container');
} }
get tabWidths() { get tabWidths() {
@ -482,7 +482,7 @@ export default class TabRowWidget extends BasicWidget {
if (this.isDragging) { if (this.isDragging) {
this.isDragging = false; this.isDragging = false;
this.$widget.removeClass('note-tab-row-is-sorting'); this.$widget.removeClass('tab-row-widget-is-sorting');
this.draggabillyDragging.element.classList.remove('note-tab-is-dragging'); this.draggabillyDragging.element.classList.remove('note-tab-is-dragging');
this.draggabillyDragging.element.style.transform = ''; this.draggabillyDragging.element.style.transform = '';
this.draggabillyDragging.dragEnd(); this.draggabillyDragging.dragEnd();
@ -512,7 +512,7 @@ export default class TabRowWidget extends BasicWidget {
this.isDragging = true; this.isDragging = true;
this.draggabillyDragging = draggabilly; this.draggabillyDragging = draggabilly;
tabEl.classList.add('note-tab-is-dragging'); tabEl.classList.add('note-tab-is-dragging');
this.$widget.addClass('note-tab-row-is-sorting'); this.$widget.addClass('tab-row-widget-is-sorting');
}); });
draggabilly.on('dragEnd', _ => { draggabilly.on('dragEnd', _ => {
@ -527,7 +527,7 @@ export default class TabRowWidget extends BasicWidget {
requestAnimationFrame(_ => { requestAnimationFrame(_ => {
tabEl.classList.remove('note-tab-is-dragging'); tabEl.classList.remove('note-tab-is-dragging');
this.$widget.removeClass('note-tab-row-is-sorting'); this.$widget.removeClass('tab-row-widget-is-sorting');
tabEl.classList.add('note-tab-was-just-dragged'); tabEl.classList.add('note-tab-was-just-dragged');

8
src/public/stylesheets/style.css
View File

@ -20,6 +20,10 @@ body {
width: 100%; width: 100%;
} }
.component {
contain: size;
}
code, kbd, pre, samp { code, kbd, pre, samp {
font-family: var(--font-family-monospace); font-family: var(--font-family-monospace);
} }
@ -65,6 +69,8 @@ button.close:hover {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
width: 35px;
height: 35px;
cursor: pointer; cursor: pointer;
font-size: 1.5em; font-size: 1.5em;
color: var(--button-text-color); color: var(--button-text-color);
@ -879,6 +885,8 @@ ul.fancytree-container li {
cursor: pointer; cursor: pointer;
border: none; border: none;
color: var(--launcher-pane-text-color); color: var(--launcher-pane-text-color);
width: 53px;
height: 53px;
} }
#launcher-pane .icon-action:hover { #launcher-pane .icon-action:hover {