Deeper Style UI: Run in dialog not sidebar

[pedropintosilva]

We now have Styles sidebar enabled and accessible via Format tab > Style list. It would be good if that wouldn't trigger a sidebar but instead a Style list Nonmodal dialog.

Sub tasks:

• Writer: Home: Styles preview: Add more button #10999
  • Should have a "more" button (corner icon, similar as used in the sidebar sections) that triggers the Style list Nonmodal dialog.

I have posted first about this in #10633 (review) . I have pasted its contents bellow:

---

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:

CSS excerpt (click to expand)

#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:

HTML excerpt (click to expand)

<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>

---