Uploaded image for project: 'Content Editor'
  1. Content Editor
  2. CONTEDIT-122

Implement visual design for video block

    XMLWordPrintable

Details

    • Improvement
    • Resolution: Done
    • Neutral
    • 1.0.6
    • 1.0.5
    • None
    • Saigon 102, Saigon 103, Saigon 104, Saigon 105, Saigon 106, Saigon 107
    • 5

    Description

      The visual design of content blocks image / video / embed need to be adapted to the new look of the Stories app style.

      General characteristics:

      • labels and form fields in general follow the same style as already implemented
      • minor color adjustment of edited fields and delete button as the following:
      • when a block is being edited the bg color is light blue 1 (#F3F7F9) and the bg of the active input field is light blue 2 (#DBE8EB)
      • the delete button has the same color as light blue 1 (#F3F7F9) so button and block visually belong together

      Video option 1 from asset:

      • input fields with a button (i.e. select new…) are dynamic in width
      • dropdowns have a fixed width (180px)
      • arrow button within the dropdown is grey (#E0E0E0) and slightly rounded (same as "+" button on the side)
      • selected item within the dropdown has a grey background (#E0E0E0)
      • checkboxes are horizontally aligned
      • hide file info
      • hide the placeholder for video preview (because in fact there is no default image preview for videos)
      • poster preview has new size and background (same as image preview, see above)
      • change the button label from 'select new' to '+ browse'
      • re-name labels as in the mockup

      Video option 2 from embed code:

      • text area for code is dynamic in height (same as lead text)
      • dropdowns have a fixed width (180px)
      • arrow button within the dropdown is grey (#E0E0E0) and slightly rounded (same as "+" button on the side)
      • selected item within the dropdown has a grey background (#E0E0E0)
      • re-name labels as in the mockup

      Mockup:
      Following mockups shows the design for each content type in sequence of the workflow (in comparison with the old design).

      Image Video option 1 from asset Video option 2 from embed code Embed URL

      Checklists

        Acceptance criteria

        Attachments

          1. embed_block.png
            embed_block.png
            662 kB
          2. image_block.png
            image_block.png
            850 kB
          3. video_asset_block.png
            video_asset_block.png
            1.37 MB
          4. video_embed_block.png
            video_embed_block.png
            400 kB

          Issue Links

            Activity

              People

                sang.ngo Sang Ngo Huu
                avongunten Anja von Gunten
                Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoD

                    Time Tracking

                      Estimated:
                      Original Estimate - 3d Original Estimate - 3d
                      3d
                      Remaining:
                      Remaining Estimate - 0d
                      0d
                      Logged:
                      Time Spent - 4.75d
                      4.75d