vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-06-03 00:54:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update toolbar with center position

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-01-10 12:00:26 -08:00
parent 9b5b4b2eda
commit 3bac526593
10 changed files with 55 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wise-ui/pom.xml
View File

@ -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>

26
wise-webapp/src/main/webapp/css/editor.less
View File

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

95
wise-webapp/src/main/webapp/css/embedded.less
View File

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

11
wise-webapp/src/main/webapp/css/header.less
View File

@ -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;
}
@ -78,4 +79,4 @@ div#toolbarRight {
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";
@import "toolbar.less";

4
wise-webapp/src/main/webapp/css/skin.less
View File

@ -1,3 +1 @@
@header-height: 75px;
@header-toolbar-height: 35px;
@header-info-height: @header-height - @header-toolbar-height;
@header-toolbar-height: 50px;

6
wise-webapp/src/main/webapp/css/toolbar.less
View File

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

1
wise-webapp/src/main/webapp/images/editor/center_focus.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

5
wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
View File

@ -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>

1
wise-webapp/src/main/webapp/jsp/mindmapEditorToolbar.jsf
View File

@ -93,4 +93,5 @@
<div id="share" class="actionButton">
Share
</div>
</div>
</div>

16
wise-webapp/src/main/webapp/jsp/mindmapViewonly.jsp
View File

@ -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>