From 86d5bfd81d0d15203b3dbab3d8a6dcc0d1fc6a99 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 1 Oct 2018 20:32:37 +0200 Subject: [PATCH 1/5] Refine wording from 'Target folder' to 'Choose target folder' Signed-off-by: Jan-Christoph Borchardt --- apps/files/js/fileactions.js | 2 +- apps/files/js/filelist.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js index 8ce8eddb0b..4fcb290ca8 100644 --- a/apps/files/js/fileactions.js +++ b/apps/files/js/fileactions.js @@ -662,7 +662,7 @@ if (permissions & OC.PERMISSION_UPDATE) { actions = OC.dialogs.FILEPICKER_TYPE_COPY_MOVE; } - OC.dialogs.filepicker(t('files', 'Target folder'), function(targetPath, type) { + OC.dialogs.filepicker(t('files', 'Choose target folder'), function(targetPath, type) { if (type === OC.dialogs.FILEPICKER_TYPE_COPY) { context.fileList.copy(filename, targetPath, false, context.dir); } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 8fb8a02181..154209ca97 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -849,7 +849,7 @@ }; var actions = this.isSelectedMovable() ? OC.dialogs.FILEPICKER_TYPE_COPY_MOVE : OC.dialogs.FILEPICKER_TYPE_COPY; - OC.dialogs.filepicker(t('files', 'Target folder'), function(targetPath, type) { + OC.dialogs.filepicker(t('files', 'Choose target folder'), function(targetPath, type) { self.fileMultiSelectMenu.toggleLoading('copyMove', true); if (type === OC.dialogs.FILEPICKER_TYPE_COPY) { self.copy(files, targetPath, disableLoadingState); From c2a956f55e74fde2efde9e807d37bd8ff1c76b5b Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 1 Oct 2018 20:38:10 +0200 Subject: [PATCH 2/5] Fix buttons wrapping on long folder names Signed-off-by: Jan-Christoph Borchardt --- apps/files/css/upload.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss index 0df2e39a61..b105427e60 100644 --- a/apps/files/css/upload.scss +++ b/apps/files/css/upload.scss @@ -172,12 +172,20 @@ .oc-dialog .fileexists #allfiles + span{ vertical-align: bottom; } + .oc-dialog .oc-dialog-buttonrow { width:100%; text-align:right; -} -.oc-dialog .oc-dialog-buttonrow .cancel { - float:left; + + button { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .cancel { + float:left; + } } .highlightUploaded { From 5ed00620024368792acb4f9930ddf837e26a0495 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 1 Oct 2018 21:19:48 +0200 Subject: [PATCH 3/5] Fix breadcrumbs in file picker Signed-off-by: Jan-Christoph Borchardt --- core/css/styles.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index 2d6df4c393..1cedb7108b 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -700,8 +700,10 @@ code { #oc-dialog-filepicker-content { .dirtree { - width: 92%; + width: 96%; flex-wrap: wrap; + padding-left: 12px; + div:first-child a { background-image: url('../img/places/home.svg?v=1'); background-repeat: no-repeat; @@ -1007,6 +1009,9 @@ div.crumb { white-space: nowrap; overflow: hidden; flex: 0 0 auto; + // Some sane max-width for each folder name + max-width: 200px; + &.icon-home { // Hide home text text-indent: -9999px; From 3b7c6e7dfdce6bf2f79236368b409bf71b453dd7 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 1 Oct 2018 21:23:10 +0200 Subject: [PATCH 4/5] Fix long folder names in picker, prevent horizontal scroll Signed-off-by: Jan-Christoph Borchardt --- apps/files/css/files.scss | 6 +----- core/css/mobile.scss | 2 +- core/css/styles.scss | 3 ++- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index c41255b986..bd57f1907f 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -52,10 +52,6 @@ min-width: 500px; } -#filestable tbody tr { - height: 51px; -} - /* fit app list view heights */ .app-files #app-content>.viewcontainer { min-height: 0%; @@ -132,7 +128,7 @@ #filestable tbody tr { transition: background-color 0.3s ease; - height: 40px; + height: 51px; } #filestable tbody tr:hover, #filestable tbody tr:focus, diff --git a/core/css/mobile.scss b/core/css/mobile.scss index e4a4f53367..f7f3827eba 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -123,7 +123,7 @@ display: none; } #oc-dialog-filepicker-content .filelist .filename { - max-width: 80%; + max-width: 100%; } .snapjs-left table.multiselect thead { diff --git a/core/css/styles.scss b/core/css/styles.scss index 1cedb7108b..dc217fb8f2 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -727,8 +727,9 @@ code { display: inline-block; overflow-y: auto; height: 100%; - /** overflow under the button row */ + /* overflow under the button row */ width: 100%; + overflow-x: hidden; } .emptycontent { color: var(--color-text-details); From 36062fec7d06351da8f1553d9655430c0cda856d Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 1 Oct 2018 21:40:28 +0200 Subject: [PATCH 5/5] Improve overall container style, radius and shadow Signed-off-by: Jan-Christoph Borchardt --- apps/files/css/upload.scss | 6 ------ core/css/css-variables.scss | 1 + core/css/jquery.ocdialog.scss | 23 ++++++++++++++++++----- core/css/variables.scss | 3 ++- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss index b105427e60..00c77100a2 100644 --- a/apps/files/css/upload.scss +++ b/apps/files/css/upload.scss @@ -177,12 +177,6 @@ width:100%; text-align:right; - button { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .cancel { float:left; } diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss index b1b7df3115..058e018b41 100644 --- a/core/css/css-variables.scss +++ b/core/css/css-variables.scss @@ -34,6 +34,7 @@ --color-border: $color-border; --color-border-dark: $color-border-dark; --border-radius: $border-radius; + --border-radius-large: $border-radius-large; --font-face: $font-face; } diff --git a/core/css/jquery.ocdialog.scss b/core/css/jquery.ocdialog.scss index 0a0222497b..b5ae27034a 100644 --- a/core/css/jquery.ocdialog.scss +++ b/core/css/jquery.ocdialog.scss @@ -1,8 +1,8 @@ .oc-dialog { background: var(--color-main-background); color: var(--color-text-light); - border-radius: var(--border-radius); - box-shadow: 0 0 7px var(--color-box-shadow); + border-radius: var(--border-radius-large); + box-shadow: 0 0 30px var(--color-box-shadow); padding: 15px; z-index: 10000; font-size: 100%; @@ -25,8 +25,8 @@ background: transparent; right: 0; bottom: 0; - padding: 10px; - padding-bottom: 0; + padding: 0; + padding-top: 10px; box-sizing: border-box; width: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background)); @@ -41,6 +41,12 @@ &.twobuttons.aside { justify-content: flex-end; } + + button { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } .oc-dialog-close { @@ -49,6 +55,13 @@ right: 0; padding: 25px; background: url('../img/actions/close.svg') no-repeat center; + opacity: .5; + + &:hover, + &:focus, + &:active { + opacity: 1; + } } .oc-dialog-dim { @@ -76,4 +89,4 @@ display: none; } } -} \ No newline at end of file +} diff --git a/core/css/variables.scss b/core/css/variables.scss index 3bfc37484c..f5b97c9b87 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -66,13 +66,14 @@ $image-login-background: url('../img/background.png?v=2') !default; $color-loading-light: #ccc !default; $color-loading-dark: #777 !default; -$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default; +$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.5) !default; // light border like file table or app-content list $color-border: nc-darken($color-main-background, 7%) !default; // darker border like inputs or very visible elements $color-border-dark: nc-darken($color-main-background, 14%) !default; $border-radius: 3px !default; +$border-radius-large: 20px; $font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;