Gitlab CSE Unil

Commit 1bd7e03a authored by M. Chardon's avatar M. Chardon
Browse files

migration bootstrap v4 : ihm presque complète, encore des erreurs d'affichage...

migration bootstrap v4 : ihm presque complète, encore des erreurs d'affichage sur les annotations partagées (environnements spécifiques)
parent 7947f7f9
...@@ -99,8 +99,8 @@ define([ ...@@ -99,8 +99,8 @@ define([
sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel"); sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel");
function displayAltCol(show) { function displayAltCol(show) {
sideCol.toggleClass("col-sm-1", !show) //sideCol.toggleClass("col-sm-1", !show)
.toggleClass("col-sm-2", show); // .toggleClass("col-sm-2", show);
altSideColPanelGroup.toggleClass("hidden", !show); altSideColPanelGroup.toggleClass("hidden", !show);
sideColPanelGroup.toggleClass("col-xs-12", !show) sideColPanelGroup.toggleClass("col-xs-12", !show)
.toggleClass("col-xs-6", show); .toggleClass("col-xs-6", show);
......
...@@ -94,8 +94,8 @@ define([ ...@@ -94,8 +94,8 @@ define([
sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel"); sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel");
function displayAltCol(show) { function displayAltCol(show) {
sideCol.toggleClass("col-sm-1", !show) //sideCol.toggleClass("col-sm-1", !show)
.toggleClass("col-sm-2", show); // .toggleClass("col-sm-2", show);
altSideColPanelGroup.toggleClass("hidden", !show); altSideColPanelGroup.toggleClass("hidden", !show);
sideColPanelGroup.toggleClass("col-xs-12", !show) sideColPanelGroup.toggleClass("col-xs-12", !show)
.toggleClass("col-xs-6", show); .toggleClass("col-xs-6", show);
......
...@@ -98,9 +98,8 @@ function($){ ...@@ -98,9 +98,8 @@ function($){
}, },
start: function() { start: function() {
// params.clearAlert(); // params.clearAlert();
$alert.find("[class^=adim-fu-error-]").addClass("hide").end() $alert.find("[class^=adim-fu-error-]").hide();
.addClass("hide"); $progBar.closest('.progress-wrapper').show();
$progBar.closest('.progress-wrapper').removeClass("hide");
$('#fileupload').fileupload('disable'); $('#fileupload').fileupload('disable');
$(document).on('drop dragover', preventDragOver); $(document).on('drop dragover', preventDragOver);
if (typeof params.onStart === 'function') { if (typeof params.onStart === 'function') {
...@@ -123,9 +122,9 @@ function($){ ...@@ -123,9 +122,9 @@ function($){
processfail: function(e, data) { processfail: function(e, data) {
var error = data.files[data.index].error; var error = data.files[data.index].error;
// params.showAlert(error); // params.showAlert(error);
$alert.find("[class^=adim-fu-error-]").addClass("hide"); $alert.find("[class^=adim-fu-error-]").hide();
$alert.removeClass("hide") $alert.show()
.find(".adim-fu-error-" + error).removeClass("hide"); .find(".adim-fu-error-" + error).show();
$(document).off('drop dragover', preventDragOver); $(document).off('drop dragover', preventDragOver);
$('#fileupload').fileupload('enable'); $('#fileupload').fileupload('enable');
......
...@@ -447,7 +447,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export ...@@ -447,7 +447,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
}) })
.fail(function (jqXHR, textStatus, errorThrown) { .fail(function (jqXHR, textStatus, errorThrown) {
var errorMsg = jqXHR.responseJSON.name || jqXHR.responseJSON.detail || textStatus; var errorMsg = jqXHR.responseJSON.name || jqXHR.responseJSON.detail || textStatus;
me._anObjNameModal.find(".errors").removeClass('hide') me._anObjNameModal.find(".errors").show()
.find(".error-text").text(errorMsg); .find(".error-text").text(errorMsg);
}); });
}) })
...@@ -456,11 +456,11 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export ...@@ -456,11 +456,11 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
.on("click submit", function (evt) { .on("click submit", function (evt) {
evt.preventDefault(); evt.preventDefault();
me._anObjNameModal me._anObjNameModal
.find(".errors").addClass('hide').end() .find(".errors").hide().end()
.find("input[name=imageName]").val(me._anObjName.find(".text").text()).end() .find("input[name=imageName]").val(me._anObjName.find(".text").text()).end()
.modal('show'); .modal('show');
}) })
.append($('<span style="font-size: 12px;" class="glyphicon glyphicon-pencil"></span>')); .append($('<span class="gly"><i class="fa fa-pencil-alt"></i></span>'));
} }
// //
...@@ -773,6 +773,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export ...@@ -773,6 +773,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
} }
_sideCol.toggleClass("collapsed", !isCollapsed); _sideCol.toggleClass("collapsed", !isCollapsed);
_sideCol.toggleClass("");
updateReservedSpace(); updateReservedSpace();
if (transition) { if (transition) {
_canvasCtnr.css("transition", transition); _canvasCtnr.css("transition", transition);
...@@ -1238,8 +1239,9 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export ...@@ -1238,8 +1239,9 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
function _adjustCanvasFrame() { function _adjustCanvasFrame() {
var w = _canvas.width(); var w = _canvas.width();
var h = _canvas.height(); var h = _canvas.height();
_canvasToolBar.css('width', w + 4); //_canvasToolBar.css('width', w + 4);
_canvasCtnr.width(w + 2).height(h + 2); //_canvasCtnr.width(w + 2).height(h + 2);
_canvasCtnr.height(h + 2);
_sideCol.height(h + _canvasToolBar.outerHeight() + 5); _sideCol.height(h + _canvasToolBar.outerHeight() + 5);
// TODO: factoriser le code de calcul de la hauteur des side-panel scrollable // TODO: factoriser le code de calcul de la hauteur des side-panel scrollable
...@@ -1314,7 +1316,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export ...@@ -1314,7 +1316,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
}); });
_colorSelector.find(".color-menu > li > a").click(function(event){ _colorSelector.find(".color-menu > a").click(function(event){
var me = $(this); var me = $(this);
event.preventDefault(); event.preventDefault();
if (!me.is(".cx")) { if (!me.is(".cx")) {
...@@ -1385,7 +1387,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export ...@@ -1385,7 +1387,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
this.el.siblings("[data-value]").each(function(i,n){ this.el.siblings("[data-value]").each(function(i,n){
var $n = $(n); var $n = $(n);
$n $n
.toggleClass("label-warning rating-on", $n.data('value') <= value) .toggleClass("badge-warning rating-on", $n.data('value') <= value)
.toggleClass("rating-off", $n.data('value') > value); .toggleClass("rating-off", $n.data('value') > value);
}); });
} }
......
...@@ -571,7 +571,7 @@ function ($, _, paper, Signal, config, Users, tools) { ...@@ -571,7 +571,7 @@ function ($, _, paper, Signal, config, Users, tools) {
width = parseInt(width, 10) || _canvas.width(); width = parseInt(width, 10) || _canvas.width();
height = parseInt(height, 10) ||_canvas.height(); height = parseInt(height, 10) ||_canvas.height();
_canvas.width(width).height(height); _canvas.width('100%').height(height);
paper.view.viewSize = [width, height]; paper.view.viewSize = [width, height];
if (_raster) { if (_raster) {
_raster.position = [_raster.bounds.width / 2, _raster.bounds.height / 2]; _raster.position = [_raster.bounds.width / 2, _raster.bounds.height / 2];
......
...@@ -33,9 +33,8 @@ ...@@ -33,9 +33,8 @@
"bootstrap-rating-input": "~0.4.0", "bootstrap-rating-input": "~0.4.0",
"jquery.hotkeys": "git://github.com/jeresig/jquery.hotkeys.git#~0.2.0", "jquery.hotkeys": "git://github.com/jeresig/jquery.hotkeys.git#~0.2.0",
"sortablejs": "~1.6.0", "sortablejs": "~1.6.0",
"select2": "~4.0", "blueimp-file-upload": "~9.20.0",
"select2-bootstrap": "~1.3.0", "fontawesome": "~5.0.6",
"zeroclipboard": "~2.3.0", "popper.js": "~1.12.9"
"blueimp-file-upload": "~9.20.0"
} }
} }
...@@ -245,11 +245,12 @@ body { ...@@ -245,11 +245,12 @@ body {
font-weight: 300; font-weight: 300;
letter-spacing: 0.75px; letter-spacing: 0.75px;
} }
#main-navbar .adim-image-name .glyphicon { #main-navbar .adim-image-name .gly {
opacity: 0; opacity: 0;
padding-left: 5px; padding-left: 5px;
top: -3px; top: -3px;
transition: opacity 0s ease 0s; transition: opacity 0s ease 0s;
vertical-align: .30em;
} }
#main-navbar .adim-image-name.read-only, #main-navbar .adim-image-name.read-only,
#main-navbar .adim-image-name.read-only:hover { #main-navbar .adim-image-name.read-only:hover {
...@@ -261,7 +262,7 @@ body { ...@@ -261,7 +262,7 @@ body {
#main-navbar:hover .adim-image-name.read-only { #main-navbar:hover .adim-image-name.read-only {
color: #dddddd; color: #dddddd;
} }
#main-navbar:hover .adim-image-name .glyphicon { #main-navbar:hover .adim-image-name .gly {
opacity: 0.75; opacity: 0.75;
transition: opacity 0.2s ease 0.3s; transition: opacity 0.2s ease 0.3s;
} }
...@@ -633,8 +634,8 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -633,8 +634,8 @@ body.home #dlg-about-adim .modal-dialog {
#main .tool-top-row .adim-view-mod-tabs.nav-tabs { #main .tool-top-row .adim-view-mod-tabs.nav-tabs {
border-color: #686868; border-color: #686868;
margin-bottom: 0; margin-bottom: 0;
margin-left: -15px;
padding-left: 15px; padding-left: 15px;
border-bottom: none;
} }
#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li a { #main .tool-top-row .adim-view-mod-tabs.nav-tabs > li a {
padding: 5px 15px; padding: 5px 15px;
...@@ -668,26 +669,24 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -668,26 +669,24 @@ body.home #dlg-about-adim .modal-dialog {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
position: relative; position: relative;
float: left;
} }
#tools-col { #tools-col {
width: 60px;
padding-left: 20px; padding-left: 20px;
} }
#canvas-col { #canvas-col {
width: auto;
float: left;
} }
#side-col { #side-col {
background-color: rgba(0, 0, 0, 0.15);
box-shadow: 4px 0 3px -4px rgba(0, 0, 0, 0.3) inset;
margin-left: -10px;
padding: 0 10px; padding: 0 10px;
transition: margin 300ms ease 0s; transition: margin 300ms ease 0s;
width: 225px; min-width: 275px;
max-width: 350px;
} }
#side-col > .row { #side-col > .row {
margin: 0; margin: 0;
background-color: rgba(0, 0, 0, 0.15);
box-shadow: 4px 0 3px -4px rgba(0, 0, 0, 0.3) inset;
min-width: 275px;
max-width: 350px;
} }
#side-col > .row > .container { #side-col > .row > .container {
width: 100%; width: 100%;
...@@ -702,6 +701,7 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -702,6 +701,7 @@ body.home #dlg-about-adim .modal-dialog {
#side-col .panel .panel-heading { #side-col .panel .panel-heading {
padding: 0; padding: 0;
} }
#side-col a[data-toggle="collapse"],
#side-col .panel .panel-heading h1 { #side-col .panel .panel-heading h1 {
font-size: 14px; font-size: 14px;
letter-spacing: 0.06em; letter-spacing: 0.06em;
...@@ -732,7 +732,7 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -732,7 +732,7 @@ body.home #dlg-about-adim .modal-dialog {
outline: none; outline: none;
} }
#side-col.collapsed .side-col-collapse-but { #side-col.collapsed .side-col-collapse-but {
margin-left: -40px; margin-left: -20px;
} }
#side-col.collapsed .side-col-collapse-but .btn { #side-col.collapsed .side-col-collapse-but .btn {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
...@@ -742,13 +742,8 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -742,13 +742,8 @@ body.home #dlg-about-adim .modal-dialog {
content: '\f3c6'; content: '\f3c6';
} }
#side-col.collapsed { #side-col.collapsed {
margin: 0 -250px 0 25px; width:5px;
} min-width:5px;
.adim-view-review #side-col {
width: 285px;
}
.adim-view-review #side-col.collapsed {
margin: 0 -310px 0 25px;
} }
.theme-light #side-col .side-col-collapse-but .btn { .theme-light #side-col .side-col-collapse-but .btn {
background-color: #D0D0D0; background-color: #D0D0D0;
...@@ -763,18 +758,21 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -763,18 +758,21 @@ body.home #dlg-about-adim .modal-dialog {
.theme-light .panel.panel-default .panel-tb { .theme-light .panel.panel-default .panel-tb {
background-color: #D0D0D0; background-color: #D0D0D0;
} }
.panel-dark,
.panel.panel-dark { .panel.panel-dark {
border-color: #6f6f6f; border-color: #6f6f6f;
border-bottom-color: #a2a2a2; border-bottom-color: #a2a2a2;
border-top-color: #565656; border-top-color: #565656;
background-color: #6f6f6f; background-color: #6f6f6f;
} }
#side-col-panel-group a[data-toggle="collapse"],
.panel.panel-dark > .panel-heading, .panel.panel-dark > .panel-heading,
.panel.panel-dark > .panel-footer { .panel.panel-dark > .panel-footer {
background-color: #898989; background-color: #898989;
border-color: #565656; border-color: #565656;
color: #444444; color: #444444;
} }
#side-col-panel-group a[data-toggle="collapse"],
.panel.panel-dark > .panel-heading .panel-title { .panel.panel-dark > .panel-heading .panel-title {
color: #444444; color: #444444;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
...@@ -782,10 +780,12 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -782,10 +780,12 @@ body.home #dlg-about-adim .modal-dialog {
.panel.panel-dark .panel-tb { .panel.panel-dark .panel-tb {
background-color: #898989; background-color: #898989;
} }
#side-col .panel-dark .list-group .list-group-item,
.panel.panel-dark .list-group .list-group-item { .panel.panel-dark .list-group .list-group-item {
background-color: transparent; background-color: transparent;
border-color: #494949; border-color: #494949;
} }
#side-col-panel-group label,
.panel.panel-dark label { .panel.panel-dark label {
color: #CACACA; color: #CACACA;
} }
...@@ -798,21 +798,33 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -798,21 +798,33 @@ body.home #dlg-about-adim .modal-dialog {
.panel-group .panel-heading .panel-title a { .panel-group .panel-heading .panel-title a {
display: block; display: block;
} }
#side-col-panel-group a[data-toggle="collapse"],
.panel-group .panel-heading a[data-toggle="collapse"] { .panel-group .panel-heading a[data-toggle="collapse"] {
text-decoration: none; text-decoration: none;
text-align: left;
} }
#side-col-panel-group a[data-toggle="collapse"] .icon-circleup {
margin-top: -20px;
}
#side-col-panel-group a[data-toggle="collapse"]:hover,
.panel-group .panel-heading a[data-toggle="collapse"]:hover { .panel-group .panel-heading a[data-toggle="collapse"]:hover {
text-decoration: none; text-decoration: none;
} }
.panel-group .panel-heading a[data-toggle="collapse"]:hover .icon-circleup { .panel-group .panel-heading a[data-toggle="collapse"]:hover .icon-circleup {
color: #2b2b2b; color: #2b2b2b;
} }
#side-col-panel-group a[data-toggle="collapse"].collapsed .icon-circleup:before,
.panel-group .panel-heading a[data-toggle="collapse"].collapsed .icon-circleup:before { .panel-group .panel-heading a[data-toggle="collapse"].collapsed .icon-circleup:before {
content: ""; content: "";
} }
#side-col-panel-group a[data-toggle="collapse"].collapsed .icon-circleright:before,
.panel-group .panel-heading a[data-toggle="collapse"].collapsed .icon-circleright:before { .panel-group .panel-heading a[data-toggle="collapse"].collapsed .icon-circleright:before {
content: ""; content: "";
} }
#side-col-panel-group .card-body{
padding:0.25rem;
background-color: inherit;
}
#display-type-panel #cimaf-display-type-selector { #display-type-panel #cimaf-display-type-selector {
width: 100%; width: 100%;
} }
...@@ -820,13 +832,13 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -820,13 +832,13 @@ body.home #dlg-about-adim .modal-dialog {
padding: 4px 3px; padding: 4px 3px;
} }
.canvas-container { .canvas-container {
width: 642px; max-width: 100%;
height: 482px; height: 482px;
padding: 0; padding: 0;
position: relative; position: relative;
background: #aaa url(../img/adim/frame_background.jpg) 0 0; background: #aaa url(../img/adim/frame_background.jpg) 0 0;
} }
.canvas-container.well { .canvas-container.card {
margin-bottom: 0; margin-bottom: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
...@@ -861,10 +873,12 @@ body.home #dlg-about-adim .modal-dialog { ...@@ -861,10 +873,12 @@ body.home #dlg-about-adim .modal-dialog {
border: solid 1px rgba(255, 255, 255, 0.3); border: solid 1px rgba(255, 255, 255, 0.3);
} }
canvas { canvas {
max-width: 100%;
border: 1px solid #444444; border: 1px solid #444444;
border-radius: 3px; border-radius: 3px;
} }
#canvas-bbar { #canvas-bbar {
max-width: 100%;
background-color: #CCC; background-color: #CCC;
padding: 2px 6px 0; padding: 2px 6px 0;
line-height: 1px; line-height: 1px;
...@@ -910,7 +924,7 @@ canvas { ...@@ -910,7 +924,7 @@ canvas {
.theme-light .canvas-container { .theme-light .canvas-container {
background: #aaa url(../img/adim/frame_background-light.jpg) 0 0; background: #aaa url(../img/adim/frame_background-light.jpg) 0 0;
} }
.theme-light .canvas-container.well { .theme-light .canvas-container.card {
border-color: #F2F2F2 #F2F2F2 #E0E0E0; border-color: #F2F2F2 #F2F2F2 #E0E0E0;
} }
.theme-light #canvas-bbar { .theme-light #canvas-bbar {
...@@ -925,6 +939,7 @@ canvas { ...@@ -925,6 +939,7 @@ canvas {
#draw-tool-tb .btn { #draw-tool-tb .btn {
font-size: 16px; font-size: 16px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
padding: .5rem .8rem;
} }
#draw-tool-tb .btn.active, #draw-tool-tb .btn.active,
#draw-tool-tb .btn.disabled { #draw-tool-tb .btn.disabled {
...@@ -934,7 +949,7 @@ canvas { ...@@ -934,7 +949,7 @@ canvas {
#draw-tool-tb .btn input[type="checkbox"] { #draw-tool-tb .btn input[type="checkbox"] {
display: none; display: none;
} }
#annotation-sharing-panel .panel-body .label { #annotation-sharing-panel .card-body .badge {
line-height: 1.5em; line-height: 1.5em;
} }
#annotation-sharing-panel .panel-title a .publishStatus { #annotation-sharing-panel .panel-title a .publishStatus {
...@@ -942,15 +957,15 @@ canvas { ...@@ -942,15 +957,15 @@ canvas {
font-size: 12px; font-size: 12px;
} }
#annotation-sharing-panel .panel-title a .publishStatus, #annotation-sharing-panel .panel-title a .publishStatus,
#annotation-sharing-panel .panel-title a .publishStatus .label { #annotation-sharing-panel a .publishStatus .badge {
vertical-align: bottom; vertical-align: bottom;
} }
#annotation-sharing-panel .panel-title a.collapsed .publishStatus { #annotation-sharing-panel .panel-title a.collapsed .publishStatus {
display: inline-block; display: inline-block;
} }
#annotation-sharing-panel[data-publish-state="0"] .label[data-publish-mode="0"], #annotation-sharing-panel[data-publish-state="0"] .badge[data-publish-mode="0"],
#annotation-sharing-panel[data-publish-state="1"] .label[data-publish-mode="1"], #annotation-sharing-panel[data-publish-state="1"] .badge[data-publish-mode="1"],
#annotation-sharing-panel[data-publish-state="2"] .label[data-publish-mode="2"] { #annotation-sharing-panel[data-publish-state="2"] .badge[data-publish-mode="2"] {
display: inline-block !important; display: inline-block !important;
visibility: visible !important; visibility: visible !important;
} }
...@@ -964,9 +979,9 @@ canvas { ...@@ -964,9 +979,9 @@ canvas {
line-height: 0.5em; line-height: 0.5em;
} }
#annotation-list-container { #annotation-list-container {
padding: 0 1px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
#annotation-list-container .list-group { #annotation-list-container .list-group {
margin-bottom: 0; margin-bottom: 0;
...@@ -1053,58 +1068,6 @@ canvas { ...@@ -1053,58 +1068,6 @@ canvas {
.x-btn-group-2-col .btn-col-span:first-child { .x-btn-group-2-col .btn-col-span:first-child {
border-top-right-radius: 3px !important; border-top-right-radius: 3px !important;
} }
#annotation-property-container {
padding: 5px 10px;
color: #CACACA;
}
#annotation-property-container label.col-form-label {
color: #CACACA;
}
#annotation-property-container .property-group {
margin-bottom: 5px;
}
#annotation-property-container .property-group:last-child {
margin-bottom: 0;
}
#annotation-property-container .property-group.confidence-prop .rating-input {
display: inline-block;
cursor: default;
}