Merge pull request #112 from ygresil/Upload

update skins for uploadManager and Quarantine

templates/web/Mustache/Prod/Download-Items.Mustache.html

@@ -1,13 +1,13 @@
 <li class="span2">
     <div class="upload-record thumbnail">
-        <div class='canva-wrapper'></div>
+        <div class="canva-wrapper"></div>
         <div class="caption">
             <p class="name-doc">{{ name }}</p>
             <div class="progress progress-striped active">
                 <div class="progress-bar bar" style="width: 0%;"></div>
             </div>
-            <p class='error alert-error'></p>
+            <p class="error alert-error"></p>
-            <p class='success alert-success'></p>
+            <p class="success alert-success"></p>
             <button type="button" class="remove-element btn btn-inverse btn-mini">{{ language.cancel }}</button>
         </div>
     </div>

templates/web/Mustache/Prod/Upload-Items.Mustache.html

@@ -1,6 +1,6 @@
 <li class="span2">
     <div class="upload-record thumbnail">
-        <div class='canva-wrapper'></div>
+        <div class="canva-wrapper"></div>
         <div class="caption">
             <p class="name-doc">{{ name }}</p>
             <p class="infos-doc">({{ size }}, {{ type }})</p>

templates/web/prod/upload/lazaret.html.twig

@@ -3,16 +3,16 @@
         {% if lazaretFiles|length > 0 %}
             <ul>
                 {% for file in lazaretFiles %}
-                    <li class='row-fluid wrapper-item'>
+                    <li class="row-fluid wrapper-item well">
                        {{ _self.lazaretElement(file) }}
                     </li>
                 {% endfor %}
             </ul>
         {% else %}
-            {% trans 'No document in quarantine' %}
+            {% trans "No document in quarantine" %}
         {% endif %}
     {% else %}
-        {% trans 'You do not have enough rights to access quarantine' %}
+        {% trans "You do not have enough rights to access quarantine" %}
     {% endif %}
 </div>
 
@@ -177,30 +177,35 @@
 {% macro lazaretElement(file) %}
     {% import "common/thumbnail.html" as thumb %}
     {% set records = file.getRecordsToSubstitute() %}
-    <div class='lazaret-file span4'>
+    <div class="lazaret-file span4">
-        <p><h5>{% trans 'Last uploaded version' %}</h5></p>
+        <h5>{% trans "Last uploaded version" %}</h5>
-        <ul class='thumbnails'>
+        <ul class="thumbnails">
             <li class="span12" >
-                <div class='thumbnail'>
+                <div class="thumbnail">
-                    <img src='/prod/lazaret/{{ file.getId() }}/thumbnail/'/>
+                    <img src="/prod/lazaret/{{ file.getId() }}/thumbnail/"/>
                     <div class="caption">
-                        <p><b>{% trans 'Filename' %}</b> : {{ file.getOriginalName() }}</p>
+                        <p>{% trans "Filename" %} : <span class="info">{{ file.getOriginalName() }}</span></p>
-                        <p><b>{% trans 'Date' %}</b> : {{ file.getCreated()|date('Y-m-d') }}</p>
+                        <p>{% trans "Date" %} : <span class="info">{{ file.getCreated() | prettyDate }}</span></p>
                         {% if file.getSession().getUser() is not none %}
-                                <p><b>{% trans 'Uploaded by' %}</h5></b> : {{ file.getSession().getUser().get_login() }}</p>
+                            <p>
+                                {% set username = '<a href="#" class="username userTips" tooltipsrc="/prod/tooltip/user/' ~ file.getSession().getUser().get_id() ~ '/">' ~ file.getSession().getUser().get_display_name() ~ '</a>' %}
+                                {% trans %}
+                                    Uploaded by : {{ username }}
+                                {% endtrans %}
+                            </p>
                         {% endif %}
-                        <p><b>{% trans 'Collection' %}</b> : {{ file.getCollection().get_name() }}</p>
+                        <p>{% trans "Collection" %} : <span class="info">{{ file.getCollection().get_name() }}</span></p>
                     </div>
-                    <div class="btn-group" style='text-align:center; padding:5px'>
+                    <div class="btn-group" style="text-align:center; padding:5px;">
-                        <button class="btn add-lazaret" title="{% trans 'Add'%}">
+                        <button class="btn add-lazaret" title="{% trans "Add"%}">
-                            <img src="/skins/icons/add.png">
+                            <img src="/skins/icons/add.png">{% trans "Add"%}
                         </button>
-                        <button class="btn delete-lazaret" title="{% trans 'Delete'%}">
+                        <button class="btn delete-lazaret" title="{% trans "Delete"%}">
-                            <img src="/skins/icons/delete.png">
+                            <img src="/skins/icons/delete.png">{% trans "Delete"%}
                         </button>
                         {% if records|length > 0 %}
-                            <button class="btn subtitute-lazaret" title="{% trans 'Substitute' %}">
+                            <button class="btn subtitute-lazaret" title="{% trans "Substitute" %}">
-                                <img src="/skins/icons/reload.png">
+                                <img src="/skins/icons/reload.png">{% trans "Substitute" %}
                             </button>
                         {% endif %}
                     </div>
@@ -214,33 +219,30 @@
     </div>
     {% set record_count = records|length %}
     {% if record_count  > 0 %}
-        <div class='lazaret-proposals span8'>
+        <div class="lazaret-proposals span8">
-            <p>
             <h5>
             {% trans %}
-                    {{ record_count }} record match the unique identifier.
+                {{ record_count }} record match the unique identifier :
             {% plural record_count %}
-                    {{ record_count }} records match the unique identifier.
+                {{ record_count }} records match the unique identifier :
             {% endtrans %}
             </h5>
-            </p>
             <ul class="thumbnails">
                 {% for record in records %}
-                    {% if user.ACL().has_right_on_base(record.get_base_id(), 'canaddrecord')
+                    {% if user.ACL().has_right_on_base(record.get_base_id(), "canaddrecord")
-                        and user.ACL().has_right_on_base(record.get_base_id(), 'candeleterecord') %}
+                        and user.ACL().has_right_on_base(record.get_base_id(), "candeleterecord") %}
-                        <li class="records-subititution span6">
+                        <li class="records-subititution span3">
-                            <div class='thumbnail'>
+                            <div class="thumbnail">
-                                {% if user.ACL().has_access_to_subdef(record, 'preview') %}
+                                {% if user.ACL().has_access_to_subdef(record, "preview") %}
                                     {% set preview_obj = record.get_preview() %}
                                 {% else %}
                                     {% set preview_obj = record.get_thumbnail() %}
                                 {% endif %}
-
+                                <div id="thumb_{{record.get_record_id()}}" class="record-thumb" style="text-align:center;">
-                                <div id='thumb_{{record.get_record_id()}}' class='record-thumb span12' style='text-align:center'>
+                                    {{ thumb.format(preview_obj, 260, 180, "", session, false) }}
-                                    {{ thumb.format(preview_obj, 260, 180, '', session, false) }}
                                 </div>
                                 <div class="caption">
-                                    <p>{{ record.get_title() }}</p>
+                                    <p><b>{{ record.get_title() }}</b></p>
                                 </div>
                             </div>
                         </li>

templates/web/prod/upload/upload.html.twig

@@ -30,8 +30,9 @@
                                 <span>{% trans 'Select files...' %}</span>
                                 <input type="file" name="files[]" multiple directory webkitdirectory mozdirectory>
                             </span>
