1
0
Fork 0
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:
Starbeamrainbowlabs 2017-04-25 19:34:03 +01:00
parent ce585bfd94
commit ad8fc60db8
7 changed files with 148 additions and 11 deletions

View file

@ -331,7 +331,8 @@ class BoardWindow extends EventEmitter
this.Id = message.Id;
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
this.pencil = new Pencil(this.rippleLink, this, this.canvas);

View file

@ -18,14 +18,69 @@ body
position: absolute;
top: 0; left: 0; bottom: 0;
z-index: 2000;
display: flex;
display: flex; flex-direction: column;
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);
}
.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
{
top: 0.2em !important; right: 0.2em !important;

View file

@ -38,6 +38,8 @@ class RippleLink extends EventEmitter
handleDisconnection(event) {
console.error("[ripple link] Lost connection.");
delete this.boardWindow.sidebar.querySelector(".connection-indicator").dataset.connected;
this.emit("disconnect", event);
}

View 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;

View file

@ -7,7 +7,27 @@
<body>
<aside id="sidebar">
<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>&#x1f58c;</span>
<span class="tool-selector" data-tool-name="pan" title="Pan around the plane.">&harr;</span>
<span class="tool-selector" data-tool-name="pointer" title="Point at things, but don't change them.">&#x2739;</span>
</section>
<hr />
<div class="palette">
<!-- todo figure out a better colour palette -->
<span class="palette-colour" style="background-color: white;"></span>
@ -21,11 +41,6 @@
<span class="palette-colour" style="background-color: saddlebrown;"></span>
</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>
<canvas id="canvas-main"></canvas>

View file

@ -11,12 +11,11 @@
"favicon-notification": "^0.1.4",
"fps-indicator": "^1.0.2",
"pan-zoom": "^2.0.0",
"rollupify": "^0.3.8"
"keycode": "^2.1.8",
},
"devDependencies": {
"acorn": "^4.0.11",
"esprima": "^3.1.3",
"keycode": "^2.1.8",
"rollupify": "^0.3.8"
},
"config": {

View file

@ -106,6 +106,7 @@
<EmbeddedResource Include="ClientFiles\NibriClient.js" />
<EmbeddedResource Include="ClientFiles\Nibri.css" />
<EmbeddedResource Include="ClientFiles\favicon.ico" />
<EmbeddedResource Include="ClientFiles\nibriboard.svg" />
</ItemGroup>
<ItemGroup>
<Folder Include="RippleSpace\" />