Skip to content

GitLab

Commit bbb6c3b6 authored by Benjamin Fischer's avatar Benjamin Fischer
Browse files

Filebrowser: table view: have fully dynamic handling of too long filenames &... 

Filebrowser: table view: have fully dynamic handling of too long filenames & added title to edit tools icons
parent ebb5a7a5
Hide whitespace changes
Inline Side-by-side
vispa/extensions/file/static/css/base/views/table/table.css
View file @ bbb6c3b6
.file-view-table.row-tiny .node{height:34px}.file-view-table.row-tiny .node .name{margin-top:9px}.file-view-table.row-tiny .icon{width:30px;flex:0 0 30px}.file-view-table.row-tiny .icon [class^="icon-"],.file-view-table.row-tiny .icon [class*=" icon-"]{font-size:24px}.file-view-table.row-tiny .icon .icon-folder,.file-view-table.row-tiny .icon .icon-folder-open,.file-view-table.row-tiny .icon .icon-folder-symlink{font-size:18px}.file-view-table.row-small .node{height:40px}.file-view-table.row-small .node .name{margin-top:15px}.file-view-table.row-small .icon{width:45px;flex:0 0 45px}.file-view-table.row-small .icon [class^="icon-"],.file-view-table.row-small .icon [class*=" icon-"]{font-size:30px}.file-view-table.row-small .icon .icon-folder,.file-view-table.row-small .icon .icon-folder-open,.file-view-table.row-small .icon .icon-folder-symlink{font-size:24px}.file-view-table.row-medium .node{height:48px}.file-view-table.row-medium .node .name{margin-top:23px}.file-view-table.row-medium .icon{width:60px;flex:0 0 60px}.file-view-table.row-medium .icon [class^="icon-"],.file-view-table.row-medium .icon [class*=" icon-"]{font-size:38px}.file-view-table.row-medium .icon .icon-folder,.file-view-table.row-medium .icon .icon-folder-open,.file-view-table.row-medium .icon .icon-folder-symlink{font-size:32px}.file-view-table.row-large .node{height:56px}.file-view-table.row-large .node .name{margin-top:31px}.file-view-table.row-large .icon{width:75px;flex:0 0 75px}.file-view-table.row-large .icon [class^="icon-"],.file-view-table.row-large .icon [class*=" icon-"]{font-size:46px}.file-view-table.row-large .icon .icon-folder,.file-view-table.row-large .icon .icon-folder-open,.file-view-table.row-large .icon .icon-folder-symlink{font-size:40px}.file-table-hidden{display:none !important;visibility:hidden !important}.file-table-select-column{width:70px;flex:0 0 70px;text-align:center}.file-table-icon-column{text-align:left}.file-table-size-column{width:120px;flex:0 0 120px;text-align:right}.file-table-time-column{width:215px;flex:0 0 215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;flex:0 0 50px;text-align:center}.file-view-table .file-list.edit-tools-hidden .edit-tools{display:none !important;visibility:hidden !important}.file-view-table{width:100%}.file-view-table .file-table-head{position:absolute;top:44px;left:0;display:-webkit-flex;display:flex;width:100%;height:36px;padding-top:7px;border-bottom:3px solid #ddd}.file-view-table .file-table-head .glyphicon{margin-left:4px}.file-view-table .file-table-head>.select{width:70px;flex:0 0 70px;text-align:center}.file-view-table .file-table-head>.icon{text-align:left}.file-view-table .file-table-head>.name{webkit-flex:1;flex:1}.file-view-table .file-table-head>.size{width:120px;flex:0 0 120px;text-align:right}.file-view-table .file-table-head>.time{width:215px;flex:0 0 215px;padding-left:20px;text-align:left}.file-view-table .file-table-head>.options{width:50px;flex:0 0 50px;text-align:center}.file-view-table .file-table-head>.name,.file-view-table .file-table-head>.size,.file-view-table .file-table-head>.time{cursor:pointer}.file-view-table .file-list{position:absolute;bottom:0;right:0;top:80px;left:0;overflow-y:auto;width:100%}.file-view-table .file-list.gear-wheel-opacity .glyphicon-cog{opacity:.4}.file-view-table .file-list>.node{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;width:100%}.file-view-table .file-list>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-list>.node:hover{background-color:#f5f5f5}.file-view-table .file-list>.node:not(:hover) .edit-tools{visibility:collapse;display:none;visibility:hidden}.file-view-table .file-list>.node[selected]{background-color:#f5f5f5}.file-view-table .file-list>.node.dragover{background-color:rgba(92,184,92,0.5) !important}.file-view-table .file-list>.node.dragover-denied{background-color:rgba(217,83,79,0.5) !important}.file-view-table .file-list>.node.dragstart{opacity:.4}.file-view-table .file-list>.node[draggable=true]{cursor:move;-khtml-user-drag:element}.file-view-table .file-list>.node.stop-pointer-events *{pointer-events:none}.file-view-table .file-list>.node>.select{width:70px;flex:0 0 70px;text-align:center}.file-view-table .file-list>.node>.icon{text-align:left}.file-view-table .file-list>.node>.name{-webkit-flex:1;flex:1;position:relative;display:inline-block;height:100%}.file-view-table .file-list>.node>.name>.completename{position:absolute;top:0;left:0;width:100%;height:100%}.file-view-table .file-list>.node>.name>.input-filename{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;color:#555;transition:border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s}.file-view-table .file-list>.node>.name>.input-filename:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.file-view-table .file-list>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-list>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-list>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-list>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-list>.node>.name .filename-root{display:inline-block;vertical-align:middle;max-width:80%;max-width:calc(100% - 60px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-view-table .file-list>.node>.name .filename-ext{white-space:nowrap;vertical-align:middle}.file-view-table .file-list>.node>.edit-tools{font-size:12px;width:250px;flex:0 0 250px;text-align:right}.file-view-table .file-list>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-list>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-list>.node>.edit-tools{width:110px;flex:0 0 110px}.file-view-table .file-list>.node>.edit-tools .glyphicon{margin-left:10px;margin-right:10px}.file-view-table .file-list>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-list>.node>.size{width:120px;flex:0 0 120px;text-align:right}.file-view-table .file-list>.node>.time{width:215px;flex:0 0 215px;padding-left:20px;text-align:left}.file-view-table .file-list>.node>.options{width:50px;flex:0 0 50px;text-align:center;cursor:pointer}.fileselector .node{height:38px}.fileselector .icon{width:40px}.fileselector .icon [class^="icon-"],.fileselector .icon [class*=" icon-"]{font-size:26px}.fileselector .icon .icon-folder,.fileselector .icon .icon-folder-open,.fileselector .icon .icon-folder-symlink{font-size:22px}.fileselector .edit-tools{display:none !important;visibility:hidden !important}.fileselector .size{display:none !important;visibility:hidden !important}.fileselector .time{display:none !important;visibility:hidden !important}
\ No newline at end of file
.file-view-table.row-tiny .node{height:34px}.file-view-table.row-tiny .icon{width:30px;flex:0 0 30px}.file-view-table.row-tiny .icon [class^="icon-"],.file-view-table.row-tiny .icon [class*=" icon-"]{font-size:24px}.file-view-table.row-tiny .icon .icon-folder,.file-view-table.row-tiny .icon .icon-folder-open,.file-view-table.row-tiny .icon .icon-folder-symlink{font-size:18px}.file-view-table.row-small .node{height:40px}.file-view-table.row-small .icon{width:45px;flex:0 0 45px}.file-view-table.row-small .icon [class^="icon-"],.file-view-table.row-small .icon [class*=" icon-"]{font-size:30px}.file-view-table.row-small .icon .icon-folder,.file-view-table.row-small .icon .icon-folder-open,.file-view-table.row-small .icon .icon-folder-symlink{font-size:24px}.file-view-table.row-medium .node{height:48px}.file-view-table.row-medium .icon{width:60px;flex:0 0 60px}.file-view-table.row-medium .icon [class^="icon-"],.file-view-table.row-medium .icon [class*=" icon-"]{font-size:38px}.file-view-table.row-medium .icon .icon-folder,.file-view-table.row-medium .icon .icon-folder-open,.file-view-table.row-medium .icon .icon-folder-symlink{font-size:32px}.file-view-table.row-large .node{height:56px}.file-view-table.row-large .icon{width:75px;flex:0 0 75px}.file-view-table.row-large .icon [class^="icon-"],.file-view-table.row-large .icon [class*=" icon-"]{font-size:46px}.file-view-table.row-large .icon .icon-folder,.file-view-table.row-large .icon .icon-folder-open,.file-view-table.row-large .icon .icon-folder-symlink{font-size:40px}.file-table-hidden{display:none !important;visibility:hidden !important}.file-table-select-column{width:70px;flex:0 0 70px;text-align:center}.file-table-icon-column{text-align:left}.file-table-size-column{width:120px;flex:0 0 120px;text-align:right}.file-table-time-column{width:215px;flex:0 0 215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;flex:0 0 50px;text-align:center}.file-view-table .file-list.edit-tools-hidden .edit-tools{display:none !important;visibility:hidden !important}.file-view-table{width:100%}.file-view-table .file-table-head{position:absolute;top:44px;left:0;display:-webkit-flex;display:flex;width:100%;height:36px;padding-top:7px;border-bottom:3px solid #ddd}.file-view-table .file-table-head .glyphicon{margin-left:4px}.file-view-table .file-table-head>.select{width:70px;flex:0 0 70px;text-align:center}.file-view-table .file-table-head>.icon{text-align:left}.file-view-table .file-table-head>.name{webkit-flex:1;flex:1}.file-view-table .file-table-head>.size{width:120px;flex:0 0 120px;text-align:right}.file-view-table .file-table-head>.time{width:215px;flex:0 0 215px;padding-left:20px;text-align:left}.file-view-table .file-table-head>.options{width:50px;flex:0 0 50px;text-align:center}.file-view-table .file-table-head>.name,.file-view-table .file-table-head>.size,.file-view-table .file-table-head>.time{cursor:pointer}.file-view-table .file-list{position:absolute;bottom:0;right:0;top:80px;left:0;overflow-y:auto;width:100%}.file-view-table .file-list.gear-wheel-opacity .glyphicon-cog{opacity:.4}.file-view-table .file-list>.node{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;width:100%}.file-view-table .file-list>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-list>.node:hover{background-color:#f5f5f5}.file-view-table .file-list>.node:not(:hover) .edit-tools{display:none}.file-view-table .file-list>.node[selected]{background-color:#f5f5f5}.file-view-table .file-list>.node.dragover{background-color:rgba(92,184,92,0.5) !important}.file-view-table .file-list>.node.dragover-denied{background-color:rgba(217,83,79,0.5) !important}.file-view-table .file-list>.node.dragstart{opacity:.4}.file-view-table .file-list>.node[draggable=true]{cursor:move;-khtml-user-drag:element}.file-view-table .file-list>.node.stop-pointer-events *{pointer-events:none}.file-view-table .file-list>.node>.select{width:70px;flex:0 0 70px;text-align:center}.file-view-table .file-list>.node>.icon{text-align:left}.file-view-table .file-list>.node>.name{-webkit-flex:1;flex:1;position:relative}.file-view-table .file-list>.node>.name>.vhidden{visibility:hidden;display:inline-block;width:0}.file-view-table .file-list>.node>.name>.completename{display:inline-block;position:absolute;top:0;left:0;max-width:100%;overflow:hidden;visibility:hidden;white-space:nowrap;padding-right:1px}.file-view-table .file-list>.node>.name>.completename>.wrapper{width:100%;display:flex;position:absolute;top:0;visibility:visible}.file-view-table .file-list>.node>.name>.completename>.wrapper>.flex{flex:1 1 1px;min-width:50px;position:relative}.file-view-table .file-list>.node>.name>.completename>.wrapper>.flex>.root{position:absolute;max-width:100%;overflow:hidden;text-overflow:ellipsis}.file-view-table .file-list>.node>.name>.completename>.wrapper>.ext{flex-shrink:0}.file-view-table .file-list>.node>.name>.input-filename{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset;color:#555;transition:border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s}.file-view-table .file-list>.node>.name>.input-filename:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.file-view-table .file-list>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-list>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-list>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-list>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-list>.node>.edit-tools{font-size:12px;width:250px;flex:0 0 250px;text-align:right}.file-view-table .file-list>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-list>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-list>.node>.edit-tools{width:110px;flex:0 0 110px}.file-view-table .file-list>.node>.edit-tools .glyphicon{margin-left:10px;margin-right:10px}.file-view-table .file-list>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-list>.node>.size{width:120px;flex:0 0 120px;text-align:right}.file-view-table .file-list>.node>.time{width:215px;flex:0 0 215px;padding-left:20px;text-align:left}.file-view-table .file-list>.node>.options{width:50px;flex:0 0 50px;text-align:center;cursor:pointer}.fileselector .node{height:38px}.fileselector .icon{width:40px}.fileselector .icon [class^="icon-"],.fileselector .icon [class*=" icon-"]{font-size:26px}.fileselector .icon .icon-folder,.fileselector .icon .icon-folder-open,.fileselector .icon .icon-folder-symlink{font-size:22px}.fileselector .edit-tools{display:none !important;visibility:hidden !important}.fileselector .size{display:none !important;visibility:hidden !important}.fileselector .time{display:none !important;visibility:hidden !important}
\ No newline at end of file
vispa/extensions/file/static/css/base/views/table/table.less
View file @ bbb6c3b6
......@@ -49,9 +49,6 @@
&.row-tiny {
.node {
height: @file-table-tiny;
.name {
margin-top: 9px;
}
}
.icon {
width: @width-icon-column - 15;
......@@ -62,9 +59,6 @@
&.row-small {
.node {
height: @file-table-small;
.name {
margin-top: 15px;
}
}
.icon {
width: @width-icon-column;
......@@ -75,9 +69,6 @@
&.row-medium {
.node {
height: @file-table-medium;
.name {
margin-top: 23px;
}
}
.icon {
width: @width-icon-column + 15;
......@@ -88,9 +79,6 @@
&.row-large {
.node {
height: @file-table-large;
.name {
margin-top: 31px;
}
}
.icon {
width: @width-icon-column + 30;
......@@ -217,9 +205,7 @@
background-color: @table-bg-hover;
}
&:not(:hover) .edit-tools {
visibility: collapse;
display: none;
visibility: hidden;
}
&[selected] {
background-color: @table-bg-active;
......@@ -250,14 +236,43 @@
-webkit-flex: 1;
flex: 1;
position: relative;
display: inline-block;
height: 100%;
> .vhidden {
visibility:hidden;
display: inline-block;
width:0px;
}
> .completename {
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
max-width: 100%;
overflow: hidden;
visibility: hidden;
white-space: nowrap;
padding-right:1px; // dirty hack to give a little bit more space so we wont have an ellipsis when there is enough space
> .wrapper {
width: 100%;
display: flex;
position: absolute;
top: 0px;
visibility: visible;
> .flex {
flex: 1 1 1px;
min-width: 50px;
position: relative;
> .root {
position: absolute;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
> .ext {
flex-shrink: 0;
}
}
}
> .input-filename {
background-color: @input-bg;
......@@ -288,19 +303,6 @@
color: @input-color-placeholder;
}
}
.filename-root {
display: inline-block;
vertical-align: middle;
max-width: 80%;
max-width: calc(~"100% - 60px");
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.filename-ext {
white-space: nowrap;
vertical-align: middle;
}
}
> .edit-tools {
font-size: 12px;
......
vispa/extensions/file/static/html/table.html
View file @ bbb6c3b6
......@@ -17,11 +17,11 @@
<div class="select"><span class="file-selection-p input">
<input type="checkbox" class="file-selection-checkbox"/></span></div>
<div class="icon"><span data-bind="icon"></span></div>
<div class="name"><span class="completename"><span data-bind="root" class="filename-root"></span><span data-bind="ext" class="filename-ext"></span></span></div>
<div class="edit-tools hidden-xs"><a href="#" class="edit-rename"><i class="glyphicon glyphicon-pencil"></i><span class="hidden-sm hidden-xs">Rename</span></a><a href="#" class="edit-download"><i class="glyphicon glyphicon-download"></i><span class="hidden-sm hidden-xs">Download</span></a>
<div class="name"><i class="vhidden">i</i><span data-bind="name" class="completename"><span class="wrapper"><span class="flex"><span data-bind="root" class="root"></span></span><span data-bind="ext" class="ext"></span></span></span></div>
<div class="edit-tools hidden-xs"><a href="#" class="edit-rename"><i title="Rename" class="glyphicon glyphicon-pencil"></i><span class="hidden-sm hidden-xs">Rename</span></a><a href="#" class="edit-download"><i title="Download" class="glyphicon glyphicon-download"></i><span class="hidden-sm hidden-xs">Download</span></a>
<!-- a.edit-share(href="#")-->
<!-- i.glyphicon.glyphicon-link-->
<!-- span.hidden-sm.hidden-xs Share--><a href="#" class="edit-remove"><i class="glyphicon glyphicon-remove"></i><span class="hidden-sm hidden-xs">Remove</span></a>
<!-- i.glyphicon.glyphicon-link(title="Share")-->
<!-- span.hidden-sm.hidden-xs Share--><a href="#" class="edit-remove"><i title="Remove" class="glyphicon glyphicon-remove"></i><span class="hidden-sm hidden-xs">Remove</span></a>
</div>
<div class="size hidden-sm hidden-xs"><span data-bind="size"></span><span data-bind="sizeSuffix"></span></div>
<div class="time hidden-xs"><span data-bind="mtime"></span></div>
......
vispa/extensions/file/static/html/table.jade 100644 → 100755
View file @ bbb6c3b6
......@@ -20,21 +20,24 @@
.icon
span(data-bind="icon")
.name
span.completename
span.filename-root(data-bind="root")
span.filename-ext(data-bind="ext")
i.vhidden i
span.completename(data-bind="name")
span.wrapper
span.flex
span.root(data-bind="root")
span.ext(data-bind="ext")
.edit-tools.hidden-xs
a.edit-rename(href="#")
i.glyphicon.glyphicon-pencil
i.glyphicon.glyphicon-pencil(title="Rename")
span.hidden-sm.hidden-xs Rename
a.edit-download(href="#")
i.glyphicon.glyphicon-download
i.glyphicon.glyphicon-download(title="Download")
span.hidden-sm.hidden-xs Download
// a.edit-share(href="#")
// i.glyphicon.glyphicon-link
// i.glyphicon.glyphicon-link(title="Share")
// span.hidden-sm.hidden-xs Share
a.edit-remove(href="#")
i.glyphicon.glyphicon-remove
i.glyphicon.glyphicon-remove(title="Remove")
span.hidden-sm.hidden-xs Remove
.size.hidden-sm.hidden-xs
span(data-bind="size")
......
vispa/extensions/file/static/js/base/views/table/view.js
View file @ bbb6c3b6
......@@ -185,10 +185,10 @@ var Tableview = Class.extend({
var replaceWith = $("<input name='temp' class='input-filename' type='text' />");
// set length of input field
var nameColumnWidth = $(".name", node).innerWidth();
var nameWidth = $(".filename-root", node).innerWidth() + 60;
var nameWidth = $(".completename", node).innerWidth() + 25;
var standardInputWidth = 180;
var inlineWidth = 180;
if (nameWidth > nameColumnWidth) {
if (nameWidth >= nameColumnWidth) {
inlineWidth = "100%";
} else {
if (nameWidth < standardInputWidth) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment