View Issue Details

IDProjectCategoryView StatusLast Update
0007234Talerwallet (WebExtension)public2023-09-23 15:09
Reportersebasjm Assigned Tosebasjm  
PrioritynormalSeverityfeatureReproducibilityalways
Status closedResolutionwon't fix 
Product Versiongit (master) 
Target Version0.9.3Fixed in Version0.9.3 
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

sebasjm

2023-08-02 18:35

developer   ~0020396

too much effort for not good benefit, aboring

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
2023-02-19 23:55 Florian Dold Product Version git (master) =>
2023-02-19 23:55 Florian Dold Target Version git (master) => 0.9.4
2023-04-13 20:37 Florian Dold Category wallet (WebExtensions) => wallet (WebExtension)
2023-08-02 18:35 sebasjm Status assigned => resolved
2023-08-02 18:35 sebasjm Resolution open => won't fix
2023-08-02 18:35 sebasjm Note Added: 0020396
2023-09-03 14:48 Christian Grothoff Product Version => git (master)
2023-09-03 14:48 Christian Grothoff Fixed in Version => 0.9.3
2023-09-03 14:48 Christian Grothoff Target Version 0.9.4 => 0.9.3
2023-09-23 15:09 Christian Grothoff Status resolved => closed