Skip to content
GitLab
Commit aa1af6cc authored by asseldonk's avatar asseldonk
Browse files

filebrowser: improvements for inline renaming

parent 7db8b138
Hide whitespace changes
Inline Side-by-side
vispa/extensions/file/static/css/base/views/table/table.css
View file @ aa1af6cc
.file-view-table.row-tiny .node{height:34px}.file-view-table.row-tiny .icon{width: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}.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}.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}.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-select-column{width:70px;text-align:center}.file-table-icon-column{text-align:left}.file-table-size-column{width:120px;text-align:right}.file-table-time-column{width:215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;text-align:center}.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;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;text-align:right}.file-view-table .file-table-head>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table-head>.options{width: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-table{position:absolute;bottom:0;right:0;top:80px;left:0;overflow-y:auto;width:100%}.file-view-table .file-table>.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-table>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-table>.node:hover{background-color:#f5f5f5}.file-view-table .file-table>.node:not(:hover) .edit-tools{visibility:collapse}.file-view-table .file-table>.node[selected]{background-color:#f5f5f5}.file-view-table .file-table>.node>.select{width:70px;text-align:center}.file-view-table .file-table>.node>.icon{text-align:left}.file-view-table .file-table>.node>.name{-webkit-flex:1;flex:1}.file-view-table .file-table>.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-table>.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-table>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-table>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-table>.node>.name .filename-root{display:inline-block;vertical-align:middle;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-view-table .file-table>.node>.name .filename-ext{white-space:nowrap;vertical-align:middle}.file-view-table .file-table>.node>.edit-tools{font-size:12px;width:320px;text-align:right}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-table>.node>.edit-tools{width:160px}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:20px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-table>.node>.size{width:120px;text-align:right}.file-view-table .file-table>.node>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table>.node>.options{width: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} .file-view-table.row-tiny .node{height:34px}.file-view-table.row-tiny .icon{width: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}.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}.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}.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;text-align:center}.file-table-icon-column{text-align:left}.file-table-size-column{width:120px;text-align:right}.file-table-time-column{width:215px;padding-left:20px;text-align:left}.file-table-options-column{width:50px;text-align:center}.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;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;text-align:right}.file-view-table .file-table-head>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table-head>.options{width: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-table{position:absolute;bottom:0;right:0;top:80px;left:0;overflow-y:auto;width:100%}.file-view-table .file-table>.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-table>.node:nth-child(2n){background-color:#f9f9f9}.file-view-table .file-table>.node:hover{background-color:#f5f5f5}.file-view-table .file-table>.node:not(:hover) .edit-tools{visibility:collapse}.file-view-table .file-table>.node[selected]{background-color:#f5f5f5}.file-view-table .file-table>.node>.select{width:70px;text-align:center}.file-view-table .file-table>.node>.icon{text-align:left}.file-view-table .file-table>.node>.name{-webkit-flex:1;flex:1}.file-view-table .file-table>.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-table>.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-table>.node>.name>.input-filename::-webkit-input-placeholder{color:#999}.file-view-table .file-table>.node>.name>.input-filename:-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename::-moz-placeholder{color:#999;opacity:1}.file-view-table .file-table>.node>.name>.input-filename:-ms-input-placeholder{color:#999}.file-view-table .file-table>.node>.name .filename-root{display:inline-block;vertical-align:middle;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-view-table .file-table>.node>.name .filename-ext{white-space:nowrap;vertical-align:middle}.file-view-table .file-table>.node>.edit-tools{font-size:12px;width:320px;text-align:right}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:14px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:4px}@media (max-width:992px){.file-view-table .file-table>.node>.edit-tools{width:160px}.file-view-table .file-table>.node>.edit-tools .glyphicon{margin-left:20px}.file-view-table .file-table>.node>.edit-tools .glyphicon-pencil{margin-left:8px}}.file-view-table .file-table>.node>.size{width:120px;text-align:right}.file-view-table .file-table>.node>.time{width:215px;padding-left:20px;text-align:left}.file-view-table .file-table>.node>.options{width: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 \ No newline at end of file
vispa/extensions/file/static/css/base/views/table/table.less
View file @ aa1af6cc
...@@ -84,6 +84,10 @@ ...@@ -84,6 +84,10 @@
/* some classes for columns */ /* some classes for columns */
.file-table-hidden {
display: none !important;
visibility: hidden !important;
}
.file-table-select-column { .file-table-select-column {
width: @width-select-column; width: @width-select-column;
text-align: center; text-align: center;
......
vispa/extensions/file/static/js/base/views/table/view.js
View file @ aa1af6cc
...@@ -174,13 +174,11 @@ var Tableview = Class.extend({ ...@@ -174,13 +174,11 @@ var Tableview = Class.extend({
inlineRename: function(node) { inlineRename: function(node) {
"use strict"; "use strict";
var self = this; var self = this;
// TO DO: stop drag and drop // stop drag and drop for better in line renaming
// TO DO: stop showing edit tools while editing name node.removeAttr("draggable");
/* node.mouseenter(function(event) { // stop showing edit tools on hover
self.hideEditTools(node); $(".edit-tools", node).addClass("file-table-hidden");
})
self.hideEditTools(node);
*/
var replaceWith = $("<input name='temp' class='input-filename' type='text' />"); var replaceWith = $("<input name='temp' class='input-filename' type='text' />");
// set length of input field // set length of input field
var nameColumnWidth = $(".name", node).innerWidth(); var nameColumnWidth = $(".name", node).innerWidth();
...@@ -223,10 +221,10 @@ var Tableview = Class.extend({ ...@@ -223,10 +221,10 @@ var Tableview = Class.extend({
} else { } else {
self.FileBase.actions._rename(path, name, newName); self.FileBase.actions._rename(path, name, newName);
} }
// TO DO: allow showing edit tools on mouseenter after renaming is finished // enable drag and drop
//node.mouseenter(function(event) { node.attr("draggable", "true");
//self.showEditTools(node); // show edit tools on hover
//}) $(".edit-tools", node).removeClass("file-table-hidden");
}); });
// rename when pressing enter // rename when pressing enter
replaceWith.keypress(function(event) { replaceWith.keypress(function(event) {
......
Supports Markdown
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