Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Templates ID'sAtoms, Molecules and OrganismsMVP RequirementsFeaturesDocumentationToDoComments

ID1 Colors




https://confluence.germanedge.com/x/XYC-AQ
https://wasp2-dev.myapp.de:444/live-style-guide/theming

  • Documentation
  • Final angular check

ID1 Typeface


https://confluence.germanedge.com/x/YoC-AQ
  • Documentation 
  • Final angular check

ID1 Icon


https://confluence.germanedge.com/x/_MYdAg
https://wasp2-dev.myapp.de:444/live-style-guide/icons
  1. Definition of Icon-Set for MVP
  2. Design of missing Icons
  3. Icon to Font
  4. Final angular check
  5. Documentation

ID2 Dashboard & basic components

Dashboard

  • Header
  • Contentarea

https://confluence.germanedge.com/x/7KMdAg
code is missing
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Header

  • Burger
  • Date & Datepicker
  • Product-Logo
  • Tool/App/Module Naming
  • Toolbar(Search-, Setting- & Notification Icon)

https://confluence.germanedge.com/x/JqQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: still struggling with date&datepicker in the header, we can filter but filter result is not shown there and as a user you can't see a filter has been used here. (did the test in dSFM)
→ we need the documentation of this end user tests. And yes, the filter result should be shown. But I think it is already.

Overlay

  • Content
    • detailed Design Grid description

https://confluence.germanedge.com/x/76MdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Floating Sidebar

  • Action Icon
  • Title
  • Link

https://confluence.germanedge.com/x/IKIdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Panel

  • Contentswitch
  • Content
  • Toolbar

https://confluence.germanedge.com/x/LaQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: Navigation is a must for Menu editor development, must be aligned towards that functional demand. But functional demands of Notifications are still too unclear to be handled, wouldn't be better to get this out of the MVP?

Inline Notification
  • Title
  • Subject
  • Link
  • Toolbar
  • Picture
  • Colorcode


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: an error and message handling when system is down, user can't log in ...
ID3 Boardlets & content components

Default Boardlet

  • boardlet
    • Content Bereich
      • detailed Design Grid description
    • Toolbar
      • Icons
    • Title
    • Datepicker on demand
  • tabs
    • Toolbar bottom with control extension


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: incorporate search and filter?

Dialog

  • Dialog
    • Form
      • Title
      • Content Bereich
      • Top Toolbar( only without Sidebar)
      • Bottom Toolbar( only without Sidebar)
        detailed Design Grid description 
    • Sidebar on demand
      • Title
      • Content Bereich
      • detailed Design Grid description
      • Top Toolbar 
      • Bottom Toolbar
    • Info Field


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Cards

  • Setting Card
    • Title
    • Subtitle
    • Toolbar
    • Drilldown
    • Content
    • Icons
  • Summary Card
    • Setting card which has no drilldown
  • general Features
    • single/ multi selectable


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check


Overflow Menu

  • Content
    • Group
    • Links
    • Button
  • Open Direction
  • Animation*
  • Parent ui-element/extension am button
  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check
Modal
  • Title
  • Subtitle
  • Link
  • Button


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check

ID4 Tables components
  1. Table header
  2. Table content
  3. Pagination
  4. controlbar & controlelements
  • global search über alle spalten der Tabelle
  • spalten basierte suche/filter
    • Filterkriterien festlegen (gt, lt)
    • Filterkriterium sichtbar und deaktivierbar
  • Process bar
  • Toolbar top
  • Toolbar bottom
  • Paginierung
  • Buttons
  • pagination
  • global search over all columns
  • sorting per column
  • filtering per column
  • define filter property
  • select a row/ multiple rows
  • select all rows
  • show state of row/ rows

  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check

Wannes:

  • column picker/chooser (an icon often on top of the table)
  • tree-table
  • error indicator
  • actions/information per record
  • scrollbar right and under
  • paging and pagination
  • simple search (single input)
  • advanced search (multiple inputs)
  • filter on table content

Informational: could be re-used:

  • progress bar in use X-series (don't restyle them, are in use already)
  • process bar in use X-series (don't restyle them, are in use already)
ID5 Buttons & control components
  1. Buttons
  • Text
  • Icons
  • Switch
  • Text/Icon
  • Text/Text
  • Icon/Text/Icon
  • Button Style
  • Button Size
  • Button Type


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check


Checkbox
  • Icon Button
  • Text Link


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Radio
  • Icon Button
  • Text Link


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check

ID6 Link components

Link

  • Icon Button
  • Text Link
  • Icon

ID6 Links Assets
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Overflow Menu

  • Content
    • Group
    • Links
    • Button
  • Open Direction
  • Animation*
  • Parent ui-element/extension am button


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check


Tree

  • Expand icon
  • Sub- or Checkbox Icon
  • Text Link
  • More Icon Button


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check

ID7 Input & Dropdown components
  1. Default input
  2. Specal input
  3. Default dropdown
  4. Special dropdown
  5. Dropdown Links
  6. Datepicker/Timepicker



  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check


Tags
  • Icon Button
  • Text Link
  • Icon
  • Colorcode




  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check


Input
  • Label field
  • Input field
    • Placeholder 
  • Info Container
    • Icon
    • Info Field
  • Input Style
    • Validation
    • State
    • Size


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Dropdown
  • Label field
  • Input field
  • Icon Button
  • Content(Overflow Menu*)
    • Group
    • Button
  • Input Style
    • Validation
    • State
    • Size


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Multiselect
  • Label field
  • Input field
  • Icon Button
  • Tag
  • Content(Overflow Menu*)
    • Group
    • Button
  • Input Style
    • Validation
    • State
    • Size


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Datepicker
  • Input Field
  • Icon 
  • Toolbar Bottom
  • Contentswitch
  • Content
    • Title
    • Form
    • Sidebar
  • Input Style
    • Validation
    • State (Dropdown/Link)
  • select a date
  • select a time
  • select a date/time range
  • select a commonly used date range
  • manual date input
  • manual time input

  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check

ID8

Tooltip

  • Rookiemode Tooltip*
    • Content
  • Tooltip
    • Content
    • Whitelist/Blacklist


  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check
Wannes: i think tooltip is MVP while rookiemode is not

Graphics

Karma
  • SVG Images
    • bad
    • neutral
    • bad


  • Documentation
  • Final angular check

ChartsPie Chart

  • Documentation
  • Final angular check


Bar Chart

  • Documentation
  • Final angular check


Doughnut Chart

  • Documentation
  • Final angular check


Line Chart

  • Documentation
  • Final angular check

...