From 3629113e9f3d5a34c931fcfd5b9783dba65371b4 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 5 Jan 2022 22:16:30 -0800 Subject: [PATCH] Work in progress new style --- .../mindplot/src/components/widget/Menu.js | 13 ------- .../src/components/widget/ToolbarPaneItem.js | 2 +- .../playground/map-render/css/editor.less | 35 +++++------------- .../playground/map-render/css/header.less | 25 ------------- .../playground/map-render/css/toolbar.less | 36 ++++++++++++------- .../playground/map-render/html/editor.html | 10 +++--- .../map-render/images/back-icon.svg | 1 + 7 files changed, 41 insertions(+), 81 deletions(-) create mode 100644 packages/mindplot/test/playground/map-render/images/back-icon.svg diff --git a/packages/mindplot/src/components/widget/Menu.js b/packages/mindplot/src/components/widget/Menu.js index 93be901b..6d2d2029 100644 --- a/packages/mindplot/src/components/widget/Menu.js +++ b/packages/mindplot/src/components/widget/Menu.js @@ -407,19 +407,6 @@ class Menu extends IMenu { event.preventDefault(); }); } - - const videoElem = $('#tutorialVideo'); - if (videoElem) { - const width = 900; - const height = 500; - const left = (window.screen.width / 2) - (width / 2); - const top = (window.screen.height / 2) - (height / 2); - - videoElem.bind('click', (event) => { - window.open('https://www.youtube.com/tv?vq=medium#/watch?v=rKxZwNKs9cE', '_blank', `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`); - event.preventDefault(); - }); - } } _registerEvents(designer) { diff --git a/packages/mindplot/src/components/widget/ToolbarPaneItem.js b/packages/mindplot/src/components/widget/ToolbarPaneItem.js index 891cb609..aeaad0a6 100644 --- a/packages/mindplot/src/components/widget/ToolbarPaneItem.js +++ b/packages/mindplot/src/components/widget/ToolbarPaneItem.js @@ -50,7 +50,7 @@ class ToolbarPaneItem extends ToolbarItem { className: 'toolbarPaneTip', trigger: 'manual', template: - '', + '', }); this._tip.addEvent('hide', () => { diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less index ed3f4c18..afa3793a 100644 --- a/packages/mindplot/test/playground/map-render/css/editor.less +++ b/packages/mindplot/test/playground/map-render/css/editor.less @@ -85,15 +85,6 @@ div.modalDialog { border: 1px solid #999; padding: 10px; overflow: auto; - - /* IE6-7 */ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; @@ -151,21 +142,13 @@ div.shareModalDialog { background-color: #efefef; } -.popoverBlack { - background: black; +// TODO: Review position. +div#bottom-logo { + position: absolute; + bottom: 220px; + right: 0; + background: url(../images/logo-text-black.svg) no-repeat; + width: 100px; + height: 40px; + z-index: 10000; } - -.popoverBlack.bottom .arrow:after { - border-bottom-color: black; -} - -.popoverGray { - background: #e4e2d2; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); - border: 3px double #bebebe; - max-width: none; -} - -.popoverGray.bottom .arrow:after { - border-bottom-color: #e4e2d2; -} \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/css/header.less b/packages/mindplot/test/playground/map-render/css/header.less index 6d839bd3..7534351e 100644 --- a/packages/mindplot/test/playground/map-render/css/header.less +++ b/packages/mindplot/test/playground/map-render/css/header.less @@ -59,28 +59,3 @@ div#headerNotifier { } @import "toolbar.less"; - -/* FIXME: duplicate in mindmapList - ---------------------------- Scrollbar --------------------------------- */ -::-webkit-scrollbar { - width: 8px; - direction: rtl; - text-align: left; - position: relative; - left: 10px; -} - -::-webkit-scrollbar-track { - border-radius: 10px; - background-color: #eaeaea; - border-left: 1px solid #ccc; -} - -::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: #c6c6c6; -} - -::-webkit-scrollbar-thumb:hover { - background-color: #08c; -} \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/css/toolbar.less b/packages/mindplot/test/playground/map-render/css/toolbar.less index 1a941ab7..2dfe7194 100644 --- a/packages/mindplot/test/playground/map-render/css/toolbar.less +++ b/packages/mindplot/test/playground/map-render/css/toolbar.less @@ -1,21 +1,33 @@ div#toolbar { width: 100%; height: 50px; - padding: 8px 15px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1); background-color: #fff; } div#toolbar .buttonContainer { height: @header-toolbar-height; + padding-top: 8px; + padding-right: 10px; + padding-left: 10px; float: left; - margin-left: 20px; + border-left: 1px solid lightgray; } -div#logo-text { - background: url(../images/logo-text-black.svg) no-repeat center top; + +div#mapName >span { + border-radius: 4px; + float: left; + padding: 8px; + min-width: 30px; + font-weight: bold; +} + +div#back { + background: url(../images/back-icon.svg) no-repeat center top; height: 40px; width: 80px; float: left; + margin: 8px 0px; } /******************************************************************************************/ @@ -40,17 +52,17 @@ div#toolbar .buttonOn:hover { div#toolbar .buttonOn:hover { cursor: pointer; opacity: 1; - background: url(../images/btn-bg-hover.png) no-repeat center top; + // background: url(../images/btn-bg-hover.png) no-repeat center top; } div#toolbar .buttonOn { opacity: 0.8; - background: url(../images/btn-bg-normal.png) no-repeat center top; + // background: url(../images/btn-bg-normal.png) no-repeat center top; } div#toolbar .buttonOff { opacity: 0.4; - background: url(../images/btn-bg-normal.png) no-repeat center top; + // background: url(../images/btn-bg-normal.png) no-repeat center top; } div#exportAnchor { @@ -78,24 +90,24 @@ div#toolbar .buttonExtOn:hover { div#toolbar .buttonExtOn:hover { opacity: 1; - background: url(../images/btne-bg-hover.png) no-repeat center top; + // background: url(../images/btne-bg-hover.png) no-repeat center top; } div#toolbar .buttonExtActive { opacity: 1; - background: url(../images/btne-bg-selected.png) no-repeat center top; - + // background: url(../images/btne-bg-selected.png) no-repeat center top; } div#toolbar .buttonExtOn { opacity: 0.8; - background: url(../images/btne-bg-normal.png) no-repeat center top; + cursor: pointer + // background: url(../images/btne-bg-normal.png) no-repeat center top; } div#toolbar .buttonExtOff { opacity: 0.4; - background: url(../images/btne-bg-normal.png) no-repeat center top; + // background: url(../images/btne-bg-normal.png) no-repeat center top; } div#exportAnchor { diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html index 168eceba..d9e83aa5 100644 --- a/packages/mindplot/test/playground/map-render/html/editor.html +++ b/packages/mindplot/test/playground/map-render/html/editor.html @@ -12,7 +12,10 @@