Skip to content
GitLab
Unverified Commit 6ed2e694 authored by katja heuer's avatar katja heuer Committed by GitHub
Browse files

Merge pull request #11 from neuroanatomy/master 

sync
parents d9fef53c 68af13f1
Hide whitespace changes
Inline Side-by-side
controller/atlasmakerServer/atlasmakerServer.js
View file @ 6ed2e694
......@@ -21,7 +21,7 @@ tracer.log(whitelist);
tracer.log("Use blacklist:", useBlacklist);
tracer.log(blacklist);
var http = require('http');
// var http = require('http');
let server;
const ws_cfg = JSON.parse(fs.readFileSync('ws_cfg.json'));
const {secure, port} = ws_cfg;
......@@ -37,7 +37,7 @@ if(secure) {
|| req.connection.remoteAddress
|| req.socket.remoteAddress
|| req.connection.socket.remoteAddress;
}).listen(ws_cfg.port);
}).listen(port);
} else {
var http = require('http');
server = http.createServer(function(req, res) {
......
package-lock.json
View file @ 6ed2e694
......@@ -619,9 +619,9 @@
"dev": true
},
"bluebird": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.1.tgz",
"integrity": "sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==",
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"bn.js": {
......@@ -1781,6 +1781,12 @@
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"commondir": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
......@@ -2270,9 +2276,9 @@
"dev": true
},
"serialize-javascript": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.0.tgz",
"integrity": "sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ==",
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
"integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
"dev": true
},
"ssri": {
......@@ -3622,6 +3628,15 @@
"pkg-dir": "^3.0.0"
}
},
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dev": true,
"requires": {
"locate-path": "^3.0.0"
}
},
"flat-cache": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz",
......@@ -4776,14 +4791,6 @@
"requires": {
"p-locate": "^3.0.0",
"path-exists": "^3.0.0"
},
"dependencies": {
"path-exists": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true
}
}
},
"lodash": {
......@@ -5778,6 +5785,12 @@
"integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
"dev": true
},
"path-exists": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
......@@ -5867,17 +5880,6 @@
"dev": true,
"requires": {
"find-up": "^3.0.0"
},
"dependencies": {
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dev": true,
"requires": {
"locate-path": "^3.0.0"
}
}
}
},
"pluralize": {
......@@ -6938,9 +6940,9 @@
}
},
"serialize-javascript": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
"integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==",
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
"integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
"dev": true
},
"serve-favicon": {
......@@ -7516,35 +7518,27 @@
"dev": true
},
"terser": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-4.4.0.tgz",
"integrity": "sha512-oDG16n2WKm27JO8h4y/w3iqBGAOSCtq7k8dRmrn4Wf9NouL0b2WpMHGChFGZq4nFAQy1FsNJrVQHfurXOSTmOA==",
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/terser/-/terser-4.4.2.tgz",
"integrity": "sha512-Uufrsvhj9O1ikwgITGsZ5EZS6qPokUOkCegS7fYOdGTv+OA90vndUbU6PEjr5ePqHfNUbGyMO7xyIZv2MhsALQ==",
"dev": true,
"requires": {
"commander": "^2.20.0",
"source-map": "~0.6.1",
"source-map-support": "~0.5.12"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
}
}
},
"terser-webpack-plugin": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz",
"integrity": "sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==",
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz",
"integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==",
"dev": true,
"requires": {
"cacache": "^12.0.2",
"find-cache-dir": "^2.1.0",
"is-wsl": "^1.1.0",
"schema-utils": "^1.0.0",
"serialize-javascript": "^1.7.0",
"serialize-javascript": "^2.1.2",
"source-map": "^0.6.1",
"terser": "^4.1.2",
"webpack-sources": "^1.4.0",
......
view/atlasmaker/src/atlasmaker-paint.js
View file @ 6ed2e694
/* global AtlasMakerWidget $ */
/*! AtlasMaker: Painting commands */
import showIcon from "./svg/show.svg";
/**
* @page AtlasMaker: Painting commands
*/
......@@ -28,13 +30,15 @@ export var AtlasMakerPaint = {
break;
case 'm':
if(!usr.pointer) {
usr.pointer = $([
'<div style="display:inline-block;height:20px;margin-left:-10px;margin-top:-10px;position:absolute;color:white">',
'<img src="' + me.hostname + '/img/show.svg" height="100%"/>',
((usr.username === 'Anonymous')?u:usr.username),
'</div>'
].join(''));
$("#resizable").append(usr.pointer);
const div = document.createElement("div");
const icon = new Image();
icon.src = showIcon;
icon.style.cssText = "height:100%";
div.appendChild(icon);
div.style.cssText = "display:inline-block;height:20px;margin-left:-10px;margin-top:-10px;position:absolute;color:white";
div.innerHTML += ((usr.username === 'Anonymous')?u:usr.username);
usr.pointer = $(div);
$("#resizable").append(usr.pointer); // document.getElementById("resizable").appendChild(div);
}
usr.pointer.css({left:x*$("#resizable").width()/me.brain_W, top:y*$("#resizable").height()/me.brain_H});
break;
......@@ -80,13 +84,23 @@ export var AtlasMakerPaint = {
}
} else {
if(!usr.pointer) {
usr.pointer = $([
'<div style="display:inline-block;height:20px;margin-left:-10px;margin-top:-10px;position:absolute;color:white">',
'<img src="' + me.hostname + '/img/show.svg" height="100%"/>',
((usr.username === 'Anonymous')?u:usr.username),
'</div>'
].join(''));
$("#resizable").append(usr.pointer);
const div = document.createElement("div");
const icon = new Image();
icon.src = showIcon;
icon.style.cssText = "height:100%";
div.appendChild(icon);
div.style.cssText = "display:inline-block;height:20px;margin-left:-10px;margin-top:-10px;position:absolute;color:white";
div.innerHTML += ((usr.username === 'Anonymous')?u:usr.username);
usr.pointer = $(div);
$("#resizable").append(usr.pointer); // document.getElementById("resizable").appendChild(div);
// usr.pointer = $([
// '<div style="display:inline-block;height:20px;margin-left:-10px;margin-top:-10px;position:absolute;color:white">',
// '<img src="' + me.hostname + './svg/show.svg" height="100%"/>',
// ((usr.username === 'Anonymous')?u:usr.username),
// '</div>'
// ].join(''));
// $("#resizable").append(usr.pointer);
}
usr.pointer.css({left:x*$("#resizable").width()/me.brain_W, top:y*$("#resizable").height()/me.brain_H});
}
......
view/atlasmaker/src/atlasmaker-ws.js
View file @ 6ed2e694
......@@ -383,11 +383,9 @@ export var AtlasMakerWS = {
*/
receivePaintMessage: function receivePaintMessage(data) {
var me=AtlasMakerWidget;
var {uid:u, c, data:msg}=data; // user
var x=parseInt(msg.x); // x coordinate
var y=parseInt(msg.y); // y coordinate
var {uid:u, data:msg}=data; // user
if(me.Collab[u]) { me.paintxy(u, c, x, y, me.Collab[u]); }
if(me.Collab[u]) { me.paintxy(u, msg.c, msg.x, msg.y, me.Collab[u]); }
},
/**
......@@ -415,11 +413,8 @@ export var AtlasMakerWS = {
receiveShowMessage: function receiveShowMessage(data) {
var me=AtlasMakerWidget;
var {uid:u, data:msg} = data; // user
var {c} = msg; // command
var x=parseInt(msg.x); // x coordinate
var y=parseInt(msg.y); // y coordinate
if(me.Collab[u]) { me.showxy(u, c, x, y, me.Collab[u]); }
if(me.Collab[u]) { me.showxy(u, msg.c, msg.x, msg.y, me.Collab[u]); }
},
/**
......
view/atlasmaker/src/css/atlasmaker.css
View file @ 6ed2e694
......@@ -53,8 +53,8 @@
position:relative;
pointer-events:none;
}
#tools-side #tools-minimized,
#tools-side #tools-maximized {
#tools-side #tools-minimized div,
#tools-side #tools-maximized div {
pointer-events: all;
}
.atlasmaker-fullscreen #atlasmaker {
......
view/atlasmaker/src/html/toolsFull.html
View file @ 6ed2e694
<div id='tools-side' style='display:block'>
<div id='tools-minimized'>
<div id="tools-side" style="display:block">
<div id="tools-minimized">
<div>
<img alt="menu" style='width:28px;position:absolute;top:10px;left:10px' src='./img/bars.svg' />
<img alt="menu" style="width:28px;position:absolute;top:10px;left:10px" src="./img/bars.svg" />
</div>
</div>
<div id='tools-maximized' style='display:flex;flex-direction:column;height:100%'>
<div id="tools-maximized" style="display:flex;flex-direction:column;height:100%">
<!-- tools hide/show, display left/right -->
<div id='headerBlock' style='flex:0 1 28px;background:#333'>
<div style='display:flex'>
<div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' alt="close" src='./img/times-circle.svg' /></div></div>
<div style='flex:1 1 auto'></div>
<div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' alt="left" src='./img/caret-square-o-left.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' alt="right" src='./img/caret-square-o-right.svg' /></div></div>
<div id="headerBlock" style="flex:0 1 28px;background:#333">
<div style="display:flex">
<div style="flex:0 0 28px"><div id="display-minimize" title="Minimize toolbar" class="a push noBorder"><img class="icon" alt="close" src="./img/times-circle.svg" /></div></div>
<div style="flex:1 1 auto"></div>
<div style="flex:0 0 28px"><div id="display-left" title="Display to the left" class="a push noBorder"><img class="icon" alt="left" src="./img/caret-square-o-left.svg" /></div></div>
<div style="flex:0 0 28px"><div id="display-right" title="Display to the right" class="a push noBorder"><img class="icon" alt="right" src="./img/caret-square-o-right.svg" /></div></div>
</div>
</div>
<!-- slider -->
<div id='sliderBlock' style='flex:0 0 28px'>
<div style='display:flex'>
<div style='flex:0 0 28px'>
<div id='prev' class='a push'>-</div>
<div id="sliderBlock" style="flex:0 0 28px">
<div style="display:flex">
<div style="flex:0 0 28px">
<div id="prev" class="a push">-</div>
</div>
<div style='flex:1 0 28px;display:flex'>
<div style='flex:1;position:relative'>
<div id='slice' class='slider' data-max=100 data-val=0 style='position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)'>
<div class='track' style='position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block'></div>
<div class='thumb' style='position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block'></div>
<div style="flex:1 0 28px;display:flex">
<div style="flex:1;position:relative">
<div id="slice" class="slider" data-max="100" data-val="0" style="position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)">
<div class="track" style="position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block"></div>
<div class="thumb" style="position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block"></div>
</div>
</div>
</div>
<div style='flex:0 0 28px'>
<div id='next' class='a push'>+</div>
<div style="flex:0 0 28px">
<div id="next" class="a push">+</div>
</div>
</div>
</div>
<!-- buttons -->
<div id='buttonsBlock' style='flex:0 0 auto'>
<div style='display:flex;flex-wrap:wrap'>
<div id="buttonsBlock" style="flex:0 0 auto">
<div style="display:flex;flex-wrap:wrap">
<div style='flex:1 0 250px;width:50px'>
<div id='plane' style='display:flex' class='chose'>
<div style='flex:1'><div title='sag' class='a pressed'>Sag</div></div>
<div style='flex:1'><div title='cor' class='a'>Cor</div></div>
<div style='flex:1'><div title='axi' class='a'>Axi</div></div>
<div style="flex:1 0 250px;width:50px">
<div id="plane" style="display:flex" class="chose">
<div style="flex:1"><div title="sag" class="a pressed">Sag</div></div>
<div style="flex:1"><div title="cor" class="a">Cor</div></div>
<div style="flex:1"><div title="axi" class="a">Axi</div></div>
</div>
<div style='display:flex'>
<div style='flex:1'><div id='fullscreen' title='Full screen' class='a toggle'><img class='icon' alt="fullscreen" src='./img/fullscreen.svg' /></div></div>
<div style='flex:1'><div id='3drender' title='3D render' class='a push'><img class='icon' alt="3d render" src='./img/3drender.svg' /></div></div>
<div style='flex:1'><div id='link' title='Link' class='a push'><img class='icon' alt="link" src='./img/link.svg' /></div></div>
<div style='flex:1'><div id='bubble' title='Chat' class='a toggle pressed'><img class='icon' alt="chat" src='./img/chat.svg' /></div></div>
<div style='flex:1'><div id='upload' title='Upload' class='a push'><img class='icon' alt="upload" src='./img/upload.svg' /></div></div>
<div style='flex:1'><div id='download' title='Download' class='a push'><img class='icon' alt="download" src='./img/download.svg' /></div></div>
<div style='flex:1'><div id='precise' title='Precise cursor' class='a toggle'><img class='icon' alt="precise cursor" src='./img/preciseCursor.svg' /></div></div>
<div style="display:flex">
<div style="flex:1"><div id="fullscreen" title="Full screen" class="a toggle"><img class="icon" alt="fullscreen" src="./img/fullscreen.svg" /></div></div>
<div style="flex:1"><div id="3drender" title="3D render" class="a push"><img class="icon" alt="3d render" src="./img/3drender.svg" /></div></div>
<div style="flex:1"><div id="link" title="Link" class="a push"><img class="icon" alt="link" src="./img/link.svg" /></div></div>
<div style="flex:1"><div id="bubble" title="Chat" class="a toggle pressed"><img class="icon" alt="chat" src="./img/chat.svg" /></div></div>
<div style="flex:1"><div id="upload" title="Upload" class="a push"><img class="icon" alt="upload" src="./img/upload.svg" /></div></div>
<div style="flex:1"><div id="download" title="Download" class="a push"><img class="icon" alt="download" src="./img/download.svg" /></div></div>
<div style="flex:1"><div id="precise" title="Precise cursor" class="a toggle"><img class="icon" alt="precise cursor" src="./img/preciseCursor.svg" /></div></div>
</div>
</div>
<div style='flex:1 0 250px;width:50px'>
<div id='paintTool' style='display:flex' class='chose'>
<div style='flex:1'><div title='Show' class='a pressed'><img class='icon' alt="show" src='./img/show.svg' /></div></div>
<div style='flex:1'><div title='Paint' class='a'><img class='icon' alt="paint" src='./img/paint.svg' /></div></div>
<div style='flex:1'><div title='Erase' class='a'><img class='icon' alt="erase" src='./img/erase.svg' /></div></div>
<div style='flex:1'><div title='Measure' class='a'><img class='icon' alt="ruler" src='./img/ruler.svg' /></div></div>
<div style='flex:1'><div title='Adjust' class='a'><img class='icon' alt="adjust" src='./img/adjust.svg' /></div></div>
<div style='flex:1'><div title='Eyedrop' class='a'><img class='icon' alt="eyedropper" src='./img/eyedropper.svg' /></div></div>
<div style="flex:1 0 250px;width:50px">
<div id="paintTool" style="display:flex" class="chose">
<div style="flex:1"><div title="Show" class="a pressed"><img class="icon" alt="show" src="./img/show.svg" /></div></div>
<div style="flex:1"><div title="Paint" class="a"><img class="icon" alt="paint" src="./img/paint.svg" /></div></div>
<div style="flex:1"><div title="Erase" class="a"><img class="icon" alt="erase" src="./img/erase.svg" /></div></div>
<div style="flex:1"><div title="Measure" class="a"><img class="icon" alt="ruler" src="./img/ruler.svg" /></div></div>
<div style="flex:1"><div title="Adjust" class="a"><img class="icon" alt="adjust" src="./img/adjust.svg" /></div></div>
<div style="flex:1"><div title="Eyedrop" class="a"><img class="icon" alt="eyedropper" src="./img/eyedropper.svg" /></div></div>
</div>
<div style='display:flex'>
<div style='flex:1'><div id='color' title='Color' style='height:24px;background:#f00' class='a push'></div></div>
<div style='flex:1'><div id='fill' class='a toggle'><img class='icon' alt="fill" src='./img/fill.svg' /></div></div>
<div style='flex:1'><div id='undo' title='Undo' class='a push'><img class='icon' alt="undo" src='./img/undo.svg' /></div></div>
<div style='flex:1'><div id='save' title='Save' class='a push'><img class='icon' alt="save" src='./img/floppy.svg' /></div></div>
<div style="display:flex">
<div style="flex:1"><div id="color" title="Color" style="height:24px;background:#f00" class="a push"></div></div>
<div style="flex:1"><div id="fill" class="a toggle"><img class="icon" alt="fill" src="./img/fill.svg" /></div></div>
<div style="flex:1"><div id="undo" title="Undo" class="a push"><img class="icon" alt="undo" src="./img/undo.svg" /></div></div>
<div style="flex:1"><div id="save" title="Save" class="a push"><img class="icon" alt="save" src="./img/floppy.svg" /></div></div>
</div>
</div>
......@@ -79,23 +79,23 @@
</div>
<!-- pen size -->
<div id='penSizeBlock' style='flex:0 0 28px'>
<div style='display:flex' class='chose' id='penSize'>
<div style='flex:1'><div title='1' class='a pressed'>1</div></div>
<div style='flex:1'><div title='2' class='a'>2</div></div>
<div style='flex:1'><div title='3' class='a'>3</div></div>
<div style='flex:1'><div title='5' class='a'>5</div></div>
<div style='flex:1'><div title='10' class='a'>10</div></div>
<div style='flex:1'><div title='15' class='a'>15</div></div>
<div id="penSizeBlock" style="flex:0 0 28px">
<div style="display:flex" class="chose" id="penSize">
<div style="flex:1"><div title="1" class="a pressed">1</div></div>
<div style="flex:1"><div title="2" class="a">2</div></div>
<div style="flex:1"><div title="3" class="a">3</div></div>
<div style="flex:1"><div title="5" class="a">5</div></div>
<div style="flex:1"><div title="10" class="a">10</div></div>
<div style="flex:1"><div title="15" class="a">15</div></div>
</div>
</div>
<!-- chat -->
<div id='chatBlock' style='flex:1 1 auto;position:relative;display:flex'>
<div id='chatBlockContent' style='flex:1;display:flex;flex-direction:column'>
<div style='flex:0 0 28px'><div id='chat' class='label'>Chat (disconnected)</div></div>
<div style='flex:1 1 58px;display:flex'><div id='log' class='a' style='flex:1;height:auto'></div></div>
<div style='flex:0 0 28px'><input id='msg' type='text' style='width:100%'></div>
<div id="chatBlock" style="flex:1 1 auto;position:relative;display:flex">
<div id="chatBlockContent" style="flex:1;display:flex;flex-direction:column">
<div style="flex:0 0 28px"><div id="chat" class="label">Chat (disconnected)</div></div>
<div style="flex:1 1 58px;display:flex"><div id="log" class="a" style="flex:1;height:auto"></div></div>
<div style="flex:0 0 28px"><input id="msg" type="text" style="width:100%"></div>
</div>
</div>
</div>
......@@ -103,30 +103,30 @@
</div>
<!-- Loading indicator -->
<div id='loadingIndicator'>
<div id="loadingIndicator">
<p>Loading...</p>
<div class='disc'></div>
<div class="disc"></div>
</div>
<!-- End Loading indicator -->
<!-- Labels -->
<div id='labelset'>
<div style='z-index:23;text-align:right'>
<img id='labels-close' class='button' alt="close" src='./img/times-circle.svg'/>
<div id="labelset">
<div style="z-index:23;text-align:right">
<img id="labels-close" class="button" alt="close" src="./img/times-circle.svg"/>
</div>
<ul style='padding-left:1rem'>
<ul style="padding-left:1rem">
<li>
<b>Label Set</b><br/>
<span id='labels-name'></span>
<span id="labels-name"></span>
</li>
<li>
<b>Labels</b><br/>
<div id='label-list'>
<div id="label-list">
</div>
<div id='label-template'>
<div class='label-color'></div>
<span class='label-name'>Label Name</name>
<div id="label-template">
<div class="label-color"></div>
<span class="label-name">Label Name</span>
</div>
</li>
</ul>
......
view/atlasmaker/src/html/toolsLight.html
View file @ 6ed2e694
<div id='tools-side' style='display:block'>
<div id='tools-minimized'>
<div id="tools-side" style="display:block">
<div id="tools-minimized">
<div>
<img style='width:28px;position:absolute;top:10px;left:10px' src='/img/bars.svg' />
<img style="width:28px;position:absolute;top:10px;left:10px" src="./img/bars.svg" />
</div>
</div>
<div id='tools-maximized' style='display:flex;flex-direction:column;height:100%'>
<div id="tools-maximized" style="display:flex;flex-direction:column;height:100%">
<!-- tools hide/show, display left/right -->
<div id='headerBlock' style='flex:0 1 28px;background:#333'>
<div id="headerBlock" style="flex:0 1 28px;background:#333">
<div style='display:flex'>
<div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' src='/img/times-circle.svg' /></div></div>
<div style='flex:1 1 auto'></div>
<div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' src='/img/caret-square-o-left.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' src='/img/caret-square-o-right.svg' /></div></div>
<div style="display:flex">
<div style="flex:0 0 28px"><div id="display-minimize" title="Minimize toolbar" class="a push noBorder"><img class="icon" src="./img/times-circle.svg" /></div></div>
<div style="flex:1 1 auto"></div>
<div style="flex:0 0 28px"><div id="display-left" title="Display to the left" class="a push noBorder"><img class="icon" src="./img/caret-square-o-left.svg" /></div></div>
<div style="flex:0 0 28px"><div id="display-right" title="Display to the right" class="a push noBorder"><img class="icon" src="./img/caret-square-o-right.svg" /></div></div>
</div>
</div>
<!-- slider -->
<div id='sliderBlock' style='flex:0 0 28px'>
<div style='display:flex'>
<div style='flex:0 0 28px'>
<div id='prev' class='a push'>-</div>
<div id="sliderBlock" style="flex:0 0 28px">
<div style="display:flex">
<div style="flex:0 0 28px">
<div id="prev" class="a push">-</div>
</div>
<div style='flex:1 0 28px;display:flex'>
<div style='flex:1;position:relative'>
<div id='slice' class='slider' data-max=100 data-val=0 style='position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)'>
<div class='track' style='position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block'></div>
<div class='thumb' style='position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block'></div>
<div style="flex:1 0 28px;display:flex">
<div style="flex:1;position:relative">
<div id="slice" class="slider" data-max="100" data-val="0" style="position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)">
<div class="track" style="position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block"></div>
<div class="thumb" style="position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block"></div>
</div>
</div>
</div>
<div style='flex:0 0 28px'>
<div id='next' class='a push'>+</div>
<div style="flex:0 0 28px">
<div id="next" class="a push">+</div>
</div>
</div>
</div>
<!-- buttons -->
<div id='buttonsBlock' style='flex:0 0 auto'>
<div style='display:flex;flex-wrap:wrap'>
<div id="buttonsBlock" style="flex:0 0 auto">
<div style="display:flex;flex-wrap:wrap">
<div style='flex:1 0 150px;width:50px'>
<div id='plane' style='display:flex' class='chose'>
<div style='flex:1'><div title='sag' class='a pressed'>Sag</div></div>
<div style='flex:1'><div title='cor' class='a'>Cor</div></div>
<div style='flex:1'><div title='axi' class='a'>Axi</div></div>
<div style="flex:1 0 150px;width:50px">
<div id="plane" style="display:flex" class="chose">
<div style="flex:1"><div title="sag" class="a pressed">Sag</div></div>
<div style="flex:1"><div title="cor" class="a">Cor</div></div>
<div style="flex:1"><div title="axi" class="a">Axi</div></div>
</div>