Design/Whiteboards/Style management

From The Document Foundation Wiki
Jump to: navigation, search

Summary

Improve style management.

Status

Analysis Call for Proposals Shaping Tentative Design Blueprint Implemented

Scope

In Scope Out of Scope
  • Applying styles
  • Editing styles
  • Adding styles
  • Getting rid of hard formatting buttons

Relevant Bugs

Discussion

Proposals

Proposal by Daud

Mockups

Description

Styles and Formatting dialog

I have tried to change the current look the least possible, while adding some valuable functionalities that could improve usability, productivity, be more self-explanatory to new users who are not familiar with styles. This last goal is particularly addressed by the list of applied styles and direct formatting, because you can see where the formatting is coming from -- maybe we could add here parent style inheritance as well.

Following discussion in the design mailing list, these were added to the current window:

  • Tabs for different style type (either paragraph, character, page etc.) instead of buttons;
  • Preview of selected (not current) style (both isolated and in contextualized previews);
can be collapsed
  • Checkbox for "auto update style", which should be re-phrased for "apply direct formatting to this style" (or even "add direct formatting to this style"). There's also a button, where the phrase is written on, which "updates style" from the current formatting (same as today's from the drop-down button);
  • huge Help button (this is so people know there are things to learn, and they're not stupid just because weren't born knowing);
  • Inspector: List of styles current being applied to selection or at cursor position, indicating also the kind of style, either paragraph, character, page etc.;
can be collapsed
  • Inspector: Direct formatting current being applied to selection or at cursor position, with button to Reset those (same as Ctrl+M);
  • Plus signal next to each style and preview, allowing quick access to Style Properties Dialog (not sure if the list got too polluted with this, maybe a dot instead of the + ?);
  • New options in the drop-down buttons.
  • Plus, a 'd' next to a style name means it has "direct formatting auto-update on"; an 'i' (only in the inspector) means that style inherits some of it's values from a parent style (not sure if this is practical, since all styles are hierarchical). Besides, not quite sure if this is too polluting in the interface. Perhaps another color instead of a letter?

The buttons on the top right are as follows:

New Styles button

This button gets a drop-down menu, which lets one option to be pre-selected, so you can access the function without the need to go through the menu again and again. The options are:

  • New style. This opens the Style Properties Dialog, in the Organizer tab, allowing the creation of an entire new style;
  • New style based on selection. The same, but now the style will be based on selected style (the one that is selected in the window, not in the document);
  • Delete style. Only created styles can be deleted, should be grayed out when non-custom style is selected.
Old Styles button

There are only two options here:

  • Load Styles;
  • Templates.

They're more of meta-functions on the style usage, that's why they're a little offset, as something to be used with knowledge and care. They're not self explanatory and both loading of styles and templates are not easy to use functions.

Fill Format Mode

This is the same as we have today.

Proposal by MipMap

Outline: separate working with styles and hardcoded quick edits. Make a new window for formatting where everything is included. Remove the sidepanel and move this content into new toolbar fields. You can read more about it at my Personal page.

Proposal by Aurelien

The aim of this proposal is to make it easier to use only styles, by integrating more styling capabilities into the toolbar and by enabling simple setup of styles without using the style dialogs.

PDF mockup

Styles toolbar

The text toolbar has a button for the stylist and paragraph styles, along with manual formatting buttons, but only paragraph styles can be used in the toolbar. A Toolbar dedicated to styles would include selectors for all types of styles (at least paragraph, character, and list). It would replace the text toolbar for style users.

For character styles, it would make sense to include buttons for "common" styles (especially emphasis, strong emphasis, and quote).

Stylist

The main change would be to be able to change some properties of the styles directly within the stylist sidebar. For this, I propose to include buttons (similar to the ones in the text toolbar) at the bottom.


I think we can also fix some shortcomings of the current stylist:

  • mark the style currently in use and not only the selected one
  • replace the numerous views (selected in the bottom combo box) with categories in the list itself (which can be folded) and a slider to control how many styles are listed.


Style dialogs

The style dialogs are a bit scary, and it is easy to get lost in them

  • Reduce the number of tabs by merging related tabs as some of them could use much less space (especially the font and color selectors)
  • Reorder tabs to group ralated topics (paragraph vs character properties in paragraph styles for example)


Shortcuts

Some keyboard shortcuts are defined for common manual formatting, it would be fantastic to be able to apply styles quickly without reaching the mouse. I see two main options here:

  • shortcut to focus the style selector from the toolbar (hitting return or esc would go back to the text)
  • open a contextual menu to select the style

It would not be as fast as hitting ctrl-b for bold, but close enough. In both case, it would be nice to filter options by typing some letters. Unfortunately, it may be difficult to pick a good default shortcut for it.


Misc

  • The "clear formatting" command is very convenient to cleanup a document, but I would like to be able to remove only manual formatting, i.e. to preserve character styles.
  • In the style dialogs, it would help to be able to see if a property is inherited or explicitely defined, and to reset it. This could be done with a border or background to avoid becoming too crowded, but it would be a bit hard to discover.

Proposal by Williewortel

I agree with Aurelien that the style dialogs are too complicated. There are many tabs, and there seems to be no logical order in them. I know we're not supposed to emulate designs from other software, but I think we can draw some lessons from InDesign here. I like the style dialog of InDesign (I'd love to post a screenshot, but I suppose that's not allowed, is it?), for two reasons:

  1. InDesign has a vertical "list" design, instead of the horizontal "tabs" design. This vertical design allows for more options in a well-organized manner.
  2. the options in InDesign are arranged in a logical way: most important options first, obscure options later. Compare that to the current dialog in LibO: the single most important tab "Font" is a small tab hidden somewhere inbetween, while a not-so-common feature like Drop caps has a big prominent spot in the middle. I find it really hard to find what I'm looking for in this dialog.

Just my 2 cents here.

Proposal by Simplecontrast

The styles and formatting dialog should be simplified. Users should be able to see how a style looks before they apply it. If we want styles to be used, it should be easy for them to be modified by users. Here's a starting point, at least, to how that should be done: I rather like the sidebar, so this would work well there. It could also work fine as a floating window like styles work now. Either way, this would be a simple way to manage styles.

Relevant Art