Merge branch 'lovasoa/whitebophir' into feature/batch-messages

lovasoa · May 5, 2020 · c91fe63 · c91fe63
2 parents f046102 + 2aa00ce
commit c91fe63
Show file tree

Hide file tree

Showing 40 changed files with 1,967 additions and 583 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,9 +17,7 @@ npm-debug.log
 
 .DS_Store
 
-# Openode
-.openode
-wbo-backup.zip
+wbo-backup*
 
 # Jetbrains
 .idea/

diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ A demonstration server is available at [wbo.ophir.dev](https://wbo.ophir.dev)
 
   <tr>
    <td> teaching math on <b>WBO</b>
-   <td> <img alt=wbo teaching" width="300" src="https://user-images.githubusercontent.com/552629/59915737-a386e580-941d-11e9-81ff-db9e37f140db.png" />
+   <td> <img alt="wbo teaching" width="300" src="https://user-images.githubusercontent.com/552629/59915737-a386e580-941d-11e9-81ff-db9e37f140db.png" />
    <td> drawing art
    <td> <img alt="angel drawn on WBO" width="300" src="https://user-images.githubusercontent.com/552629/59914139-08404100-941a-11e9-9c29-bd2569fe4730.png"/>
 </table>

diff --git a/client-data/board.css b/client-data/board.css
@@ -136,6 +136,16 @@ html, body, svg {
 
 }
 
+#menu .oneTouch:active {
+	border-radius: 3px;
+	background-color:#eeeeff;
+}
+
+#menu .tool:active {
+	box-shadow: inset 0 0 1px #ddeeff;
+	background-color:#eeeeff;
+}
+
 #menu .tool.curTool {
   box-shadow: 0 0 5px #0074D9;
   background: linear-gradient(#96E1FF, #36A2FF);
@@ -237,3 +247,23 @@ text {
 	user-select:none;
 	-moz-user-select:none;
 }
+
+circle.opcursor {
+	pointer-events: none;
+	transition: .1s;
+}
+
+#cursor-me {
+	transition: 0s;
+}
+
+
+/* Internet Explorer specific CSS */
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+	#chooseColor {
+		color: transparent;
+	}
+	label.tool-name[for=chooseColor] {
+		line-height: 10px;
+	}
+}
diff --git a/client-data/board.html b/client-data/board.html
@@ -7,26 +7,29 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link rel="stylesheet" type="text/css" href="../board.css" />
 	<script src="../socket.io/socket.io.js"></script>
-	<meta name="description" content="{{translations.tagline}}'" />
+	<meta name="description" content="{{translations.tagline}}" />
 	<meta name="keywords"
 		content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
 	<link rel="apple-touch-icon" href="../favicon.svg">
 	<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
 	<meta property="og:title" content="{{board}} board on WBO" />
- 	<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
- 	<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
+	<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
+	<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
 	<link rel="canonical" href="{{boardUriComponent}}?lang={{language}}" />
 	{{#languages}}
 	<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
 	{{/languages}}
+	<script src="../polyfill.min.js"></script>
 </head>
 
 <body>
 
 	<div id="board">
 		<svg id="canvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
 			<defs id="defs"></defs>
+			<g id="drawingArea"></g>
+			<g id="cursors"></g>
 		</svg>
 	</div>
 
@@ -48,7 +51,8 @@
 						<span class="colorPresetButton"></span>
 					</span>
 				</li>
-				<li class="tool" tabindex="-1">
+				<li class="tool" tabindex="-1"
+					title="{{translations.size}} ({{translations.keyboard_shortcut}}: alt + {{translations.mousewheel}})">
 					<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
 					<label class="tool-name slider" for="chooseSize">
 						<span>{{translations.size}}</span>
@@ -59,12 +63,12 @@
 					<span class="tool-icon">
 						<svg viewBox="0 0 8 8">
 							<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
-								<rect x=0 y=0 width=2 height=2 fill=black />
-								<rect x=2 y=2 width=2 height=2 fill=black />
-								<rect x=2 y=0 width=2 height=2 fill=#eeeeee />
-								<rect x=0 y=2 width=2 height=2 fill=#eeeeee />
+								<rect x=0 y=0 width=2 height=2 fill=black></rect>
+								<rect x=2 y=2 width=2 height=2 fill=black></rect>
+								<rect x=2 y=0 width=2 height=2 fill=#eeeeee></rect>
+								<rect x=0 y=2 width=2 height=2 fill=#eeeeee></rect>
 							</pattern>
-							<circle cx=4 cy=4 id="opacityIndicator" r=3.5  fill="url(#opacityPattern)" />
+							<circle cx=4 cy=4 id="opacityIndicator" r=3.5 fill="url(#opacityPattern)"></circle>
 						</svg>
 					</span>
 					<label class="tool-name slider" for="chooseOpacity">
@@ -84,13 +88,16 @@
 	<script src="../js/minitpl.js"></script>
 	<script src="../js/board.js"></script>
 	<script src="../tools/pencil/pencil.js"></script>
+	<script src="../tools/cursor/cursor.js"></script>
 	<script src="../tools/line/line.js"></script>
 	<script src="../tools/rect/rect.js"></script>
+	<script src="../tools/ellipse/ellipse.js"></script>
 	<script src="../tools/text/text.js"></script>
 	<script src="../tools/eraser/eraser.js"></script>
 	<script src="../tools/hand/hand.js"></script>
+	<script src="../tools/grid/grid.js"></script>
 	<script src="../tools/zoom/zoom.js"></script>
-	<script src="../js/canvascolor/canvascolor.min.js"></script>
+	<script src="../js/canvascolor.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/client-data/github.svg b/client-data/github.svg
diff --git a/client-data/index.css b/client-data/index.css
@@ -1,13 +1,22 @@
 html {
 	background: linear-gradient(135deg, #c4dfffa0, transparent), url(background.png);
 	width:100%;
-	height: 100%;
+	min-height: 100%;
 	margin:0;
 	font-family: sans-serif;
 	font-weight: 300;
 	font-size: 15px;
 }
 
+body {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	margin: 0;
+	width: 100%;
+}
+
 header {
 	position:fixed;
 	left:0;
@@ -108,11 +117,18 @@ input {
 	width: 75%;
 }
 
-footer{
-	font-size: .9em;
-	position:fixed;
-	bottom: 0;
-	right: 0;
+footer {
+	text-align: center;
+	flex-shrink: 0;
+	height: 40px;
+}
+
+footer a {
+	opacity: .3;
+}
+
+footer a:hover {
+	opacity: 1;
 }
 
 .lang-selector {

diff --git a/client-data/index.html b/client-data/index.html
@@ -63,9 +63,12 @@ <h3>{{translations.index_title}}</h3>
 
 
 	<footer>
-		<a href="https://github.com/lovasoa/whitebophir" class="smallink"
-			rel="external">{{translations.view_source}}</a>
+		<a href="https://www.instagram.com/wbo_whiteboard/" class="smallink" rel="external" title="Instagram"><img
+				alt="instagram" src="instagram.svg" width="30" height="30" /></a>
+		<a href="https://github.com/lovasoa/whitebophir" class="smallink" rel="external"
+			title="{{translations.view_source}}"><img alt="github" src="github.svg" width="30" height="30" />
+		</a>
 	</footer>
 </body>
 
-</html>
+</html>
diff --git a/client-data/instagram.svg b/client-data/instagram.svg