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

Merge branch 'drivestyle' into newtoolbar

Browse Source
pull/1/head
yflory 8 years ago
parent 7ad080b8a2 6f5ff07c2b
commit 283bde3435
3 changed files with 100 additions and 112 deletions
Show Stats Download Patch File Download Diff File

52
www/drive/file.css
Unescape Escape View File

@ -56,13 +56,11 @@ li {
color: #eee; color: #eee;
margin: -1px; margin: -1px;
} }
span.fa-folder { span.fa-folder,
span.fa-folder-open {
color: #FEDE8B; color: #FEDE8B;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000; text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
} }
span.fa {
min-width: 20px;
}
/* TREE */ /* TREE */
#tree { #tree {
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
@ -211,42 +209,44 @@ span.fa {
#content div.grid .listElement { #content div.grid .listElement {
display: none; display: none;
} }
#content .list ul {
display: table;
width: 100%;
}
#content .list li { #content .list li {
display: flex; display: table-row;
flex-flow: row;
align-items: center;
padding-right: 0px;
} }
#content .list li .element { #content .list li > span {
display: inline-flex; padding: 0 5px;
flex: 1; display: table-cell;
} }
#content .list li.header { #content .list li.header {
cursor: default; cursor: default;
color: #008; color: #888;
margin-top: 10px;
} }
#content .list li.header .element span:not(.fa) { #content .list li.header span:not(.fa) {
border-right: 1px solid #CCC;
text-align: left; text-align: left;
} }
#content .list li.header .element span.fa { #content .list li.header span.sortasc,
#content .list li.header span.sortdesc {
float: right; float: right;
} }
#content .list li.header span.name { #content .list li.header > span.active {
padding-left: 0; font-weight: bold;
}
#content .list li.header > span.clickable {
cursor: pointer;
}
#content .list li.header > span.clickable:hover {
background: #d8d8d8;
} }
#content .list .element span { #content .list .element span {
padding: 0px 10px;
display: inline-block;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
padding-right: 0px;
border-right: 10px solid rgba(0, 0, 0, 0);
} }
#content .list .element span.name { #content .list .element span.icon {
width: 478px; width: 30px;
} }
#content .list .element span.type, #content .list .element span.type,
#content .list .element span.atime, #content .list .element span.atime,
@ -255,7 +255,6 @@ span.fa {
} }
#content .list .element span.title { #content .list .element span.title {
width: 250px; width: 250px;
display: inline;
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#content .list .element span.title { #content .list .element span.title {
@ -266,9 +265,6 @@ span.fa {
#content .list .element span.files { #content .list .element span.files {
width: 150px; width: 150px;
} }
#content .list .header span.name {
width: 500px;
}
.parentFolder { .parentFolder {
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;

69
www/drive/file.less
Unescape Escape View File

@ -66,13 +66,10 @@ li {
} }
span { span {
&.fa-folder { &.fa-folder, &.fa-folder-open {
color: #FEDE8B; color: #FEDE8B;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
} }
&.fa {
min-width: 20px;
}
} }
/* TREE */ /* TREE */
@ -240,55 +237,56 @@ span {
} }
.list { .list {
// Make it act as a table!
ul {
display: table;
width: 100%;
}
li { li {
display: flex; display: table-row;
flex-flow: row; &> span {
align-items: center; padding: 0 5px;
padding-right: 0px; display: table-cell;
.element {
display: inline-flex;
flex: 1;
} }
}
li {
&.header { &.header {
cursor: default; cursor: default;
color: #008; color: #888;
margin-top: 10px; span {
.element { &:not(.fa) {
span { text-align: left;
&:not(.fa) { }
border-right: 1px solid #CCC; &.sortasc, &.sortdesc {
text-align: left; float: right;
}
&.fa {
float: right;
}
} }
} }
span { &> span {
&.name { &.active {
padding-left: 0; font-weight: bold;
}
&.clickable {
cursor: pointer;
&:hover {
background: #d8d8d8;
}
} }
} }
} }
} }
.element { .element {
span { span {
padding: 0px 10px;
display: inline-block;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
padding-right: 0px; &.icon {
border-right: 10px solid rgba(0, 0, 0, 0); width: 30px;
&.name {
width: 478px;
} }
&.type, &.atime, &.ctime { &.type, &.atime, &.ctime {
width: 175px; width: 175px;
} }
&.title { &.title {
width: 250px; width: 250px;
display: inline;
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
display: none; display: none;
} }
@ -298,13 +296,6 @@ span {
} }
} }
} }
.header {
span {
&.name {
width: 500px;
}
}
}
} }
} }

91
www/drive/main.js
Unescape Escape View File

