Fix style of preview tiles in multiple selection

pydio · Sep 9, 2016 · bb597b0 · bb597b0
1 parent b8c2554
commit bb597b0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 21 deletions.
diff --git a/core/src/plugins/gui.ajax/res/js/ui/prototype/class.InfoPanel.js b/core/src/plugins/gui.ajax/res/js/ui/prototype/class.InfoPanel.js
@@ -460,7 +460,7 @@ Class.create("InfoPanel", AjxpPane, {
 					} else if(attName == 'preview_simple'){
                         if(multipleNodes){
                             var s ='';
-                            var simpleTpl = new Template('<div class="info_panel_multiple_tile"><div class="tile_preview">#{preview}</div><div class="tile_label">#{label}</div></div>');
+                            var simpleTpl = new Template('<div class="info_panel_multiple_tile"><div class="tile_preview_container"><div class="tile_preview">#{preview}</div></div><div class="tile_label">#{label}</div></div>');
                             multipleNodes.each(function(n){
                                 var p = oThis.getPreviewElement(n, false, false);
                                 var args = {label:getBaseName(n.getMetadata().get('filename'))};

diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css
diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/components/infopanel.less b/core/src/plugins/gui.ajax/res/themes/orbit/css/components/infopanel.less
@@ -262,25 +262,35 @@
       text-align: center;
       border-radius: 0;
       box-shadow: @reactBoxShadowDepthMini;
+      div.tile_preview_container{
+        display: flex;
+        align-items: center;
+        height: 60px;
+        div.tile_preview{
+          margin: auto;
+          .mimefont{
+            color: @thumbnail_mimefont_color;
+          }
+          img {
+            max-width: 90%;
+            max-height: 60px;
+          }
+        }
+      }
+      div.tile_label {
+        position: absolute;
+        bottom: 1px;
+        font-size: 0.7em;
+        overflow: hidden;
+        width: 89%;
+        text-overflow: ellipsis;
+        padding: 2px 2px 0;
+        text-align: center;
+        color: #646464;
+        white-space: nowrap;
+      }
     }
 
-    .info_panel_multiple_tile div.tile_preview img {
-      max-width: 90%;
-      max-height: 60px;
-    }
-
-    .info_panel_multiple_tile div.tile_label {
-      position: absolute;
-      bottom: 1px;
-      font-size: 0.7em;
-      overflow: hidden;
-      width: 89%;
-      text-overflow: ellipsis;
-      padding: 2px 2px 0;
-      text-align: center;
-      color: #646464;
-      white-space: nowrap;
-    }
 
     div.toolbar_placeholder{
       margin-top: 25px;

diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css
@@ -5376,8 +5376,26 @@ div.menu.rootDirChooser span.rootDirTitle {
   border-radius: 0;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.33);
 }
-#info_panel .panelContent .info_panel_multiple_tile div.tile_preview img,
+#info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container,
-.form-ip_content_info_panel .panelContent .info_panel_multiple_tile div.tile_preview img {
+.form-ip_content_info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 60px;
+}
+#info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container div.tile_preview,
+.form-ip_content_info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container div.tile_preview {
+  margin: auto;
+}
+#info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container div.tile_preview .mimefont,
+.form-ip_content_info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container div.tile_preview .mimefont {
+  color: #607d8b;
+}
+#info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container div.tile_preview img,
+.form-ip_content_info_panel .panelContent .info_panel_multiple_tile div.tile_preview_container div.tile_preview img {
   max-width: 90%;
   max-height: 60px;
 }