From 7c9effaa5d8307d5c79678a03c14e80013b5635f Mon Sep 17 00:00:00 2001 From: Matias Arriola Date: Mon, 31 Jan 2022 21:07:59 +0000 Subject: [PATCH] Export fixes. --- .../src/components/action-button/index.ts | 25 +++ .../editor/src/components/footer/index.tsx | 9 +- .../editor/src/components/footer/styled.ts | 15 +- .../editor/src/components/toolbar/index.tsx | 209 ++++++++++-------- .../editor/src/components/toolbar/styled.ts | 50 +++++ packages/editor/src/index.tsx | 36 +-- .../test/playground/map-render/css/header.css | 74 ------- packages/editor/webpack.common.js | 5 - packages/editor/webpack.playground.js | 5 +- packages/editor/webpack.prod.js | 8 +- .../src/components/widget/ToolbarNotifier.js | 6 +- packages/webapp/package.json | 1 + .../action-dispatcher/export-dialog/index.tsx | 18 +- 13 files changed, 252 insertions(+), 209 deletions(-) create mode 100644 packages/editor/src/components/action-button/index.ts create mode 100644 packages/editor/src/components/toolbar/styled.ts diff --git a/packages/editor/src/components/action-button/index.ts b/packages/editor/src/components/action-button/index.ts new file mode 100644 index 00000000..39c79067 --- /dev/null +++ b/packages/editor/src/components/action-button/index.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components'; + +const ActionButton = styled.div` + cursor: pointer; + margin: 0px 10px; + font-family: Arial, Helvetica, sans-serif; + user-select: none; + vertical-align: middle; + justify-content: center; + padding: 10px 25px; + font-size: 15px; + min-width: 64px; + box-sizing: border-box; + font-weight: 600; + border-radius: 9px; + color: white; + background-color: #ffa800; + display: inline-block; + + &:hover { + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + } +`; + +export default ActionButton; \ No newline at end of file diff --git a/packages/editor/src/components/footer/index.tsx b/packages/editor/src/components/footer/index.tsx index 90febc5d..52e1b8ce 100644 --- a/packages/editor/src/components/footer/index.tsx +++ b/packages/editor/src/components/footer/index.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { StyledLogo } from './styled'; +import { StyledLogo, Notifier } from './styled'; import { useIntl } from 'react-intl'; import KeyboardSvg from '../../../images/keyboard.svg'; import AddSvg from '../../../images/add.svg'; import MinusSvg from '../../../images/minus.svg'; import CenterFocusSvg from '../../../images/center_focus.svg'; +import ActionButton from '../action-button'; export type FooterPropsType = { showTryPanel?: boolean; @@ -35,15 +36,15 @@ const Footer = ({ showTryPanel }: FooterPropsType): React.ReactElement => { -
+ {showTryPanel && (

{intl.formatMessage({ id: 'editor.try-welcome' })}

{intl.formatMessage({ id: 'editor.try-welcome-description' })}

-
+ {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })} -
+
)} diff --git a/packages/editor/src/components/footer/styled.ts b/packages/editor/src/components/footer/styled.ts index 11040fee..ea900704 100644 --- a/packages/editor/src/components/footer/styled.ts +++ b/packages/editor/src/components/footer/styled.ts @@ -15,4 +15,17 @@ export const StyledLogo = styled.div` background: url(${LogoTextBlackSvg}) no-repeat; width: 90px; height: 40px; -` \ No newline at end of file +`; + +export const Notifier = styled.div` + border: 1px solid rgb(241, 163, 39); + background-color: rgb(252, 235, 192); + border-radius: 3px; + position: fixed; + padding: 5px 9px; + color: back; + white-space: nowrap; + margin-top: 5px; + display: none; + bottom: 10px; +`; diff --git a/packages/editor/src/components/toolbar/index.tsx b/packages/editor/src/components/toolbar/index.tsx index 27bdf37a..648af898 100644 --- a/packages/editor/src/components/toolbar/index.tsx +++ b/packages/editor/src/components/toolbar/index.tsx @@ -25,6 +25,9 @@ import HistorySvg from '../../../images/history.svg'; import PrintSvg from '../../../images/print.svg'; import AccountSvg from '../../../images/account.svg'; +import { HeaderContainer, ToolbarButton, ToolbarButtonExt, ToolbarRightContainer } from './styled'; +import ActionButton from '../action-button'; + export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share'; export type ToolbarPropsType = { @@ -40,100 +43,118 @@ export default function Toolbar({ }: ToolbarPropsType): React.ReactElement { const intl = useIntl(); return ( -
-
- + +
+
+ +
+ {!memoryPersistence && ( +
+ + + +
+ )} + {!readOnlyMode && ( + <> +
+ + + + + + +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + )} + {!memoryPersistence && ( + + onAction('export')} + > + + + onAction('publish')} + > + + + onAction('history')} + > + + + onAction('print')} + > + + + + + + onAction('share')}> + {intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })} + + + )}
- {!memoryPersistence && ( -
-
- -
-
- )} - {!readOnlyMode && ( - <> -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
- -
- -
-
-
- - )} - {!memoryPersistence && ( -
-
onAction('export')}> - -
-
onAction('publish')}> - -
-
onAction('history')}> - -
-
onAction('print')}> - -
-
- -
-
onAction('share')}> - { intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' }) } -
-
- )} -
+ ); } diff --git a/packages/editor/src/components/toolbar/styled.ts b/packages/editor/src/components/toolbar/styled.ts new file mode 100644 index 00000000..9b49513a --- /dev/null +++ b/packages/editor/src/components/toolbar/styled.ts @@ -0,0 +1,50 @@ +import styled from 'styled-components'; + +export const HeaderContainer = styled.div` + width: 100%; + height: 0px; + background: #202020; + z-index: 1000; + position: absolute; + top: 0; + display: flex; +`; + +export const ToolbarContainer = styled.div` + display: flex; + flex-direction: column; + flex: 1; +`; + +export const ToolbarButton = styled.div` + width: 28px; + height: 28px; + text-align: center; + z-index: 4; + margin-top: 3px; + padding-top: 2px; + padding-left: 2px; + margin-left: 3px; + display: inline-block; + `; + +export const ToolbarButtonExt = styled(ToolbarButton)` + width: 40px; + text-align: left; + padding-left: 5px; +`; + +export const AccountButton = styled.div` + display: inline-block; + margin-top: 3px; +`; + +export const ToolbarRightContainer = styled.div` + flex-shrink: 1; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + height: 100%; + overflow: hidden; +`; \ No newline at end of file diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index 6ba41a23..b9291237 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -2,7 +2,14 @@ import React from 'react'; import Toolbar, { ToolbarActionType } from './components/toolbar'; import Footer from './components/footer'; import { IntlProvider } from 'react-intl'; -import { $notify, buildDesigner, LocalStorageManager, PersistenceManager, RESTPersistenceManager, DesignerOptionsBuilder } from '@wisemapping/mindplot'; +import { + $notify, + buildDesigner, + LocalStorageManager, + PersistenceManager, + RESTPersistenceManager, + DesignerOptionsBuilder, +} from '@wisemapping/mindplot'; declare global { var memoryPersistence: boolean; @@ -28,9 +35,8 @@ export type EditorPropsType = { }; const initMindplot = () => { - // Change page title ... - document.title = `${global.mapTitle} | WiseMapping ` + document.title = `${global.mapTitle} | WiseMapping `; // Configure persistence manager ... let persistence; @@ -44,7 +50,8 @@ const initMindplot = () => { }); } else { persistence = new LocalStorageManager( - `/c/restful/maps/{id}/${global.historyId ? `${global.historyId}/` : ''}document/xml${!global.isAuth ? '-pub' : '' + `/c/restful/maps/{id}/${global.historyId ? `${global.historyId}/` : ''}document/xml${ + !global.isAuth ? '-pub' : '' }`, true ); @@ -58,7 +65,11 @@ const initMindplot = () => { readOnly: Boolean(global.readOnly || false), mapId: String(global.mapId), container: 'mindplot', - zoom: zoomParam || (global.userOptions?.zoom != undefined ? Number.parseFloat(global.userOptions.zoom as string) : 0.8), + zoom: + zoomParam || + (global.userOptions?.zoom != undefined + ? Number.parseFloat(global.userOptions.zoom as string) + : 0.8), locale: global.locale, }); @@ -83,20 +94,17 @@ export default function Editor({ locale = 'en', onAction, }: EditorPropsType): React.ReactElement { - React.useEffect(initCallback, []); return ( - +