@ -183,16 +183,15 @@ define([
// Icons // Icons
var $folderIcon = $('<span>', {"class": "fa fa-folder folder"}); var $folderIcon = $('<span>', {"class": "fa fa-folder folder icon"});
var $folderEmptyIcon = $folderIcon.clone(); var $folderEmptyIcon = $folderIcon.clone();
var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"); var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone(); var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file"}); var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file"}); var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon"});
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file"}); var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon"});
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file"}); var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon"});
var $pollIcon = $('<span>', {"class": "fa fa-calendar file"}); var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon"});
var $anonIcon = $('<span>', {"class": "fa fa-user-secret file listonly"});
var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"}); var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"}); var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
var $templateIcon = $('<span>', {"class": "fa fa-cubes"}); var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
@ -202,8 +201,8 @@ define([
var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"}); var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
var $listIcon = $('<span>', {"class": "fa fa-list"}); var $listIcon = $('<span>', {"class": "fa fa-list"});
var $gridIcon = $('<span>', {"class": "fa fa-th"}); var $gridIcon = $('<span>', {"class": "fa fa-th"});
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up"}); var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down"}); var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
var $closeIcon = $('<span>', {"class": "fa fa-window-close"}); var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
if (!APP.readOnly) { if (!APP.readOnly) {
@ -235,7 +234,7 @@ define([
$iframe.find('.selected').removeClass("selected"); $iframe.find('.selected').removeClass("selected");
}; };
var removeInput = function () { var removeInput = function () {
$iframe.find('li > span:hidden').show(); $iframe.find('li > span:hidden').attr('style', undefined);
$iframe.find('li > input').remove(); $iframe.find('li > input').remove();
}; };
@ -367,8 +366,8 @@ define([
return true; return true;
} }
// $element should be the <span class="element">, find it if it's not the case // $element should be the <li class="element">
var $element = $(e.target).closest('li').children('span.element'); var $element = $(e.target).closest('li');
onElementClick(undefined, $element); onElementClick(undefined, $element);
if (!$element.length) { if (!$element.length) {
logError("Unable to locate the .element tag", e.target); logError("Unable to locate the .element tag", e.target);
@ -673,22 +672,20 @@ define([
var element = filesOp.findElement(files, newPath); var element = filesOp.findElement(files, newPath);
var $icon = !isFolder ? getFileIcon(element) : undefined; var $icon = !isFolder ? getFileIcon(element) : undefined;
var spanClass = 'file-element element'; var liClass = 'file-item file-element element';
var liClass = 'file-item';
if (isFolder) { if (isFolder) {
spanClass = 'folder-element element'; liClass = 'folder-item folder-element element';
liClass = 'folder-item';
$icon = filesOp.isFolderEmpty(root[key]) ? $folderEmptyIcon.clone() : $folderIcon.clone(); $icon = filesOp.isFolderEmpty(root[key]) ? $folderEmptyIcon.clone() : $folderIcon.clone();
} }
var $name = $('<span>', { 'class': spanClass }).text(key); var $element = $('<li>', {
draggable: true
});
if (isFolder) { if (isFolder) {
addFolderData(element, key, $name); addFolderData(element, key, $element);
} else { } else {
addFileData(element, key, $name, true); addFileData(element, key, $element, true);
} }
var $element = $('<li>', { $element.prepend($icon).dblclick(function () {
draggable: true
}).append($icon).append($name).dblclick(function () {
if (isFolder) { if (isFolder) {
module.displayDirectory(newPath); module.displayDirectory(newPath);
return; return;
@ -946,18 +943,19 @@ define([
$icon = $sortDescIcon.clone(); $icon = $sortDescIcon.clone();
} }
if (typeof(Cryptpad.getLSAttribute(SORT_FOLDER_DESC)) !== "undefined") { if (typeof(Cryptpad.getLSAttribute(SORT_FOLDER_DESC)) !== "undefined") {
$list.find('.foldername').prepend($icon); $list.find('.foldername').addClass('active').prepend($icon);
} }
}; };
var getFolderListHeader = function () { var getFolderListHeader = function () {
var $folderHeader = $('<li>', {'class': 'header listElement'}); var $fohElement = $('<li>', {'class': 'header listElement'});
var $fohElement = $('<span>', {'class': 'element'}).appendTo($folderHeader); //var $fohElement = $('<span>', {'class': 'element'}).appendTo($folderHeader);
var $name = $('<span>', {'class': 'name foldername'}).text(Messages.fm_folderName).click(onSortByClick); var $fhIcon = $('<span>', {'class': 'icon'});
var $name = $('<span>', {'class': 'name foldername clickable'}).text(Messages.fm_folderName).click(onSortByClick);
var $subfolders = $('<span>', {'class': 'folders listElement'}).text(Messages.fm_numberOfFolders); var $subfolders = $('<span>', {'class': 'folders listElement'}).text(Messages.fm_numberOfFolders);
var $files = $('<span>', {'class': 'files listElement'}).text(Messages.fm_numberOfFiles); var $files = $('<span>', {'class': 'files listElement'}).text(Messages.fm_numberOfFiles);
$fohElement.append($name).append($subfolders).append($files); $fohElement.append($fhIcon).append($name).append($subfolders).append($files);
addFolderSortIcon($fohElement); addFolderSortIcon($fohElement);
return $folderHeader; return $fohElement;
}; };
var addFileSortIcon = function ($list) { var addFileSortIcon = function ($list) {
var $icon = $sortAscIcon.clone(); var $icon = $sortAscIcon.clone();
@ -968,19 +966,20 @@ define([
if (Cryptpad.getLSAttribute(SORT_FILE_BY) === '') { classSorted = 'filename'; } if (Cryptpad.getLSAttribute(SORT_FILE_BY) === '') { classSorted = 'filename'; }
else if (Cryptpad.getLSAttribute(SORT_FILE_BY)) { classSorted = Cryptpad.getLSAttribute(SORT_FILE_BY); } else if (Cryptpad.getLSAttribute(SORT_FILE_BY)) { classSorted = Cryptpad.getLSAttribute(SORT_FILE_BY); }
if (classSorted) { if (classSorted) {
$list.find('.' + classSorted).prepend($icon); $list.find('.' + classSorted).addClass('active').prepend($icon);
} }
}; };
// _WORKGROUP_ : do not display title, atime and ctime in workgroups since we don't have files data // _WORKGROUP_ : do not display title, atime and ctime in workgroups since we don't have files data
var getFileListHeader = function (displayTitle) { var getFileListHeader = function (displayTitle) {
var $fileHeader = $('<li>', {'class': 'file-header header listElement'}); var $fihElement = $('<li>', {'class': 'file-header header listElement element'});
var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader); //var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader);
var $fhName = $('<span>', {'class': 'name filename'}).text(Messages.fm_fileName).click(onSortByClick); var $fhIcon = $('<span>', {'class': 'icon'});
var $fhTitle = $('<span>', {'class': 'title '}).text(Messages.fm_title).click(onSortByClick); var $fhName = $('<span>', {'class': 'name filename clickable'}).text(Messages.fm_fileName).click(onSortByClick);
var $fhType = $('<span>', {'class': 'type'}).text(Messages.table_type).click(onSortByClick); var $fhTitle = $('<span>', {'class': 'title clickable'}).text(Messages.fm_title).click(onSortByClick);
var $fhAdate = $('<span>', {'class': 'atime'}).text(Messages.fm_lastAccess).click(onSortByClick); var $fhType = $('<span>', {'class': 'type clickable'}).text(Messages.table_type).click(onSortByClick);
var $fhCdate = $('<span>', {'class': 'ctime'}).text(Messages.fm_creation).click(onSortByClick); var $fhAdate = $('<span>', {'class': 'atime clickable'}).text(Messages.fm_lastAccess).click(onSortByClick);
$fihElement.append($fhName); var $fhCdate = $('<span>', {'class': 'ctime clickable'}).text(Messages.fm_creation).click(onSortByClick);
$fihElement.append($fhIcon).append($fhName);
if (displayTitle && !isWorkgroup()) { if (displayTitle && !isWorkgroup()) {
$fihElement.append($fhTitle); $fihElement.append($fhTitle);
} }
@ -989,7 +988,8 @@ define([
$fihElement.append($fhAdate).append($fhCdate); $fihElement.append($fhAdate).append($fhCdate);
} }
addFileSortIcon($fihElement); addFileSortIcon($fihElement);
return $fileHeader; return $fihElement;
//return $fileHeader;
}; };
var allFilesSorted = function () { var allFilesSorted = function () {
@ -1098,11 +1098,12 @@ define([
} }
var idx = files[rootName].indexOf(href); var idx = files[rootName].indexOf(href);
var $icon = getFileIcon(href); var $icon = getFileIcon(href);
var $name = $('<span>', { 'class': 'file-element element' });
addFileData(href, file.title, $name, false);
var $element = $('<li>', { var $element = $('<li>', {
'class': 'file-element element',
draggable: draggable draggable: draggable
}).append($icon).append($name).dblclick(function () { });
addFileData(href, file.title, $element, false);
$element.prepend($icon).dblclick(function () {
openFile(href); openFile(href);
}); });
var path = [rootName, idx]; var path = [rootName, idx];
@ -1129,9 +1130,9 @@ define([
var sortedFiles = sortElements(false, [FILES_DATA], keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc(), false, true); var sortedFiles = sortElements(false, [FILES_DATA], keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc(), false, true);
sortedFiles.forEach(function (file) { sortedFiles.forEach(function (file) {
var $icon = getFileIcon(file.href); var $icon = getFileIcon(file.href);
var $name = $('<span>', { 'class': 'file-element element' }); var $element = $('<li>', { 'class': 'file-element element' })
addFileData(file.href, file.title, $name, false); addFileData(file.href, file.title, $element, false);
var $element = $('<li>').append($icon).append($name).dblclick(function () { $element.prepend($icon).dblclick(function () {
openFile(file.href); openFile(file.href);
}); });
$element.click(function(e) { $element.click(function(e) {

Write Preview
Loading…
Cancel
Save