Responsive file list
yflory
parent
9f1f01f3b4
commit
0aecea0a31
|
|
@ -3,6 +3,7 @@
|
|||
@import (reference) "./tools.less";
|
||||
@import (reference) "./limit-bar.less";
|
||||
@import (reference) "./tokenfield.less";
|
||||
@import (reference) "./dropdown.less";
|
||||
|
||||
.drive_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -102,10 +103,10 @@
|
|||
|
||||
.cp-app-drive-container {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
min-height: 0;
|
||||
@media screen and (max-width: @browser_media-medium-screen) {
|
||||
display: block;
|
||||
#cp-app-drive-toolbar {
|
||||
|
|
@ -159,7 +160,6 @@
|
|||
.cp-app-drive-element-selected {
|
||||
background: @drive_selected-bg !important;
|
||||
color: #eee;
|
||||
margin: -1px;
|
||||
.fa-minus-square-o, .fa-plus-square-o {
|
||||
color: @colortheme_sidebar-left-fg;
|
||||
}
|
||||
|
|
@ -169,7 +169,6 @@
|
|||
border: 1px dotted #bbb;
|
||||
background: #AAA;
|
||||
color: #ddd;
|
||||
margin: -1px;
|
||||
.fa-minus-square-o, .fa-plus-square-o {
|
||||
color: @colortheme_sidebar-left-fg;
|
||||
}
|
||||
|
|
@ -434,10 +433,8 @@
|
|||
#cp-app-drive-content-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
// Needed to avoid the folder's path to overflows
|
||||
// https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
|
||||
// min-width: 0;
|
||||
flex: 1 1 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
#cp-app-drive-content {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -637,22 +634,70 @@
|
|||
display: none;
|
||||
}
|
||||
// Make it act as a table!
|
||||
padding-left: 20px;
|
||||
padding-left: 10px;
|
||||
ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
li {
|
||||
display: table-row;
|
||||
display: flex;
|
||||
input {
|
||||
border: 1px solid #ddd;
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&> span {
|
||||
padding: 0 5px;
|
||||
display: table-cell;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
&.cp-app-drive-element-state {
|
||||
.fa, .cptools {
|
||||
&:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child, &.cp-icon {
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
&.cp-app-drive-element-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.cp-app-drive-element-state {
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
&.cp-app-drive-element-list {
|
||||
width: 110px;
|
||||
}
|
||||
&.cp-app-drive-element-sort {
|
||||
display: none;
|
||||
.dropdown_main();
|
||||
.cp-dropdown-content a {
|
||||
display: block !important;
|
||||
.sortdesc {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
button {
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.cp-app-drive-element-header) {
|
||||
height: @variables_bar-height;
|
||||
|
|
@ -674,14 +719,11 @@
|
|||
text-align: left;
|
||||
}
|
||||
&.sortasc, &.sortdesc {
|
||||
float: right;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
&> span {
|
||||
padding: 15px 5px;
|
||||
&.cp-app-drive-sort-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
padding: 14px 5px;
|
||||
&.cp-app-drive-sort-clickable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
|
|
@ -696,28 +738,29 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
&.cp-app-drive-element-state {
|
||||
.fa, .cptools {
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.cp-app-drive-content-icon, &.cp-app-drive-element-state, &.cp-icon {
|
||||
width: 30px;
|
||||
}
|
||||
&.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
|
||||
width: 175px;
|
||||
}
|
||||
&.cp-app-drive-element-title {
|
||||
width: 250px;
|
||||
@media screen and (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.cp-app-drive-element-folders, &.cp-app-drive-element-files {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 840px) {
|
||||
.cp-app-drive-element-type, .cp-app-drive-element-filler {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
.cp-app-drive-element-folders, .cp-app-drive-element-ctime {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 670px) {
|
||||
.cp-app-drive-element-files, .cp-app-drive-element-atime {
|
||||
display: none !important;
|
||||
}
|
||||
.cp-app-drive-element-header .cp-app-drive-element-state {
|
||||
display: none !important;
|
||||
}
|
||||
.cp-app-drive-element-sort {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1931,7 +1931,6 @@ define([
|
|||
if (thumbsUrls[element]) {
|
||||
var img = new Image();
|
||||
img.src = thumbsUrls[element];
|
||||
$element.find('.cp-icon').addClass('cp-app-drive-element-list');
|
||||
$element.prepend(img);
|
||||
$(img).addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
|
||||
$(img).attr("draggable", false);
|
||||
|
|
@ -1940,7 +1939,7 @@ define([
|
|||
common.displayThumbnail(href || data.roHref, data.channel, data.password, $element, function ($thumb) {
|
||||
// Called only if the thumbnail exists
|
||||
// Remove the .hide() added by displayThumnail() because it hides the icon in list mode too
|
||||
$element.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list');
|
||||
$element.find('.cp-icon').removeAttr('style');
|
||||
$thumb.addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
|
||||
$thumb.attr("draggable", false);
|
||||
thumbsUrls[element] = $thumb[0].src;
|
||||
|
|
@ -1998,10 +1997,13 @@ define([
|
|||
var $files = $('<span>', {
|
||||
'class': 'cp-app-drive-element-files cp-app-drive-element-list'
|
||||
}).text(files);
|
||||
var $filler = $('<span>', {
|
||||
'class': 'cp-app-drive-element-filler cp-app-drive-element-list'
|
||||
});
|
||||
if (getViewMode() === 'grid') {
|
||||
$span.attr('title', key);
|
||||
}
|
||||
$span.append($name).append($state).append($subfolders).append($files);
|
||||
$span.append($name).append($state).append($subfolders).append($files).append($filler);
|
||||
};
|
||||
|
||||
// This is duplicated in cryptpad-common, it should be unified
|
||||
|
|
@ -2714,7 +2716,7 @@ define([
|
|||
value = '';
|
||||
}
|
||||
} else {
|
||||
['cp-app-drive-element-title', 'cp-app-drive-element-type',
|
||||
['cp-app-drive-element-type',
|
||||
'cp-app-drive-element-atime', 'cp-app-drive-element-ctime'].some(function (c) {
|
||||
if ($span.hasClass(c)) {
|
||||
var nValue = c.replace(/cp-app-drive-element-/, '');
|
||||
|
|
@ -2744,6 +2746,47 @@ define([
|
|||
$list.find('.cp-app-drive-sort-foldername').addClass('cp-app-drive-sort-active').prepend($icon);
|
||||
}
|
||||
};
|
||||
Messages.fm_sort = "Sort"; // XXX
|
||||
var getSortDropdown = function (folder) {
|
||||
var $fhSort = $(h('span.cp-dropdown-container.cp-app-drive-element-sort.cp-app-drive-sort-clickable'));
|
||||
var options = [];
|
||||
if (folder) {
|
||||
options = [{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-folders'},
|
||||
content: Messages.fm_numberOfFolders
|
||||
},{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-files'},
|
||||
content: Messages.fm_numberOfFiles
|
||||
}];
|
||||
} else {
|
||||
options = [{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-type'},
|
||||
content: Messages.fm_type
|
||||
},{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-atime'},
|
||||
content: Messages.fm_lastAccess
|
||||
},{
|
||||
tag: 'a',
|
||||
attributes: {'class': 'cp-app-drive-element-ctime'},
|
||||
content: Messages.fm_creation
|
||||
}];
|
||||
}
|
||||
var dropdownConfig = {
|
||||
text: '', // Button initial text
|
||||
options: options, // Entries displayed in the menu
|
||||
container: $fhSort,
|
||||
left: true,
|
||||
common: common
|
||||
};
|
||||
var $sortBlock = UIElements.createDropdown(dropdownConfig);
|
||||
$sortBlock.find('button').append(h('span.fa.fa-sort-amount-desc')).append(h('span', Messages.fm_sort));
|
||||
$sortBlock.on('click', 'a', onSortByClick);
|
||||
return $fhSort;
|
||||
};
|
||||
var getFolderListHeader = function () {
|
||||
var $fohElement = $('<li>', {
|
||||
'class': 'cp-app-drive-element-header cp-app-drive-element-list'
|
||||
|
|
@ -2754,6 +2797,8 @@ define([
|
|||
'class': 'cp-app-drive-element-name cp-app-drive-sort-foldername ' +
|
||||
'cp-app-drive-sort-clickable'
|
||||
}).text(Messages.fm_folderName).click(onSortByClick);
|
||||
var $fhSort = getSortDropdown(true);
|
||||
|
||||
var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
|
||||
var $subfolders = $('<span>', {
|
||||
'class': 'cp-app-drive-element-folders cp-app-drive-element-list'
|
||||
|
|
@ -2761,8 +2806,11 @@ define([
|
|||
var $files = $('<span>', {
|
||||
'class': 'cp-app-drive-element-files cp-app-drive-element-list'
|
||||
}).text(Messages.fm_numberOfFiles);
|
||||
$fohElement.append($fhIcon).append($name).append($state)
|
||||
.append($subfolders).append($files);
|
||||
var $filler = $('<span>', {
|
||||
'class': 'cp-app-drive-element-filler cp-app-drive-element-list'
|
||||
});
|
||||
$fohElement.append($fhIcon).append($name).append($fhSort).append($state)
|
||||
.append($subfolders).append($files).append($filler);
|
||||
addFolderSortIcon($fohElement);
|
||||
return $fohElement;
|
||||
};
|
||||
|
|
@ -2788,18 +2836,20 @@ define([
|
|||
'class': 'cp-app-drive-element-name cp-app-drive-sort-filename ' +
|
||||
'cp-app-drive-sort-clickable'
|
||||
}).text(Messages.fm_fileName).click(onSortByClick);
|
||||
var $fhSort = getSortDropdown();
|
||||
|
||||
var $fhState = $('<span>', {'class': 'cp-app-drive-element-state'});
|
||||
var $fhType = $('<span>', {
|
||||
'class': 'cp-app-drive-element-type cp-app-drive-sort-clickable'
|
||||
'class': 'cp-app-drive-element-type cp-app-drive-sort-clickable cp-app-drive-element-list'
|
||||
}).text(Messages.fm_type).click(onSortByClick);
|
||||
var $fhAdate = $('<span>', {
|
||||
'class': 'cp-app-drive-element-atime cp-app-drive-sort-clickable'
|
||||
'class': 'cp-app-drive-element-atime cp-app-drive-sort-clickable cp-app-drive-element-list'
|
||||
}).text(Messages.fm_lastAccess).click(onSortByClick);
|
||||
var $fhCdate = $('<span>', {
|
||||
'class': 'cp-app-drive-element-ctime cp-app-drive-sort-clickable'
|
||||
'class': 'cp-app-drive-element-ctime cp-app-drive-sort-clickable cp-app-drive-element-list'
|
||||
}).text(Messages.fm_creation).click(onSortByClick);
|
||||
// If displayTitle is false, it means the "name" is the title, so do not display the "name" header
|
||||
$fihElement.append($fhIcon).append($fhName).append($fhState).append($fhType);
|
||||
$fihElement.append($fhIcon).append($fhName).append($fhSort).append($fhState).append($fhType);
|
||||
$fihElement.append($fhAdate).append($fhCdate);
|
||||
addFileSortIcon($fihElement);
|
||||
return $fihElement;
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@
|
|||
"fm_fileName": "Nom du fichier",
|
||||
"fm_title": "Titre",
|
||||
"fm_type": "Type",
|
||||
"fm_lastAccess": "Dernier accès",
|
||||
"fm_lastAccess": "Accès",
|
||||
"fm_creation": "Création",
|
||||
"fm_forbidden": "Action interdite",
|
||||
"fm_originalPath": "Chemin d'origine",
|
||||
|
|
|
|||
Loading…
Reference in New Issue