UX-2323 Update existing UI Guidelines: SplitButton, fix review comments
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 55 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 64 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 20 KiB |
BIN
images/ui/split_button/split_button_tooltip_on_hover_dark.png
Normal file
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.7 KiB |
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 63 KiB |
@ -62,7 +62,7 @@ Putting the single action in the dropdown menu doesn't save a lot of space:
|
||||
|
||||
<format color="369650" style="bold">Correct</format>
|
||||
|
||||
<img src="split_button_unrelated_actions_correct.png" alt="Unrelated actions in separate buttons" width="706"/>
|
||||
<img src="split_button_one_two_buttons.png" alt="Unrelated actions in separate buttons" width="706"/>
|
||||
|
||||
<note><control>Exception</control>: If the action is <a anchor="the-second-action-is-dangerous-and-uncommon">dangerous and uncommon</a>, you can put it in the menu.</note>
|
||||
|
||||
@ -96,6 +96,9 @@ Place related actions into the dropdown menu. Do not duplicate the main action i
|
||||
|
||||
{width=706}
|
||||
|
||||
If there is a dangerous action among other actions in the dropdown, add the line separators above and below it to lessen the chance of calling this action by mistake:
|
||||
|
||||
{width=706}
|
||||
|
||||
[//]: # (### Reduce split button to simple action buttons)
|
||||
|
||||
@ -119,18 +122,25 @@ Place related actions into the dropdown menu. Do not duplicate the main action i
|
||||
|
||||
* Open the dropdown menu with the first menu item selected on <shortcut>Alt+Shift+Enter</shortcut>.
|
||||
|
||||
* Do **not** show the dropdown menuwhen the button gains focus.
|
||||
* Do not show the dropdown menu when the button gains focus.
|
||||
|
||||
### Focus on the button
|
||||
|
||||
<table style="none">
|
||||
<tr>
|
||||
<td width="15%">
|
||||
<p><shortcut>Enter</shortcut></p>
|
||||
<p><shortcut>Ctrl+Enter</shortcut></p>
|
||||
</td>
|
||||
<td width="85%">Invoke the default button action.</td>
|
||||
</tr>
|
||||
|
||||
[//]: # ( <tr>)
|
||||
|
||||
[//]: # ( <td width="15%">)
|
||||
|
||||
[//]: # ( <p><shortcut>Enter</shortcut></p>)
|
||||
|
||||
[//]: # ( <p><shortcut>Ctrl+Enter</shortcut></p>)
|
||||
|
||||
[//]: # ( </td>)
|
||||
|
||||
[//]: # ( <td width="85%">Invoke the default button action.</td>)
|
||||
|
||||
[//]: # ( </tr>)
|
||||
<tr>
|
||||
<td><shortcut>Space</shortcut></td>
|
||||
<td>Invoke the main action.</td>
|
||||
|