Versions Compared

Key

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

...

→ All features which comes with DevExtreme ui-elements.
→ All features that have been identified by UX/UI research as urgently needed across companies.


UI-Elements

​

Templates ID'sAtoms, Molecules and OrganismsStatusMVP RequirementsDocumentationToDo

ID1 Colors


Status
subtletrue
colourGreen
titledone


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

  • Documentation
  • Final angular check
ID1 Typeface

Status
colourYellow
titleIn Progress


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

Status

subtle

true

colour

Green

Yellow
title

done

In Progress


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

    Dashboard

    Status
    colourYellow
    titleIn Progress

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

    Header

    Status
    subtletrue
    colour

    Yellow

    Green
    title

    In Progress

    done

    • 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

    Overlay

    Status
    colourYellow
    titleIn Progress

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

    Floating Sidebar

    Status
    colourYellow
    titleIn Progress

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

    Panel

    Status
    colourYellow
    titleIn Progress

    • Contentswitch
    • Content
    • Toolbar
    https://confluence.germanedge.com/x/LaQdAg
    Infobar
    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check

    Sandbox

    Status
    colourRed
    titleNot f. MVP

    Not MVP - must be discussed

    Status
    colourRed
    titleNot f. MVP


    Toast Notification

    Status
    colour

    Yellow

    Red
    title

    Not f. MVP

    • Icon
    • Title
    • Subtext
    • Link
    • Toolbar
    • Colorcode

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

    Inline Notification
    In ProgressSandbox

    Status
    colourYellow
    titleIn Progress

    Notification

    • Title
    • Subject
    • Link
    • Toolbar
    • Picture
    • Colorcode

    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check
    ID3 Boardlets & content components

    Default Boardlet

    Status
    subtletrue
    colourGreen
    titledone

    • 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
    plus Designgrid
    1. Final angular check

    Dialog

    Status
    subtletrue
    colourGreen
    titledone

    • 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

    Status
    colourYellow
    titleIn Progress

    • Content Card
      • Title
      • Subtitle
      • Toolbar
      • Drilldown
      • Content
    • Info Card*
      • Title
      • Subtitle
      • Content



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

    Overflow Menu

    Status
    colourYellow
    titleIn Progress

    • 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

    Tooltip

    Status
    colourYellow
    titleIn Progress

    • 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

    Tags

    Status
    colourYellow
    titleIn Progress

    • 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

    Modal

    Status
    colourYellow
    titleIn Progress

    • 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

    Status
    colourYellow
    titleIn Progress

    • 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

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

    Status
    colourYellow
    titleIn Progress

    • 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
    ID6 Link components

    Link

    Status
    colourYellow
    titleIn Progress

    • Icon Button
    • Text Link
    • Icon

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

    Tree

    Status
    colourYellow
    titleIn Progress

    • 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. Specal dropdown
    5. Dropdown Links
    6. Datepicker/Timepicker

    Status
    colourYellow
    titleIn Progress



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

    Radio

    Status
    colourYellow
    titleIn Progress

    • Icon Button
    • Text Link

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

    Checkbox

    Status
    colourYellow
    titleIn Progress

    • Icon Button
    • Text Link

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

    Input

    Status
    colourYellow
    titleIn Progress

    • 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

    Status
    colourYellow
    titleIn Progress

    • 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

    Status
    colourYellow
    titleIn Progress

    • 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

    Status
    colourYellow
    titleIn Progress

    • Input Field
    • Icon 
    • Toolbar Bottom
    • Contentswitch
    • Content
      • Title
      • Form
      • Sidebar
    • Input Style
      • Validation
      • State (Dropdown/Link)

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

    Graphics

    Karma

    Status
    subtletrue
    colourGreen
    titledone

    • SVG Images
      • bad
      • neutral
      • bad

    • Documentation
    • Final angular check
    PicturesNews

    Status
    colourRed
    titleNot f. MVP

    Not MVP - must be discussed

    Status
    colourRed
    titleNot f. MVP

    ChartsGantt Chart

    Status
    colourRed
    titleNot f. MVP

    Not MVP - DevExtreme

    Status
    colourRed
    titleNot f. MVP


    Pie Chart

    Status
    colourYellow
    titleIn Progress


    • Documentation
    • Final angular check

    Bar Chart

    Status
    colourYellow
    titleIn Progress


    • Documentation
    • Final angular check

    Doughnut Chart

    Status
    colourYellow
    titleIn Progress


    • Documentation
    • Final angular check

    Line Chart

    Status
    colourYellow
    titleIn Progress


    • Documentation
    • Final angular check


    UX-Concepts

    Info

    List here all ux-concepts which are urgently needed for the MVP

    ...