Commit 0a4ce823 authored by Roberto Toro's avatar Roberto Toro

migrate css and user page to webpack

parent 5afda8cc
......@@ -15,6 +15,7 @@ public/js/mri-page.js
public/js/project-new-page.js
public/js/project-page.js
public/js/project-settings-page.js
public/lib/.DS_Store
public/lib/atlasMaker.js
public/lib/brainbox.js
test/screenshots/
......
This source diff could not be displayed because it is too large. You can view the blob instead.
* {
font-size:14px;
color:white;
}
html,body {
background-color:#222;
height:100%;
margin:0px;
font: 16px/20px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
h1 {
font-size: 1rem;
text-align:center;
}
h2, p {
font-family: sans-serif;
text-align:center;
}
a {
color:white;
}
.linkNoULine {
text-decoration: none;
font-weight: lighter;
}
#menu {
float:right;
/* margin-top: 10px; */
margin-right: 10px;
display: inline-block;
font: 16px/24px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#menu img{
margin-left: 15px;
}
#MyLogin {
display:inline-block;
margin-left:15px;
}
/*
.icon {
width: 0.9rem;
height: 0.9rem;
margin: 8px 2px;
vertical-align: middle;
cursor: pointer;
}
*/
\ No newline at end of file
......@@ -6,9 +6,6 @@
<meta name="google-site-verification" content="L1xtN9FsDfn0xTs79ssAN_BXfcr6t-wkYW6iFjCOuy8" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/index-style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/ui.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
</head>
......@@ -81,7 +78,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>
<script src="/js/brainbox-intro.js"></script>
-->
<script src="/lib/brainbox.min.js"></script>
<script src="/js/index-page.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
......
......@@ -5,17 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<!--
<link rel="stylesheet" type="text/css" href="/stylesheets/atlasMaker.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/ui.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/loading-style.css" />
-->
<link rel="stylesheet" type="text/css" href="/stylesheets/textAnnotations.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/stylesheets/mri-style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/access-style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/dropdown-style.css" />
</head>
<body>
......
......@@ -6,11 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/textAnnotations.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/ui.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/stylesheets/project-style.css" />
</head>
<body>
......
......@@ -5,11 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/ui.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/projectNew-style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
......
......@@ -6,14 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{projectShortname}}</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/ui.css" />
<link rel="stylesheet" href="/lib/jquery-ui.css"><!--https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css-->
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:100' type='text/css'>
<link rel="stylesheet" type="text/css" href="/stylesheets/projectSettings-style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/access-style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/dropdown-style.css" />
</head>
<body>
......
......@@ -6,10 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/ui.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/stylesheets/user-style.css" />
</head>
<body>
......@@ -141,151 +138,12 @@
</div>
<script src="/lib/jquery-3.1.1.min.js"></script>
<script>
var userInfo='{{{userInfo}}}';
var cursorFiles = 0;
var cursorAtlas = 0;
var cursorProjects = 0;
userInfo=JSON.parse(userInfo);
userInfo.MRIFiles = [];
userInfo.atlasFiles = [];
userInfo.projects = [];
// switch tabs
$("a.tab").click(function() {
$("a.tab").removeClass("selected");
$(this).addClass("selected");
$(".tabContent").hide();
selectTab($(this).attr('value'));
});
selectTab('{{tab}}');
queryFiles();
queryAtlas();
queryProjects();
$("#addProject").click(function(){location="/project/new"});
$("#settings").click(function(){
var pathname=location.pathname;
if(pathname.slice(-1)=="/")
location=pathname+"settings";
else
location=pathname+"/settings";
});
function selectTab(tab) {
$(".tab").removeClass("selected");
switch(tab) {
case "mri":
$(".tab:eq(0)").addClass("selected");
$("#MRIFiles").show();
break;
case "atlas":
$(".tab:eq(1)").addClass("selected");
$("#atlasFiles").show();
break;
case "projects":
$(".tab:eq(2)").addClass("selected");
$("#projects").show();
break;
}
}
function queryFiles() {
$.getJSON("/user/json/{{nickname}}/files", {start:cursorFiles, length:100})
.then(function(res) {
if(res.success) {
appendFiles(res.list);
cursorFiles += 100;
queryFiles();
}
});
}
function appendFiles(list) {
userInfo.MRIFiles.push.apply(userInfo.MRIFiles, list);
for(var i=0;i<list.length;i++) {
$('#MRIFiles tbody').append([
'<tr><td><a href="/mri?url=',
list[i].url,
'">',
(list[i].name?list[i].name:list[i].url),
'</a></td><td>',
list[i].volDimensions,
'</td><td>',
list[i].included,
'</td></tr>'
].join(""));
}
$("#numMRI").text(userInfo.MRIFiles.length);
}
function queryAtlas(list) {
$.getJSON("/user/json/{{nickname}}/atlas", {start:userInfo.atlasFiles.length, length:100})
.then(function(res) {
if(res.success) {
appendAtlas(res.list);
cursorAtlas += 100;
queryAtlas();
}
});
}
function appendAtlas(list) {
userInfo.atlasFiles.push.apply(userInfo.atlasFiles, list);
for(var i=0;i<list.length;i++) {
$('#atlasFiles tbody').append([
'<tr><td><a href="/mri?url=',
list[i].url,
'">',
(list[i].parentName?list[i].parentName:list[i].url),
'</a></td><td class="noEmpty">',
list[i].name,
'</td><td><a href="',
list[i].projectURL,
'" class="noEmpty">',
list[i].project,
'</a></td><td>',
list[i].modified,
'</td></tr>'
].join(""));
}
$("#numAtlas").text(userInfo.atlasFiles.length);
}
function queryProjects() {
$.getJSON("/user/json/{{nickname}}/projects", {start:userInfo.projects.length, length:100})
.then(function(res) {
if(res.success) {
appendProjects(res.list);
cursorProject += 100;
queryProjects();
}
});
}
function appendProjects(list) {
userInfo.projects.push.apply(userInfo.projects, list);
for(var i=0;i<list.length;i++) {
$('#projects tbody').append([
'<tr><td><div style="position:relative"><a style="margin-left:15px" class="projectName" href="',
list[i].projectURL,
'">',
list[i].project,
'</a><a href="',
list[i].projectURL,
'/settings" class="settings" title="Settings" style="position:absolute;top:0;left:0"><img style="width:11px; margin:3px 8px 0 0" src="/img/settings.svg"/></a></div></td><td>',
list[i].numFiles,
'</td><td>',
list[i].numCollaborators,
'</td><td><a href="/user/',
list[i].owner,
'">',
list[i].owner,
'</a></td><td>',
list[i].modified,
'</td></tr>'
].join(""));
}
$("#numProjects").text(userInfo.projects.length);
}
let userInfo='{{{userInfo}}}';
let nickname = '{{nickname}}';
let tab = '{{tab}}';
</script>
<script src='/js/user-page.js'></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
......
import $ from 'jquery'
import '../style/style.css'
import '../style/index-style.css'
import '../style/ui.css'
testWebSockets()
.then(function(m) {
console.log("Connection to websockets is ok");
......
......@@ -4,12 +4,17 @@ import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/autocomplete';
import * as tw from '../twoWayBinding';
import freeform from '../tools/freeform';
import hidden from '../tools/hidden';
import multiple from '../tools/multiple';
import '../style/style.css';
import '../style/textAnnotations.css';
import '../style/mri-style.css';
import '../style/access-style.css';
import '../style/dropdown-style.css';
var mriInfoOrig;
var textAnnotationsArray = [];
var version=1;
......
import $ from 'jquery'
import '../style/style.css';
import '../style/ui.css';
import '../style/projectNew-style.css';
var host = "ws://" + window.location.hostname + ":8080/";
let ws;
if (window.WebSocket) {
ws=new WebSocket(host);
ws = new WebSocket(host);
} else if (window.MozWebSocket) {
ws=new MozWebSocket(host);
ws = new MozWebSocket(host);
}
ws.onopen = function(msg) {
ws.send(JSON.stringify({"type":"autocompleteClient"}));
......
......@@ -9,6 +9,11 @@ import freeform from '../tools/freeform.js';
import hidden from '../tools/hidden.js';
import multiple from '../tools/multiple.js';
import '../style/style.css';
import '../style/textAnnotations.css';
import '../style/ui.css';
import '../style/project-style.css';
const projShortname = projectInfo.shortname;
const numFilesQuery = 20;
const annotations = {
......
......@@ -3,8 +3,19 @@
// @todo find a way for the user to give a set of values for the annotations and make it obvious that it works this way
import $ from 'jquery'
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/autocomplete';
import * as tw from '../twoWayBinding.js';
import '../style/style.css';
import '../style/ui.css';
import '../style/projectSettings-style.css';
import '../style/access-style.css';
import '../style/dropdown-style.css';
// Add avatar based on project's name
jdenticon.update($("svg")[0],md5(projectShortname));
......
import $ from 'jquery'
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/autocomplete';
import * as tw from '../twoWayBinding.js';
import '../style/style.css';
import '../style/ui.css';
import '../style/user-style.css';
var cursorFiles = 0;
var cursorAtlas = 0;
var cursorProjects = 0;
userInfo = JSON.parse(userInfo);
userInfo.MRIFiles = [];
userInfo.atlasFiles = [];
userInfo.projects = [];
// switch tabs
$("a.tab").click(function() {
$("a.tab").removeClass("selected");
$(this).addClass("selected");
$(".tabContent").hide();
selectTab($(this).attr('value'));
});
queryFiles();
queryAtlas();
queryProjects();
$("#addProject").click(function(){location="/project/new"});
$("#settings").click(function(){
var pathname=location.pathname;
if(pathname.slice(-1)=="/")
location=pathname+"settings";
else
location=pathname+"/settings";
});
selectTab(tab);
function selectTab(tab) {
$(".tab").removeClass("selected");
switch(tab) {
case "mri":
$(".tab:eq(0)").addClass("selected");
$("#MRIFiles").show();
break;
case "atlas":
$(".tab:eq(1)").addClass("selected");
$("#atlasFiles").show();
break;
case "projects":
$(".tab:eq(2)").addClass("selected");
$("#projects").show();
break;
}
}
function queryFiles() {
$.getJSON(`/user/json/${nickname}/files`, {start:cursorFiles, length:100})
.then(function(res) {
if(res.success) {
appendFiles(res.list);
cursorFiles += 100;
queryFiles();
}
});
}
function appendFiles(list) {
userInfo.MRIFiles.push.apply(userInfo.MRIFiles, list);
for(var i=0;i<list.length;i++) {
$('#MRIFiles tbody').append([
'<tr><td><a href="/mri?url=',
list[i].url,
'">',
(list[i].name?list[i].name:list[i].url),
'</a></td><td>',
list[i].volDimensions,
'</td><td>',
list[i].included,
'</td></tr>'
].join(""));
}
$("#numMRI").text(userInfo.MRIFiles.length);
}
function queryAtlas(list) {
$.getJSON(`/user/json/${nickname}/atlas`, {start:userInfo.atlasFiles.length, length:100})
.then(function(res) {
if(res.success) {
appendAtlas(res.list);
cursorAtlas += 100;
queryAtlas();
}
});
}
function appendAtlas(list) {
userInfo.atlasFiles.push.apply(userInfo.atlasFiles, list);
for(var i=0;i<list.length;i++) {
$('#atlasFiles tbody').append([
'<tr><td><a href="/mri?url=',
list[i].url,
'">',
(list[i].parentName?list[i].parentName:list[i].url),
'</a></td><td class="noEmpty">',
list[i].name,
'</td><td><a href="',
list[i].projectURL,
'" class="noEmpty">',
list[i].project,
'</a></td><td>',
list[i].modified,
'</td></tr>'
].join(""));
}
$("#numAtlas").text(userInfo.atlasFiles.length);
}
function queryProjects() {
$.getJSON(`/user/json/${nickname}/projects`, {start:userInfo.projects.length, length:100})
.then(function(res) {
if(res.success) {
appendProjects(res.list);
cursorProject += 100;
queryProjects();
}
});
}
function appendProjects(list) {
userInfo.projects.push.apply(userInfo.projects, list);
for(var i=0;i<list.length;i++) {
$('#projects tbody').append([
'<tr><td><div style="position:relative"><a style="margin-left:15px" class="projectName" href="',
list[i].projectURL,
'">',
list[i].project,
'</a><a href="',
list[i].projectURL,
'/settings" class="settings" title="Settings" style="position:absolute;top:0;left:0"><img style="width:11px; margin:3px 8px 0 0" src="/img/settings.svg"/></a></div></td><td>',
list[i].numFiles,
'</td><td>',
list[i].numCollaborators,
'</td><td><a href="/user/',
list[i].owner,
'">',
list[i].owner,
'</a></td><td>',
list[i].modified,
'</td></tr>'
].join(""));
}
$("#numProjects").text(userInfo.projects.length);
}
/* BrainBox/index page style */
html, #menu, #footer {
background-color: #111;
}
......
/* BrainBox common style */
* {
font-color: red;
}
\ No newline at end of file
font-size:14px;
color:white;
}
html,body {
background-color:#222;
height:100%;
margin:0px;
font: 16px/20px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
h1 {
font-size: 1rem;
text-align:center;
}
h2, p {
font-family: sans-serif;
text-align:center;
}
a {
color:white;
}
.linkNoULine {
text-decoration: none;
font-weight: lighter;
}
#menu {
float:right;
/* margin-top: 10px; */
margin-right: 10px;
display: inline-block;
font: 16px/24px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#menu img{
margin-left: 15px;
}
#MyLogin {
display:inline-block;
margin-left:15px;
}
/*
.icon {
width: 0.9rem;
height: 0.9rem;
margin: 8px 2px;
vertical-align: middle;
cursor: pointer;
}
*/
\ No newline at end of file
/* User interface widgets: buttons, sliders
-----------------------------------------------------------------------------*/
/* User interface widgets style: buttons, sliders */
.a {
border:thin solid #777;
......
This diff is collapsed.
......@@ -9,7 +9,8 @@ module.exports = {
"mri-page": './view/brainbox/src/pages/mri-page.js',
"project-page": './view/brainbox/src/pages/project-page.js',
"project-new-page": './view/brainbox/src/pages/project-new-page.js',
"project-settings-page": './view/brainbox/src/pages/project-settings-page.js'
"project-settings-page": './view/brainbox/src/pages/project-settings-page.js',
"user-page": './view/brainbox/src/pages/user-page.js'
},
devtool: 'eval-source-map',
plugins: [
......@@ -25,7 +26,8 @@ module.exports = {
'cp view/brainbox/dist/mri-page.js public/js/mri-page.js',
'cp view/brainbox/dist/project-page.js public/js/project-page.js',
'cp view/brainbox/dist/project-new-page.js public/js/project-new-page.js',
'cp view/brainbox/dist/project-settings-page.js public/js/project-settings-page.js'
'cp view/brainbox/dist/project-settings-page.js public/js/project-settings-page.js',
'cp view/brainbox/dist/user-page.js public/js/user-page.js'
]
})
],
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment