Fix public mindmap view including new zoom and style

This commit is contained in:
Paulo Gustavo Veiga 2022-01-08 10:32:49 -08:00
parent 761b2e5ee0
commit 101dbd81c3
4 changed files with 41 additions and 112 deletions

View File

@ -5,7 +5,7 @@
<definition name="homepage" template="/jsp/homepage.jsp"/>
<definition name="mindmapEmbedded" template="/jsp/mindmapEmbed.jsp"/>
<definition name="mindmapEditor" template="/jsp/mindmapEditor.jsp"/>
<definition name="mindmapPrint" template="/jsp/mindmapPrint.jsp"/>
<definition name="mindmapPrint" template="/jsp/mindmapViewonly.jsp"/>
<definition name="login" template="/jsp/reactInclude.jsp"/>
<definition name="registration" template="/jsp/reactInclude.jsp"/>

View File

@ -5,79 +5,20 @@ 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#footerLogo {
position: absolute;
position: fixed;
display: list-item;
list-style-image: url(../../images/pwrdby-white.svg);
list-style-image: url(../../images/editor/logo-text-black.svg);
list-style-position: inside;
right: 10px;
top: 5px;
}
div#embFooter {
position: absolute;
height: 55px;
width: 100%;
bottom: 0;
left: 0;
background: rgb(249, 168, 38)
}
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;
left: 10px;
bottom: 10px;
}
div#mapDetails {
float: right;
position: fixed;
bottom:20px;
left: 100px;
padding-top: 20px;
margin-right: 130px;
font-size: 14px;
}
@ -87,26 +28,3 @@ div#mapDetails .title {
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;
padding: 4px;
cursor: move
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -12,10 +12,8 @@
<title><spring:message code="SITE.TITLE"/> | ${mindmap.title} </title>
<link rel="stylesheet/less" type="text/css" href="../../css/viewonly.less"/>
<script type='text/javascript' src="../../js/less.js"/></script>
<%@ include file="/jsp/commonPageHeader.jsf" %>
<script type="text/javascript">
<script type="text/javascript">
var mapId = '${mindmap.id}';
var memoryPersistence = true;
var readOnly = true;
@ -26,25 +24,43 @@
<%@ include file="/jsp/googleAnalytics.jsf" %>
</head>
<body>
<div id="mindplot"></div>
<div id="mapContainer">
<div id="mindplot"></div>
<div id="printLogo"></div>
<a href="${requestScope['site.homepage']}" target="new">
<div id="footerLogo"></div>
</a>
<div id="embFooter">
<a href="${requestScope['site.homepage']}" target="new">
<div id="footerLogo"></div>
</a>
<div id="mapDetails">
<span class="title"><spring:message code="CREATOR"/>:</span><span><c:out value="${mindmap.creator.fullName}"/></span>
<span class="title"><spring:message code="DESCRIPTION"/>:</span><span><c:out value="${mindmap.title}"/></span>
</div>
<div id="zoomOut" class="button"></div>
<div id="zoomIn" class="button"></div>
<script src="loader.js"></script>
<div id="mapDetails">
<span class="title"><spring:message code="CREATOR"/>:</span><span><c:out value="${mindmap.creator.fullName}"/></span>
<span class="title"><spring:message code="DESCRIPTION"/>:</span><span><c:out value="${mindmap.title}"/></span>
</div>
<div id="floating-panel">
<div id="zoom-button">
<button id="zoom-plus">
<img src="../../images/editor/add.svg" />
</button>
<button id="zoom-minus">
<img src="../../images/editor/minus.svg" />
</button>
</div>
</div>
<script src="loader.js"></script>
<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();
});
}
if (zoomOutButton) {
zoomOutButton.addEventListener('click', () => {
designer.zoomOut();
});
}
</script>
</body>
</html>