Change Details

This is about users being able to save filter selections for themselves; the task for defining saved filters wiki-wide is {T164548} # Save filters dialog {F8013644, size = full} **Behaviour** {F8013650} - Initially the dialog gets the input focus to its input filed showing a placeholder. - When the input field is empty, the main action is disabled. - When the input field has content, the main action is enabled. - Clicking on "cancel" or outside the panel, cancels the operation and makes the panel disappear. **Layout** The layout is based on three different sizes (16px, 8px, and 4px) keeping a 2x proportion. 16px is used as font-size. The rest of the distances is illustrated below: {F8013656} # Quick links menu {F8017091, size=full} **Behaviour** {F8017453} - Clicking on the "Quick links" button, shows the list of quick links. Clicking on the button again or anywhere outside the list closes the list. - Clicking on a list item will load the associated filters. - Clicking on the "..." menu will lead to more options for the item (more on this later). - Items on the list are hovered with whichever is the standard color (there are separate #ui-standardization discussions on whether it should be grey or blue). - The "..." icon is initially in "Base20" dark grey (#54595d) color, changing to "Base10" (#222) when hovering its active area. **Layout** {F8017098} - The drop-down button should follow the standard layout for buttons with icons and indicators (check "ButtonWidget (icon)" and "ButtonWidget (indicator)" in the [[ https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop | widget demo ]] ) {F8017101} - Menu items use an 8px space padding around the content (text in 14px font size, and "accent50" blue #36c color). - The "more" menu ("...") has an active area bigger than the image in order to avoid accidental clicks. - Default filter shows the pin icon next to the "more" menu.

This is about users being able to save filter selections for themselves; the task for defining saved filters wiki-wide is {T164548} # Save filters dialog {F8013644, size = full} **Behaviour** {F8013650} - Initially the dialog gets the input focus to its input filed showing a placeholder. - When the input field is empty, the main action is disabled. - When the input field has content, the main action is enabled. - Clicking on "cancel" or outside the panel, cancels the operation and makes the panel disappear. **Layout** The layout is based on three different sizes (16px, 8px, and 4px) keeping a 2x proportion. 16px is used as font-size. The rest of the distances is illustrated below: {F8013656} # Quick links menu {F8017091, size=full} **Behaviour** {F8017453} - Clicking on the "Quick links" button, shows the list of quick links. Clicking on the button again or anywhere outside the list closes the list. - Clicking on a list item will load the associated filters. - Clicking on the "..." menu will lead to more options for the item (more on this later). - Items on the list are hovered with whichever is the standard color (there are separate #ui-standardization discussions on whether it should be grey or blue). - The "..." icon is initially in "Base20" dark grey (#54595d) color, changing to "Base10" (#222) when hovering its active area. **Layout** {F8017098} - The drop-down button should follow the standard layout for buttons with icons and indicators (check "ButtonWidget (icon)" and "ButtonWidget (indicator)" in the [[ https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop | widget demo ]] ) {F8017101} - Menu items use an 8px space padding around the content (text in 14px font size, and "accent50" blue #36c color). - The "more" menu ("...") has an active area bigger than the image in order to avoid accidental clicks. - Default filter shows the pin icon next to the "more" menu. # Quick links options menu {F8017878, size=full} **Behaviour** - When clicking the "..." option for a quick link, the contents of the quick links panel change to show the options for the current quick link. - A header is shown with the name of affected quick link, the options provided and a way to return to the list. **Layout** {F8017817} - Items in the list use 8px as spacing unit with a 16px icon. - The header uses a light grey as background and a separation line at the bottom. - The last option is the action to return to the list, also with a line separator.

This is about users being able to save filter selections for themselves; the task for defining saved filters wiki-wide is {T164548} # Save filters dialog {F8013644, size = full} **Behaviour** {F8013650} - Initially the dialog gets the input focus to its input filed showing a placeholder. - When the input field is empty, the main action is disabled. - When the input field has content, the main action is enabled. - Clicking on "cancel" or outside the panel, cancels the operation and makes the panel disappear. **Layout** The layout is based on three different sizes (16px, 8px, and 4px) keeping a 2x proportion. 16px is used as font-size. The rest of the distances is illustrated below: {F8013656} # Quick links menu {F8017091, size=full} **Behaviour** {F8017453} - Clicking on the "Quick links" button, shows the list of quick links. Clicking on the button again or anywhere outside the list closes the list. - Clicking on a list item will load the associated filters. - Clicking on the "..." menu will lead to more options for the item (more on this later). - Items on the list are hovered with whichever is the standard color (there are separate #ui-standardization discussions on whether it should be grey or blue). - The "..." icon is initially in "Base20" dark grey (#54595d) color, changing to "Base10" (#222) when hovering its active area. **Layout** {F8017098} - The drop-down button should follow the standard layout for buttons with icons and indicators (check "ButtonWidget (icon)" and "ButtonWidget (indicator)" in the [[ https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr-desktop | widget demo ]] ) {F8017101} - Menu items use an 8px space padding around the content (text in 14px font size, and "accent50" blue #36c color). - The "more" menu ("...") has an active area bigger than the image in order to avoid accidental clicks. - Default filter shows the pin icon next to the "more" menu. # Quick links options menu {F8017878, size=full} **Behaviour** - When clicking the "..." option for a quick link, the contents of the quick links panel change to show the options for the current quick link. - A header is shown with the name of affected quick link, the options provided and a way to return to the list. **Layout** {F8017817} - Items in the list use 8px as spacing unit with a 16px icon. - The header uses a light grey as background and a separation line at the bottom. - The last option is the action to return to the list, also with a line separator.