[CONTEDIT-73] Implement visual design for image block Created: 24/Mar/17  Updated: 24/Jul/17  Resolved: 21/Jul/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Cedric Reichenbach
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File embed_block.png     PNG File image_block.png     PNG File video_asset_block.png     PNG File video_embed_block.png    
Issue Links:
Relates
relates to CONTEDIT-122 Implement visual design for video block Closed
relates to CONTEDIT-123 Implement visual design for embed url... Closed
relates to CONTEDIT-127 Implement visual design for MultiValu... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Content Editor fine-tuning
Sprint: Basel 103, Basel 104, Basel 105
Story Points: 3

 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

Image:

  • input fields with a button (i.e. select new…) are dynamic in width (to avoid that the button stands alone at the right border)
  • buttons are grey (#E0E0E0) and slightly rounded (same as "+" button)
  • change the button label from 'select new' to '+ browse'
  • image preview has new size (height 210px / width flexible) and background (transparent stripes, size: 870x210px)
  • hide file info
  • re-order the sequence of the fields as in the mockup
  • 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


 Comments   
Comment by Anja von Gunten [ 24/May/17 ]

Recommended to split this ticket into 4 separate tickets.

Comment by Mikaël Geljić [ 28/Jun/17 ]

As per our discussion w/ apchelintcev, mmichel and sang.ngo, we came to the following set of tasks. It's a bit orthogonal to the different blocks, because they share most part of the visual design. We leave it up to Maxime and Sang to sync there.

Layout

[ ] Position of captions
[ ] General background, paddings

Components

[ ] Simple text field (bg, borders, paddings, hover/focus states)
[ ] Input prompt - seemingly content editor allows it (TextFieldDef doesn't)

  • info.magnolia.editor.app.field.PlaceholderTextFieldDefinition

[ ] Link fields - or just button style (grey, boxy, rounded corners, normal case)
[ ] Combo boxes
[ ] Horizontal layout for multi-select OptionGroup?
[ ] Support for video previews (via dam-preview module?) into link-field previews?

Previews

[ ] Preview for linkField (PreviewComponent)

  • info.magnolia.ui.form.field.definition.ContentPreviewDefinition#contentPreviewClass

[ ] Preview for embeds (custom, via link-unfurl module)

Generated at Mon Feb 12 00:16:48 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.