WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add option to minimize the toolbar

This commit is contained in:
raphael 2019-05-13 11:39:33 +02:00
parent 9edce3ac0f
commit 242c62a0cd
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/index.html
View File

@ -26,7 +26,7 @@
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
<!---Toolbar -!-->
<div style="position: absolute; top: 10px; left: 10px;">
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
<div class="btn-group">
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn">
<i class="fa fa-trash"></i>
@ -104,21 +104,27 @@
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-upload"></i>
</button>
<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button"
class="whiteboardBtn">
<i class="far fa-file-alt"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-upload"></i>
</button>
<input style="display:none;" id="myFile" type="file"/>
<input style="display:none;" id="myFile" type="file" />
<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
<i class="fas fa-share-square"></i>
</button>
</div>
<div class="btn-group minGroup">
<button style="width: 25px; padding: 11px 11px;" id="minMaxBtn" title="hide buttons" type="button">
<i id="minBtn" style="position:relative; left:-5px;" class="fas fa-angle-left"></i>
<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
</button>
</div>
</body>
</html>

15
public/js/main.js
View File

@ -181,6 +181,21 @@ $(document).ready(function () {
alert("Copied Whiteboard-URL to clipboard.")
});
var btnsMini = false;
$("#minMaxBtn").click(function(){
if(!btnsMini) {
$("#toolbar").find(".btn-group:not(.minGroup)").hide();
$(this).find("#minBtn").hide();
$(this).find("#maxBtn").show();
} else {
$("#toolbar").find(".btn-group").show();
$(this).find("#minBtn").show();
$(this).find("#maxBtn").hide();
}
btnsMini = !btnsMini;
})
// load json to whiteboard
$("#myFile").on("change", function () {
var file = document.getElementById("myFile").files[0];