mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-04 13:39:01 +01:00 
			
		
		
		
	client: Move ribbon at the bottom
This commit is contained in:
		
							parent
							
								
									fcebb43410
								
							
						
					
					
						commit
						ac61d0f3ea
					
				@ -121,29 +121,7 @@ export default class DesktopLayout {
 | 
			
		||||
                        .collapsible()
 | 
			
		||||
                        .id('center-pane')
 | 
			
		||||
                        .child(new SplitNoteContainer(() =>
 | 
			
		||||
                                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())
 | 
			
		||||
                                        )                                    
 | 
			
		||||
                                new NoteWrapperWidget()                                                                                                        
 | 
			
		||||
                                    .child(new SharedInfoWidget())
 | 
			
		||||
                                    .child(new WatchedFileUpdateStatusWidget())
 | 
			
		||||
                                    .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('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'))
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,7 @@ const TPL = `
 | 
			
		||||
<div class="ribbon-container">
 | 
			
		||||
    <style>
 | 
			
		||||
    .ribbon-container {
 | 
			
		||||
        margin-bottom: 5px;
 | 
			
		||||
        margin-top: 5px;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    .ribbon-top-row {
 | 
			
		||||
@ -24,7 +24,7 @@ const TPL = `
 | 
			
		||||
    
 | 
			
		||||
    .ribbon-tab-title {
 | 
			
		||||
        color: var(--muted-text-color);
 | 
			
		||||
        border-bottom: 1px solid var(--main-border-color); 
 | 
			
		||||
        border-top: 1px solid var(--main-border-color); 
 | 
			
		||||
        min-width: 24px;
 | 
			
		||||
        flex-basis: 24px;
 | 
			
		||||
        max-width: max-content;
 | 
			
		||||
@ -39,7 +39,7 @@ const TPL = `
 | 
			
		||||
    
 | 
			
		||||
    .ribbon-tab-title.active {
 | 
			
		||||
        color: var(--main-text-color);
 | 
			
		||||
        border-bottom: 3px solid var(--main-text-color);
 | 
			
		||||
        border-top: 3px solid var(--main-text-color);
 | 
			
		||||
        white-space: nowrap;
 | 
			
		||||
        overflow: hidden;
 | 
			
		||||
        text-overflow: ellipsis;
 | 
			
		||||
@ -62,7 +62,7 @@ const TPL = `
 | 
			
		||||
        min-width: 0;
 | 
			
		||||
        max-width: 35px;
 | 
			
		||||
        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 {
 | 
			
		||||
@ -74,7 +74,7 @@ const TPL = `
 | 
			
		||||
    
 | 
			
		||||
    .ribbon-button-container {
 | 
			
		||||
        display: flex;
 | 
			
		||||
        border-bottom: 1px solid var(--main-border-color); 
 | 
			
		||||
        border-top: 1px solid var(--main-border-color); 
 | 
			
		||||
        margin-right: 5px;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
@ -86,9 +86,9 @@ const TPL = `
 | 
			
		||||
    
 | 
			
		||||
    .ribbon-body {
 | 
			
		||||
        display: none;
 | 
			
		||||
        border-bottom: 1px solid var(--main-border-color);
 | 
			
		||||
        border-top: 1px solid var(--main-border-color);
 | 
			
		||||
        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 {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user