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([
sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel");
function displayAltCol(show) {
sideCol.toggleClass("col-sm-1", !show)
.toggleClass("col-sm-2", show);
//sideCol.toggleClass("col-sm-1", !show)
// .toggleClass("col-sm-2", show);
altSideColPanelGroup.toggleClass("hidden", !show);
sideColPanelGroup.toggleClass("col-xs-12", !show)
.toggleClass("col-xs-6", show);
......
......@@ -94,8 +94,8 @@ define([
sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel");
function displayAltCol(show) {
sideCol.toggleClass("col-sm-1", !show)
.toggleClass("col-sm-2", show);
//sideCol.toggleClass("col-sm-1", !show)
// .toggleClass("col-sm-2", show);
altSideColPanelGroup.toggleClass("hidden", !show);
sideColPanelGroup.toggleClass("col-xs-12", !show)
.toggleClass("col-xs-6", show);
......
......@@ -98,9 +98,8 @@ function($){
},
start: function() {
// params.clearAlert();
$alert.find("[class^=adim-fu-error-]").addClass("hide").end()
.addClass("hide");
$progBar.closest('.progress-wrapper').removeClass("hide");
$alert.find("[class^=adim-fu-error-]").hide();
$progBar.closest('.progress-wrapper').show();
$('#fileupload').fileupload('disable');
$(document).on('drop dragover', preventDragOver);
if (typeof params.onStart === 'function') {
......@@ -123,9 +122,9 @@ function($){
processfail: function(e, data) {
var error = data.files[data.index].error;
// params.showAlert(error);
$alert.find("[class^=adim-fu-error-]").addClass("hide");
$alert.removeClass("hide")
.find(".adim-fu-error-" + error).removeClass("hide");
$alert.find("[class^=adim-fu-error-]").hide();
$alert.show()
.find(".adim-fu-error-" + error).show();
$(document).off('drop dragover', preventDragOver);
$('#fileupload').fileupload('enable');
......
......@@ -447,7 +447,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
})
.fail(function (jqXHR, textStatus, errorThrown) {
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);
});
})
......@@ -456,11 +456,11 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
.on("click submit", function (evt) {
evt.preventDefault();
me._anObjNameModal
.find(".errors").addClass('hide').end()
.find(".errors").hide().end()
.find("input[name=imageName]").val(me._anObjName.find(".text").text()).end()
.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
}
_sideCol.toggleClass("collapsed", !isCollapsed);
_sideCol.toggleClass("");
updateReservedSpace();
if (transition) {
_canvasCtnr.css("transition", transition);
......@@ -1238,8 +1239,9 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
function _adjustCanvasFrame() {
var w = _canvas.width();
var h = _canvas.height();
_canvasToolBar.css('width', w + 4);
_canvasCtnr.width(w + 2).height(h + 2);
//_canvasToolBar.css('width', w + 4);
//_canvasCtnr.width(w + 2).height(h + 2);
_canvasCtnr.height(h + 2);
_sideCol.height(h + _canvasToolBar.outerHeight() + 5);
// 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
});
_colorSelector.find(".color-menu > li > a").click(function(event){
_colorSelector.find(".color-menu > a").click(function(event){
var me = $(this);
event.preventDefault();
if (!me.is(".cx")) {
......@@ -1385,7 +1387,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
this.el.siblings("[data-value]").each(function(i,n){
var $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);
});
}
......
......@@ -571,7 +571,7 @@ function ($, _, paper, Signal, config, Users, tools) {
width = parseInt(width, 10) || _canvas.width();
height = parseInt(height, 10) ||_canvas.height();
_canvas.width(width).height(height);
_canvas.width('100%').height(height);
paper.view.viewSize = [width, height];
if (_raster) {
_raster.position = [_raster.bounds.width / 2, _raster.bounds.height / 2];
......
......@@ -33,9 +33,8 @@
"bootstrap-rating-input": "~0.4.0",
"jquery.hotkeys": "git://github.com/jeresig/jquery.hotkeys.git#~0.2.0",
"sortablejs": "~1.6.0",
"select2": "~4.0",
"select2-bootstrap": "~1.3.0",
"zeroclipboard": "~2.3.0",
"blueimp-file-upload": "~9.20.0"
"blueimp-file-upload": "~9.20.0",
"fontawesome": "~5.0.6",
"popper.js": "~1.12.9"
}
}
......@@ -245,11 +245,12 @@ body {
font-weight: 300;
letter-spacing: 0.75px;
}
#main-navbar .adim-image-name .glyphicon {
#main-navbar .adim-image-name .gly {
opacity: 0;
padding-left: 5px;
top: -3px;
transition: opacity 0s ease 0s;
vertical-align: .30em;
}
#main-navbar .adim-image-name.read-only,
#main-navbar .adim-image-name.read-only:hover {
......@@ -261,7 +262,7 @@ body {
#main-navbar:hover .adim-image-name.read-only {
color: #dddddd;
}
#main-navbar:hover .adim-image-name .glyphicon {
#main-navbar:hover .adim-image-name .gly {
opacity: 0.75;
transition: opacity 0.2s ease 0.3s;
}
......@@ -633,8 +634,8 @@ body.home #dlg-about-adim .modal-dialog {
#main .tool-top-row .adim-view-mod-tabs.nav-tabs {
border-color: #686868;
margin-bottom: 0;
margin-left: -15px;
padding-left: 15px;
border-bottom: none;
}
#main .tool-top-row .adim-view-mod-tabs.nav-tabs > li a {
padding: 5px 15px;
......@@ -668,26 +669,24 @@ body.home #dlg-about-adim .modal-dialog {
padding-left: 15px;
padding-right: 15px;
position: relative;
float: left;
}
#tools-col {
width: 60px;
padding-left: 20px;
}
#canvas-col {
width: auto;
float: left;
}
#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;
transition: margin 300ms ease 0s;
width: 225px;
min-width: 275px;
max-width: 350px;
}
#side-col > .row {
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 {
width: 100%;
......@@ -702,6 +701,7 @@ body.home #dlg-about-adim .modal-dialog {
#side-col .panel .panel-heading {
padding: 0;
}
#side-col a[data-toggle="collapse"],
#side-col .panel .panel-heading h1 {
font-size: 14px;
letter-spacing: 0.06em;
......@@ -732,7 +732,7 @@ body.home #dlg-about-adim .modal-dialog {
outline: none;
}
#side-col.collapsed .side-col-collapse-but {
margin-left: -40px;
margin-left: -20px;
}
#side-col.collapsed .side-col-collapse-but .btn {
border-radius: 3px 0 0 3px;
......@@ -742,13 +742,8 @@ body.home #dlg-about-adim .modal-dialog {
content: '\f3c6';
}
#side-col.collapsed {
margin: 0 -250px 0 25px;
}
.adim-view-review #side-col {
width: 285px;
}
.adim-view-review #side-col.collapsed {
margin: 0 -310px 0 25px;
width:5px;
min-width:5px;
}
.theme-light #side-col .side-col-collapse-but .btn {
background-color: #D0D0D0;
......@@ -763,18 +758,21 @@ body.home #dlg-about-adim .modal-dialog {
.theme-light .panel.panel-default .panel-tb {
background-color: #D0D0D0;
}
.panel-dark,
.panel.panel-dark {
border-color: #6f6f6f;
border-bottom-color: #a2a2a2;
border-top-color: #565656;
background-color: #6f6f6f;
}
#side-col-panel-group a[data-toggle="collapse"],
.panel.panel-dark > .panel-heading,
.panel.panel-dark > .panel-footer {
background-color: #898989;
border-color: #565656;
color: #444444;
}
#side-col-panel-group a[data-toggle="collapse"],
.panel.panel-dark > .panel-heading .panel-title {
color: #444444;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
......@@ -782,10 +780,12 @@ body.home #dlg-about-adim .modal-dialog {
.panel.panel-dark .panel-tb {
background-color: #898989;
}
#side-col .panel-dark .list-group .list-group-item,
.panel.panel-dark .list-group .list-group-item {
background-color: transparent;
border-color: #494949;
}
#side-col-panel-group label,
.panel.panel-dark label {
color: #CACACA;
}
......@@ -798,21 +798,33 @@ body.home #dlg-about-adim .modal-dialog {
.panel-group .panel-heading .panel-title a {
display: block;
}
#side-col-panel-group a[data-toggle="collapse"],
.panel-group .panel-heading a[data-toggle="collapse"] {
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 {
text-decoration: none;
}
.panel-group .panel-heading a[data-toggle="collapse"]:hover .icon-circleup {
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 {
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 {
content: "";
}
#side-col-panel-group .card-body{
padding:0.25rem;
background-color: inherit;
}
#display-type-panel #cimaf-display-type-selector {
width: 100%;
}
......@@ -820,13 +832,13 @@ body.home #dlg-about-adim .modal-dialog {
padding: 4px 3px;
}
.canvas-container {
width: 642px;
max-width: 100%;
height: 482px;
padding: 0;
position: relative;
background: #aaa url(../img/adim/frame_background.jpg) 0 0;
}
.canvas-container.well {
.canvas-container.card {
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
......@@ -861,10 +873,12 @@ body.home #dlg-about-adim .modal-dialog {
border: solid 1px rgba(255, 255, 255, 0.3);
}
canvas {
max-width: 100%;
border: 1px solid #444444;
border-radius: 3px;
}
#canvas-bbar {
max-width: 100%;
background-color: #CCC;
padding: 2px 6px 0;
line-height: 1px;
......@@ -910,7 +924,7 @@ canvas {
.theme-light .canvas-container {
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;
}
.theme-light #canvas-bbar {
......@@ -925,6 +939,7 @@ canvas {
#draw-tool-tb .btn {
font-size: 16px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
padding: .5rem .8rem;
}
#draw-tool-tb .btn.active,
#draw-tool-tb .btn.disabled {
......@@ -934,7 +949,7 @@ canvas {
#draw-tool-tb .btn input[type="checkbox"] {
display: none;
}
#annotation-sharing-panel .panel-body .label {
#annotation-sharing-panel .card-body .badge {
line-height: 1.5em;
}
#annotation-sharing-panel .panel-title a .publishStatus {
......@@ -942,15 +957,15 @@ canvas {
font-size: 12px;
}
#annotation-sharing-panel .panel-title a .publishStatus,
#annotation-sharing-panel .panel-title a .publishStatus .label {
#annotation-sharing-panel a .publishStatus .badge {
vertical-align: bottom;
}
#annotation-sharing-panel .panel-title a.collapsed .publishStatus {
display: inline-block;
}
#annotation-sharing-panel[data-publish-state="0"] .label[data-publish-mode="0"],
#annotation-sharing-panel[data-publish-state="1"] .label[data-publish-mode="1"],
#annotation-sharing-panel[data-publish-state="2"] .label[data-publish-mode="2"] {
#annotation-sharing-panel[data-publish-state="0"] .badge[data-publish-mode="0"],
#annotation-sharing-panel[data-publish-state="1"] .badge[data-publish-mode="1"],
#annotation-sharing-panel[data-publish-state="2"] .badge[data-publish-mode="2"] {
display: inline-block !important;
visibility: visible !important;
}
......@@ -964,9 +979,9 @@ canvas {
line-height: 0.5em;
}
#annotation-list-container {
padding: 0 1px;
overflow-y: auto;
overflow-x: hidden;
}
#annotation-list-container .list-group {
margin-bottom: 0;
......@@ -1053,58 +1068,6 @@ canvas {
.x-btn-group-2-col .btn-col-span:first-child {
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;
}
#annotation-property-container .property-group.confidence-prop .rating-input > span.rating-off {
color: rgba(253, 253, 253, 0.67);
box-shadow: 0 1px 2px -1px #555555 inset, 0 -1px 1px -1px #CCCCCC inset;
}
#annotation-property-container .property-group.confidence-prop .rating-input > span.glyphicon-star {
color: #ED9C28;
}
#annotation-property-container .property-group.comment-prop textarea {
resize: vertical;
padding: 3px 3px 3px 6px;
line-height: 1.2em;
font-size: 12px;
}
#annotation-property-container .property-group.comment-prop textarea[disabled] {
background-color: #bcbcbc;
}
#annotation-property-container .property-group.processus-prop .processus-list label.btn-secondary {
color: #333;
}
#annotation-property-container .property-group.disabled {
color: rgba(202, 202, 202, 0.5);
}
#annotation-property-container .property-group.disabled label {
font-style: italic;
color: rgba(202, 202, 202, 0.5);
}
#annotation-property-container .property-group.disabled.confidence-prop .rating-input {
color: #fdfdfd;
cursor: not-allowed;
}
#annotation-property-container .property-group.disabled.confidence-prop .rating-input > span.rating-off {
color: rgba(253, 253, 253, 0.67);
box-shadow: none;
background-color: #848484;
}
.category-list .btn-cat.active {
color: #FFFFFF !important;
box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.75) inset;
......@@ -1214,6 +1177,10 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_0"].active {
.category-list .btn-cat[data-category="cat_0"].active {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2) inset;
}
.category-list .btn-cat[data-category="cat_1"][data-env="adim-env-anodate"],
.category-list .btn-cat[data-category="cat_3"][data-env="adim-env-anodate"]{
font-size: 0.89em;
}
.category-list .btn-cat[data-category="cat_1"] {
color: rgba(255, 255, 255, 0.75);
background-color: #7da9b2;
......@@ -3195,7 +3162,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
color: rgba(136, 136, 136, 0.6);
}
#annotation-display-container {
padding: 5px 5px;
padding: 0 15px 5px 15px;
color: #CACACA;
}
.btn .tool-text {
......@@ -3209,12 +3176,15 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
.btn-toolbar .btn:active {
border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}
#tool-colorselect .dropdown-toggle:after, #tool-colorselect .dropdown-toggle:before {
display:none;
}
#tool-colorselect > button {
color: #FFF;
}
#tool-colorselect .color-menu {
min-width: 78px;
max-width: 78px;
min-width: 90px;
max-width: 90px;
padding: 0 0 12px 12px;
margin: -55px 0 0 50px;
background-color: #333330;
......@@ -3228,68 +3198,69 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
border-right-color: #333330;
left: 2px;
}
#tool-colorselect .color-menu > li {
#tool-colorselect .color-menu a {
float: left;
}
#tool-colorselect .color-menu > li > a {
#tool-colorselect .color-menu a {
width: 20px;
height: 20px;
border-radius: 11px;
padding: 0;
margin: 12px 12px 0 0;
margin: 12px 12px 0 5px;
clear: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px -1px rgba(255, 255, 255, 0.33);
}
#tool-colorselect .color-menu > li > a:hover,
#tool-colorselect .color-menu > li > a:focus {
#tool-colorselect .color-menu > a:hover,
#tool-colorselect .color-menu > a:focus {
background: #333330 none;
border-color: transparent;
}
#tool-colorselect .color-menu > li > a.c1,
#tool-colorselect .color-menu > li > a.c1:hover {
#tool-colorselect .color-menu > a.c1,
#tool-colorselect .color-menu > a.c1:hover {
background-color: #fff700;
}
#tool-colorselect .color-menu > li > a.c1:hover {
#tool-colorselect .color-menu > a.c1:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(255, 247, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.c2,
#tool-colorselect .color-menu > li > a.c2:hover {
#tool-colorselect .color-menu > a.c2,
#tool-colorselect .color-menu > a.c2:hover {
background-color: #ff8017;
}
#tool-colorselect .color-menu > li > a.c2:hover {
#tool-colorselect .color-menu > a.c2:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(255, 128, 23, 0.9);
}
#tool-colorselect .color-menu > li > a.c3,
#tool-colorselect .color-menu > li > a.c3:hover {
#tool-colorselect .color-menu > a.c3,
#tool-colorselect .color-menu > a.c3:hover {
background-color: #00d400;
}
#tool-colorselect .color-menu > li > a.c3:hover {
#tool-colorselect .color-menu > a.c3:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(0, 212, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.c4,
#tool-colorselect .color-menu > li > a.c4:hover {
#tool-colorselect .color-menu > a.c4,
#tool-colorselect .color-menu > a.c4:hover {
background-color: #1977ff;
}
#tool-colorselect .color-menu > li > a.c4:hover {
#tool-colorselect .color-menu > a.c4:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(25, 119, 255, 0.9);
}
#tool-colorselect .color-menu > li > a.c5,
#tool-colorselect .color-menu > li > a.c5:hover {
#tool-colorselect .color-menu > a.c5,
#tool-colorselect .color-menu > a.c5:hover {
background-color: #fc6ca2;
}
#tool-colorselect .color-menu > li > a.c5:hover {
#tool-colorselect .color-menu > a.c5:hover {
box-shadow: 0 1px 4px -1px rgba(23, 0, 9, 0.66) inset, 0 0 1px 3px rgba(252, 108, 162, 0.9);
}
#tool-colorselect .color-menu > li > a.c6,
#tool-colorselect .color-menu > li > a.c6:hover {
#tool-colorselect .color-menu > a.c6,
#tool-colorselect .color-menu > a.c6:hover {
background-color: #fa0000;
}
#tool-colorselect .color-menu > li > a.c6:hover {
#tool-colorselect .color-menu > a.c6:hover {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(250, 0, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.cx {
width: 52px;
#tool-colorselect .color-menu > a.cx {
width: 65px;
overflow: hidden;
margin-left: 0px;
}
#tool-colorselect .color-menu.no-picker {
margin-top: -40px;
......@@ -3349,7 +3320,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
background-position: 5px 0;
}
.btn-group-vertical .sldr {
width: 40px;
width: 100%;
padding: 2px 0 10px;
}
.btn-group-vertical .sldr [class^="adim-icon-"],
......@@ -3415,6 +3386,10 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
.btn-group-vertical .sldr.sldr-xs .slider.slider-vertical {
margin-left: 2px;
}
.adim-tool-marker-label-item{
padding-left: 0;
padding-right: 0;
}
/* .btn-group-vertical > .sldr:last-child:not(:first-child) {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
......@@ -3484,18 +3459,6 @@ canvas.cursor-tool-arrowgeo {
position: fixed;
top: 20px;
}
.adim-env-cimaf #side-col {
width: 250px;