Difference between revisions of "Dropdown"

From Wikidocumentaries
Jump to navigation Jump to search
(Different menus)
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
Menus are just being adopted, many of these ideas can change. The dropdown menu is used in different places with slight variations.
+
The dropdown menu is used in different places with slight variations.
  
 
* The search pulldown in the main toolbar
 
* The search pulldown in the main toolbar
* The action pulldowns in section headers
+
* The pulldowns in section headers
 
* The image action pulldowns over images
 
* The image action pulldowns over images
  
Line 13: Line 13:
 
===Different menus===
 
===Different menus===
 
* Basic menu with selectable rows
 
* Basic menu with selectable rows
* Persistent menu for nested elements
 
 
* Settings panel is a flyout menu. It needs to stay visible and not disappear with mouseout.
 
* Settings panel is a flyout menu. It needs to stay visible and not disappear with mouseout.
 +
 +
===Persistent menu for nested elements===
 
<gallery mode=slideshow>
 
<gallery mode=slideshow>
 +
Image romove reasons.png|Persistent menu for nested elements Step 1
 
Image Remove reasons menu 1.1.png|Persistent menu for nested elements Step 2
 
Image Remove reasons menu 1.1.png|Persistent menu for nested elements Step 2
 
Image Remove reasons menu 1.2.png|Persistent menu for nested elements Step 3
 
Image Remove reasons menu 1.2.png|Persistent menu for nested elements Step 3
Line 28: Line 30:
 
===Other controls===
 
===Other controls===
 
* Long result lists can be displayed with a scrollbar
 
* Long result lists can be displayed with a scrollbar
 +
 +
{{design-nav}}

Latest revision as of 11:16, 26 August 2020

The dropdown menu is used in different places with slight variations.

  • The search pulldown in the main toolbar
  • The pulldowns in section headers
  • The image action pulldowns over images

Basic structure

  • The menu is displayed by an icon in the toolbar
  • On hover it is displayed negative.
    • On toolbars the icon is black, negative is a white icon in black background. The background is 100% height of the containing toolbar (40x40px).
    • On an image the icon is white, negative is black on white square 30x30px.

Different menus

  • Basic menu with selectable rows
  • Settings panel is a flyout menu. It needs to stay visible and not disappear with mouseout.

Persistent menu for nested elements

Different rows

  • Title row, same for all menus
  • Row with a submenu or a link to a modal or a tool is displayed with a caret pointing right at the end of the menu item.
  • Subselection inside dropdown row is ore instant.
  • End row: Create item, show more, show all. One or more per row.

Other controls

  • Long result lists can be displayed with a scrollbar


Navigation

About Technology Design Content modules Tool pages Projects
Status

Wikidocumentaries blog

Wikidocumentaries demo

Phabricator project

Facebook group

GitHub repository

Translation in TranslateWiki

Wikidocumentaries Slack

Setting up dev environment

Resources

Translations

Languages

Using Wikibase

Federation with Wikidata

APIs

Linking

Media metadata

Properties to content

User registration

Licensing

Page types

Landing page

Search page

Topic page

User page

Organisation page

Project page

Tool page

Tasks

Components

Main toolbar and footer

Search

Faceting

Topic page header

Content module

Dropdown

Modal

Icons

Active modules

Article

Family tree

Gallery

Historical map

Images

Image viewer

Infobox

Map

Module ideas

Audio/Video

Bibliography

Correspondence

Discussion

Graph

Name

Newspaper articles

Testimonials

Timeline

Visualizations

Wikidocumentary

3D

Visual editor

Query tool

QuickStatements

Open Refine

Creating topics

Uploading images

Geolocating tool

Metadata editor

Rectifying maps

Transcription

Annotation tool

Central Park Archives

Convent Quarter

Wikisource