Erreur durant le transfert du fichier ' + file.name + '.
').appendTo('#upload_errors');
+ currentfiles = arrayRemove(currentfiles, $.trim(file.name));
+ });
+ },
+ progressall: function progressall(e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ $('#progress .progress-bar').css('width', progress + '%');
+ }
+ }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
+ }
}); // ---- Gestion des média : init des dossiers
function initFolderManager(sujetId) {
@@ -11637,9 +11798,51 @@ function loadMedia(dossier_id, sujet_id) {
}
$.each(data, function (index, item) {
- output += '",
+
+ options: {
+ classes: {},
+ disabled: false,
+
+ // Callbacks
+ create: null
+ },
+
+ _createWidget: function( options, element ) {
+ element = $( element || this.defaultElement || this )[ 0 ];
+ this.element = $( element );
+ this.uuid = widgetUuid++;
+ this.eventNamespace = "." + this.widgetName + this.uuid;
+
+ this.bindings = $();
+ this.hoverable = $();
+ this.focusable = $();
+ this.classesElementLookup = {};
+
+ if ( element !== this ) {
+ $.data( element, this.widgetFullName, this );
+ this._on( true, this.element, {
+ remove: function( event ) {
+ if ( event.target === element ) {
+ this.destroy();
+ }
+ }
+ } );
+ this.document = $( element.style ?
+
+ // Element within the document
+ element.ownerDocument :
+
+ // Element is window or document
+ element.document || element );
+ this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow );
+ }
+
+ this.options = $.widget.extend( {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ this._create();
+
+ if ( this.options.disabled ) {
+ this._setOptionDisabled( this.options.disabled );
+ }
+
+ this._trigger( "create", null, this._getCreateEventData() );
+ this._init();
+ },
+
+ _getCreateOptions: function() {
+ return {};
+ },
+
+ _getCreateEventData: $.noop,
+
+ _create: $.noop,
+
+ _init: $.noop,
+
+ destroy: function() {
+ var that = this;
+
+ this._destroy();
+ $.each( this.classesElementLookup, function( key, value ) {
+ that._removeClass( value, key );
+ } );
+
+ // We can probably remove the unbind calls in 2.0
+ // all event bindings should go through this._on()
+ this.element
+ .off( this.eventNamespace )
+ .removeData( this.widgetFullName );
+ this.widget()
+ .off( this.eventNamespace )
+ .removeAttr( "aria-disabled" );
+
+ // Clean up events and states
+ this.bindings.off( this.eventNamespace );
+ },
+
+ _destroy: $.noop,
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key;
+ var parts;
+ var curOption;
+ var i;
+
+ if ( arguments.length === 0 ) {
+
+ // Don't return a reference to the internal hash
+ return $.widget.extend( {}, this.options );
+ }
+
+ if ( typeof key === "string" ) {
+
+ // Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
+ options = {};
+ parts = key.split( "." );
+ key = parts.shift();
+ if ( parts.length ) {
+ curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
+ for ( i = 0; i < parts.length - 1; i++ ) {
+ curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
+ curOption = curOption[ parts[ i ] ];
+ }
+ key = parts.pop();
+ if ( arguments.length === 1 ) {
+ return curOption[ key ] === undefined ? null : curOption[ key ];
+ }
+ curOption[ key ] = value;
+ } else {
+ if ( arguments.length === 1 ) {
+ return this.options[ key ] === undefined ? null : this.options[ key ];
+ }
+ options[ key ] = value;
+ }
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+
+ _setOptions: function( options ) {
+ var key;
+
+ for ( key in options ) {
+ this._setOption( key, options[ key ] );
+ }
+
+ return this;
+ },
+
+ _setOption: function( key, value ) {
+ if ( key === "classes" ) {
+ this._setOptionClasses( value );
+ }
+
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this._setOptionDisabled( value );
+ }
+
+ return this;
+ },
+
+ _setOptionClasses: function( value ) {
+ var classKey, elements, currentElements;
+
+ for ( classKey in value ) {
+ currentElements = this.classesElementLookup[ classKey ];
+ if ( value[ classKey ] === this.options.classes[ classKey ] ||
+ !currentElements ||
+ !currentElements.length ) {
+ continue;
+ }
+
+ // We are doing this to create a new jQuery object because the _removeClass() call
+ // on the next line is going to destroy the reference to the current elements being
+ // tracked. We need to save a copy of this collection so that we can add the new classes
+ // below.
+ elements = $( currentElements.get() );
+ this._removeClass( currentElements, classKey );
+
+ // We don't use _addClass() here, because that uses this.options.classes
+ // for generating the string of classes. We want to use the value passed in from
+ // _setOption(), this is the new value of the classes option which was passed to
+ // _setOption(). We pass this value directly to _classes().
+ elements.addClass( this._classes( {
+ element: elements,
+ keys: classKey,
+ classes: value,
+ add: true
+ } ) );
+ }
+ },
+
+ _setOptionDisabled: function( value ) {
+ this._toggleClass( this.widget(), this.widgetFullName + "-disabled", null, !!value );
+
+ // If the widget is becoming disabled, then nothing is interactive
+ if ( value ) {
+ this._removeClass( this.hoverable, null, "ui-state-hover" );
+ this._removeClass( this.focusable, null, "ui-state-focus" );
+ }
+ },
+
+ enable: function() {
+ return this._setOptions( { disabled: false } );
+ },
+
+ disable: function() {
+ return this._setOptions( { disabled: true } );
+ },
+
+ _classes: function( options ) {
+ var full = [];
+ var that = this;
+
+ options = $.extend( {
+ element: this.element,
+ classes: this.options.classes || {}
+ }, options );
+
+ function processClassString( classes, checkOption ) {
+ var current, i;
+ for ( i = 0; i < classes.length; i++ ) {
+ current = that.classesElementLookup[ classes[ i ] ] || $();
+ if ( options.add ) {
+ current = $( $.unique( current.get().concat( options.element.get() ) ) );
+ } else {
+ current = $( current.not( options.element ).get() );
+ }
+ that.classesElementLookup[ classes[ i ] ] = current;
+ full.push( classes[ i ] );
+ if ( checkOption && options.classes[ classes[ i ] ] ) {
+ full.push( options.classes[ classes[ i ] ] );
+ }
+ }
+ }
+
+ this._on( options.element, {
+ "remove": "_untrackClassesElement"
+ } );
+
+ if ( options.keys ) {
+ processClassString( options.keys.match( /\S+/g ) || [], true );
+ }
+ if ( options.extra ) {
+ processClassString( options.extra.match( /\S+/g ) || [] );
+ }
+
+ return full.join( " " );
+ },
+
+ _untrackClassesElement: function( event ) {
+ var that = this;
+ $.each( that.classesElementLookup, function( key, value ) {
+ if ( $.inArray( event.target, value ) !== -1 ) {
+ that.classesElementLookup[ key ] = $( value.not( event.target ).get() );
+ }
+ } );
+ },
+
+ _removeClass: function( element, keys, extra ) {
+ return this._toggleClass( element, keys, extra, false );
+ },
+
+ _addClass: function( element, keys, extra ) {
+ return this._toggleClass( element, keys, extra, true );
+ },
+
+ _toggleClass: function( element, keys, extra, add ) {
+ add = ( typeof add === "boolean" ) ? add : extra;
+ var shift = ( typeof element === "string" || element === null ),
+ options = {
+ extra: shift ? keys : extra,
+ keys: shift ? element : keys,
+ element: shift ? this.element : element,
+ add: add
+ };
+ options.element.toggleClass( this._classes( options ), add );
+ return this;
+ },
+
+ _on: function( suppressDisabledCheck, element, handlers ) {
+ var delegateElement;
+ var instance = this;
+
+ // No suppressDisabledCheck flag, shuffle arguments
+ if ( typeof suppressDisabledCheck !== "boolean" ) {
+ handlers = element;
+ element = suppressDisabledCheck;
+ suppressDisabledCheck = false;
+ }
+
+ // No element argument, shuffle and use this.element
+ if ( !handlers ) {
+ handlers = element;
+ element = this.element;
+ delegateElement = this.widget();
+ } else {
+ element = delegateElement = $( element );
+ this.bindings = this.bindings.add( element );
+ }
+
+ $.each( handlers, function( event, handler ) {
+ function handlerProxy() {
+
+ // Allow widgets to customize the disabled handling
+ // - disabled as an array instead of boolean
+ // - disabled class as method for disabling individual parts
+ if ( !suppressDisabledCheck &&
+ ( instance.options.disabled === true ||
+ $( this ).hasClass( "ui-state-disabled" ) ) ) {
+ return;
+ }
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+
+ // Copy the guid so direct unbinding works
+ if ( typeof handler !== "string" ) {
+ handlerProxy.guid = handler.guid =
+ handler.guid || handlerProxy.guid || $.guid++;
+ }
+
+ var match = event.match( /^([\w:-]*)\s*(.*)$/ );
+ var eventName = match[ 1 ] + instance.eventNamespace;
+ var selector = match[ 2 ];
+
+ if ( selector ) {
+ delegateElement.on( eventName, selector, handlerProxy );
+ } else {
+ element.on( eventName, handlerProxy );
+ }
+ } );
+ },
+
+ _off: function( element, eventName ) {
+ eventName = ( eventName || "" ).split( " " ).join( this.eventNamespace + " " ) +
+ this.eventNamespace;
+ element.off( eventName ).off( eventName );
+
+ // Clear the stack to avoid memory leaks (#10056)
+ this.bindings = $( this.bindings.not( element ).get() );
+ this.focusable = $( this.focusable.not( element ).get() );
+ this.hoverable = $( this.hoverable.not( element ).get() );
+ },
+
+ _delay: function( handler, delay ) {
+ function handlerProxy() {
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+ var instance = this;
+ return setTimeout( handlerProxy, delay || 0 );
+ },
+
+ _hoverable: function( element ) {
+ this.hoverable = this.hoverable.add( element );
+ this._on( element, {
+ mouseenter: function( event ) {
+ this._addClass( $( event.currentTarget ), null, "ui-state-hover" );
+ },
+ mouseleave: function( event ) {
+ this._removeClass( $( event.currentTarget ), null, "ui-state-hover" );
+ }
+ } );
+ },
+
+ _focusable: function( element ) {
+ this.focusable = this.focusable.add( element );
+ this._on( element, {
+ focusin: function( event ) {
+ this._addClass( $( event.currentTarget ), null, "ui-state-focus" );
+ },
+ focusout: function( event ) {
+ this._removeClass( $( event.currentTarget ), null, "ui-state-focus" );
+ }
+ } );
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig;
+ var callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+
+ // The original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // Copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+ return !( $.isFunction( callback ) &&
+ callback.apply( this.element[ 0 ], [ event ].concat( data ) ) === false ||
+ event.isDefaultPrevented() );
+ }
+ };
+
+ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+ $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+ if ( typeof options === "string" ) {
+ options = { effect: options };
+ }
+
+ var hasOptions;
+ var effectName = !options ?
+ method :
+ options === true || typeof options === "number" ?
+ defaultEffect :
+ options.effect || defaultEffect;
+
+ options = options || {};
+ if ( typeof options === "number" ) {
+ options = { duration: options };
+ }
+
+ hasOptions = !$.isEmptyObject( options );
+ options.complete = callback;
+
+ if ( options.delay ) {
+ element.delay( options.delay );
+ }
+
+ if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
+ element[ method ]( options );
+ } else if ( effectName !== method && element[ effectName ] ) {
+ element[ effectName ]( options.duration, options.easing, callback );
+ } else {
+ element.queue( function( next ) {
+ $( this )[ method ]();
+ if ( callback ) {
+ callback.call( element[ 0 ] );
+ }
+ next();
+ } );
+ }
+ };
+ } );
+
+ var widget = $.widget;
+
+
+
+
+}));
diff --git a/public/medias/.gitkeep b/public/medias/.gitkeep
new file mode 100644
index 0000000..d8a1a27
--- /dev/null
+++ b/public/medias/.gitkeep
@@ -0,0 +1 @@
+gitkeep
\ No newline at end of file
diff --git a/public/uploads/.gitkeep b/public/uploads/.gitkeep
new file mode 100644
index 0000000..d8a1a27
--- /dev/null
+++ b/public/uploads/.gitkeep
@@ -0,0 +1 @@
+gitkeep
\ No newline at end of file
diff --git a/resources/js/media.js b/resources/js/media.js
index 9c55551..aa87681 100644
--- a/resources/js/media.js
+++ b/resources/js/media.js
@@ -27,6 +27,7 @@ $(document).ready(function() {
var sujetId = $("#sujet_selector").val();
if(sujetId != "")
$('.dd').nestable('destroy');
+ $(".currentFolder").val(0);
initFolderManager(sujetId);
});
@@ -265,6 +266,14 @@ $(document).ready(function() {
dossier_id: dossier_id,
libelle: libelle,
description: description,
+ },
+ success: function(result){
+ $(".folder_container .dd3-item[data-id='"+dossier_id+"'] > .dd3-content span").html(libelle);
+ $.fancybox.getInstance().close();
+ },
+ error: function(jqXHR, textStatus, errorThrown) {
+ $.fancybox.getInstance().close();
+ $.fancyMessage({title : "Attention", message : "Erreur lors de l'édition du dossier, merci d'actualiser la page.", type : "error"});
}
});
});
@@ -288,15 +297,24 @@ $(document).ready(function() {
});
// ---- Gestion des média : déselectionne les éléments si on clique en dehors
- $(".main_content").on("click", function(event) {
+ $(".main_content .wrapper").on("click", function(event) {
if (event.target !== this) return;
$(".imageItem").attr("aria-grabbed", "false");
+ $(".imageItem").removeClass('flip');
+ });
+
+ // ---- Gestion des média : déselectionne les éléments si on clique en dehors
+ $(".main_content .wrapper").on("contextmenu", '.imageItem' , function(event) {
+ event.preventDefault();
+ $(".imageItem").removeClass('flip');
+ $(this).addClass('flip')
});
// ---- Gestion des média : gère la sélection des éléments
var lastSelected ;
$("html").on("click", ".imageItem", function(event) {
event.preventDefault();
+ $(".imageItem").removeClass('flip');
if(event.ctrlKey){
if($(this).attr("aria-grabbed") == "true"){
$(this).attr("aria-grabbed", "false");
@@ -323,16 +341,14 @@ $(document).ready(function() {
imageItem.eq(i).attr("aria-grabbed", select);
}
}else{
- $(".imageItem").attr("aria-grabbed", "false");
if($(this).attr("aria-grabbed") == "true"){
- $(this).attr("aria-grabbed", "false");
+ $(".imageItem").attr("aria-grabbed", "false");
}else{
+ $(".imageItem").attr("aria-grabbed", "false");
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}
-
-
});
// ---- Gestion des média : affichage des dossiers on draghover
@@ -404,6 +420,7 @@ $(document).ready(function() {
}
});
+ // ---- Gestion de l'infinite scroll
$(".main_content .media_container").on("scroll resize", function() {
if ($(window).data('ajaxready') == false) return;
if ($(window).data('noMedia') == true) return;
@@ -415,6 +432,156 @@ $(document).ready(function() {
loadMedia(dossier_id, sujet_id);
}
});
+
+ $('#close_upload_form').on('click',function(event){
+ event.preventDefault();
+ $('.upload_container').hide("fast");
+ });
+
+ $('.action_add_media').on('click',function(event){
+ event.preventDefault();
+ $('.upload_container').show("fast");
+ });
+
+
+
+ if($('#fileupload').length){
+ $.ajaxSetup({
+ headers: {
+ 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+ }
+ });
+
+ var cancel_btn = $('
')
+ .addClass('cancel')
+ .html('
');
+ var upload_btn = $('
')
+ .addClass('upload')
+ .css('display', 'none');
+
+ $('#submit').on('click',function(event){
+ event.preventDefault();
+ $("#upload_errors").html("");
+ $('.upload').click() //click upload buttons and upload all files in the queue
+ });
+ $('#cancel').on('click',function(event){
+ event.preventDefault();
+ $('.cancel').click() //click cancel buttons and remove all files in the queue
+ $("#upload_errors").html("");
+ });
+
+ $(".uploader-window").on("dragleave", function(){
+ $(this).stop().fadeOut( "fast");
+ });
+
+ var currentfiles = [];
+ $('#fileupload').fileupload({
+ url: "/ajax/upload-media",
+ dataType: 'json',
+ limitMultiFileUploads: 10,
+ maxChunkSize: 10000000,
+ dragover: function (e, data) {
+ $(".uploader-window").fadeIn( "fast");
+ },
+ add: function (e, data) {
+
+ data.files = $.map(data.files, function(file,i){
+ if ($.inArray(file.name,currentfiles) >= 0) {
+ $.fancyMessage({title : "Attention", message : "Nous ne pouvons pas envoyer plusieurs fichiers du même nom. Veuillez renommer vos fichiers puis essayez à nouveau.", type : "error"});
+ return null;
+ }
+ return file;
+ });
+
+ $.each(data.files, function (index, file) {
+
+ var uploadErrors = [];
+ var acceptFileTypes = /^(gif|jpe?g|png|mp4|mp3|psd|ai|eps|svg|indd|pdf)$/i;
+ if(file.name.split('.').pop().length && !acceptFileTypes.test(file.name.split('.').pop())) {
+ uploadErrors.push('Ce type de fichier n\'est pas accepté');
+ }
+ if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
+ uploadErrors.push('La taille du fichier est trop grande.');
+ }
+ if(uploadErrors.length > 0) {
+ alert(uploadErrors.join("\n"));
+ return false;
+ }
+
+ currentfiles.push($.trim(file.name));
+ var row = document.createElement('div');
+ var col1 = document.createElement('div');
+ var col2 = document.createElement('div');
+ $(col1).append("
"+file.name+"").append(cancel_btn.clone(true).data(data));
+ $(col2).append("
"+file.type+" - "+FileConvertSize(file.size)+"");
+ $(col2).append(upload_btn.clone(true).data(data));
+ $(row).append(col1, col2);
+ $(".files").append(row);
+
+ $('.upload').eq(-1).on('click',function(){
+ data.formData = {
+ uid: create_UUID(),
+ sujet_id: $("#sujet_selector").val(),
+ dossier_id: $(".currentFolder").val(),
+ };
+ data.submit();
+ })
+ $('.cancel').eq(-1).on('click',function(){
+ $(this).parent().parent().remove();
+ currentfiles = arrayRemove(currentfiles, $.trim(file.name));
+ })
+ });
+
+ },
+ start: function (e, data) {
+ $('#progress').show();
+ },
+ drop: function (e, data) {
+ $(".uploader-window").stop().fadeOut( "fast");
+ },
+ done: function (e, data) {
+ $.each(data.files, function (index, file) {
+ currentfiles = arrayRemove(currentfiles, $.trim(file.name));
+ });
+ //---- Chargement des médias
+ var currentFolder = $(".currentFolder").val();
+ if(currentFolder == 0 || currentFolder == ""){
+ var count = $(".folder_container .root_folder .count");
+ }else{
+ var count = $(".folder_container .dd3-item[data-id='"+currentFolder+"'] > .dd3-content .count");
+ }
+ count.html(parseInt(count.html())+data.files.length);
+ },
+ stop: function (e,) {
+ $(".files").html("");
+ currentfiles = [];
+ $('#progress .progress-bar').css('width', '0%');
+ $('#progress').hide();
+ $('.upload_container').hide("fast");
+ var currentFolder = $(".currentFolder").val();
+ if(currentFolder == 0 || currentFolder == ""){
+ $(".root_folder").trigger("click");
+ }else{
+ $('.dd .dd-item[data-id="'+currentFolder+'"] > .dd3-content').trigger("click");
+ }
+ },
+ fail: function (e, data) {
+ $.each(data.files, function (index, file) {
+ $('
Erreur durant le transfert du fichier ' + file.name + '.
')
+ .appendTo('#upload_errors');
+ currentfiles = arrayRemove(currentfiles, $.trim(file.name));
+ });
+ },
+ progressall: function (e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ $('#progress .progress-bar').css(
+ 'width',
+ progress + '%'
+ );
+ }
+ }).prop('disabled', !$.support.fileInput)
+ .parent().addClass($.support.fileInput ? undefined : 'disabled');
+ }
});
// ---- Gestion des média : init des dossiers
@@ -528,12 +695,52 @@ function loadMedia(dossier_id, sujet_id){
if(data.length == 0){
$(window).data('noMedia', true);
}
+
$.each(data, function (index, item) {
- output += '
Mon image';
- output += item.libelle;
- output += '';
+ var ico = "";
+ var detail = "";
+ var itemClass = "";
+ var thumb = "";
+ switch (item.typemedia_id) {
+ case 1:
+ case 2:
+ ico = '
';
+ detail = " - "+item.largeur+"x"+item.hauteur+"px";
+ thumb = item.source.split('.')[0]+"_thumb."+item.extension;
+ break;
+ case 3:
+ ico = '
';
+ detail = " - durée "+item.duree;
+ itemClass = "video";
+ break;
+ case 4:
+ ico = '
';
+ detail = " - durée "+item.duree;
+ itemClass = "son";
+ break;
+ case 5:
+ ico = '
';
+ itemClass = "doc";
+ break;
+ default:
+
+ }
+
+ output += '
';
+ output += '';
+ output += '
';
+ output += '
'+item.libelle+'
';
+ output += '
'+ico+item.extension+' - '+item.taille+detail+'
';
+ output += '
';
});
$('.media_container .wrapper').append(output);
+
if($(window).data('offset') == 0){
$(".media_container .loader").hide();
}else{
@@ -586,3 +793,27 @@ function addItem(parent_id, item_id, content){
html += "
";
$('.dd .dd-item[data-id="'+parent_id+'"] > ol').append(html);
}
+
+function arrayRemove(arr, value) {
+ return arr.filter(function(ele){
+ return ele != value;
+ });
+}
+
+function FileConvertSize(aSize){
+ aSize = Math.abs(parseInt(aSize, 10));
+ var def = [[1, 'octets'], [1024, 'ko'], [1024*1024, 'Mo'], [1024*1024*1024, 'Go'], [1024*1024*1024*1024, 'To']];
+ for(var i=0; i
div{
+ width: 100%;
+ padding: 10px;
+ border-bottom: 1px solid #e8ebed;
+
+ div:first-child{
+ color: $black;
+ margin-bottom: 5px;
+ font-size: 14px;
+ position: relative;
+
+ span{
+ white-space: nowrap;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 91%;
+ }
+ }
+ div:last-child{
+ color: $grey;
+ }
+ button{
+ display: none;
+ border: none;
+ background-color: transparent;
+ position: absolute;
+ right: 0;
+ top: -3px;
+ cursor: pointer;
+
+ i{
+ color: #337ab7;
+ font-size: 19px;
+ }
+ }
+ &:hover{
+ button{
+ display: block;
+ }
+ }
+ }
+ }
+ .upload_bar{
+ border-top: 1px solid $grey2;
+ width: 100%;
+ height: 60px;
+ position: absolute;
+ bottom: 0;
+ padding: 13px 10px;
+
+ #submit{
+ display: inline-block;
+ }
+ #cancel , #close_upload_form{
+ color: $grey;
+ cursor: pointer;
+ margin-left: 15px;
+ }
+ }
+}
diff --git a/resources/sass/partials/form.scss b/resources/sass/partials/form.scss
index 2e6e122..66170f4 100644
--- a/resources/sass/partials/form.scss
+++ b/resources/sass/partials/form.scss
@@ -115,12 +115,6 @@ h1{
display: inline-block;
}
-.group:after {
- content: "";
- display: table;
- clear: both;
-}
-
.filter_row{
margin-bottom: 10px;
.right_col{
diff --git a/resources/sass/partials/media.scss b/resources/sass/partials/media.scss
index 341029e..14599a5 100644
--- a/resources/sass/partials/media.scss
+++ b/resources/sass/partials/media.scss
@@ -13,11 +13,62 @@
.search_wrapper{
padding: 30px 5px 10px 40px;
min-height: 129px;
+
+ .search_filters{
+ display: inline-flex;
+ align-items: center;
+ padding: 0px 10px;
+
+ >div{
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+
+ i{
+ margin-left: 10px;
+ }
+ }
+ }
}
.action_wrapper{
background-color: $grey;
width: 100%;
min-height: 45px;
+
+ a{
+ font-size: 14px;
+ padding: 15px 20px;
+ display: inline-block;
+ border-right: 1px solid #505050;
+ float: left;
+ transition: 0.3s ease-in-out;
+
+ &:hover{
+ background-color: $grey3;
+ }
+
+ i{
+ background-color: $black;
+ border-radius: 20px;
+ margin-right: 5px;
+ padding: 5px 6px;
+ font-size: 11px;
+ color: $white;
+ }
+
+ &.action_download_media i{
+ background-color: $orange;
+ }
+ &.action_add_basket i{
+ background-color: $teal;
+ }
+ &.action_delete_media i{
+ background-color: $red;
+ }
+ &.action_tag_media i{
+ background-color: $cyan;
+ }
+ }
}
}
@@ -61,20 +112,147 @@
justify-content: center;
top: 0;
}
+ .wrapper{
+ display: flex;
+ flex-wrap: wrap;
- .imageItem{
- padding: 51px 20px;
- margin: 30px 10px;
- display: inline-block;
- border: 1px solid grey;
+ .imageItem{
+ display: inline-block;
+ border: 1px solid grey;
+ width: 202px;
+ margin: 8px 10px;
+ background-color: $grey3;
+ transition: 0.3s ease-in-out;
+ position: relative;
+ padding-bottom: 25px;
+ cursor: pointer;
- &[aria-grabbed="true"] {
- background: #8ad;
- color: #fff;
- }
- &:focus {
- outline: none;
- box-shadow: 0 0 0 2px #68b, inset 0 0 0 1px #ddd;
+ .contextMenu{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.7);
+ left: 0px;
+ top: 0px;
+ z-index: 2;
+ display: none;
+ transform: rotateY(180deg);
+ color: $white;
+ justify-content: center;
+ align-items: center;
+
+ .menu-option{
+ padding: 10px;
+ transition: 0.3s ease-in-out;
+
+ i{
+ margin-right: 5px;
+ }
+ &:hover{
+ background-color: #2ea8e5;
+ }
+ }
+ }
+
+ &.flip{
+ transform: rotateY(180deg);
+
+ .contextMenu{
+ display: flex;
+ }
+ }
+
+
+ .media{
+ height: 200px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ position: relative;
+
+ &::before {
+ transform: translate(-50%,-50%);
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ text-align: center;
+ text-indent: 0;
+ color: $white;
+ font-size: 59px;
+ z-index: 1;
+ }
+ &.video{
+ &::before {
+ content: "\f167";
+ font-family: "Font Awesome 5 Brands";
+
+ }
+ }
+ &.son{
+ &::before {
+ content: "\f58f";
+ font-family: "Font Awesome 5 Pro";
+ font-weight: 900;
+
+ }
+ }
+ &.doc{
+ &::before {
+ content: "\f15c";
+ font-family: "Font Awesome 5 Pro";
+ font-weight: 900;
+
+ }
+ }
+ }
+ .libelle{
+ padding: 4px;
+ text-align: center;
+ color: $white;
+ margin: 0;
+ word-wrap: break-word;
+ }
+ .info{
+ position: absolute;
+ bottom: 0;
+ padding: 4px;
+ font-size: 11px;
+ i{
+ margin-right: 7px;
+ }
+ }
+
+
+ &[aria-grabbed="true"] {
+ &::before {
+ content: "\f058";
+ font-family: "Font Awesome 5 Pro";
+ font-weight: 900;
+ display: block;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ text-align: center;
+ text-indent: 0;
+ color: $lightblue;
+ font-size: 25px;
+ z-index: 2;
+ }
+ &::after {
+ content: "";
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.5);
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ z-index: 1;
+ }
+ }
+ &:hover{
+ background-color: $grey;
+ }
}
}
}
@@ -90,6 +268,7 @@
width: 340px;
height: 100%;
transition: 0.3s ease-in-out;
+ z-index: 1;
&.collapse{
transform: translateX(-100%);
diff --git a/resources/sass/partials/reset.scss b/resources/sass/partials/reset.scss
index ab81661..ca8f321 100644
--- a/resources/sass/partials/reset.scss
+++ b/resources/sass/partials/reset.scss
@@ -61,3 +61,15 @@ table {
*, *:before, *:after {
box-sizing: inherit;
}
+
+.group:before,
+.group:after {
+ content: "";
+ display: table;
+}
+.group:after {
+ clear: both;
+}
+.group {
+ zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 7668400..9cef587 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -38,6 +38,13 @@