View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0007234 | Taler | wallet (WebExtensions) | public | 2022-04-25 17:24 | 2023-02-19 23:55 |
| Reporter | sebasjm | Assigned To | sebasjm | ||
| Priority | normal | Severity | feature | Reproducibility | always |
| Status | assigned | Resolution | open | ||
| Target Version | 0.9.4 | ||||
| Summary | 0007234: material design implementation | ||||
| Description | We 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 | ||||
| Tags | No tags attached. | ||||
| 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 |
