From 7a93927068782c40eace2b5c919178d18628b5b4 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 17 Sep 2018 14:39:52 +0200
Subject: [PATCH] Fix UI issues with the new pad modals

---
 customize.dist/src/less2/include/toolbar.less | 12 ++++++++++--
 www/common/common-ui-elements.js              |  7 +++++--
 www/drive/app-drive.less                      | 18 +++++++++++++-----
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index cdd1f0cb6..ec0d68187 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -319,11 +319,15 @@
                 margin: 50px;
             }
             &> div {
+                flex: 1;
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: center;
                 align-content: center;
-                overflow-y: auto;
+            }
+            &> div:last-child {
+                flex: unset;
+                margin: 50px 0;
             }
         }
 
@@ -342,13 +346,15 @@
             margin-left: 5px;
         }
 
-        @media screen and (max-height: @browser_media-not-big) {
+        @media screen and (max-height: @browser_media-medium-screen),
+               screen and (max-width: @browser_media-medium-screen) {
             .cp-modal {
                 & > p {
                     display: none;
                 }
                 & > div {
                     align-content: unset;
+                    align-items: center;
                     li {
                         height: 40px;
                         width: 200px;
@@ -356,9 +362,11 @@
                         align-items: center;
                         .fa {
                             font-size: 32px;
+                            min-width: 50px;
                         }
                         .cp-icons-name {
                             height: auto;
+                            text-align: left;
                         }
                     }
                 }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index b956c5b93..70d3ed184 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1782,13 +1782,16 @@ define([
 
         var $container = $('<div>');
         var i = 0;
-        AppConfig.availablePadTypes.forEach(function (p) {
+        var types = AppConfig.availablePadTypes.filter(function (p) {
             if (p === 'drive') { return; }
             if (p === 'contacts') { return; }
             if (p === 'todo') { return; }
             if (p === 'file') { return; }
             if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
                 AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
+            return true;
+        });
+        types.forEach(function (p) {
             var $element = $('<li>', {
                 'class': 'cp-icons-element',
                 'id': 'cp-newpad-icons-'+ (i++)
@@ -1812,7 +1815,7 @@ define([
 
         var selected = -1;
         var next = function () {
-            selected = ++selected % 5;
+            selected = ++selected % types.length;
             $container.find('.cp-icons-element-selected').removeClass('cp-icons-element-selected');
             $container.find('#cp-newpad-icons-'+selected).addClass('cp-icons-element-selected');
         };
diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less
index 37f79f193..a2841adfa 100644
--- a/www/drive/app-drive.less
+++ b/www/drive/app-drive.less
@@ -653,8 +653,10 @@
     #cp-app-drive-new-ghost-dialog.cp-modal-container {
         .drive_fileIcon;
 
+        border: 1px solid @colortheme_modal-fg;
         li:not(.cp-app-drive-element-selected):hover {
-            border: 1px solid white;
+            background: @colortheme_modal-fg;
+            color: @colortheme_modal-bg;
         }
         .cp-modal {
             display: flex;
@@ -663,14 +665,16 @@
                 cursor: pointer;
             }
             &> p {
-                margin: 50px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
             &> div {
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: center;
                 align-content: center;
-                overflow-y: auto;
+                flex: 1;
                 .cp-app-drive-new-upload {
                     break-after: always;
                     page-break-after: always;
@@ -682,23 +686,27 @@
             white-space: nowrap;
         }
 
-        @media screen and (max-height: @browser_media-not-big) {
+        @media screen and (max-width: @browser_media-medium-screen),
+               screen and (max-height: @browser_media-medium-screen) {
             .cp-modal {
                 & > p {
                     display: none;
                 }
                 & > div {
-                    align-content: unset;
                     li {
                         height: 40px;
                         width: 90%;
                         display: flex;
                         align-items: center;
+                        align-content: unset;
                         .fa {
                             font-size: 32px;
+                            min-width: 50px;
                         }
                         .cp-app-drive-new-name {
                             height: auto;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
                         }
                     }
                 }