add option to minimize the toolbar
This commit is contained in:
parent
9edce3ac0f
commit
242c62a0cd
|
@ -26,7 +26,7 @@
|
||||||
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
|
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
|
||||||
|
|
||||||
<!---Toolbar -!-->
|
<!---Toolbar -!-->
|
||||||
<div style="position: absolute; top: 10px; left: 10px;">
|
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn">
|
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn">
|
||||||
<i class="fa fa-trash"></i>
|
<i class="fa fa-trash"></i>
|
||||||
|
@ -104,21 +104,27 @@
|
||||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||||
class="fas fa-upload"></i>
|
class="fas fa-upload"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button"
|
<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button"
|
||||||
class="whiteboardBtn">
|
class="whiteboardBtn">
|
||||||
|
|
||||||
<i class="far fa-file-alt"></i>
|
<i class="far fa-file-alt"></i>
|
||||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||||
class="fas fa-upload"></i>
|
class="fas fa-upload"></i>
|
||||||
</button>
|
</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">
|
<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
|
||||||
<i class="fas fa-share-square"></i>
|
<i class="fas fa-share-square"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -181,6 +181,21 @@ $(document).ready(function () {
|
||||||
alert("Copied Whiteboard-URL to clipboard.")
|
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
|
// load json to whiteboard
|
||||||
$("#myFile").on("change", function () {
|
$("#myFile").on("change", function () {
|
||||||
var file = document.getElementById("myFile").files[0];
|
var file = document.getElementById("myFile").files[0];
|
||||||
|
|
Loading…
Reference in New Issue