Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-23 21:17:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

client: Move ribbon at the bottom

Browse Source
This commit is contained in:
Elian Doran 2024-10-20 00:56:05 +03:00
parent fcebb43410
commit ac61d0f3ea
No known key found for this signature in database
2 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,29 +121,7 @@ export default class DesktopLayout {
.collapsible() .collapsible()
.id('center-pane') .id('center-pane')
.child(new SplitNoteContainer(() => .child(new SplitNoteContainer(() =>
new NoteWrapperWidget() new NoteWrapperWidget()
.child(
new RibbonContainer()
// the order of the widgets matter. Some of these want to "activate" themselves
// when visible. When this happens to multiple of them, the first one "wins".
// promoted attributes should always win.
.ribbon(new ScriptExecutorWidget())
.ribbon(new SearchDefinitionWidget())
.ribbon(new EditedNotesWidget())
.ribbon(new BookPropertiesWidget())
.ribbon(new NotePropertiesWidget())
.ribbon(new FilePropertiesWidget())
.ribbon(new ImagePropertiesWidget())
.ribbon(new BasicPropertiesWidget())
.ribbon(new OwnedAttributeListWidget())
.ribbon(new InheritedAttributesWidget())
.ribbon(new NotePathsWidget())
.ribbon(new NoteMapRibbonWidget())
.ribbon(new SimilarNotesWidget())
.ribbon(new NoteInfoWidget())
.button(new RevisionsButton())
.button(new NoteActionsWidget())
)
.child(new SharedInfoWidget()) .child(new SharedInfoWidget())
.child(new WatchedFileUpdateStatusWidget()) .child(new WatchedFileUpdateStatusWidget())
.child(new FloatingButtons() .child(new FloatingButtons()
@ -188,6 +166,28 @@ export default class DesktopLayout {
...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC
...this.customWidgets.get('note-detail-pane') ...this.customWidgets.get('note-detail-pane')
) )
.child(
new RibbonContainer()
// the order of the widgets matter. Some of these want to "activate" themselves
// when visible. When this happens to multiple of them, the first one "wins".
// promoted attributes should always win.
.ribbon(new ScriptExecutorWidget())
.ribbon(new SearchDefinitionWidget())
.ribbon(new EditedNotesWidget())
.ribbon(new BookPropertiesWidget())
.ribbon(new NotePropertiesWidget())
.ribbon(new FilePropertiesWidget())
.ribbon(new ImagePropertiesWidget())
.ribbon(new BasicPropertiesWidget())
.ribbon(new OwnedAttributeListWidget())
.ribbon(new InheritedAttributesWidget())
.ribbon(new NotePathsWidget())
.ribbon(new NoteMapRibbonWidget())
.ribbon(new SimilarNotesWidget())
.ribbon(new NoteInfoWidget())
.button(new RevisionsButton())
.button(new NoteActionsWidget())
)
) )
) )
.child(...this.customWidgets.get('center-pane')) .child(...this.customWidgets.get('center-pane'))

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

@ -6,7 +6,7 @@ const TPL = `
<div class="ribbon-container"> <div class="ribbon-container">
<style> <style>
.ribbon-container { .ribbon-container {
margin-bottom: 5px; margin-top: 5px;
} }
.ribbon-top-row { .ribbon-top-row {
@ -24,7 +24,7 @@ const TPL = `
.ribbon-tab-title { .ribbon-tab-title {
color: var(--muted-text-color); color: var(--muted-text-color);
border-bottom: 1px solid var(--main-border-color); border-top: 1px solid var(--main-border-color);
min-width: 24px; min-width: 24px;
flex-basis: 24px; flex-basis: 24px;
max-width: max-content; max-width: max-content;
@ -39,7 +39,7 @@ const TPL = `
.ribbon-tab-title.active { .ribbon-tab-title.active {
color: var(--main-text-color); color: var(--main-text-color);
border-bottom: 3px solid var(--main-text-color); border-top: 3px solid var(--main-text-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -62,7 +62,7 @@ const TPL = `
min-width: 0; min-width: 0;
max-width: 35px; max-width: 35px;
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid var(--main-border-color); border-top: 1px solid var(--main-border-color);
} }
.ribbon-tab-spacer:last-of-type { .ribbon-tab-spacer:last-of-type {
@ -74,7 +74,7 @@ const TPL = `
.ribbon-button-container { .ribbon-button-container {
display: flex; display: flex;
border-bottom: 1px solid var(--main-border-color); border-top: 1px solid var(--main-border-color);
margin-right: 5px; margin-right: 5px;
} }
@ -86,9 +86,9 @@ const TPL = `
.ribbon-body { .ribbon-body {
display: none; display: none;
border-bottom: 1px solid var(--main-border-color); border-top: 1px solid var(--main-border-color);
margin-left: 10px; margin-left: 10px;
margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */ margin-right: 5px; /* needs to have this value so that the top border is the same width as the top one */
} }
.ribbon-body.active { .ribbon-body.active {