Gitlab CSE Unil

Skip to content

GitLab

Commit 72ecece9 authored by Julien Furrer's avatar Julien Furrer
Browse files

Integration of Home page and About Box

parent bbfc6484
Hide whitespace changes
Inline Side-by-side
adim_app/static/_src/adim/ui.js
View file @ 72ecece9
...@@ -360,8 +360,10 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM ...@@ -360,8 +360,10 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
.modal('show'); .modal('show');
}); });
//
// Image Manager: init and attach handlers to button // Image Manager
// ----------------------------------
// init and attach handlers to button
this._anObjMgr = new AnObjMgr({el: "#aom-list-panel"}); this._anObjMgr = new AnObjMgr({el: "#aom-list-panel"});
this._anObjMgrModal = $("#aom-modal") this._anObjMgrModal = $("#aom-modal")
.data('loaded', false) .data('loaded', false)
...@@ -373,6 +375,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM ...@@ -373,6 +375,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
}, _showAnObjMgr); }, _showAnObjMgr);
//
// Annotable Event handler
// ------------------------
io.events.annotableChanged.add(function(data){ io.events.annotableChanged.add(function(data){
// Update name displayed in the navbar, // Update name displayed in the navbar,
// only if the modification is applied to the currently edited anobj // only if the modification is applied to the currently edited anobj
...@@ -393,6 +398,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM ...@@ -393,6 +398,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
$("#btn-export-image-png").on('click', function(evt) { evt.preventDefault(); _export('png'); }); $("#btn-export-image-png").on('click', function(evt) { evt.preventDefault(); _export('png'); });
$("#btn-export-image-svg").on('click', function(evt) { evt.preventDefault(); _export('svg'); }); $("#btn-export-image-svg").on('click', function(evt) { evt.preventDefault(); _export('svg'); });
// Display About Box
$("#adim-about-but").on('click', function(evt){ evt.preventDefault(); $("#dlg-about-adim").modal(); });
// Init Properties Panel // Init Properties Panel
initPropertiesPanel(); initPropertiesPanel();
......
adim_app/static/_src/less/adim-footer.css
View file @ 72ecece9
#main-footer { #main-footer {
position: absolute;
bottom: 0; bottom: 0;
background-color: #6C6E73;
width: 100%; width: 100%;
height: 120px; height: 80px;
overflow: auto; overflow: auto;
padding-top: 25px; padding-top: 5px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset; margin-top: 0px;
background-color: #333333;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.25) inset;
} }
#main-footer .logo { #main-footer .logo {
margin-top: -3px; margin-top: -3px;
...@@ -15,12 +15,12 @@ ...@@ -15,12 +15,12 @@
#main-footer, #main-footer,
#main-footer a, #main-footer a,
#main-footer a:visited { #main-footer a:visited {
color: #eee; color: #e9e9e9;
text-decoration: none; text-decoration: none;
} }
#main-footer a:hover, #main-footer a:hover,
#main-footer a:active { #main-footer a:active {
color: #fff; color: #ffffff;
text-decoration: none; text-decoration: none;
border-bottom: dotted 1px #fff; border-bottom: dotted 1px #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.25); text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
#main-footer .logo, #main-footer .logo,
#main-footer a.logo { #main-footer a.logo {
line-height: 75px; line-height: 75px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33); text-shadow: none;
} }
#main-footer .logo:hover, #main-footer .logo:hover,
#main-footer a.logo:hover, #main-footer a.logo:hover,
#main-footer .logo:active, #main-footer .logo:active,
#main-footer a.logo:active { #main-footer a.logo:active {
border-bottom: none !important; border-bottom: none !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25); text-shadow: none;
} }
#main-footer ul a { #main-footer ul a {
line-height: 1.8em; line-height: 1.8em;
......
adim_app/static/_src/less/adim-footer.less
View file @ 72ecece9
@main-footer-height: 120px; @main-footer-height: 80px;
@main-footer-bg: hsv(0, 0, 20%);
@main-footer-color: #e9e9e9;
// Footer // Footer
#main-footer { #main-footer {
position: absolute; // position: absolute;
bottom: 0; //-@main-footer-height; bottom: 0; //-@main-footer-height;
background-color: #6C6E73;
width: 100%; width: 100%;
height: @main-footer-height; height: @main-footer-height;
overflow: auto; overflow: auto;
padding-top: 25px; padding-top: 5px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset; margin-top: 0px;
background-color: @main-footer-bg;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.25) inset;
.logo { .logo {
margin-top: -3px; margin-top: -3px;
...@@ -17,12 +20,12 @@ ...@@ -17,12 +20,12 @@
} }
&,a,a:visited { &,a,a:visited {
color: #eee; color: @main-footer-color;
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:active { a:active {
color: #fff; color: lighten(@main-footer-color, 20%);
text-decoration: none; text-decoration: none;
border-bottom: dotted 1px #fff; border-bottom: dotted 1px #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.25); text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
...@@ -31,10 +34,10 @@ ...@@ -31,10 +34,10 @@
.logo, .logo,
a.logo { a.logo {
line-height: 75px; line-height: 75px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33); text-shadow: none; //0 0 1px rgba(0, 0, 0, 0.33);
&:hover, &:active { &:hover, &:active {
border-bottom: none !important; border-bottom: none !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25); text-shadow: none; //0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25);
} }
} }
......
adim_app/static/_src/less/adim-mixins.less 0 → 100644
View file @ 72ecece9
.vertical-four-colors(@start-color: #00b3ee; @sec-color: #7a43b6; @color-stop-sec: 33%; @thrd-color: #679235; @color-stop-thrd: 66%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @sec-color @color-stop-sec, @thrd-color @color-stop-thrd, @end-color);
background-image: -o-linear-gradient(@start-color, @sec-color @color-stop-sec, @thrd-color @color-stop-thrd, @end-color);
background-image: linear-gradient(@start-color, @sec-color @color-stop-sec, @thrd-color @color-stop-thrd, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
\ No newline at end of file
adim_app/static/_src/less/adim-theme.css 0 → 100644
View file @ 72ecece9
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav .nav-divider.divider-vertical {
height: 32px;
width: 1px;
margin: 9px 10px;
}
.navbar-inverse .nav .nav-divider {
background-color: #555555;
}
.modal .modal-content {
background-image: -webkit-linear-gradient(top, #f6f6f6 0%, #d0d0d0 50px);
background-image: -o-linear-gradient(top, #f6f6f6 0%, #d0d0d0 50px);
background-image: linear-gradient(to bottom, #f6f6f6 0%, #d0d0d0 50px);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff6f6f6', endColorstr='#ffd0d0d0', GradientType=0);
}
.modal .modal-content .modal-header {
border-color: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-header .modal-title {
line-height: 1;
font-weight: 400;
}
.modal .modal-content .modal-footer {
border-color: rgba(0, 0, 0, 0.2);
}
.modal .modal-content .modal-body {
background-color: #fff;
}
.btn-adim-layertb {
color: #555555;
background-color: #aaaaaa;
border-color: #777777;
}
.btn-adim-layertb:hover,
.btn-adim-layertb:focus,
.btn-adim-layertb:active,
.btn-adim-layertb.active,
.open > .dropdown-toggle.btn-adim-layertb {
color: #555555;
background-color: #919191;
border-color: #585858;
}
.btn-adim-layertb:active,
.btn-adim-layertb.active,
.open > .dropdown-toggle.btn-adim-layertb {
background-image: none;
}
.btn-adim-layertb.disabled,
.btn-adim-layertb[disabled],
fieldset[disabled] .btn-adim-layertb,
.btn-adim-layertb.disabled:hover,
.btn-adim-layertb[disabled]:hover,
fieldset[disabled] .btn-adim-layertb:hover,
.btn-adim-layertb.disabled:focus,
.btn-adim-layertb[disabled]:focus,
fieldset[disabled] .btn-adim-layertb:focus,
.btn-adim-layertb.disabled:active,
.btn-adim-layertb[disabled]:active,
fieldset[disabled] .btn-adim-layertb:active,
.btn-adim-layertb.disabled.active,
.btn-adim-layertb[disabled].active,
fieldset[disabled] .btn-adim-layertb.active {
background-color: #aaaaaa;
border-color: #777777;
}
.btn-adim-layertb .badge {
color: #aaaaaa;
background-color: #555555;
}
.theme-light .btn-adim-layertb {
color: #555555;
background-color: #f0f0f0;
border-color: #c0c0c0;
}
.theme-light .btn-adim-layertb:hover,
.theme-light .btn-adim-layertb:focus,
.theme-light .btn-adim-layertb:active,
.theme-light .btn-adim-layertb.active,
.open > .dropdown-toggle.theme-light .btn-adim-layertb {
color: #555555;
background-color: #d7d7d7;
border-color: #a1a1a1;
}
.theme-light .btn-adim-layertb:active,
.theme-light .btn-adim-layertb.active,
.open > .dropdown-toggle.theme-light .btn-adim-layertb {
background-image: none;
}
.theme-light .btn-adim-layertb.disabled,
.theme-light .btn-adim-layertb[disabled],
fieldset[disabled] .theme-light .btn-adim-layertb,
.theme-light .btn-adim-layertb.disabled:hover,
.theme-light .btn-adim-layertb[disabled]:hover,
fieldset[disabled] .theme-light .btn-adim-layertb:hover,
.theme-light .btn-adim-layertb.disabled:focus,
.theme-light .btn-adim-layertb[disabled]:focus,
fieldset[disabled] .theme-light .btn-adim-layertb:focus,
.theme-light .btn-adim-layertb.disabled:active,
.theme-light .btn-adim-layertb[disabled]:active,
fieldset[disabled] .theme-light .btn-adim-layertb:active,
.theme-light .btn-adim-layertb.disabled.active,
.theme-light .btn-adim-layertb[disabled].active,
fieldset[disabled] .theme-light .btn-adim-layertb.active {
background-color: #f0f0f0;
border-color: #c0c0c0;
}
.theme-light .btn-adim-layertb .badge {
color: #f0f0f0;
background-color: #555555;
}
.btn-adim-dark {
color: #c4c4c4;
background-color: #767676;
border-color: #9c9c9c;
}
.btn-adim-dark:hover,
.btn-adim-dark:focus,
.btn-adim-dark:active,
.btn-adim-dark.active,
.open > .dropdown-toggle.btn-adim-dark {
color: #c4c4c4;
background-color: #5d5d5d;
border-color: #7e7e7e;
}
.btn-adim-dark:active,
.btn-adim-dark.active,
.open > .dropdown-toggle.btn-adim-dark {
background-image: none;
}
.btn-adim-dark.disabled,
.btn-adim-dark[disabled],
fieldset[disabled] .btn-adim-dark,
.btn-adim-dark.disabled:hover,
.btn-adim-dark[disabled]:hover,
fieldset[disabled] .btn-adim-dark:hover,
.btn-adim-dark.disabled:focus,
.btn-adim-dark[disabled]:focus,
fieldset[disabled] .btn-adim-dark:focus,
.btn-adim-dark.disabled:active,
.btn-adim-dark[disabled]:active,
fieldset[disabled] .btn-adim-dark:active,
.btn-adim-dark.disabled.active,
.btn-adim-dark[disabled].active,
fieldset[disabled] .btn-adim-dark.active {
background-color: #767676;
border-color: #9c9c9c;
}
.btn-adim-dark .badge {
color: #767676;
background-color: #c4c4c4;
}
.btn-cimaf-layer {
color: #aaaaaa;
background-color: #696969;
border-color: #909090;
}
.btn-cimaf-layer:hover,
.btn-cimaf-layer:focus,
.btn-cimaf-layer:active,
.btn-cimaf-layer.active,
.open > .dropdown-toggle.btn-cimaf-layer {
color: #aaaaaa;
background-color: #505050;
border-color: #717171;
}
.btn-cimaf-layer:active,
.btn-cimaf-layer.active,
.open > .dropdown-toggle.btn-cimaf-layer {
background-image: none;
}
.btn-cimaf-layer.disabled,
.btn-cimaf-layer[disabled],
fieldset[disabled] .btn-cimaf-layer,
.btn-cimaf-layer.disabled:hover,
.btn-cimaf-layer[disabled]:hover,
fieldset[disabled] .btn-cimaf-layer:hover,
.btn-cimaf-layer.disabled:focus,
.btn-cimaf-layer[disabled]:focus,
fieldset[disabled] .btn-cimaf-layer:focus,
.btn-cimaf-layer.disabled:active,
.btn-cimaf-layer[disabled]:active,
fieldset[disabled] .btn-cimaf-layer:active,
.btn-cimaf-layer.disabled.active,
.btn-cimaf-layer[disabled].active,
fieldset[disabled] .btn-cimaf-layer.active {
background-color: #696969;
border-color: #909090;
}
.btn-cimaf-layer .badge {
color: #696969;
background-color: #aaaaaa;
}
.btn-cimaf-layer:hover {
background-color: #838383;
border-color: #bbbbbb;
}
.btn-cimaf-layer.active {
color: #ffffff;
background-color: #68ac68;
border-color: #4cae4c;
}
.theme-light .btn-cimaf-layer {
font-weight: bold;
letter-spacing: 0.3px;
}
adim_app/static/_src/less/adim-theme.less
View file @ 72ecece9
...@@ -6,7 +6,14 @@ ...@@ -6,7 +6,14 @@
@import "../lib/bootstrap/less/mixins"; @import "../lib/bootstrap/less/mixins";
@import "../lib/bootstrap/less/variables"; @import "../lib/bootstrap/less/variables";
//
// Adim Variables
// --------------------------------------------------
@modal-header: #d0d0d0;
//
// Navbar
// --------------------------------------------------
.nav { .nav {
@marginY: ((@line-height-computed / 2) - 1); @marginY: ((@line-height-computed / 2) - 1);
@marginX: 10px; @marginX: 10px;
...@@ -32,6 +39,26 @@ ...@@ -32,6 +39,26 @@
} }
} }
//
// Modals
// --------------------------------------------------
.modal {
.modal-content {
#gradient > .vertical(@start-color: lighten(@modal-header, 15%), @end-color: @modal-header, @end-percent: 50px);
.modal-header {
.modal-title { line-height: 1; font-weight: 400; }
border-color: @modal-content-border-color;
}
.modal-footer {
border-color: @modal-content-border-color;
}
.modal-body { background-color: #fff; }
}
}
// //
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
......
adim_app/static/_src/less/adim.css
View file @ 72ecece9
...@@ -440,14 +440,14 @@ ...@@ -440,14 +440,14 @@
content: "\e602"; content: "\e602";
} }
#main-footer { #main-footer {
position: absolute;
bottom: 0; bottom: 0;
background-color: #6C6E73;
width: 100%; width: 100%;
height: 120px; height: 80px;
overflow: auto; overflow: auto;
padding-top: 25px; padding-top: 5px;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset; margin-top: 0px;
background-color: #333333;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.25) inset;
} }
#main-footer .logo { #main-footer .logo {
margin-top: -3px; margin-top: -3px;
...@@ -456,12 +456,12 @@ ...@@ -456,12 +456,12 @@
#main-footer, #main-footer,
#main-footer a, #main-footer a,
#main-footer a:visited { #main-footer a:visited {
color: #eee; color: #e9e9e9;
text-decoration: none; text-decoration: none;
} }
#main-footer a:hover, #main-footer a:hover,
#main-footer a:active { #main-footer a:active {
color: #fff; color: #ffffff;
text-decoration: none; text-decoration: none;
border-bottom: dotted 1px #fff; border-bottom: dotted 1px #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.25); text-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
...@@ -469,14 +469,14 @@ ...@@ -469,14 +469,14 @@
#main-footer .logo, #main-footer .logo,
#main-footer a.logo { #main-footer a.logo {
line-height: 75px; line-height: 75px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33); text-shadow: none;
} }
#main-footer .logo:hover, #main-footer .logo:hover,
#main-footer a.logo:hover, #main-footer a.logo:hover,
#main-footer .logo:active, #main-footer .logo:active,
#main-footer a.logo:active { #main-footer a.logo:active {
border-bottom: none !important; border-bottom: none !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.33), 0 0 4px rgba(255, 255, 255, 0.25); text-shadow: none;
} }
#main-footer ul a { #main-footer ul a {
line-height: 1.8em; line-height: 1.8em;
...@@ -545,6 +545,9 @@ body { ...@@ -545,6 +545,9 @@ body {
.theme-light #page-loader { .theme-light #page-loader {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
#main-navbar {
margin-bottom: 10px;
}
#main-navbar.navbar-default { #main-navbar.navbar-default {
background-color: #e5e5e5; background-color: #e5e5e5;
box-shadow: 0 0 2px 0px #3d3d3d; box-shadow: 0 0 2px 0px #3d3d3d;
...@@ -602,6 +605,41 @@ input[type=number]::-webkit-outer-spin-button { ...@@ -602,6 +605,41 @@ input[type=number]::-webkit-outer-spin-button {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
}*/ }*/
body.home {
overflow: auto;
background-color: #333333;
}
body.home #main-navbar {
display: none;
}
body.home #home-container {
padding: 40px 0 60px;
}
body.home #home-image {
padding-top: 20px;
}
#home-container {
background: #424242;
padding: 20px 0 40px;
}
#home-container h1 {
color: #efefef;
font-weight: 400;
margin-top: 5px;
}
#home-container h1 small {
color: #efefef;
font-weight: 300;
}
#home-container #home-action-box.well {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border-color: rgba(220, 220, 220, 0.1);
padding: 7px 15px;
}
#home-image img {
border-radius: 6px;
}
#main-home { #main-home {
background-color: #eeeeee; background-color: #eeeeee;
border-radius: 6px; border-radius: 6px;
...@@ -618,35 +656,43 @@ input[type=number]::-webkit-outer-spin-button { ...@@ -618,35 +656,43 @@ input[type=number]::-webkit-outer-spin-button {
font-size: 18px; font-size: 18px;
color: #5e5e5e; color: #5e5e5e;
} }
#login-mode .local-login-head { #login-mode {
margin-top: 10px; margin-bottom: 0px;
}