mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-21 22:27:56 +01:00
Remove global styles.
This commit is contained in:
parent
73788bcfe1
commit
6dbf70ffbb
@ -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={() => {
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user