From 75ef7aca44a76c2020ac7a41846960a49bf32914 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Mon, 27 Dec 2021 12:16:59 +0300 Subject: [PATCH] Revert "Removing material ui switcher" This reverts commit 6b9e0a090c7ff239fd7fbe071a16ff04448ab8c0. --- .../components/switch/form-switcher.tsx | 49 ++++++++++ src/renderer/components/switch/index.ts | 2 + src/renderer/components/switch/switcher.tsx | 89 +++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 src/renderer/components/switch/form-switcher.tsx create mode 100644 src/renderer/components/switch/switcher.tsx diff --git a/src/renderer/components/switch/form-switcher.tsx b/src/renderer/components/switch/form-switcher.tsx new file mode 100644 index 0000000000..14df95f676 --- /dev/null +++ b/src/renderer/components/switch/form-switcher.tsx @@ -0,0 +1,49 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import React from "react"; +import FormControlLabel, { FormControlLabelProps } from "@material-ui/core/FormControlLabel"; +import { makeStyles } from "@material-ui/styles"; + +const useStyles = makeStyles({ + root: { + margin: 0, + "& .MuiTypography-root": { + fontSize: 14, + fontWeight: 500, + flex: 1, + color: "var(--textColorAccent)", + }, + }, +}); + +export function FormSwitch(props: FormControlLabelProps) { + const classes = useStyles(); + + return ( + + ); +} diff --git a/src/renderer/components/switch/index.ts b/src/renderer/components/switch/index.ts index dca25e4ee1..6987ce5b38 100644 --- a/src/renderer/components/switch/index.ts +++ b/src/renderer/components/switch/index.ts @@ -19,4 +19,6 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ +export * from "./switcher"; +export * from "./form-switcher"; export * from "./switch"; diff --git a/src/renderer/components/switch/switcher.tsx b/src/renderer/components/switch/switcher.tsx new file mode 100644 index 0000000000..749e5134c9 --- /dev/null +++ b/src/renderer/components/switch/switcher.tsx @@ -0,0 +1,89 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import React from "react"; +import { createStyles, withStyles, Theme } from "@material-ui/core/styles"; +import Switch, { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch"; + +interface Styles extends Partial> { + focusVisible?: string; +} + +interface Props extends SwitchProps { + classes: Styles; +} + +export const Switcher = withStyles((theme: Theme) => + createStyles({ + root: { + width: 40, + height: 24, + padding: 0, + margin: "0 0 0 8px", + }, + switchBase: { + padding: 1, + paddingLeft: 4, + "&$checked": { + transform: "translateX(14px)", + color: "white", + "& + $track": { + backgroundColor: "#52d869", + opacity: 1, + border: "none", + }, + }, + "&$focusVisible $thumb": { + color: "#52d869", + border: "6px solid #fff", + }, + }, + thumb: { + width: 18, + height: 18, + marginTop: 2, + boxShadow: "none", + }, + track: { + borderRadius: 26 / 2, + backgroundColor: "#72767b", + opacity: 1, + transition: theme.transitions.create(["background-color", "border"]), + }, + checked: {}, + focusVisible: {}, + }), +)(({ classes, ...props }: Props) => { + return ( + + ); +});