Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filepicker design improvements #11522

Merged
merged 5 commits into from
Oct 1, 2018
Merged

Filepicker design improvements #11522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
86d5bfd
Refine wording from 'Target folder' to 'Choose target folder'
jancborchardt Oct 1, 2018
c2a956f
Fix buttons wrapping on long folder names
jancborchardt Oct 1, 2018
5ed0062
Fix breadcrumbs in file picker
jancborchardt Oct 1, 2018
3b7c6e7
Fix long folder names in picker, prevent horizontal scroll
jancborchardt Oct 1, 2018
36062fe
Improve overall container style, radius and shadow
jancborchardt Oct 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions apps/files/css/files.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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,
Expand Down
8 changes: 5 additions & 3 deletions apps/files/css/upload.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,14 @@
.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;

.cancel {
float:left;
}
}

.highlightUploaded {
Expand Down
2 changes: 1 addition & 1 deletion apps/files/js/fileactions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't it be "Select" instead of "Choose"?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Choose" seems a tad less technical, no?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jancborchardt Select looks to be much more standard. The only place I found "Choose" was in OneDrive and even they seem to be interchanging the 2 terms:
https://support.office.com/en-us/article/Choose-which-OneDrive-folders-to-sync-to-your-computer-98b8b011-8b94-419b-aa95-a14ff2415e85

if (type === OC.dialogs.FILEPICKER_TYPE_COPY) {
context.fileList.copy(filename, targetPath, false, context.dir);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/files/js/filelist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions core/css/css-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
--color-border: $color-border;
--color-border-dark: $color-border-dark;
--border-radius: $border-radius;
--border-radius-large: $border-radius-large;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should go with these extremely rounded borders. That would in fact mean that we would have to make the same changes to other (much smaller) popovers where it would look totally out of place.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pixelipo see comment – no, the border-radius large is only for the big modal dialogs (welcome screen, this move/copy etc.)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jancborchardt but what if a popover has a button?


--font-face: $font-face;
}
23 changes: 18 additions & 5 deletions core/css/jquery.ocdialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
Expand All @@ -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));
Expand All @@ -41,6 +41,12 @@
&.twobuttons.aside {
justify-content: flex-end;
}

button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

.oc-dialog-close {
Expand All @@ -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 {
Expand Down Expand Up @@ -76,4 +89,4 @@
display: none;
}
}
}
}
2 changes: 1 addition & 1 deletion core/css/mobile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
display: none;
}
#oc-dialog-filepicker-content .filelist .filename {
max-width: 80%;
max-width: 100%;
}

.snapjs-left table.multiselect thead {
Expand Down
10 changes: 8 additions & 2 deletions core/css/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -725,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);
Expand Down Expand Up @@ -1007,6 +1010,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;
Expand Down
3 changes: 2 additions & 1 deletion core/css/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👎


$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;

Expand Down