Work in progress new style

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) {

packages/mindplot/src/components/widget/ToolbarPaneItem.js

@@ -50,7 +50,7 @@ class ToolbarPaneItem extends ToolbarItem {
       className: 'toolbarPaneTip',
       trigger: 'manual',
       template:
-        '<div class="popover popoverGray" role="tooltip"><div class="arrow arrowGray"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+        '<div class="popover" role="tooltip"><div class="arrow arrowGray"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
     });
 
     this._tip.addEvent('hide', () => {

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

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

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 {

packages/mindplot/test/playground/map-render/html/editor.html

@@ -12,7 +12,10 @@
 <body> 
     <div id="header">
         <div id="toolbar">
-            <div id="logo-text"></div>
+            <div id="back"></div>
+            <div id="mapName" class="buttonContainer">
+                <span>Welcome</span>
+            </div>
             <div id="editTab" class="tabContent">
                 <div id="persist" class="buttonContainer">
                     <div id="save" class="buttonOn">
@@ -82,9 +85,8 @@
             </div>
         </div>
         <div id="headerNotifier"></div>
-        <div id="footer">
-            <div id="footerLogo"></div>
-        </div>
+    </div>
+    <div id="bottom-logo">
     </div>
 
     <div id="mindplot" onselectstart="return false;"></div>

packages/mindplot/test/playground/map-render/images/back-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>