mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-21 21:57:56 +01:00
Update toolbar with center position
This commit is contained in:
Paulo Gustavo Veiga
parent
9b5b4b2eda
commit
3bac526593
@ -29,11 +29,11 @@
|
||||
<mkdir dir="target/wisemapping-mindplot"/>
|
||||
<exec executable="npm" dir="target">
|
||||
<arg value="pack"/>
|
||||
<arg value="@wisemapping/mindplot@0.4.12"/>
|
||||
<arg value="@wisemapping/mindplot@0.4.14"/>
|
||||
</exec>
|
||||
<exec executable="tar" dir="target">
|
||||
<arg value="-xvzf"/>
|
||||
<arg value="wisemapping-mindplot-0.4.12.tgz"/>
|
||||
<arg value="wisemapping-mindplot-0.4.14.tgz"/>
|
||||
<arg value="-C"/>
|
||||
<arg value="wisemapping-mindplot"/>
|
||||
</exec>
|
||||
|
||||
@ -19,7 +19,6 @@ body {
|
||||
div#mindplot {
|
||||
position: relative;
|
||||
top: @header-toolbar-height;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -31,12 +30,6 @@ div#mindplot {
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
div#small_error_icon {
|
||||
padding-left: 18px;
|
||||
min-height: 16px;
|
||||
background: url(../images/error_icon.png) bottom left no-repeat !important;
|
||||
}
|
||||
|
||||
.notesTip {
|
||||
background-color: #dfcf3c;
|
||||
padding: 5px 15px;
|
||||
@ -149,11 +142,27 @@ div#bottom-logo {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
bottom: 10px;
|
||||
background: url(../../images/editor/logo-text-black.svg) no-repeat;
|
||||
background: url(../images/logo-text-black.svg) no-repeat;
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
div#position {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#position-button {
|
||||
cursor: pointer;
|
||||
border: solid black 1px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 40px 40px;
|
||||
background-color: #FFF;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#zoom-button {
|
||||
width: 40px;
|
||||
border: 0;
|
||||
@ -161,6 +170,7 @@ div#bottom-logo {
|
||||
|
||||
#zoom-plus,
|
||||
#zoom-minus {
|
||||
border: solid black 1px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
@import "editor.less";
|
||||
|
||||
/* Overwrite some styles */
|
||||
body {
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
div#headerInfo {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
div#header {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
div#headerMapTitle,
|
||||
#headerActions,
|
||||
#headerLogo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer Styles */
|
||||
div#footer {
|
||||
position: absolute;
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
div#zoomIn {
|
||||
background: url(../images/zoom-in.png) no-repeat left top;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#zoomOut {
|
||||
background: url(../images/zoom-out.png) no-repeat left top;
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
border-top-color: white;
|
||||
border-left-color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#mapDetails {
|
||||
float: right;
|
||||
padding-top: 10px;
|
||||
margin-right: 130px;
|
||||
|
||||
}
|
||||
|
||||
div#mapDetails .title {
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
div#infoPanel {
|
||||
border: 2px black solid;
|
||||
position: absolute;
|
||||
background: gray;
|
||||
width: 100px;
|
||||
height: 300px;
|
||||
z-index: 100;
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
top: 150px;
|
||||
right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#infoPanel .textNode {
|
||||
background-color: #E0E5EF;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
border: 3px #023BB9 solid;
|
||||
padding: 4px;
|
||||
cursor: move
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
@header-height : 0px;
|
||||
@header-toolbar-height : 50px;
|
||||
@header-info-height : @header-height - @header-toolbar-height;
|
||||
|
||||
div#header {
|
||||
width: 100%;
|
||||
height: @header-height;
|
||||
height: 0px;
|
||||
background: #202020;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
@ -41,7 +39,6 @@ div#toolbarRight {
|
||||
margin: 6px 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#account {
|
||||
float: right;
|
||||
display: inline;
|
||||
@ -52,6 +49,10 @@ div#toolbarRight {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
#accountSettingsPanel{
|
||||
padding:10px 10px;
|
||||
}
|
||||
|
||||
#share {
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
@ -1,3 +1 @@
|
||||
@header-height: 75px;
|
||||
@header-toolbar-height: 35px;
|
||||
@header-info-height: @header-height - @header-toolbar-height;
|
||||
@header-toolbar-height: 50px;
|
||||
@ -64,6 +64,7 @@ div#toolbar .buttonOn {
|
||||
|
||||
div#toolbar .buttonOff {
|
||||
opacity: 0.4;
|
||||
// background: url(../images/btn-bg-normal.png) no-repeat center top;
|
||||
}
|
||||
|
||||
div#exportAnchor {
|
||||
@ -91,19 +92,24 @@ div#toolbar .buttonExtOn:hover {
|
||||
|
||||
div#toolbar .buttonExtOn:hover {
|
||||
opacity: 1;
|
||||
// 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;
|
||||
}
|
||||
|
||||
div#toolbar .buttonExtOn {
|
||||
opacity: 0.8;
|
||||
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;
|
||||
}
|
||||
|
||||
div#exportAnchor {
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
|
||||
|
After Width: | Height: | Size: 440 B |
@ -55,6 +55,11 @@
|
||||
<img src="../../images/editor/minus.svg" />
|
||||
</button>
|
||||
</div>
|
||||
<div id="position">
|
||||
<button id="position-button">
|
||||
<img src="../../images/editor/center_focus.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bottom-logo"></div>
|
||||
<div id="headerNotifier"></div>
|
||||
|
||||
@ -94,3 +94,4 @@
|
||||
Share
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,22 +45,36 @@
|
||||
<button id="zoom-minus">
|
||||
<img src="../../images/editor/minus.svg" />
|
||||
</button>
|
||||
<div id="position">
|
||||
<button id="position-button">
|
||||
<img src="../../images/editor/center_focus.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
// Hock zoom events ...
|
||||
const zoomInButton = document.getElementById('zoom-plus');
|
||||
const zoomOutButton = document.getElementById('zoom-minus');
|
||||
if (zoomInButton) {
|
||||
zoomInButton.addEventListener('click', () => {
|
||||
designer.zoomIn();
|
||||
});
|
||||
}
|
||||
|
||||
const zoomOutButton = document.getElementById('zoom-minus');
|
||||
if (zoomOutButton) {
|
||||
zoomOutButton.addEventListener('click', () => {
|
||||
designer.zoomOut();
|
||||
});
|
||||
}
|
||||
|
||||
const position = document.getElementById('position');
|
||||
if (position) {
|
||||
position.addEventListener('click', () => {
|
||||
designer.zoomToFit();
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user