[Note Editor Manager] Horizontal layout



  • 2020-06-12_832.png

    I know what you're thinking, is that Opera Mail? Nope. It's Vivaldi's new note editor, with a twist

    Notes:

    • Since the idea is to use more window real estate, the panel on the left will not collapse so I've removed that button
    • The size of the side panel is (unfortunately) not resizable by dragging the edge. Instead it's set dynamically to your window size, this can be changed by adjusting the value of this bit of code flex-basis: 25vw !important;
    • The sizing might be OS dependent so you might need make some adjustments to ensure everything is aligned

    CSS

    .NotesManager { flex-direction: row !important; }
    
    .NotesManager-Toolbar, .NotesManager-Buttons { background-color: var(--colorBgDark) !important; }
    
    .NotesManager-Buttons { border-bottom: 1px solid var(--colorBgDarker); }
    
    .NotesManager-RenderMarkdownButton { display: none !important; }
    
    .NotesManager-Tree > .toolbar-default {
      background-color: var(--colorBgDark);
      padding-left: 5%;
      margin-left: 0 !important;
      height: 40px;
    }
    
    .NotesManager-Tree {
      max-height: 100% !important;
      flex-basis: 25vw !important;
      border-right: 1px solid var(--colorBgDarker)
    }
    
    .NotesManager-Footer {
      position: absolute;
      grid-area: unset !important;
      justify-content: center;
      align-items: center;
      height: 30px;
      bottom: 4px;
      opacity: 1 !important;
    }
    
    .NotesManager-WordCount {
      background-color: var(--colorHighlightBg);
      color: var(--colorHighlightFg);
      padding: 10px 25px;
      border-radius: var(--radius);
    }
    

    That should take care of the layout. Some of the things that you see in the image that are not included will affect other parts of the UI

    Toolbar Buttons

    .toolbar-default .button-toolbar > button { background-image: linear-gradient(var(--colorBgLight), var(--colorBg)) !important; }
    
    .toolbar-default .button-toolbar > button.button-pressed { background-image: linear-gradient(var(--colorHighlightBg), var(--colorHighlightBgDark)) !important; }
    
    .toolbar-default .button-toolbar > button.button-pressed:active { background-image: linear-gradient(var(--colorBgDark), var(--colorBgDark)) !important; }
    
    .toolbar-default .button-toolbar > button:hover { background-color: var(--colorBgDark) !important; fill: var(--colorHighlightBg) !important; }
    
    .toolbar-default .button-toolbar > button.button-pressed {
      fill: var(--colorHighlightFg) !important;
      color: var(--colorHighlightFg);
    }
    

    Alternating Row Colours (this will be applied to all Tree Lists)

    .manager .manager-content, .vivaldi-tree, .manager>.toolbar, .startpage .history .more-info {
      background-color: var(--colorBgDark) !important;
      opacity: .98;
      backdrop-filter: blur(10px)
    }
    
    /* Creates alternating row colors */
    .vivaldi-tree div>div:nth-child(even), .manager .manager-treeview div>div:nth-child(even), .startpage .history .manager-content .history-tree div>div:nth-child(even) { background-color: var(--colorBg); }
    
    .manager .manager-editor {border: none !important}
    
    .panel#downloads .download-item .file, .panel#downloads .download-item .file .size { background-color: transparent; }
    


  • Also, this should solve the height problem w/o disabling the flag

    .NotesManager-Note {
        grid-template-rows: auto minmax(10px, 100%) 40px;
    }
    


  • Thanks you so much. I would still prefer if I could directly use the notes panel to navigate, but this is fantastic!!

    Much love.



  • @sjudenim Great effort. The only reason I can imagine for Vivaldi not implementing it this way is that the notes panel is already on the side and they didn’t wanna double it. But putting the notes browser above was not the right decision in any case.


  • Vivaldi Team

    @luetage said in [Note Editor Manager] Horizontal layout:

    @sjudenim Great effort. The only reason I can imagine for Vivaldi not implementing it this way is that the notes panel is already on the side and they didn’t wanna double it. But putting the notes browser above was not the right decision in any case.

    We just did not get that view ready in time, but I am using it now. 🙂



  • @jon said in [Note Editor Manager] Horizontal layout:

    We just did not get that view ready in time,

    I'm looking forward to see it soon.



  • @jon Well, we are using it too : P


  • Vivaldi Team

    @luetage said in [Note Editor Manager] Horizontal layout:

    @jon Well, we are using it too : P

    🙂


  • Ambassador

    Horizontal Layout is now available for Notes.

    The button to toggle the layout is at the top right of the list of notes.

    Toggle Layout.png


  • Ambassador

    @ChimeraTech Yes, it helps me a lot as I have two monitors: one portrait and one landscape. However, it could still be improved by moving the toggle button.

    (VB-70571) Notes Toggle Layout Button Changes Position


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.