improve file picker ui

customize.dist/src/less2/include/alertify.less

@@ -2,10 +2,10 @@
 @import (once) "./browser.less";
 
 .alertify_main () {
-    @alertify-fore: @colortheme_old-fore;
-    @alertify-base: @colortheme_old-base;
+    @alertify-fore: @colortheme_modal-fg;
+    @alertify-base: @colortheme_modal-bg;
 
-    @alertify-dialog-bg: #222;
+    @alertify-dialog-bg: @alertify-base;
     @alertify-dialog-fg: @alertify-fore;
 
     @alertify-btn-fg: @alertify-fore;
@@ -13,14 +13,14 @@
     @alertify-btn-bg: rgba(200, 200, 200, 0.1);
     @alertify-btn-bg-hover: rgba(200, 200, 200, .3);
 
-    @alertify-bg: rgba(0, 0, 0, .4);
+    @alertify-bg: @colortheme_modal-dim;
     @alertify-fg: @alertify-fore;
 
-    @alertify-input-bg: #111;
-    @alertify-input-fg: @alertify-fore;
+    @alertify-input-bg: @colortheme_modal-input;
+    @alertify-input-fg: @colortheme_modal-fg;
 
-    @alertify_padding-base: 12px;
-    @alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
+    @alertify_padding-base: @colortheme_modal-padding;
+    @alertify_box-shadow: @colortheme_modal-shadow;
 
     // Logs to show that something has happened
     // These show only once

customize.dist/src/less2/include/colortheme.less

@@ -13,9 +13,19 @@
 @colortheme_cp-red: #FA5858; // remove red
 @colortheme_cp-green: #46E981;
 
+@colortheme_modal-bg: #222;
+@colortheme_modal-fg: #fff;
+@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
+@colortheme_modal-padding: 12px;
+@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
+
+@colortheme_modal-input: #111;
+
 @colortheme_alertify-red: #E55236;
 @colortheme_alertify-green: #77C825;
 
+// Apps
+
 @colortheme_pad-bg: #1c4fa0;
 @colortheme_pad-color: #fff;
 

www/common/cryptpad-common.js

@@ -1400,20 +1400,21 @@ define([
 
     common.createFileDialog = function (cfg) {
         var $body = cfg.$body || $('body');
-        var $block = $body.find('#fileDialog');
-        if (!$block.length) {
-            $block = $('<div>', {id: "fileDialog"}).appendTo($body);
+        var $blockContainer = $body.find('#fileDialog');
+        if (!$blockContainer.length) {
+            $blockContainer = $('<div>', {id: "fileDialog"}).appendTo($body);
         }
-        $block.html('');
+        $blockContainer.html('');
+        var $block = $('<div>', {id: "modal"}).appendTo($blockContainer);
         $('<span>', {
             'class': 'close fa fa-times',
             'title': Messages.filePicker_close
         }).click(function () {
-            $block.hide();
+            $blockContainer.hide();
         }).appendTo($block);
         var $description = $('<p>').text(Messages.filePicker_description);
         $block.append($description);
-        var $filter = $('<p>').appendTo($block);
+        var $filter = $('<p>', {'class': 'form'}).appendTo($block);
         var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
         var updateContainer = function () {
             $container.html('');
@@ -1426,11 +1427,15 @@ define([
                 if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
                     return;
                 }
-                var $span = $('<span>', {'class': 'element'}).appendTo($container);
-                var $inner = $('<span>').text(name);
-                $span.append($inner).click(function () {
+                var $span = $('<span>', {
+                    'class': 'element',
+                    'title': name,
+                }).appendTo($container);
+                $span.append($('<i>', {'class': 'fa fa-file-text-o'}));
+                $span.append(name);
+                $span.click(function () {
                     if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
-                    $block.hide();
+                    $blockContainer.hide();
                 });
             });
         };
@@ -1446,13 +1451,13 @@ define([
         //$filter.append(' '+Messages.or+' ');
         var data = {FM: cfg.data.FM};
         $filter.append(common.createButton('upload', false, data, function () {
-            $block.hide();
+            $blockContainer.hide();
         }));
         updateContainer();
         $body.keydown(function (e) {
-            if (e.which === 27) { $block.hide(); }
+            if (e.which === 27) { $blockContainer.hide(); }
         });
-        $block.show();
+        $blockContainer.show();
     };
 
 

www/common/file-dialog.less

@@ -1,39 +1,101 @@
+@import (once) '../customize/src/less2/include/colortheme.less';
+
 #fileDialog {
-    position: absolute;
-    background-color: rgba(200, 200, 200, 0.8);
-    top: 15vh; bottom: 15vh;
-    left: 10vw; right: 10vw;
-    border: 1px solid black;
-    z-index: 100000;
-    overflow: auto;
     display: none;
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-    font-size: 16px;
-    text-align: center;
-    .close {
+
+    z-index: 100000;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: @colortheme_modal-dim;
+
+    #modal {
+        background-color: @colortheme_modal-bg;
+        color: @colortheme_modal-fg;
+        box-shadow: @colortheme_modal-shadow;
+
+        padding: @colortheme_modal-padding;
+
         position: absolute;
-        top: 0;
-        right: 0;
-        padding: 5px;
-        cursor: pointer;
-    }
-    .element {
-        cursor: pointer;
-        display: inline-flex;
-        width: 100px;
-        height: 100px;
-        border: 1px solid #ccc;
-        margin: 5px;
-        overflow: hidden;
-        word-wrap: break-word;
-        background-color: white;
-        padding: 5px;
-        align-items: center;
-        span {
-            width: 100px;
-            text-align: center;
+        top: 15vh; bottom: 15vh;
+        left: 10vw; right: 10vw;
+
+        overflow: auto;
+
+        font-family: @colortheme_font;
+        text-align: center;
+
+        & > p {
+            margin-bottom: 1em;
+        }
+
+        .form {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
         }
-    }
-}
 
+        input {
+            background-color: @colortheme_modal-input;
+            color: @colortheme_modal-fg;
+            border: 0;
+            padding: 8px 12px;
+            margin: 1em;
+        }
+
+        .close {
+            text-shadow: none;
+            color: inherit;
+
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin: @colortheme_modal-padding;
+            cursor: pointer;
+        }
+
+        .fileContainer {
+            display: flex;
+            flex-wrap: wrap;
+            overflow-y: auto;
+        }
+
+        .element {
+            @darker: darken(@colortheme_modal-fg, 30%);
+
+            width: 200px;
+            min-width: 200px;
+            height: 1em;
+            padding: 0.5em;
+            margin: 5px;
+            box-sizing: content-box;
+
+            text-align: left;
+            line-height: 1.25em;
+            cursor: pointer;
 
+            background-color: #111;
+            color: @darker;
+
+            transition: all 0.1s;
+
+            &:hover {
+                color: @colortheme_modal-fg;
+            }
+
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            align-items: center;
+
+            .fa {
+                cursor: pointer;
+                margin-right: 0.5em;
+            }
+        }
+    }
+}