Gitlab CSE Unil

Commit 7947f7f9 authored by M. Chardon's avatar M. Chardon
Browse files

- migration bootstrap v4

- correction select2/typehead (sur bootstrap-typehead compatible bootstrap v4)
parent 44c13354
......@@ -214,8 +214,7 @@ module.exports = function(grunt) {
"lib/jquery-file-upload/css/jquery.fileupload.css",
"lib/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css",
"lib/bootstrap-spinedit/css/bootstrap-spinedit.css",
"lib/whhg-font/css/whhg.css",
"lib/select2-bootstrap/select2-bootstrap.css"
"lib/whhg-font/css/whhg.css"
]
}
}
......
......@@ -30,9 +30,9 @@ define(['jquery'], function($){
$("#main-navbar")
.toggleClass("navbar-inverse", (theme === 'dark'))
.toggleClass("navbar-default", (theme === 'light'))
.find(".btn-adim-dark, .btn-default")
.find(".btn-adim-dark, .btn-secondary")
.toggleClass("btn-adim-dark", (theme === 'dark'))
.toggleClass("btn-default", (theme === 'light'))
.toggleClass("btn-secondary", (theme === 'light'))
;
$("#side-col").find(".panel")
.toggleClass("panel-dark", (theme === 'dark'))
......
......@@ -43,7 +43,8 @@ define([
"jquery.autoGrowInput",
"bootstrap.spinedit",
"bootstrap.rating",
"FileSaver"
"FileSaver",
"fontawesome"
],
function($, _, Signal, paper, config, view, io, tools, attributes, Users, exporter, AnObjMgr) {
// ----- Locale variables -----------------------------
......@@ -320,7 +321,7 @@ function($, _, Signal, paper, config, view, io, tools, attributes, Users, export
var _navBarTitleDelta = (function(){
var navHeader = _mainNavBar.find(".navbar-header"),
navRight = _mainNavBar.find(".navbar-right"),
navRight = _mainNavBar.find(".ml-auto"),
navTitle = _mainNavBar.find(".adim-image-name"),
value;
......
......@@ -113,7 +113,7 @@ function($, _, Backbone, Config, AnObjCollection, AnObjListItemView, AnObjProper
selectCurrent: function() {
var curItem = this.$el.find(".aom-list-container .aom-list-item.current");
var curTabId = curItem.closest(".tab-pane").attr("id");
this.$el.find(".nav-tabs a[href=#" + curTabId + "]").tab("show");
this.$el.find(".nav-tabs a[href='#" + curTabId +"']").tab("show");
this.anobjPropertyPanel.setMode( curTabId === 'aom-shared-images-list' ? 'shared' : 'user');
this._selectItem(curItem);
},
......
......@@ -26,11 +26,10 @@ define([
"anobj-mgr/config",
"adim/users",
"zeroclipboard",
//"jquery.typeahead",
"jquery.select2"
"jquery.typeahead",
//"jquery.select2"
],
function($, _, Backbone, config, Users, ZeroClipboard) {
function($, _, Backbone, config, Users) {
var SHARING_MODE_NONE = 0,
SHARING_MODE_MANUAL = 1,
......@@ -44,9 +43,9 @@ define([
this.annotateBaseUrl = document.location.protocol + "//" + document.location.host + config.baseUrl;
this.infoPanel = $("#aom-info-panel");
this.thumbEl = this.$el.find(".panel-body .aom-image-thumb");
this.propListEl = this.$el.find(".panel-body .aom-info-prop");
this.sharingPropEl = this.$el.find(".panel-body .aom-info-share");
this.thumbEl = this.$el.find(".aom-info-panel-body .aom-image-thumb");
this.propListEl = this.$el.find(".aom-info-panel-body .aom-info-prop");
this.sharingPropEl = this.$el.find(".aom-info-panel-body .aom-info-share");
this.advancedPropEl = this.$el.find(".aom-info-advanced");
this.publicPublishEl = this.$("#aom-prop-publishall");
......@@ -91,34 +90,24 @@ define([
this.initZeroClipboard();
this.$('[data-toggle="tooltip"]').select2();
this.$('[data-toggle="tooltip"]').tooltip();
this.$("input.aom-shm-ctrl-member-input").typeahead({
minLength: 3,
highlight: true
}, {
source: Users.engine.ttAdapter(),
this.$("input.aom-shm-ctrl-member-input").select2({
minimumInputLength: 3,
//highlight: true
//}, {
data: Users.engine.ttAdapter(),
name: 'users',
displayKey: 'username'
});
},
initZeroClipboard: function() {
var me = this,
clpBut = this.$(".aom-prop-url-copy-but"),
urlFld = this.propListEl.find(".aom-prop-url");
ZeroClipboard.config( { swfPath: config.staticUrl + "assets/ZeroClipboard.swf" } );
new ZeroClipboard(clpBut)
.on( "copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", urlFld.val() );
})
.on( "aftercopy", function( event ) {
clpBut.siblings(".tooltip")
.css("left", "-18px")
.find(".tooltip-inner").text("Copié !").end()
.find(".tooltip-arrow").css("left", "55%");
var clpBut = this.$(".aom-prop-url-copy-but");
clpBut.on("click",function(){
$(".aom-prop-url").select();
document.execCommand('copy');
});
},
......@@ -133,7 +122,11 @@ define([
"click .aom-shm-ctrl-members-remove-but": 'removeMemberClick',
"click .aom-shm-ctrl-members-select-but": 'selectAllMemberClick',
"click .aom-prop-collapsible h5": 'toggleCollapsibleParam',
"hide.bs.collapse .aom-prop-collapsible-div": 'toggleCollapsibleParamOff',
"show.bs.collapse .aom-prop-collapsible-div": 'toggleCollapsibleParamOn',
"hide.bs.collapse .aom-prop-collapsible-form": 'toggleCollapsibleParamOffF',
"show.bs.collapse .aom-prop-collapsible-form": 'toggleCollapsibleParamOnF',
"change #aom-prop-env-id": "setEnvironment",
"change .aom-shm-ctrl-showkey": 'showRegkeyValue',
......@@ -202,20 +195,20 @@ define([
this.publicPublishEl.val([publicPublish]);
// Show/hide controls specific to the sharing mode
this.propShMdParamsAll.addClass("hidden");
this.propShMdParamsAll.hide();
if (sharingMode) {
if (this.propShMdParams[sharingMode]) {
this.propShMdParams[sharingMode].removeClass("hidden");
this.propShMdParams[sharingMode].show();
// Set values to specific controls
this._setOptCtrlValue(this.propShMdParams[sharingMode], sharingMode, itemModel);
}
}
// Show/hide controls specific to the environment
this.propEnvParamsAll.addClass("hidden");
this.propEnvParamsAll.hide();
if (env) {
if (this.propEnvParams[env]) {
this.propEnvParams[env].removeClass("hidden");
this.propEnvParams[env].show();
// Set values to env controls
var envparam = itemModel.get('envparam');
switch (env) {
......@@ -280,7 +273,7 @@ define([
if (opts && opts.url && opts.label) {
$el.text(opts.label);
} else {
$el.closest('.aom-prop-shm').addClass('hidden');
$el.closest('.aom-prop-shm').hide();
}
},
......@@ -288,7 +281,7 @@ define([
if (opts && opts.url && opts.label) {
$el.attr("href", opts.url);
} else {
$el.closest('.aom-prop-shm').addClass('hidden');
$el.closest('.aom-prop-shm').hide();
}
}
};
......@@ -556,12 +549,24 @@ define([
// Advanced Parameters
// -------------------
toggleCollapsibleParam: function(event) {
$(event.currentTarget)
.blur()
.siblings(".aom-prop-collapsible-content").toggleClass('hidden').end()
.find('span[class^="icon-"]').toggleClass("icon-plus-sign").toggleClass("icon-minus-sign");
//.closest(".aom-info-advanced").toggleClass("collapsed");
toggleCollapsibleParamOn: function(event) {
$("#aom-prop-collapsible-sign").removeClass("fa-plus-circle");
$("#aom-prop-collapsible-sign").addClass("fa-minus-circle");
},
toggleCollapsibleParamOff: function(event) {
$("#aom-prop-collapsible-sign").removeClass("fa-minus-circle");
$("#aom-prop-collapsible-sign").addClass("fa-plus-circle");
},
toggleCollapsibleParamOnF: function(event) {
$("#aom-prop-collapsible-form-sign").removeClass("fa-plus-circle");
$("#aom-prop-collapsible-form-sign").addClass("fa-minus-circle");
},
toggleCollapsibleParamOffF: function(event) {
$("#aom-prop-collapsible-form-sign").removeClass("fa-minus-circle");
$("#aom-prop-collapsible-form-sign").addClass("fa-plus-circle");
},
// Set Environment
......
......@@ -16,7 +16,7 @@
"requirejs": "",
"requirejs-i18n": "",
"jquery": "",
"bootstrap": "~3.3.7",
"bootstrap": "",
"jquery-mousewheel": "~3.1.11",
"FileSaver": "~1.3.4",
"blob": "*",
......
......@@ -35,12 +35,22 @@ requirejs.config({
name: 'paper',
location: '../_src/lib/paper/dist',
main: 'paper-core'
}/*,
{
name: 'jquery.typeahead',
location: '../_src/lib/typeahead.js/dist',
main: 'typeahead.jquery'
}*/],
},
{
name: 'popper.js',
location: '../_src/lib/popper.js/dist/umd',
main: 'popper.min'
},
{
name: 'fontawesome',
location: '../_src/lib/fontawesome/svg-with-js/js',
main: 'fontawesome-all.min'
},
{
name: 'jquery.typeahead',
location: '../_src/lib/bootstrap3-typeahead',
main: 'bootstrap3-typeahead.min'
}],
paths: {
adim: '../_src/adim',
tools: '../_src/adim/tools',
......@@ -56,7 +66,7 @@ requirejs.config({
signals: '../_src/lib/signals/dist/signals.min',
FileSaver: '../_src/lib/FileSaver/FileSaver.min',
canvasToBlob: '../_src/lib/blueimp-canvas-to-blob/js/canvas-to-blob.min',
zeroclipboard: '../_src/lib/zeroclipboard/dist/ZeroClipboard.min',
//zeroclipboard: '../_src/lib/zeroclipboard/dist/ZeroClipboard.min',
bloodhound: '../_src/lib/typeahead.js/dist/bloodhound',
sortable: '../_src/lib/sortablejs/Sortable.min',
......@@ -70,16 +80,16 @@ requirejs.config({
'jquery.fileupload-proc': "../_src/lib/jquery-file-upload/js/jquery.fileupload-process",
'jquery.mousewheel': "../_src/lib/jquery-mousewheel/jquery.mousewheel.min",
'jquery.autoGrowInput': "../_src/lib/jquery.autoGrowInput/jquery.autoGrowInput",
// 'jquery.typeahead': "../_src/lib/typeahead.js/dist/typeahead.jquery.min",
'jquery.typeahead': "../_src/lib/bootstrap3-typeahead/bootstrap3-typeahead.min",
'jquery.hotkeys': "../_src/lib/jquery.hotkeys/jquery.hotkeys.min",
'jquery.select2': "../_src/lib/select2/dist/js/select2.full",
//'jquery.select2': "../_src/lib/select2/dist/js/select2.full",
//'jquery-migrate': '//code.jquery.com/jquery-migrate-3.0.0',
'jquery.bootstrap': "../_src/lib/bootstrap/dist/js/bootstrap.min",
'bootstrap.colorpicker': "../_src/lib/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min",
'bootstrap.spinedit': "../_src/lib/bootstrap-spinedit/js/bootstrap-spinedit",
'bootstrap.slider': "../_src/lib/seiyria-bootstrap-slider/dist/bootstrap-slider.min",
'bootstrap.rating': "../_src/adim/helper/bootstrap-rating-input"
'bootstrap.rating': "../_src/adim/helper/bootstrap-rating-input",
},
shim: {
......@@ -92,7 +102,8 @@ requirejs.config({
},
'jquery.mousewheel': { deps: ["jquery"] },
'jquery.autoGrowInput': { deps: ["jquery"] },
//'jquery.typeahead': { deps: ["jquery"]},
'jquery.typeahead': { deps: ["jquery"]},
//'jquery.select2': { deps: ["jquery"] },
'jquery.hotkeys': { deps: ["jquery"]},
'jquery.bootstrap': { deps: ["jquery"] },
//'jquery-migrate': { deps: ['jquery'], exports: 'jQuery' },
......
......@@ -96,7 +96,7 @@
#main-footer {
bottom: 0;
width: 100%;
height: 80px;
height: 90px;
overflow: auto;
padding-top: 5px;
margin-top: 0px;
......@@ -189,6 +189,7 @@ body {
background-color: #424242;
overflow: hidden;
font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
body.theme-light {
background-color: #F2F2F2;
......@@ -219,7 +220,11 @@ body {
background-color: #F2F2F2;
}
#main-navbar {
margin-bottom: 10px;
margin-top:0;
min-width: 790px;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
#main-navbar.navbar-default {
background-color: #e5e5e5;
......@@ -262,30 +267,34 @@ body {
}
#main-navbar li.info {
border-left: 1px solid rgba(255, 255, 255, 0.1);
margin-left: 10px;
}
#main-navbar li.info span {
float: left;
}
#main-navbar .nav-item {
padding-top: 5px;
}
#main-navbar .dropdown-menu {
background-color: #202020;
background-color: #343A40;
}
#main-navbar .dropdown-menu .divider {
background-color: #666666;
}
#main-navbar .dropdown-menu > li > a {
#main-navbar .dropdown-menu > a {
color: #c0c0c0;
}
#main-navbar .dropdown-menu > li > a:hover,
#main-navbar .dropdown-menu > li > a:focus {
#main-navbar .dropdown-menu > a:hover,
#main-navbar .dropdown-menu > a:focus {
color: #ffffff;
background-color: #060606;
background-image: none;
}
#main-navbar .dropdown-menu > li.disabled a {
#main-navbar .dropdown-menu > a.disabled {
color: #6c6c6c;
}
#main-navbar .dropdown-menu > li.disabled a:hover,
#main-navbar .dropdown-menu > li.disabled a:focus {
#main-navbar .dropdown-menu > a.disabled:hover,
#main-navbar .dropdown-menu > a.disabled:focus {
color: #6c6c6c;
background-color: #202020;
background-image: none;
......@@ -385,10 +394,10 @@ body.home.anonymous #main-navbar {
margin-bottom: 10px;
}
}
body.home.authenticated #main-navbar .navbar-header .navbar-brand {
body.home.authenticated #main-navbar .navbar-brand {
display: none;
}
body.home.authenticated #home-container #home-action-box .well {
body.home.authenticated #home-container #home-action-box .card {
margin-bottom: 28px;
}
#home-container {
......@@ -398,18 +407,23 @@ body.home.authenticated #home-container #home-action-box .well {
#home-container h1 {
color: #EFEFEF;
font-weight: 400;
margin-top: 5px;
margin-top: 10px;
font-size: 2.0rem;
}
#home-container h1 small {
color: #EFEFEF;
font-weight: 300;
}
#home-container #home-action-box .well {
#home-container #home-action-box .card-body {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border-color: rgba(220, 220, 220, 0.1);
padding: 7px 15px;
}
#home-container #home-action-box .card {
background: none;
border: none;
}
#home-container #home-action-box .unilogo-unil-notext {
font-size: 25px;
vertical-align: middle;
......@@ -418,12 +432,9 @@ body.home.authenticated #home-container #home-action-box .well {
#home-container h1 {
font-size: 28px;
}
#home-container #home-action-box .well {
#home-container #home-action-box .card {
margin-bottom: 10px;
}
#home-container #home-action-box .local-login-head {
bottom: -10px;
}
#home-container #home-action-box .panel-collapse {
padding: 0;
}
......@@ -451,25 +462,25 @@ body.home.authenticated #home-container #home-action-box .well {
@media (min-width: 1200px) {
#home-image img {
background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
background-size: 1140px 761px;
width: 1140px;
height: 761px;
background-size: 1110px 741px;
width: 1110px;
height: 741px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#home-image img {
background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
background-size: 940px 628px;
width: 940px;
height: 628px;
background-size: 930px 621px;
width: 930px;
height: 621px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#home-image img {
background: url("../img/image-home-sm.jpg") 0 50% no-repeat;
background-size: 720px 525px;
width: 720px;
height: 525px;
background-size: 692px 504px;
width: 692px;
height: 504px;
}
}
#home-content {
......@@ -501,22 +512,20 @@ body.home.authenticated #home-container #home-action-box .well {
#login-mode {
margin-bottom: 0;
}
#login-mode .local-login-head {
position: absolute;
right: 15px;
bottom: 0;
#home-action-box .local-login-head {
text-align: right;
}
#login-mode .local-login-head a,
#login-mode .local-login-head a:link,
#login-mode .local-login-head a:active,
#login-mode .local-login-head a:visited,
#login-mode .local-login-head a:hover {
#home-action-box .local-login-head a,
#home-action-box .local-login-head a:link,
#home-action-box .local-login-head a:active,
#home-action-box .local-login-head a:visited,
#home-action-box .local-login-head a:hover {
font-size: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 0.25);
text-decoration: none;
}
#login-mode .local-login-head a:hover {
#home-action-box .local-login-head a:hover {
color: #99c5ea;
}
#login-mode #login-local-panel {
......@@ -524,7 +533,7 @@ body.home.authenticated #home-container #home-action-box .well {
border-color: transparent;
box-shadow: none;
}
#login-mode #login-local-panel .panel-collapse {
#login-mode #login-local-panel .collapse {
background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 4px;
margin-top: 15px;
......@@ -599,10 +608,6 @@ body.home #dlg-about-adim .modal-dialog {
border-radius: 0;
margin: 0;
}
#main-navbar {
min-width: 790px;
margin-bottom: 0;
}
#main {
padding: 0 15px;
overflow: hidden;
......@@ -844,6 +849,7 @@ body.home #dlg-about-adim .modal-dialog {
background-color: transparent;
width: 400px;
text-align: center;
line-height: 30px;
border-radius: 12px;
border: solid 8px rgba(0, 0, 0, 0.2);
margin: -55px auto 0;
......@@ -1051,7 +1057,7 @@ canvas {
padding: 5px 10px;
color: #CACACA;
}
#annotation-property-container label.control-label {
#annotation-property-container label.col-form-label {
color: #CACACA;
}
#annotation-property-container .property-group {
......@@ -1080,7 +1086,7 @@ canvas {
#annotation-property-container .property-group.comment-prop textarea[disabled] {
background-color: #bcbcbc;
}
#annotation-property-container .property-group.processus-prop .processus-list label.btn-default {
#annotation-property-container .property-group.processus-prop .processus-list label.btn-secondary {
color: #333;
}
#annotation-property-container .property-group.disabled {
......@@ -3179,7 +3185,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
.category-list.adim-display-type-selector .glyphicon {
text-shadow: 0 0 1px #fff;
}
.theme-light #annotation-property-container label.control-label {
.theme-light #annotation-property-container label.col-form-label {
color: #888;
}
.theme-light #annotation-property-container .property-group.comment-prop textarea[disabled] {
......@@ -3304,7 +3310,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
.dropright .caret {
border-width: 4px 0 4px 4px;
}
.dropright .btn-default .caret,
.dropright .btn-secondary .caret,
.dropright .btn .caret {
border-color: transparent #FFF;
}
......@@ -3352,8 +3358,8 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_geo_10"].active {
line-height: 1.4;
font-size: 16px;
}
.btn-group-vertical .sldr.btn-default:active,
.btn-group-vertical .sldr.btn-default:focus {
.btn-group-vertical .sldr.btn-secondary:active,
.btn-group-vertical .sldr.btn-secondary:focus {
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
......@@ -3960,7 +3966,7 @@ fieldset[disabled] .btn-adim-layer.focus {
}
@media (min-width: 500px) {
#aom-modal .modal-dialog {
width: 420px;
max-width: 420px;
}
#aom-modal .modal-dialog .narrow-1 {
width: 218px;
......@@ -3971,7 +3977,7 @@ fieldset[disabled] .btn-adim-layer.focus {
}
@media (min-width: 700px) {
#aom-modal .modal-dialog {
width: 620px;
max-width: 620px;
}
#aom-modal .modal-dialog .narrow-1 {
width: 418px;
......@@ -3982,7 +3988,7 @@ fieldset[disabled] .btn-adim-layer.focus {
}
@media (min-width: 900px) {
#aom-modal .modal-dialog {
width: 820px;
max-width: 820px;
}
#aom-modal .modal-dialog .narrow-1 {
width: 618px;
......@@ -3993,7 +3999,7 @@ fieldset[disabled] .btn-adim-layer.focus {
}
@media (min-width: 1100px) {
#aom-modal .modal-dialog {
width: 1020px;
max-width: 1020px;
}
#aom-modal .modal-dialog .narrow-1 {
width: 818px;
......@@ -4004,7 +4010,7 @@ fieldset[disabled] .btn-adim-layer.focus {
}
@media (min-width: 1300px) {
#aom-modal .modal-dialog {
width: 1220px;