View Issue Details

IDProjectCategoryView StatusLast Update
0007234Talerwallet (WebExtension)public2023-09-23 13:09
Reportersebasjm Assigned Tosebasjm Resolution deadline
ImplementerReviewer 
Release signed byDeployed by 
VerifierCommunicator 
Data protection authority notification requiredNo  
CSIRT notification requiredNo  
Estimated effort (hours)Actual effort (hours)0 
Fast-trackNo
Work packagenone
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.

Required notifications

Address or linkRemarkAdded byNotifiedActions

Activities

sebasjm

2023-08-02 16:35

developer   ~0020396

too much effort for not good benefit, aboring

Issue History

Date ModifiedUsernameFieldChange
2022-04-25 15:24sebasjmNew Issue
2022-04-25 15:24sebasjmStatusnew => assigned
2022-04-25 15:24sebasjmAssigned To => sebasjm
2023-02-19 22:55Florian DoldProduct Versiongit (master) =>
2023-02-19 22:55Florian DoldTarget Versiongit (master) => 0.9.4
2023-04-13 18:37Florian DoldCategorywallet (WebExtensions) => wallet (WebExtension)
2023-08-02 16:35sebasjmStatusassigned => informing
2023-08-02 16:35sebasjmResolutionopen => won't fix
2023-08-02 16:35sebasjmNote Added: 0020396
2023-09-03 12:48Christian GrothoffProduct Version => git (master)
2023-09-03 12:48Christian GrothoffFixed in Version => 0.9.3
2023-09-03 12:48Christian GrothoffTarget Version0.9.4 => 0.9.3
2023-09-23 13:09Christian GrothoffStatusinforming => closed