List test umpteen billion.
-
1.1 Styles Display
-
Update 05/22: Updated #1 and #2 based on OSN comments.
-
Update 05/24: Revised style definitions.
-
Update 05/25: Updated 5.a to add more lines in the preview.
- The styles tab shall show all defined styles in a WYSIWYG manner. So each style is shown exactly how it is defined in the editor. The toolbar controls allow you to change the properties for a style, and these changes are reflected in the style preview.
- Each style has a header that can be selected to make that style active for editing (single-select only)
- The header is by default grey. Selected state is blue (design needed, MLR 32503)
- Header font family and formatting: Use developer UI settings
- Header width and height: (MLR 32503)
- The header should be styled using css and not images.
- The header shall display the style name and if applicable, also the element name. This is different from the name used in the css file for the styles.
- For elements: the friendly element name, like ‘Header 1 <h1>’. This part of the name cannot be edited.
- For types: the type name as defined by the user combined with ‘ – [typename]’, for example ‘MyTable – Table’. This part of the name cannot be edited.
- For lists there shall be two types:
- Numbered List and
- Bulleted List.
- These names cannot be used as css names so need to be mapped or converted to valid css names.
- If names do not fit in the header, the css ellipsis solution shall be used to shorten the name, together with a tooltip showing the full name (http://travisgosselin.com/blog/?p=193).
- The first item in the header shall be the ‘Default Style’ checkbox. It shall be unchecked by default. Tooltip: Default Style
- Editing of the style name shall be possible by clicking the name in the header, similar as implemented in the question editor.
- Clicking the style name shall enable edit mode.
- The change will be confirmed when the editing area no longer has focus.
- The editable area shall change background color when it has focus to #FFFFBB.
- We warn the user for duplicate names.
- When a style name already exists (check is done after confirmation of the new name), the user shall get an information dialog with an Ok button and the following text: ‘This style already exists. Enter a unique name for the style.’. The Ok button shall return the user to the active edit field with the typed name preselected.
- Each style has a preview part to display the styling properties. Changes to the properties shall be directly applied to the preview part. The preview itself is not directly editable in the view.
- Styles shall be shown using sample text. The text shall be repeating ‘Sample text’.
- All styles that use the paragraph toolbar (see Excel sheet WPSE UI) shall show 4 lines of this sample text. There shall also be 2 lines of text before and after the
Out of the list.
Ref to wysiwyg.
End of page.