From 6dbf70ffbbc6459aaf375568a9079c1b126e7db3 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Sat, 12 Nov 2022 19:16:08 +0000 Subject: [PATCH] Remove global styles. --- .../pane/icon-picker/image-icon-tab/index.tsx | 4 +- .../pane/icon-picker/image-icon-tab/styled.ts | 29 +++++ .../pane/keyboard-shortcut-help/index.tsx | 5 +- .../pane/keyboard-shortcut-help/styled.ts | 35 ++++++ .../src/components/warning-dialog/index.tsx | 23 ++-- .../src/components/warning-dialog/styled.ts | 39 +++++++ packages/editor/src/global-styled.css | 102 ------------------ 7 files changed, 118 insertions(+), 119 deletions(-) create mode 100644 packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/styled.ts create mode 100644 packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/styled.ts diff --git a/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx b/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx index eb8e57a0..5a81affc 100644 --- a/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx +++ b/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx @@ -3,6 +3,7 @@ import React, { ReactElement } from 'react'; import iconGroups from './iconGroups.json'; import { SvgImageIcon } from '@wisemapping/mindplot'; import NodeProperty from '../../../../../classes/model/node-property'; +import { SvgIcon } from './styled'; type IconImageTab = { iconModel: NodeProperty; @@ -14,8 +15,7 @@ const IconImageTab = ({ iconModel, triggerClose }: IconImageTab): ReactElement = {iconGroups.map((family, i) => ( {family.icons.map((icon: string) => ( - { diff --git a/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/styled.ts b/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/styled.ts new file mode 100644 index 00000000..4ff141d1 --- /dev/null +++ b/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/styled.ts @@ -0,0 +1,29 @@ +/* + * Copyright [2021] [wisemapping] + * + * Licensed under WiseMapping Public License, Version 1.0 (the "License"). + * It is basically the Apache License, Version 2.0 (the "License") plus the + * "powered by wisemapping" text requirement on every single page; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the license at + * + * http://www.wisemapping.org/license + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import styled from 'styled-components'; + +export const SvgIcon = styled.img` + width: 25px; + height: 25px; + margin-left: 4px; + margin-top: 3px; + cursor: pointer; + &:hover { + background-color: #efefef; + } +`; diff --git a/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx b/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx index d0393b43..a8433508 100644 --- a/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx +++ b/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx @@ -17,10 +17,11 @@ */ import React, { ReactElement } from 'react'; import { FormattedMessage } from 'react-intl'; +import { ShortcutsContainer } from './styled'; const KeyboardShorcutsHelp = (): ReactElement => { return ( -
+ @@ -247,7 +248,7 @@ const KeyboardShorcutsHelp = (): ReactElement => {
-
+ ); }; export default KeyboardShorcutsHelp; diff --git a/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/styled.ts b/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/styled.ts new file mode 100644 index 00000000..7f945237 --- /dev/null +++ b/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/styled.ts @@ -0,0 +1,35 @@ +/* + * Copyright [2021] [wisemapping] + * + * Licensed under WiseMapping Public License, Version 1.0 (the "License"). + * It is basically the Apache License, Version 2.0 (the "License") plus the + * "powered by wisemapping" text requirement on every single page; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the license at + * + * http://www.wisemapping.org/license + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import styled from 'styled-components'; + +export const ShortcutsContainer = styled.div` + font-size: 13px; + width: 100%; + & td { + padding: 3px; + white-space: nowrap; + } + & th { + padding: 5px; + white-space: nowrap; + } + & th { + background-color: #000000; + color: #ffffff; + } +`; diff --git a/packages/editor/src/components/warning-dialog/index.tsx b/packages/editor/src/components/warning-dialog/index.tsx index 50cd3ea8..2083baa9 100644 --- a/packages/editor/src/components/warning-dialog/index.tsx +++ b/packages/editor/src/components/warning-dialog/index.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ import React, { useState } from 'react'; -import { Notifier } from './styled'; +import { CloseButton, InfoDialog, InfoDialogContent, Notifier } from './styled'; import { useIntl } from 'react-intl'; import CloseDialogSvg from '../../../images/close-dialog-icon.svg'; @@ -29,7 +29,6 @@ export type FooterPropsType = { const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactElement => { const intl = useIntl(); - const [dialogClass, setDialogClass] = useState('tryInfoPanel'); let msgExt, msg: string; if (capability.mode !== 'viewonly' && capability.mode !== 'showcase' && capability.isMobile) { @@ -68,30 +67,28 @@ const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactEle }); } - // if the toolbar is present, the alert must not overlap - const alertTopAdjustmentStyle = 'tryInfoPanelWithToolbar'; - + const [open, setOpen] = useState(msgExt || message); return ( <> - {(msgExt || message) && ( -
-
-
+ {open && ( + + + -
+ {msgExt &&

{`${msg} ${msgExt}`}

} {message &&

{message}

} -
-
+ + )} ); diff --git a/packages/editor/src/components/warning-dialog/styled.ts b/packages/editor/src/components/warning-dialog/styled.ts index 8f1ca71b..d072f12e 100644 --- a/packages/editor/src/components/warning-dialog/styled.ts +++ b/packages/editor/src/components/warning-dialog/styled.ts @@ -47,3 +47,42 @@ export const Notifier = styled.div` bottom: 10px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; `; + +export const CloseButton = styled.div` + position: absolute; + top: 5px; + right: 5px; + + button { + cursor: pointer; + border-style: hidden; + background-color: transparent; + padding: 0px; + } + + button img { + width: 18px; + height: 18px; + filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%); + } +`; + +export const InfoDialog = styled.div` + position: absolute; + text-align: center; + top: 70px; + left: 0; + right: 0; + background-color: white; + border: solid 2px #ffa800; + margin: auto; + border-radius: 9px; + width: 80%; +`; + +export const InfoDialogContent = styled.div` + padding-top: 10px; + padding-bottom: 10px; + padding-left: 5px; + padding-right: 5px; +`; diff --git a/packages/editor/src/global-styled.css b/packages/editor/src/global-styled.css index 141d3d4e..1befbfd4 100644 --- a/packages/editor/src/global-styled.css +++ b/packages/editor/src/global-styled.css @@ -1,11 +1,6 @@ /********************************************************************************/ /* Header & Toolbar Styles */ /********************************************************************************/ -html { - /* avoid bootstrap overriding font-size and breaking Mui */ - font-size: initial; -} - body { width: 100vw; height: 100vh; @@ -18,105 +13,8 @@ body { width: 100%; height: 100%; } -.panelIcon { - width: 25px; - height: 25px; - margin-left: 4px; - margin-top: 3px; - cursor: pointer; -} - -.panelIcon:hover { - background-color: #efefef; -} .wise-editor .popover { font-size: 13px; max-width: none; -} - -#keyboardTable { - font-size: 13px; - width: 100%; -} - -#keyboardTable td { - padding: 3px; - white-space: nowrap; -} - -#keyboardTable th { - padding: 5px; - white-space: nowrap; -} - -#keyboardTable th { - background-color: #000000; - color: #ffffff; -} - -.tryInfoPanel { - position: absolute; - text-align: center; - left: 0; - right: 0; - background-color: white; - border: solid 2px #ffa800; - margin: auto; - border-radius: 9px; - width: 80%; -} - -@media (min-width: 600px) { - .tryInfoPanel { - font-size: 15px; - } -} - -@media (max-width: 600px) { - .tryInfoPanel { - font-size: 13px; - } -} - -.tryInfoPanel .tryInfoPanelInner { - padding-top: 10px; - padding-bottom: 10px; - padding-left: 5px; - padding-right: 5px; -} - -.tryInfoPanel .tryInfoPanelInner .closeButton { - position: absolute; - top: 5px; - right: 5px; -} - -.tryInfoPanel .tryInfoPanelInner .closeButton button { - cursor: pointer; - border-style: hidden; - background-color: transparent; - padding: 0px; -} - -.tryInfoPanel .tryInfoPanelInner .closeButton button img { - width: 18px; - height: 18px; - filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%); -} - -.tryInfoPanelWithToolbar { - top: 75px; -} - -.tryInfoPanelWithoutToolbar { - top: 5px; -} - -.tryInfoPanelClosed { - display: none; -} - -.tryInfoPanel>p { - justify-content: center; } \ No newline at end of file