View Issue Details

IDProjectCategoryView StatusLast Update
0007234Talerwallet (WebExtensions)public2022-04-25 17:24
Reportersebasjm Assigned Tosebasjm  
PrioritynormalSeverityfeatureReproducibilityalways
Status assignedResolutionopen 
Product Versiongit (master) 
Target Versiongit (master) 
Summary0007234: material design implementation
DescriptionWe want the WebExtension to have the look and feel similar to the android app so the user can use and switch between apps smoothly, also design can be simpler.

For that we took https://mui.com/ as reference implementation of https://material.io/, this issue will help us track the implementation in taler web extension. The implementation will be based in css and try to use the less javascript possible. Also, since this is not a library implementation component may not be as flexible and complex as in react mui.

Already working implemented components: Stack, Grid, TextField, Alert, Button, Divider, Grid, Paper, Typography.

Working in progress:
     - Select:
         - implemenation: https://mui.com/material-ui/react-select/
         - definitions: https://material.io/components/menus#usage

Next in the list, in order of priority:
     - Checkbox:
         - implemenation: https://mui.com/material-ui/react-checkbox/
         - definitions: https://material.io/components/checkboxes
     - Radio:
         - implementation: https://mui.com/material-ui/react-radio-button/
         - definitions: https://material.io/components/radio-buttons
     - Backdrop:
         - implementation: https://mui.com/material-ui/react-backdrop/
         - definition: https://material.io/components/backdrop
     - Floatin action button
         - implementation: https://mui.com/material-ui/react-floating-action-button/
         - definition: https://material.io/components/buttons-floating-action-button
     - Switch
         - implementation: https://mui.com/material-ui/react-switch/
         - definition: https://material.io/components/switches
     - List
         - implementation: https://mui.com/material-ui/react-list/
         - definition: https://material.io/components/switches
     - Table
         - implementation: https://mui.com/material-ui/react-table/
         - definition: https://material.io/components/data-tables
     - Date picker
         - implementation: https://mui.com/x/react-date-pickers/getting-started/
         - definitions: https://material.io/components/date-pickers https://material.io/components/time-pickers
     - Pagination: navigation throught large results
         - implementation: https://mui.com/material-ui/react-pagination/
     - Tabs: navigation
         - implementation: https://mui.com/material-ui/react-tabs/
         - definition: https://material.io/components/tabs
        
Nice to have:
     - Autocomplete:
         - implementation: https://mui.com/material-ui/react-autocomplete/
     - Accordion
         - implementation: https://mui.com/material-ui/react-accordion/
         - definition:
     - Tooltip: inplace information about actions
         - implementation: https://mui.com/material-ui/react-tooltip/
     - Dialog:
         - implementation: https://mui.com/material-ui/react-dialog/
         - definition: https://material.io/components/dialogs
     - Progress: for loading pages
         - implementation: https://mui.com/material-ui/react-progress/
         - definition:https://material.io/components/progress-indicators
     - Skeleton: for loading waiting step
         - implementation: https://mui.com/material-ui/react-skeleton/
         - definition:
     - Snackbar: for temporal notification
         - implementation: https://mui.com/material-ui/react-snackbar/
         - definition:https://material.io/components/snackbars

All of these components need to:
 - check the ARIA requirements https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA
 - have some examples rendered as stories
 - styles implemented in CSS using Linaria CSS
 - tested in Firefox, Chrome, Iceweasel, Safari
TagsNo tags attached.

Activities

There are no notes attached to this issue.

Issue History

Date Modified Username Field Change
2022-04-25 17:24 sebasjm New Issue
2022-04-25 17:24 sebasjm Status new => assigned
2022-04-25 17:24 sebasjm Assigned To => sebasjm