-                            <span>
+                            <br />
-                                <i>( {% trans %} maximum : {{ maxFileSizeReadable }} {% endtrans %})</i>
+                            <span class="comment">
+                                ({% trans %} maximum : {{ maxFileSizeReadable }} {% endtrans %})
                             </span>
                         {#    <button type="button" class="upload-submitter btn btn-inverse input-medium">{% trans 'Send' %}</button> #}
                         </div>
@@ -111,9 +112,7 @@
                     </div>
 
                     {# download box #}
-                    <div class="download-box">
+                    <div class="download-box"></div>
-
-                    </div>
                 </div>
 
             </form>
@@ -144,6 +143,11 @@ $(document).ready(function () {
     $(".upload-tabs", UploaderManager.getContainer()).tabs({
         spinner: language.loading + '<img src="/skins/icons/loader404040.gif"/>',
         ajaxOptions: {
+            success: function( xhr, status, index, anchor ) {
+                var lazaretBox = $("#lazaretBox");
+
+                $('.userTips', lazaretBox).tooltip();
+            },
             error: function( xhr, status, index, anchor ) {
                 //display error message if ajax failed
                 $( anchor.hash ).html(language.error);

www/skins/prod/000000/prodcolor.css

@@ -3920,16 +3920,26 @@ dans l'onglet thesaurus : arbres, menus contextuels
 
 /** UPLOAD MANAGER */
 
+#uploadBox {
+    height: 100%;
+}
+
 #uploadBox .clear {
     clear: both;
 }
 
-#uploadBox #tab-upload {
+#uploadBox .upload-tabs {
-    padding: 10px;
+    height: 100%;
+}
+
+#uploadBox #tab-upload,
+#uploadBox #tab-lazaret {
+    height: 90%;
+    padding: 20px;
 }
 
 #uploadBoxLeft, #uploadBoxRight {
-    width: 48%;
+    width: 48.5%;
     height: 100%;
     overflow: auto;
     text-align: center;
@@ -3949,6 +3959,10 @@ dans l'onglet thesaurus : arbres, menus contextuels
     color: #333333;
 }
 
+#uploadBox #fileupload {
+    height: 97%;
+}
+
 #uploadBox h5 {
     margin-top: 20px;
     margin-bottom: 10px;
@@ -3957,6 +3971,11 @@ dans l'onglet thesaurus : arbres, menus contextuels
     text-align: left;
 }
 
+#uploadBox span.comment {
+    font-style: italic;
+    color: #999999;
+}
+
 #uploadBox button.btn, #uploadBox span.btn {
     font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 12px;
@@ -4037,38 +4056,65 @@ dans l'onglet thesaurus : arbres, menus contextuels
     margin-right: 5px;
 }
 
-#uploadBox .upload-record {
+#uploadBox .thumbnails {
-    height: 260px;
+    margin-left: -20px;
+}
+
+#uploadBox .thumbnails > li {
+    margin-left: 20px;
 }
 
 #uploadBox .upload-record {
     height: 260px;
+    background-color: #FFFFFF;
 }
 
 #uploadBox .upload-record .canva-wrapper {
     height: 120px;
 }
 
+@media (min-width: 768px) and (max-width: 979px) {
+    #uploadBox .upload-record canvas {
+        max-height: 120px;
+        width: 94px;
+    }
+}
+
+@media (min-width: 980px) and (max-width: 1199px) {
+    #uploadBox .upload-record canvas {
+        max-height: 120px;
+        width: 130px;
+    }
+}
+
+@media (min-width: 1200px) {
+    #uploadBox .upload-record canvas {
+        max-height: 120px;
+        width: 160px;
+    }
+}
+
 #uploadBox .upload-record .name-doc {
-    font-weight: bold;
     height:40px;
     overflow: hidden;
     -o-text-overflow: ellipsis; /* pour Opera 9 */
     text-overflow: ellipsis;
+    font-weight: bold;
 }
 
 #uploadBox .upload-record .infos-doc {
     color: #777777;
-    height:40px;
+    height: 40px;
 }
 
 #uploadBox .upload-record .error, #uploadBox .upload-record .success{
-    height:60px;
+    height: 55px;
-    display:none;
+    padding-top: 2px;
-    overflow:auto;
+    padding-bottom: 3px;
+    display: none;
+    overflow: auto;
 }
 
