web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update the icon mode in CryptDrive

Browse Source
This commit is contained in:
yflory
2017-05-03 14:02:45 +02:00
parent e280b92bdb
commit 3262787244
3 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
www/drive/file.css
View File

@@ -7,7 +7,7 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative; position: relative;
font-size: 20px; font-size: 16px;
overflow: auto; overflow: auto;
} }
body { body {
@@ -305,6 +305,9 @@ span.fa-folder-open {
width: 50px; width: 50px;
font-size: 40px; font-size: 40px;
} }
#content .element .truncated {
display: none;
}
#content div.grid { #content div.grid {
padding: 20px; padding: 20px;
} }
@@ -312,19 +315,35 @@ span.fa-folder-open {
display: inline-block; display: inline-block;
margin: 10px 10px; margin: 10px 10px;
width: 140px; width: 140px;
height: 140px;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 10px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
max-height: 145px;
} }
#content div.grid li:not(.selected):not(.selectedTmp) { #content div.grid li:not(.selected):not(.selectedTmp) {
border: 1px solid transparent; border: 1px solid #CCC;
} }
#content div.grid li .name { #content div.grid li .name {
width: 100%; width: 100%;
height: 48px;
margin: 8px 0;
display: inline-flex;
justify-content: center;
overflow: hidden;
}
#content div.grid li.element {
position: relative;
}
#content div.grid li .truncated {
display: block;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
} }
#content div.grid li input { #content div.grid li input {
width: 100%; width: 100%;
@@ -333,7 +352,8 @@ span.fa-folder-open {
#content div.grid li .fa { #content div.grid li .fa {
display: block; display: block;
margin: auto; margin: auto;
font-size: 40px; font-size: 48px;
margin: 8px 0;
text-align: center; text-align: center;
} }
#content div.grid li .fa.listonly { #content div.grid li .fa.listonly {

31
www/drive/file.less
View File

@@ -32,7 +32,7 @@ html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative; position: relative;
font-size: 20px; font-size: 16px;
overflow: auto; overflow: auto;
} }
@@ -359,25 +359,45 @@ span {
} }
} }
} }
.element {
.truncated { display: none; }
}
div.grid { div.grid {
padding: 20px; padding: 20px;
li { li {
display: inline-block; display: inline-block;
margin: 10px 10px; margin: 10px 10px;
width: 140px; width: 140px;
height: 140px;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 10px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
max-height: 145px;
&:not(.selected):not(.selectedTmp) { &:not(.selected):not(.selectedTmp) {
border: 1px solid transparent; border: 1px solid #CCC;
} }
.name { .name {
width: 100%; width: 100%;
height: 48px;
margin: 8px 0;
display: inline-flex;
//align-items: center;
justify-content: center;
overflow: hidden;
//text-overflow: ellipsis;
}
&.element {
position: relative;
}
.truncated {
display: block;
position: absolute;
bottom: 0px;
left: 0; right: 0;
text-align: center;
} }
input { input {
width: 100%; width: 100%;
@@ -386,7 +406,8 @@ span {
.fa { .fa {
display: block; display: block;
margin: auto; margin: auto;
font-size: 40px; font-size: 48px;
margin: 8px 0;
text-align: center; text-align: center;
&.listonly { &.listonly {
display: none; display: none;

11
www/drive/main.js
View File

@@ -1760,6 +1760,17 @@ define([
} }
//$content.append($toolbar).append($title).append($info).append($dirContent); //$content.append($toolbar).append($title).append($info).append($dirContent);
$content.append($info).append($dirContent); $content.append($info).append($dirContent);
var $truncated = $('<span>', {'class': 'truncated'}).text('...');
$content.find('.element').each(function (idx, el) {
var $name = $(el).find('.name');
if ($name[0].scrollHeight > $name[0].clientHeight) {
var $tr = $truncated.clone();
$tr.attr('title', $name.attr('title'));
$(el).append($tr);
}
});
$content.scrollTop(s); $content.scrollTop(s);
appStatus.ready(true); appStatus.ready(true);
}; };