Basic style sidebar in Writer

[eszkadev]

requires: https://gerrit.libreoffice.org/c/core/+/175646

Just a list of styles to apply for now...

[eszkadev]

This is for RED. Preview only, for UX discussion

[pedropintosilva]

Cool! I have playing with it already for some time (before the PR was made) well done :)

I think we briefly discuss this but let me try to emphasize here that I would strongly recommend to avoid new sidebars.

I would rather see: a "see all/expand" sort of a button added to the Home > Styles preview component; And a big button with a label added to the Format tab that would trigger the same Nonmodal dialog that can be moved around and close (not a sidebar)

Here is a draft look and feel (using existing button images, but of course we would use better ones)

Here ^ I have added:

• Scroll button to go up
• Scroll button to go down
• The third button would open the new styles Nonmodal dialog (which all the styles as a list) . Here I use the same "more button" icon that we are already using elsewhere to signify "open dialog with more stuff"
  • This seems also to be the more familiar user pattern that users are used from MSO

Web dev tools changes:

#stylesview {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#stylesview-btn {
  border: 1px solid var(--color-stylesview-border);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  height: 64px;
  margin-left: -5px;
}
#stylesview-btn .vertical {
  gap: 0;
}
#stylesview-btn button img {
  width: var(--btn-img-size-m) !important;
  height: var(--btn-img-size-m) !important;

  box-sizing: border-box;
}

#stylesview-btn button {
width: var(--btn-size-s) !important;
height: var(--btn-size-s) !important;
}

New #stylesview-btn added after #stylesview:

<div id="stylesview-btn" class="notebookbar" style="gap: 0;"><div id="" class="notebookbar vertical"><div class="unotoolbutton notebookbar ui-content unospan-home-brush unoFormatPaintbrush no-label" tabindex="-1" id="home-brush" data-cooltip="Clone Formatting"><button class="ui-content unobutton" id="home-brush-button" aria-label="Clone Formatting"><img class="" alt="Clone Formatting" src="http://localhost:9980/browser/48c008a2e9/images/lc_scrolltoprevious.svg"></button></div><div class="unotoolbutton notebookbar ui-content unospan-home-brush unoFormatPaintbrush no-label" tabindex="-1" id="home-brush" data-cooltip="Clone Formatting"><button class="ui-content unobutton" id="home-brush-button" aria-label="Clone Formatting"><img class="" alt="Clone Formatting" src="http://localhost:9980/browser/48c008a2e9/images/lc_scrolltonext.svg"></button></div><div class="unotoolbutton notebookbar ui-content unospan-home-brush unoFormatPaintbrush no-label" tabindex="-1" id="home-brush" data-cooltip="Clone Formatting"><button class="ui-content unobutton" id="home-brush-button" aria-label="Clone Formatting"><img class="" alt="Clone Formatting" src="http://localhost:9980/browser/48c008a2e9/images/lc_morebutton.svg"></button></div></div></div>

let me address that later in followup, for now we don't have capacity to do all of that

[pedropintosilva]

I missed your comment in GH: #10633 (review)
Unfortunately that sidebar allows to do more complex filtering of styles (hidden, used, etc) shows hierarchy of inheritance -> tree and allow to access table/frame (other types) than notebookbar widget - which shows only paragraph styles.

@eszkadev, I still think it should be placed both in the format tab (which answers your concern ^) and add it to the paragraph styles preview. The thing is that a new sidebar that no user outside some LO users know and adding to the number of sidebars we have, is - I'm afraid - an additional pain point in the overall UX. Plus a dialog would allow for moving it and look at the styles even if the window is quite narrow (and it's what is used in other traditional office software)

Reworking that to popup extending the notebookbar widget is bigger task. Can we just release "feature preview" now in CODE RED as sidebar?

@eszkadev, Sure, I understand. Just wanted to have that written as something we should really try to achieve in the future, as a follow up.