-
 #uploadBox .upload-record .remove-element {
     margin: 2px 0;
 }
@@ -4090,7 +4136,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
 
 #uploadBoxRight .progress {
     margin-top: 4px;
-    margin-bottom: 4px;
+    margin-bottom: 10px;
     height: 10px;
 }
 
@@ -4104,3 +4150,76 @@ dans l'onglet thesaurus : arbres, menus contextuels
     background-repeat: no-repeat;
 }
 
+#lazaretBox.container-fluid {
+    margin: 0;
+    padding: 0;
+}
+
+#lazaretBox li.wrapper-item {
+    margin-bottom: 20px;
+}
+
+#lazaretBox .lazaret-file h5,
+#lazaretBox .lazaret-proposals h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+#lazaretBox .lazaret-file p,
+#lazaretBox .lazaret-proposals p {
+    font-weight: bold;
+}
+
+#lazaretBox span.info {
+    display: inline;
+    font-weight: normal;
+}
+
+#lazaretBox .lazaret-file a,
+#lazaretBox .lazaret-proposals a {
+    font-weight: normal;
+    color: #333333;
+}
+
+#lazaretBox .lazaret-file a:hover,
+#lazaretBox .lazaret-proposals a:hover {
+    color: #999999;
+}
+
+#lazaretBox .lazaret-file .thumbnails,
+#lazaretBox .lazaret-proposals .thumbnails {
+    margin-left: 0;
+}
+
+#lazaretBox .lazaret-file .thumbnails li {
+    margin: 0;
+}
+
+#lazaretBox .lazaret-proposals .records-subititution {
+    margin: 0 10px 10px 0;
+}
+
+#lazaretBox .lazaret-file .thumbnail,
+#lazaretBox .lazaret-proposals .thumbnail {
+    background-color: #FFFFFF;
+}
+
+#lazaretBox .lazaret-proposals .thumbnail {
+    min-height: 234px;
+}
+
+#lazaretBox .lazaret-proposals .thumbnail .record-thumb {
+    height: 180px;
+}
+
+#lazaretBox .lazaret-file .thumbnail img {
+    max-height: 480px;
+}
+
+#lazaretBox .lazaret-file .thumbnail button {
+    font-weight: normal;
+}
+
+#lazaretBox .lazaret-file .thumbnail button img {
+    margin-right: 5px;
+}

www/skins/prod/959595/prodcolor.css

@@ -4041,12 +4041,22 @@ dans l'onglet thesaurus : arbres, menus contextuels
 
 /** UPLOAD MANAGER */
 
+#uploadBox {
+    height: 100%;
+}
+
 #uploadBox .clear {
     clear: both;
 }
 
-#uploadBox #tab-upload {
+#uploadBox .upload-tabs {
-    padding: 10px;
+    height: 100%;
+}
+
+#uploadBox #tab-upload,
+#uploadBox #tab-lazaret {
+    height: 90%;
+    padding: 20px;
 }
 
 #uploadBoxLeft, #uploadBoxRight {
@@ -4070,6 +4080,10 @@ dans l'onglet thesaurus : arbres, menus contextuels
     color: #333333;
 }
 
+#uploadBox #fileupload {
+    height: 97%;
+}
+
 #uploadBox h5 {
     margin-top: 20px;
     margin-bottom: 10px;
@@ -4078,6 +4092,11 @@ dans l'onglet thesaurus : arbres, menus contextuels
     text-align: left;
 }
 
+#uploadBox span.comment {
+    font-style: italic;
+    color: #999999;
+}
+
 #uploadBox button.btn, #uploadBox span.btn {
     font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 12px;
@@ -4158,35 +4177,63 @@ dans l'onglet thesaurus : arbres, menus contextuels
     margin-right: 5px;
 }
 
-#uploadBox .upload-record {
+#uploadBox .thumbnails {
-    height: 260px;
+    margin-left: -20px;
+}
+
+#uploadBox .thumbnails > li {
+    margin-left: 20px;
 }
 
 #uploadBox .upload-record {
     height: 260px;
+    background-color: #FFFFFF;
 }
 
 #uploadBox .upload-record .canva-wrapper {
     height: 120px;
 }
 
+@media (min-width: 768px) and (max-width: 979px) {
+    #uploadBox .upload-record canvas {
+        max-height: 120px;
+        width: 94px;
+    }
+}
+
+@media (min-width: 980px) and (max-width: 1199px) {
+    #uploadBox .upload-record canvas {
+        max-height: 120px;
+        width: 130px;
+    }
+}
+
+@media (min-width: 1200px) {
+    #uploadBox .upload-record canvas {
+        max-height: 120px;
+        width: 160px;
+    }
+}
+
 #uploadBox .upload-record .name-doc {
-    font-weight: bold;
+    height: 40px;
-    height:40px;
     overflow: hidden;
     -o-text-overflow: ellipsis; /* pour Opera 9 */
     text-overflow: ellipsis;
+    font-weight: bold;
 }
 
 #uploadBox .upload-record .infos-doc {
     color: #777777;
-    height:40px;
+    height: 40px;
 }
 
 #uploadBox .upload-record .error, #uploadBox .upload-record .success{
-    height:60px;
+    height: 55px;
-    display:none;
+    padding-top: 2px;
-    overflow:auto;
+    padding-bottom: 3px;
+    display: none;
+    overflow: auto;
 }
 
 #uploadBox .upload-record .remove-element {
@@ -4210,7 +4257,7 @@ dans l'onglet thesaurus : arbres, menus contextuels
 
 #uploadBoxRight .progress {
     margin-top: 4px;
-    margin-bottom: 4px;
+    margin-bottom: 10px;
     height: 10px;
 }
 
@@ -4224,3 +4271,78 @@ dans l'onglet thesaurus : arbres, menus contextuels
     background-repeat: no-repeat;
 }
 
+#lazaretBox.container-fluid {
+    margin: 0;
+    padding: 0;
+}
+
+#lazaretBox li.wrapper-item {
+    width: 99%;
+    margin-bottom: 20px;
+}
+
+#lazaretBox .lazaret-file h5,
+#lazaretBox .lazaret-proposals h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+#lazaretBox .lazaret-file p,
+#lazaretBox .lazaret-proposals p {
+    font-weight: bold;
+}
+
+#lazaretBox span.info {
+    display: inline;
+    font-weight: normal;
+}
+
+#lazaretBox .lazaret-file a,
+#lazaretBox .lazaret-proposals a {
+    font-weight: normal;
+    color: #333333;
+}
+
+#lazaretBox .lazaret-file a:hover,
+#lazaretBox .lazaret-proposals a:hover {
+    color: #999999;
+}
+
+
+#lazaretBox .lazaret-file .thumbnails,
+#lazaretBox .lazaret-proposals .thumbnails {
+    margin-left: 0;
+}
+
+#lazaretBox .lazaret-file .thumbnails li {
+    margin: 0;
+}
+
+#lazaretBox .lazaret-proposals .records-subititution {
+    margin: 0 10px 10px 0;
+}
+
+#lazaretBox .lazaret-file .thumbnail,
+#lazaretBox .lazaret-proposals .thumbnail {
+    background-color: #FFFFFF;
+}
+
+#lazaretBox .lazaret-proposals .thumbnail {
+    min-height: 234px;
+}
+
+#lazaretBox .lazaret-proposals .thumbnail .record-thumb {
+    height: 180px;
+}
+
+#lazaretBox .lazaret-file .thumbnail img {
+    max-height: 480px;
+}
+
+#lazaretBox .lazaret-file .thumbnail button {
+    font-weight: normal;
+}
+
+#lazaretBox .lazaret-file .thumbnail button img {
+    margin-right: 5px;
+}