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 three 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.
- **[[ https://phabricator.wikimedia.org/T213470 | 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
- **[[ https://prtksxna.github.io/wmf-prototype-gm/event.html | 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:
- Event summary [defined at T205561 and T206692]
- Pages created [defined at T205502 and T206058]
- All edits list [this is the existing "all data" report]
- **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**|
|{F28119032}|
=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)//
- As on the page, if the date is within the same calendar day as the download, omit the date, as follows: Last updated //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**|
|{F27266910}|
=Animated 'Working' Indicator, labeling and behavior
During Updating and Fetching processes (see T213136 and T213470), the 'Working' indicator tells users that their process is ongoing and not stalled.
- **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** |
|{F27855938 width=400}|