profile
viewpoint

Ask questionsMedia Library - Hover/Focus States and Actions

Feature description

When user hover / select a media element in sidebar, controls should appear to allow user to insert, set background and edit media data.

This ticket is blocked by ampproject/amp-wp#3851 ampproject/amp-wp#3859 ampproject/amp-wp#3856

Feature Brief - Epic: Media Gallery

Design


Acceptance criteria

Generic Element Panel States (Figma):

  1. While hovering over element nav bar options, hover states are active
  2. While hovering over the plus (+) icon next to Text in the element nav bar, it's own unique hover state is active
  3. While hovering over anywhere inside the pink area (see design) the scroll bar is shown.
  4. While hovering over the search field, the text cursor is shown
  5. While focused on the search bar, the text cursor is shown and the input field is white.
  6. While hovering over a text link use colour: #4285F4.
  7. Blue for the non selected state (#1A73E8)

Media Library:

  1. While hovering over the "All types" filter or clicking the dropdown arrow, the dropdown menu is shown (Dropdown was not done as party of Alpha see #1199)
  2. While hovering over a media file the more icon is shown. (See #354)
  3. While hovering over a video file, the video is played along with the more icon mentioned above. (video is playing on hover on Version 1.0.0-alpha)
  4. After clicking on the more icon a dropdown menu with options Edit and Delete are shown (See #354 for edit functionality)
  5. After clicking edit in the dropdown menu, a dialog is opened where the editor can edit the media metadata. THIS WILL BE HANDLED IN #354
  6. After clicking delete in the dropdown menu, the media file is removed from the library and the files below are shifted up

Implementation brief

QA testing instructions

  • <!-- One or more bullet points to describe how to test the implementation in QA. -->

Demo

  • <!-- A video or screenshots demoing the implementation. -->

Changelog entry

  • <!-- One sentence summarizing the PR, to be used in the changelog. -->
google/web-stories-wp

Answer questions pbakaus

What's the status here? I see @samitron7 assigned but AFAIK the designs exist?

useful!

Related questions

No questions were found.
Github User Rank List