diff --git a/packages/mindplot/src/components/widget/ToolbarNotifier.js b/packages/mindplot/src/components/widget/ToolbarNotifier.js
index bcb32da0..f0c62b5c 100644
--- a/packages/mindplot/src/components/widget/ToolbarNotifier.js
+++ b/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);
diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less
index 816d2117..a9ab1804 100644
--- a/packages/mindplot/test/playground/map-render/css/editor.less
+++ b/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;
@@ -186,4 +176,11 @@ div#bottom-logo {
#zoom-minus {
border-radius: 0 0 8px 8px;
-}
\ No newline at end of file
+}
+
+div#shotcuts > img{
+ margin: 20px 0;
+ width: 40px;
+ height: 40px;
+}
+
diff --git a/packages/mindplot/test/playground/map-render/css/header.less b/packages/mindplot/test/playground/map-render/css/header.less
index 7534351e..804f22cb 100644
--- a/packages/mindplot/test/playground/map-render/css/header.less
+++ b/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";
diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html
index d8c17c01..4495ecd6 100644
--- a/packages/mindplot/test/playground/map-render/html/editor.html
+++ b/packages/mindplot/test/playground/map-render/html/editor.html
@@ -24,9 +24,6 @@
-
+
-
+
+
+
+
+
- 
+ 
+