This ticket tells you how to create three basic UI elements that will enable users to download reports (in one of two formats) and get feedback when reports are in the process of being updated or downloaded. The elements are:
- A Download menu
- A Popup format selector
- An animating 'Working" indicator
- Pages these are found on: These three elements will be available on two pages: the Event Summary page and the All Edits page.
- Highly related ticket: This ticket is about creation of the UI elements only. How these elements integrate with and control the Updating and Downloading processes is described in T213470
- Here is a prototype that shows some of these tools in action (the mockup is not 100% up to date): to see the download sequence select Pages Improved
Download menu—labeling and behavior
The download menu enables users to select from among various reports on offer.
- Download button label "Download reports" [with a downward-facing menu triangle]
- Download button states 1) available= blue 2) hover =a darker shade of blue, 3) click= an even darker shade of blue
- Download Menu contents The menu will eventually contain 6 or 7 reports. To begin with it will contain three reports, as follows:
- Download Menu states 1) available = white background, 2) hover = menu item buttons turn gray (use the available Bootstrap style), 3) unavailable = menu item text grayed out and no hover
|The Download menu|
Popup Selector—labeling and behavior
The Popup Format Selector appears after a user has requested a report download and allows the user to select a format.
- Title: the popup has a title in the following format: 'Reportname' report (e.g., 'Pages improved' report) [yes, please include the single quotes]
- Instruction text: Instruction text in the middle area reads: Please select a format for the report
- Button labels:
- Get Wikitext
- Download CSV
- Timestamp shows the same time as on the page (as described in T213470 ) and is in same format: Last updated yyyy-mm-dd hh:mm (timezone)
- Button hover: Buttons turn a darker shade of gray
- X function the X in the upper-right corner of the dialog closes the panel and aborts the download.
|The Popup Selector menu|
Animated 'Working' Indicator—labeling and behavior
- Placement: The Indicator appears in the position of the Update button. It will appear to users to be a state of that button.
- Label: the label of the Update button changes to "Updating..."
- Button state when the Working indicator is displayed, the Update button is unavailable.
- Animation: a gif of the three-dot animation can fe found at https://phabricator.wikimedia.org/F27853296
|Animated 'Working' Indicator|