[client] Upgrade sidebar. It's not totally functional yet :P
This commit is contained in:
parent
ce585bfd94
commit
ad8fc60db8
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>🖌</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">
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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\" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue