vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-25 15:47:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove global styles.

Browse Source
This commit is contained in:
Paulo Veiga 2022-11-12 19:16:08 +00:00
parent 73788bcfe1
commit 6dbf70ffbb
7 changed files with 118 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx
View File

@ -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<string>;
@ -14,8 +15,7 @@ const IconImageTab = ({ iconModel, triggerClose }: IconImageTab): ReactElement =
{iconGroups.map((family, i) => (
<span key={i}>
{family.icons.map((icon: string) => (
<img
className="panelIcon"
<SvgIcon
key={icon}
src={SvgImageIcon.getImageUrl(icon)}
onClick={() => {

29
packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/styled.ts Normal file
View File

@ -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;
}
`;

5
packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx
View File

@ -17,10 +17,11 @@
*/
import React, { ReactElement } from 'react';
import { FormattedMessage } from 'react-intl';
import { ShortcutsContainer } from './styled';
const KeyboardShorcutsHelp = (): ReactElement => {
return (
<div id="keyboardTable">
<ShortcutsContainer>
<table>
<colgroup>
<col width="40%" />
@ -247,7 +248,7 @@ const KeyboardShorcutsHelp = (): ReactElement => {
</tr>
</tbody>
</table>
</div>
</ShortcutsContainer>
);
};
export default KeyboardShorcutsHelp;

35
packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/styled.ts Normal file
View File

@ -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;
}
`;

23
packages/editor/src/components/warning-dialog/index.tsx
View File

@ -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 (
<>
<Notifier id="headerNotifier"></Notifier>
{(msgExt || message) && (
<div className={dialogClass + ' ' + alertTopAdjustmentStyle}>
<div className="tryInfoPanelInner">
<div className="closeButton">
{open && (
<InfoDialog>
<InfoDialogContent>
<CloseButton>
<button
onClick={(e) => {
setDialogClass('tryInfoPanelClosed');
setOpen(false);
e.preventDefault();
e.stopPropagation();
}}
>
<img src={CloseDialogSvg} />
</button>
</div>
</CloseButton>
{msgExt && <p>{`${msg} ${msgExt}`}</p>}
{message && <p>{message}</p>}
</div>
</div>
</InfoDialogContent>
</InfoDialog>
)}
</>
);

39
packages/editor/src/components/warning-dialog/styled.ts
View File

@ -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;
`;

102
packages/editor/src/global-styled.css
View File

@ -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;
}