Add share and account actions

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

@@ -35,7 +35,6 @@ class ToolbarNotifier {
       this.container.data('transitioning', true);
       this.container.text(msg);
       this.container.css({
-        top: '5px',
         left: ($(window).width() - this.container.width()) / 2 - 9,
       });
       this.container.show().fadeOut(5000);

packages/mindplot/test/playground/map-render/css/editor.less

@@ -120,16 +120,6 @@ div.shareModalDialog {
     width: 550px;
 }
 
-#tutorialVideo {
-    background: url(../images/help.png) no-repeat left center;
-    padding-left: 19px;
-}
-
-#keyboardShortcuts {
-    background: url(../images/help.png) no-repeat left center;
-    padding-left: 19px;
-}
-
 .panelIcon {
     width: 20px;
     height: 20px;
@@ -187,3 +177,10 @@ div#bottom-logo {
 #zoom-minus {
     border-radius: 0 0 8px 8px;
 }
+
+div#shotcuts > img{
+    margin: 20px 0;
+    width: 40px;
+    height: 40px;
+}
+

packages/mindplot/test/playground/map-render/css/header.less

@@ -20,42 +20,63 @@ div#headerActions a {
     text-decoration: none;
 }
 
-div#headerMapTitle {
-    min-width: 200px;
-    height: @header-info-height - 13;
-    text-align: left;
-    padding-top: 13px;
-    padding-left: 50px;
-    color: white;
-    float: left;
-    font-style: italic;
-}
-
-div#headerMapTitle span {
-    padding: 4px 50px;
-    border: 1px solid rgb(90, 90, 90);
-    background-color: rgb(45, 45, 45);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-    white-space: nowrap;
-}
-
 div#headerNotifier {
     border: 1px solid rgb(241, 163, 39);
     background-color: rgb(252, 235, 192);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
     border-radius: 3px;
-    position: absolute;
+    position: fixed;
     padding: 5px 9px;
     color: back;
     white-space: nowrap;
     margin-top: 5px;
-    /*margin-top:-34px;*/
     display: none;
-    /*right: 5px;*/
+    bottom: 10px;
+    display: inline;
+}
+
+div#toolbarRight {
+    float: right;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    margin: 6px 10px;
+    height: 100%;
+}
+
+#account {
+    float: right;
+    display: inline;
+}
+
+#account >img {
+    width: 36x;
+    height: 36px;
+}
+
+#share {
+    margin: 0 30px;
+}
+
+.actionButton {
+    cursor: pointer;
+    margin: 0px 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    user-select: none;
+    vertical-align: middle;
+    justify-content: center;
+    padding: 10px 34px 10px 34px;
+    font-size: 15px;
+    min-width: 64px;
+    box-sizing: border-box;
+    font-weight: 600;
+    border-radius: 9px;
+    color: white;    
+    float: right;
+    background-color: #ffa800;
+}
+
+.actionButton: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;
 }
 
 @import "toolbar.less";

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

@@ -24,9 +24,6 @@
                     <div id="discard" class="buttonOn">
                         <img src="images/discard.svg" />
                     </div>
-                    <div id="export" class="buttonOn">
-                        <img src="images/export.svg" />
-                    </div>
                 </div>
                 <div id="edit" class="buttonContainer">
                     <div id="undoEdition" class="buttonOn">
@@ -83,21 +80,37 @@
                     </div>
                 </div>
             </div>
+            <div id="toolbarRight">
+                <div id="account">
+                    <img src="images/account.svg"/>
                 </div>
-        <div id="headerNotifier"></div>
+                <div id="share" class="actionButton">Share</div>
+                <div id="export" class="buttonOn">
+                    <img src="images/export.svg" />
                 </div>
+            </div>
+        </div>
+    </div>
+
     <div id="mindplot" onselectstart="return false;"></div>
+  
+    <!-- Side Actions -->
     <div id="floating-panel">
+        <div id="shotcuts" class="buttonExtOn">
+            <img src="images/keyboard.svg"/>
+        </div>
         <div id="zoom-button">
             <button id="zoom-plus">
-                <img src="images/add-icon.svg" />
+                <img src="images/add.svg" />
             </button>
             <button id="zoom-minus">
-                <img src="images/minus-icon.svg" />
+                <img src="images/minus.svg" />
             </button>
         </div>
     </div>
     <div id="bottom-logo"></div>
+    <div id="headerNotifier"></div>
+
 </body>
 
 </html>

packages/mindplot/test/playground/map-render/images/account.svg

@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" style="color: black;">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
+</svg>

packages/mindplot/test/playground/map-render/images/zoom-in.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom-out.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom_in.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>

packages/mindplot/test/playground/map-render/images/zoom_out.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>