Add share and account actions
Paulo Gustavo Veiga
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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="share" class="actionButton">Share</div>
|
||||
<div id="export" class="buttonOn">
|
||||
<img src="images/export.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="headerNotifier"></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>
|
||||
@ -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>
|
||||
|
After Width: | Height: | Size: 382 B |
|
Before Width: | Height: | Size: 571 B |
|
Before Width: | Height: | Size: 553 B |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 391 B |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 13 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 438 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 404 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 438 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 404 B |