Merge pull request #11522 from nextcloud/filepicker-design
Filepicker design improvements
This commit is contained in:
commit
8799c6ee5b
|
@ -52,10 +52,6 @@
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#filestable tbody tr {
|
|
||||||
height: 51px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* fit app list view heights */
|
/* fit app list view heights */
|
||||||
.app-files #app-content>.viewcontainer {
|
.app-files #app-content>.viewcontainer {
|
||||||
min-height: 0%;
|
min-height: 0%;
|
||||||
|
@ -132,7 +128,7 @@
|
||||||
|
|
||||||
#filestable tbody tr {
|
#filestable tbody tr {
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
height: 40px;
|
height: 51px;
|
||||||
}
|
}
|
||||||
#filestable tbody tr:hover,
|
#filestable tbody tr:hover,
|
||||||
#filestable tbody tr:focus,
|
#filestable tbody tr:focus,
|
||||||
|
|
|
@ -172,12 +172,14 @@
|
||||||
.oc-dialog .fileexists #allfiles + span{
|
.oc-dialog .fileexists #allfiles + span{
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oc-dialog .oc-dialog-buttonrow {
|
.oc-dialog .oc-dialog-buttonrow {
|
||||||
width:100%;
|
width:100%;
|
||||||
text-align:right;
|
text-align:right;
|
||||||
}
|
|
||||||
.oc-dialog .oc-dialog-buttonrow .cancel {
|
.cancel {
|
||||||
float:left;
|
float:left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlightUploaded {
|
.highlightUploaded {
|
||||||
|
|
|
@ -662,7 +662,7 @@
|
||||||
if (permissions & OC.PERMISSION_UPDATE) {
|
if (permissions & OC.PERMISSION_UPDATE) {
|
||||||
actions = OC.dialogs.FILEPICKER_TYPE_COPY_MOVE;
|
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) {
|
if (type === OC.dialogs.FILEPICKER_TYPE_COPY) {
|
||||||
context.fileList.copy(filename, targetPath, false, context.dir);
|
context.fileList.copy(filename, targetPath, false, context.dir);
|
||||||
}
|
}
|
||||||
|
|
|
@ -849,7 +849,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
var actions = this.isSelectedMovable() ? OC.dialogs.FILEPICKER_TYPE_COPY_MOVE : OC.dialogs.FILEPICKER_TYPE_COPY;
|
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);
|
self.fileMultiSelectMenu.toggleLoading('copyMove', true);
|
||||||
if (type === OC.dialogs.FILEPICKER_TYPE_COPY) {
|
if (type === OC.dialogs.FILEPICKER_TYPE_COPY) {
|
||||||
self.copy(files, targetPath, disableLoadingState);
|
self.copy(files, targetPath, disableLoadingState);
|
||||||
|
|
|
@ -34,6 +34,7 @@
|
||||||
--color-border: $color-border;
|
--color-border: $color-border;
|
||||||
--color-border-dark: $color-border-dark;
|
--color-border-dark: $color-border-dark;
|
||||||
--border-radius: $border-radius;
|
--border-radius: $border-radius;
|
||||||
|
--border-radius-large: $border-radius-large;
|
||||||
|
|
||||||
--font-face: $font-face;
|
--font-face: $font-face;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
.oc-dialog {
|
.oc-dialog {
|
||||||
background: var(--color-main-background);
|
background: var(--color-main-background);
|
||||||
color: var(--color-text-light);
|
color: var(--color-text-light);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius-large);
|
||||||
box-shadow: 0 0 7px var(--color-box-shadow);
|
box-shadow: 0 0 30px var(--color-box-shadow);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
@ -25,8 +25,8 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding: 10px;
|
padding: 0;
|
||||||
padding-bottom: 0;
|
padding-top: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background));
|
background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background));
|
||||||
|
@ -41,6 +41,12 @@
|
||||||
&.twobuttons.aside {
|
&.twobuttons.aside {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.oc-dialog-close {
|
.oc-dialog-close {
|
||||||
|
@ -49,6 +55,13 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
background: url('../img/actions/close.svg') no-repeat center;
|
background: url('../img/actions/close.svg') no-repeat center;
|
||||||
|
opacity: .5;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.oc-dialog-dim {
|
.oc-dialog-dim {
|
||||||
|
@ -76,4 +89,4 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#oc-dialog-filepicker-content .filelist .filename {
|
#oc-dialog-filepicker-content .filelist .filename {
|
||||||
max-width: 80%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snapjs-left table.multiselect thead {
|
.snapjs-left table.multiselect thead {
|
||||||
|
|
|
@ -700,8 +700,10 @@ code {
|
||||||
|
|
||||||
#oc-dialog-filepicker-content {
|
#oc-dialog-filepicker-content {
|
||||||
.dirtree {
|
.dirtree {
|
||||||
width: 92%;
|
width: 96%;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
padding-left: 12px;
|
||||||
|
|
||||||
div:first-child a {
|
div:first-child a {
|
||||||
background-image: url('../img/places/home.svg?v=1');
|
background-image: url('../img/places/home.svg?v=1');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -725,8 +727,9 @@ code {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/** overflow under the button row */
|
/* overflow under the button row */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.emptycontent {
|
.emptycontent {
|
||||||
color: var(--color-text-details);
|
color: var(--color-text-details);
|
||||||
|
@ -1007,6 +1010,9 @@ div.crumb {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
// Some sane max-width for each folder name
|
||||||
|
max-width: 200px;
|
||||||
|
|
||||||
&.icon-home {
|
&.icon-home {
|
||||||
// Hide home text
|
// Hide home text
|
||||||
text-indent: -9999px;
|
text-indent: -9999px;
|
||||||
|
|
|
@ -66,13 +66,14 @@ $image-login-background: url('../img/background.png?v=2') !default;
|
||||||
$color-loading-light: #ccc !default;
|
$color-loading-light: #ccc !default;
|
||||||
$color-loading-dark: #777 !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
|
// light border like file table or app-content list
|
||||||
$color-border: nc-darken($color-main-background, 7%) !default;
|
$color-border: nc-darken($color-main-background, 7%) !default;
|
||||||
// darker border like inputs or very visible elements
|
// darker border like inputs or very visible elements
|
||||||
$color-border-dark: nc-darken($color-main-background, 14%) !default;
|
$color-border-dark: nc-darken($color-main-background, 14%) !default;
|
||||||
$border-radius: 3px !default;
|
$border-radius: 3px !default;
|
||||||
|
$border-radius-large: 20px;
|
||||||
|
|
||||||
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue