mirror of
https://github.com/sbrl/Nibriboard.git
synced 2018-01-10 21:33:49 +00:00
[client] Upgrade sidebar. It's not totally functional yet :P
This commit is contained in:
parent
ce585bfd94
commit
ad8fc60db8
7 changed files with 148 additions and 11 deletions
|
|
@ -331,7 +331,8 @@ class BoardWindow extends EventEmitter
|
||||||
this.Id = message.Id;
|
this.Id = message.Id;
|
||||||
this.Colour = message.Colour;
|
this.Colour = message.Colour;
|
||||||
|
|
||||||
this.sidebar.style.borderTopColor = this.Colour;
|
this.sidebar.querySelector(".name").style.borderTopColor = this.Colour;
|
||||||
|
this.sidebar.querySelector(".connection-indicator").dataset.connected = "yes";
|
||||||
|
|
||||||
// The pencil that draws the lines
|
// The pencil that draws the lines
|
||||||
this.pencil = new Pencil(this.rippleLink, this, this.canvas);
|
this.pencil = new Pencil(this.rippleLink, this, this.canvas);
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,69 @@ body
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0; left: 0; bottom: 0;
|
top: 0; left: 0; bottom: 0;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
display: flex;
|
display: flex; flex-direction: column;
|
||||||
|
|
||||||
padding: 0.3em 0.45em;
|
padding: 0.3em 0.45em;
|
||||||
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: hsla(27, 91%, 81%, 0.71);
|
||||||
|
box-shadow: 0.5em 0 1em rgba(185, 183, 183, 0.56);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
max-width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-indicator
|
||||||
|
{
|
||||||
|
width: 1em; height: 1em;
|
||||||
|
margin: 0.6em 0.2em;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
background: hsl(8, 100%, 50%);
|
||||||
|
box-shadow: 0 0 0.5em hsl(8, 100%, 50%);
|
||||||
|
}
|
||||||
|
.connection-indicator[data-connected]
|
||||||
|
{
|
||||||
|
background: hsl(100, 100%, 50%);
|
||||||
|
box-shadow: 0 0 0.5em hsl(100, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name
|
||||||
|
{
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
border-top: 0.2em solid rgba(255, 255, 255, 0.3);
|
border-top: 0.2em solid rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tool-selector
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
padding: 0.3em;
|
||||||
|
border-radius: 0.1em;
|
||||||
|
border: 0.2em solid transparent;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tool-selector[data-selected]
|
||||||
|
{
|
||||||
|
border: 0.2em dashed hsl(219, 87%, 54%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-colour
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
width: 50%; height: 3em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.fps
|
.fps
|
||||||
{
|
{
|
||||||
top: 0.2em !important; right: 0.2em !important;
|
top: 0.2em !important; right: 0.2em !important;
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,8 @@ class RippleLink extends EventEmitter
|
||||||
|
|
||||||
handleDisconnection(event) {
|
handleDisconnection(event) {
|
||||||
console.error("[ripple link] Lost connection.");
|
console.error("[ripple link] Lost connection.");
|
||||||
|
delete this.boardWindow.sidebar.querySelector(".connection-indicator").dataset.connected;
|
||||||
|
|
||||||
this.emit("disconnect", event);
|
this.emit("disconnect", event);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
64
Nibriboard/ClientFiles/Sidebar.js
Normal file
64
Nibriboard/ClientFiles/Sidebar.js
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
window.EventEmitter = require("event-emitter-es6");
|
||||||
|
|
||||||
|
class Sidebar extends EventEmitter
|
||||||
|
{
|
||||||
|
constructor(inSidebar)
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.sidebar = inSidebar;
|
||||||
|
|
||||||
|
this.currentToolElement = this.sidebar.querySelector(".tools .tool-selector[]")
|
||||||
|
this.currentTool = "brush";
|
||||||
|
}
|
||||||
|
|
||||||
|
setupToolSelectors()
|
||||||
|
{
|
||||||
|
var toolSelectors = this.sidebar.querySelectorAll(".tools .tool-selector");
|
||||||
|
for(let i = 0; i < toolSelectors.length; i++)
|
||||||
|
{
|
||||||
|
toolSelectors[i].addEventListener("mouseup", this.handleSelectTool.bind(this));
|
||||||
|
toolSelectors[i].addEventListener("touchend", this.handleSelectTool.bind(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles tool changes requested by the user.
|
||||||
|
*/
|
||||||
|
handleSelectTool(event)
|
||||||
|
{
|
||||||
|
delete this.currentToolElement.dataset.selected;
|
||||||
|
this.currentToolElement = event.target;
|
||||||
|
this.currentToolElement.dataset.selected = "yes";
|
||||||
|
this.currentTool = this.currentToolElement.dataset.toolName;
|
||||||
|
|
||||||
|
this.emit("toolchange", { newTool: this.currentTool });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets the displayed connection status.
|
||||||
|
* @param {bool} newStatus The new connection status to display. true = connected - false = disconnected.
|
||||||
|
*/
|
||||||
|
setConnectedStatus(newStatus)
|
||||||
|
{
|
||||||
|
if(newStatus)
|
||||||
|
this.sidebar.querySelector(".connection-indicator").dataset.connected = "yes";
|
||||||
|
else
|
||||||
|
delete this.sidebar.querySelector(".connection-indicator").dataset.connected;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the username displayed.
|
||||||
|
* @param {string} newName The new name to display inthe sidebar.
|
||||||
|
*/
|
||||||
|
updateDisplayedName(newName)
|
||||||
|
{
|
||||||
|
this.sidebar.querySelector(".name").innerHTML = newName;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
|
|
@ -7,7 +7,27 @@
|
||||||
<body>
|
<body>
|
||||||
<aside id="sidebar">
|
<aside id="sidebar">
|
||||||
<img class="logo" src="nibriboard.svg" />
|
<img class="logo" src="nibriboard.svg" />
|
||||||
<div class="Name">Your name here</div>
|
<div class="top-row">
|
||||||
|
<span class="connection-indicator"></span>
|
||||||
|
<span class="name">Your name here</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<section class="brush-settings">
|
||||||
|
<div class="current-brush"></div>
|
||||||
|
|
||||||
|
<input type="range" min="1" max="30" step="1" id="brush-width" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="tools">
|
||||||
|
<span class="tool-selector" data-tool-name="pencil" title="Draw lines with a brush." data-selected>🖌</span>
|
||||||
|
<span class="tool-selector" data-tool-name="pan" title="Pan around the plane.">↔</span>
|
||||||
|
<span class="tool-selector" data-tool-name="pointer" title="Point at things, but don't change them.">✹</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
<div class="palette">
|
<div class="palette">
|
||||||
<!-- todo figure out a better colour palette -->
|
<!-- todo figure out a better colour palette -->
|
||||||
<span class="palette-colour" style="background-color: white;"></span>
|
<span class="palette-colour" style="background-color: white;"></span>
|
||||||
|
|
@ -21,11 +41,6 @@
|
||||||
<span class="palette-colour" style="background-color: saddlebrown;"></span>
|
<span class="palette-colour" style="background-color: saddlebrown;"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="tools">
|
|
||||||
<span class="tool-selector" data-tool="pencil"></span>
|
|
||||||
<span class="tool-selector" data-tool="pan"></span>
|
|
||||||
<span class="tool-selector" data-tool="pointer"></span>
|
|
||||||
</section>
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<canvas id="canvas-main"></canvas>
|
<canvas id="canvas-main"></canvas>
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,11 @@
|
||||||
"favicon-notification": "^0.1.4",
|
"favicon-notification": "^0.1.4",
|
||||||
"fps-indicator": "^1.0.2",
|
"fps-indicator": "^1.0.2",
|
||||||
"pan-zoom": "^2.0.0",
|
"pan-zoom": "^2.0.0",
|
||||||
"rollupify": "^0.3.8"
|
"keycode": "^2.1.8",
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"acorn": "^4.0.11",
|
"acorn": "^4.0.11",
|
||||||
"esprima": "^3.1.3",
|
"esprima": "^3.1.3",
|
||||||
"keycode": "^2.1.8",
|
|
||||||
"rollupify": "^0.3.8"
|
"rollupify": "^0.3.8"
|
||||||
},
|
},
|
||||||
"config": {
|
"config": {
|
||||||
|
|
|
||||||
|
|
@ -106,6 +106,7 @@
|
||||||
<EmbeddedResource Include="ClientFiles\NibriClient.js" />
|
<EmbeddedResource Include="ClientFiles\NibriClient.js" />
|
||||||
<EmbeddedResource Include="ClientFiles\Nibri.css" />
|
<EmbeddedResource Include="ClientFiles\Nibri.css" />
|
||||||
<EmbeddedResource Include="ClientFiles\favicon.ico" />
|
<EmbeddedResource Include="ClientFiles\favicon.ico" />
|
||||||
|
<EmbeddedResource Include="ClientFiles\nibriboard.svg" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<Folder Include="RippleSpace\" />
|
<Folder Include="RippleSpace\" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue