refacto(assets / src): reorganized
This commit is contained in:
Florent Chehab
@@ -1,98 +0,0 @@
|
||||
body {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#whiteboardContainer {
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group button {
|
||||
background: transparent;
|
||||
border: 1px solid #636060;
|
||||
/* Green border */
|
||||
color: black;
|
||||
/* White text */
|
||||
padding: 11px 14px;
|
||||
/* Some padding */
|
||||
cursor: pointer;
|
||||
/* Pointer/hand icon */
|
||||
float: left;
|
||||
/* Float the buttons side by side */
|
||||
font-size: 1.2em;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn-group button:not(:last-child) {
|
||||
border-right: none;
|
||||
/* Prevent double borders */
|
||||
}
|
||||
|
||||
/* Clear floats (clearfix hack) */
|
||||
|
||||
.btn-group:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* Add a background color on hover */
|
||||
|
||||
.btn-group button:hover {
|
||||
background-color: #9a9a9a;
|
||||
}
|
||||
|
||||
button {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
background-color: #808080ab;
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.whiteboardTool.active {
|
||||
background: #bfbfbf;
|
||||
}
|
||||
|
||||
#whiteboardThicknessSlider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out;
|
||||
}
|
||||
|
||||
.textBox.active {
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
.textBox>.removeIcon, .textBox>.moveIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.textBox.active>.removeIcon, .textBox.active>.moveIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modalBtn {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
border: 0px;
|
||||
min-width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Whiteboard</title>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<!--- jquery and dragabbles -!-->
|
||||
<script type="text/javascript" src="./js/libs/jquery-3.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="./js/libs/jquery-ui.min.js"></script>
|
||||
<!--- For icons -!-->
|
||||
<script type="text/javascript" src="./js/libs/fontawseome5.8.1.min.js"></script>
|
||||
<!--- Socket connection -!-->
|
||||
<script type="text/javascript" src="./js/libs/socketio2.0.4.min.js"></script>
|
||||
<!--- Colorpicker -!-->
|
||||
<script type="text/javascript" src="./js/libs/jqColorPicker.min.js"></script>
|
||||
<!--- For keybindings -!-->
|
||||
<script type="text/javascript" src="./js/libs/keymage.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./js/keybinds.js"></script>
|
||||
<script type="text/javascript" src="./js/whiteboard.js"></script>
|
||||
<script type="text/javascript" src="./js/main.js"></script>
|
||||
|
||||
<!--- CSS References -!-->
|
||||
<link rel="stylesheet" href="./css/jquery-ui.min.css">
|
||||
<link href="./css/main.css" rel="stylesheet">
|
||||
|
||||
<!--- Set width for Mobile Devices -!-->
|
||||
<script>
|
||||
//Set correct width height on mobile browsers
|
||||
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
|
||||
if (isChrome) {
|
||||
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />');
|
||||
} else {
|
||||
$('head').append('<meta name="viewport" content="width=1400" />');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!---Whiteboard container -!-->
|
||||
<div id="whiteboardContainer"></div>
|
||||
|
||||
<!---Toolbar -!-->
|
||||
<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>
|
||||
</button>
|
||||
<button style="position:absolute; left:0px; top:0px; width: 46px; display:none;"
|
||||
id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn">
|
||||
<i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn">
|
||||
<i class="fa fa-undo"></i>
|
||||
</button>
|
||||
<button id="whiteboardRedoBtn" title="Redo your last undo" type="button" class="whiteboardBtn">
|
||||
<i class="fa fa-redo"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
|
||||
<i class="fa fa-mouse-pointer"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button"
|
||||
class="whiteboardTool">
|
||||
<img src="./images/dottedRec.png">
|
||||
</button>
|
||||
<button tool="pen" title="Take the pen" type="button" class="whiteboardTool active">
|
||||
<i class="fa fa-pencil-alt"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button"
|
||||
class="whiteboardTool">
|
||||
╱
|
||||
</button>
|
||||
<button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool">
|
||||
<i class="far fa-square"></i>
|
||||
</button>
|
||||
<button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
|
||||
<i class="far fa-circle"></i>
|
||||
</button>
|
||||
<button tool="text" title="write text" type="button" class="whiteboardTool">
|
||||
<i class="fas fa-font"></i>
|
||||
</button>
|
||||
<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
|
||||
<i class="fa fa-eraser"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button style="width: 190px; cursor:default;">
|
||||
<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i
|
||||
class="fa fa-pencil-alt"></i></div>
|
||||
<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;"
|
||||
src="./images/slider-background.svg">
|
||||
<input title="Thickness" id="whiteboardThicknessSlider"
|
||||
style="position: absolute; left:9px; width: 130px; top: 15px;" type="range" min="1" max="50"
|
||||
value="3">
|
||||
<div title="Colorpicker"
|
||||
style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;">
|
||||
<div id="whiteboardColorpicker" value="#000000"
|
||||
style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;">
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
|
||||
<i class="fas fa-image"></i>
|
||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-save"></i>
|
||||
</button>
|
||||
<button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav"
|
||||
type="button" class="whiteboardBtn">
|
||||
|
||||
<i class="fas fa-globe"></i>
|
||||
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-save"></i>
|
||||
</button>
|
||||
<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" 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-save"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
|
||||
<i class="fas fa-image"></i>
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user