[CONTEDIT-122] Implement visual design for video block Created: 22/Jun/17  Updated: 07/Aug/17  Resolved: 04/Aug/17

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

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Sang Ngo Huu
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 4.75d
Original Estimate: 3d

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-127 Implement visual design for MultiValu... Closed
relates to CONTEDIT-73 Implement visual design for image block Closed
relates to CONTEDIT-123 Implement visual design for embed url... Closed
duplicate
is duplicated by CONTEDIT-138 Editor crashes when trying to load a ... Closed
relation
is related to CONTEDIT-136 Option to adjust LinkField width 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: Saigon 102, Saigon 103, Saigon 104, Saigon 105, Saigon 106, Saigon 107
Story Points: 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


 Comments   
Comment by Philip Mundt [ 24/Jul/17 ]

When saving a video block and re-opening it, it fails with an exception:

Caused by: com.vaadin.data.util.converter.Converter$ConversionException: Unable to convert value of type java.util.LinkedList to presentation type interface java.util.Set. No converter is set and the types are not compatible.
	at com.vaadin.data.util.converter.ConverterUtil.convertFromModel(ConverterUtil.java:118)
	at com.vaadin.ui.AbstractField.convertFromModel(AbstractField.java:736)
	at com.vaadin.ui.AbstractField.convertFromModel(AbstractField.java:721)
	at com.vaadin.ui.AbstractField.setPropertyDataSource(AbstractField.java:657)
	... 127 more

Pretty sure it has to do with the changes in its configuration...(my gut-feeling tells me OptionGroupFieldDefinition and/or multiselect=true).

Additionally, no adjustements were made to any template. Pretty sure, that current state also doesn't work when rendering a video block (hint: various options were renamed to multivalued option called options).

Comment by Mikaël Geljić [ 24/Jul/17 ]

right, even if we get the transformation working, we might want to consider whether or not we must be backward-compatible with the storing strategy until then. (hint: custom transformer)

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