infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Responsive file list

Browse Source
pull/1/head
yflory 5 years ago
parent 9f1f01f3b4
commit 0aecea0a31
3 changed files with 143 additions and 50 deletions
Show Stats Download Patch File Download Diff File

121
customize.dist/src/less2/include/drive.less
Unescape Escape View File

@ -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;
}
}
}

70
www/common/drive-ui.js
Unescape Escape View File

@ -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;

2
www/common/translations/messages.fr.json
Unescape Escape View File

@ -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",

Write Preview
Loading…
Cancel
Save