Design checklist
To keep the admin suite pages aligned we follow the design checklist.
For each pages in admin suite it should comply to the checklist, if not we should document why or change the checklist to make this a default for the future.
Base checks
- All delete actions show a confomation modal(also modal in modal)
- List views should be fullwidth
- List should have as much filters as possible
- A save button is only enabled if there is a change on the page
- Modals should not open anthor modal(other then to confirm a delete)
List
graph LR
A1(Edit mode is on detail page)
A2(Edit mode is in a modal)
A3(There are checkboxes before the row)
A4(There is a delete icon in the row)
A5(The delete action is in the detail page)
A6(Place the 'translations' icon in the row)
Q1{Is the line clickable?}
Q2{Has the line an edit action?}
Q3{Is multi delete possible?}
Q4{Is the edit in a model?}
Q5{there is a translation<br>action on list row?}
Q1--->|Yes|A1
Q1-->|No|Q2-->|Yes|A2
Q3--->|Yes|A3
Q3-->|No|Q4-->|Yes|A4
Q4-->|No|A5
Q5--->A6
Detail page
graph LR
A1(The changeable fields are editible<br>The footer bar has the following buttons: Delete, Cancel and Save)
A2(The cards have an edit icon in the top right corner<br>The edit is in a modal<br>The footer bar has the following buttons: Delete and Cancel)
A3(Use the default tab design)
A4(Show the 'set translations' clickable link behind the field)
Q1{Is there only one card?}
Q2{Are there tabs used?}
Q3{Is there a translatable field?}
Q1-->|Yes|A1
Q1-->|No|A2
Q2-->|Yes|A3
Q3-->|Yes|A4