diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:13:10 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:14:10 -0300 |
commit | 2150f3d96b25772dd608e245cd3508f857478c5b (patch) | |
tree | 7f449ec4df0f90c46774d1934ebee2eabb52cec7 /packages/taler-wallet-webextension/src/components | |
parent | 60a50babd14de6efbe16d9b427af85acc9da76e9 (diff) | |
download | wallet-core-2150f3d96b25772dd608e245cd3508f857478c5b.tar.xz |
grid implementation
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
3 files changed, 101 insertions, 12 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx new file mode 100644 index 000000000..136302166 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -0,0 +1,54 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { Banner } from "./Banner"; +import { Fragment, h } from "preact"; + +export default { + title: "mui/banner", + component: Banner, +}; + +function Wrapper({ children }: any) { + return ( + <div + style={{ + display: "flex", + backgroundColor: "lightgray", + padding: 10, + width: "100%", + // width: 400, + // height: 400, + justifyContent: "center", + }} + > + <div style={{ flexGrow: 1 }}>{children}</div> + </div> + ); +} + +export const BasicExample = () => ( + <Fragment> + <Wrapper> + <Banner /> + </Wrapper> + </Fragment> +); diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 6ff7b1019..f6af81184 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -1,33 +1,58 @@ import { h, Fragment, VNode } from "preact"; import { Divider } from "../mui/Divider"; -import { Button } from "./styled/index.js"; +import { Button } from "../mui/Button"; import { Typography } from "../mui/Typography"; import { Avatar } from "../mui/Avatar"; import { Grid } from "../mui/Grid"; import { Paper } from "../mui/Paper"; +import { Icon } from "./styled"; +import settingsIcon from "../../static/img/settings_black_24dp.svg"; +// & > a > div.settings-icon { +// mask: url(${settingsIcon}) no-repeat center; +// background-color: white; +// width: 24px; +// height: 24px; +// margin-left: auto; +// margin-right: 8px; +// padding: 4px; +// } +// & > a.active { +// background-color: #f8faf7; +// color: #0042b2; +// font-weight: bold; +// } +// & > a.active > div.settings-icon { +// background-color: #0042b2; +// } -function SignalWifiOffIcon(): VNode { - return <Fragment />; +function SignalWifiOffIcon({ ...rest }: any): VNode { + return <Icon {...rest} />; } -function Banner({}: {}) { +export function Banner({}: {}) { return ( <Fragment> - <Paper elevation={0} /*className={classes.paper}*/> - <Grid container wrap="nowrap" spacing={16} alignItems="center"> - <Grid item> - <Avatar /*className={classes.avatar}*/> - <SignalWifiOffIcon /> + <Paper elevation={3} /*className={classes.paper}*/> + <Grid + container + // wrap="nowrap" + // spacing={10} + alignItems="center" + columns={3} + > + <Grid item xs={1}> + <Avatar> + <SignalWifiOffIcon style={{ backgroundColor: "red" }} /> </Avatar> </Grid> - <Grid item> + <Grid item xs={1}> <Typography> You have lost connection to the internet. This app is offline. </Typography> </Grid> </Grid> - <Grid container justify="flex-end" spacing={8}> - <Grid item> + <Grid container justifyContent="flex-end" spacing={8} columns={3}> + <Grid item xs={1}> <Button color="primary">Turn on wifi</Button> </Grid> </Grid> diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index a5ed64a83..80bfaa549 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -826,6 +826,16 @@ export const NavigationHeader = styled.div` } `; +export const Icon = styled.div` + mask: url(${settingsIcon}) no-repeat center; + background-color: gray; + width: 24px; + height: 24px; + margin-left: auto; + margin-right: 8px; + padding: 4px; +`; + const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`; export const NiceSelect = styled.div` |