Commit 3e445c34 authored by asseldonk's avatar asseldonk
Browse files

pathbar: modified option gearwheel

parent c5c09ccb
.path-bar-icon{width:44px;border-right:2px solid #ddd}.path-bar-icon .dropdown-toggle{webkit-box-shadow:none !important;box-shadow:none !important;width:44px;cursor:pointer;padding:8px 14px 4px 14px}.path-bar-icon .dropdown-menu{margin-top:4px}.path-bar-icon .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar{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%;height:36px}.file-path-bar>.options{width:44px;border-right:2px solid #ddd}.file-path-bar>.options:not(.show-item) .dropdown-menu .divider{display:none !important;visibility:hidden !important}.file-path-bar>.options:not(.show-item) .dropdown-menu .paste{display:none !important;visibility:hidden !important}.file-path-bar>.options .dropdown-toggle{webkit-box-shadow:none !important;box-shadow:none !important;width:44px;cursor:pointer;padding:8px 14px 4px 14px}.file-path-bar>.options .dropdown-menu{margin-top:4px}.file-path-bar>.options .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark:hover>i{color:#333}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol{color:#333}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol:hover{color:#000 !important}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-name{margin-right:10px;display:inline-block;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname{margin-right:10px;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-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname: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-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname::-webkit-input-placeholder{color:#999}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname:-moz-placeholder{color:#999;opacity:1}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname::-moz-placeholder{color:#999;opacity:1}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname:-ms-input-placeholder{color:#999}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit{color:#fff}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit:hover{color:#000 !important}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove{color:#fff}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove:hover{color:#000 !important}.file-path-bar>.path-list{position:relative;margin-left:15px;width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}.file-path-bar>.path-list>.path-bar-item+.path-bar-item:before{content:"/";padding:0 7px;text-align:left}.file-path-bar>.path-list>.path-bar-item{text-decoration:none}.file-path-bar>.path-list .glyphicon{display:inline}.file-path-bar>.path-list>.active{pointer-events:none;color:#333}
\ No newline at end of file
.path-bar-icon{width:44px;border-right:2px solid #ddd}.path-bar-icon .dropdown-toggle{webkit-box-shadow:none !important;box-shadow:none !important;width:44px;cursor:pointer;padding:8px 14px 4px 14px}.path-bar-icon .dropdown-menu{margin-top:4px}.path-bar-icon .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar{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%;height:36px}.file-path-bar>.options{width:44px;border-right:2px solid #ddd}.file-path-bar>.options .dropdown-menu .createFolder,.file-path-bar>.options .dropdown-menu .createFile,.file-path-bar>.options .dropdown-menu .upload,.file-path-bar>.options .dropdown-menu .paste,.file-path-bar>.options .dropdown-menu .openFolder,.file-path-bar>.options .dropdown-menu .openFile,.file-path-bar>.options .dropdown-menu .rename,.file-path-bar>.options .dropdown-menu .copy,.file-path-bar>.options .dropdown-menu .cut,.file-path-bar>.options .dropdown-menu .remove,.file-path-bar>.options .dropdown-menu .download,.file-path-bar>.options .dropdown-menu .compress,.file-path-bar>.options .dropdown-menu .divider,.file-path-bar>.options .dropdown-menu .info{display:none;visibility:hidden}.file-path-bar>.options.menu-no-selection .dropdown-menu .createFolder,.file-path-bar>.options.menu-no-selection .dropdown-menu .createFile,.file-path-bar>.options.menu-no-selection .dropdown-menu .upload{display:inline !important;visibility:visible !important}.file-path-bar>.options.menu-no-selection.menu-paste .dropdown-menu .paste{display:inline !important;visibility:visible !important}.file-path-bar>.options.menu-single-selection .dropdown-menu .rename,.file-path-bar>.options.menu-single-selection .dropdown-menu .copy,.file-path-bar>.options.menu-single-selection .dropdown-menu .cut,.file-path-bar>.options.menu-single-selection .dropdown-menu .remove,.file-path-bar>.options.menu-single-selection .dropdown-menu .download,.file-path-bar>.options.menu-single-selection .dropdown-menu .compress,.file-path-bar>.options.menu-single-selection .dropdown-menu .info{display:inline !important;visibility:visible !important}.file-path-bar>.options.menu-single-selection .dropdown-menu .divider{display:block !important;visibility:visible !important}.file-path-bar>.options.menu-single-selection.menu-open-folder .dropdown-menu .openFolder{display:inline !important;visibility:visible !important}.file-path-bar>.options.menu-single-selection.menu-open-file .dropdown-menu .openFile{display:inline !important}.file-path-bar>.options.menu-multiple-selection .dropdown-menu .copy,.file-path-bar>.options.menu-multiple-selection .dropdown-menu .cut,.file-path-bar>.options.menu-multiple-selection .dropdown-menu .remove,.file-path-bar>.options.menu-multiple-selection .dropdown-menu .download,.file-path-bar>.options.menu-multiple-selection .dropdown-menu .compress,.file-path-bar>.options.menu-multiple-selection .dropdown-menu .info{display:inline !important;visibility:visible !important}.file-path-bar>.options.menu-multiple-selection .dropdown-menu .divider{display:block !important;visibility:visible !important}.file-path-bar>.options .dropdown-toggle{webkit-box-shadow:none !important;box-shadow:none !important;width:44px;cursor:pointer;padding:8px 14px 4px 14px}.file-path-bar>.options .dropdown-menu{margin-top:4px}.file-path-bar>.options .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark:hover>i{color:#333}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol{color:#333}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol:hover{color:#000 !important}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-name{margin-right:10px;display:inline-block;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname{margin-right:10px;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-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname: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-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname::-webkit-input-placeholder{color:#999}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname:-moz-placeholder{color:#999;opacity:1}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname::-moz-placeholder{color:#999;opacity:1}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.input-bookmarkname:-ms-input-placeholder{color:#999}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit{color:#fff}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit:hover{color:#000 !important}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove{color:#fff}.file-path-bar>.bookmark-dropdown>.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove:hover{color:#000 !important}.file-path-bar>.path-list{position:relative;margin-left:15px;width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}.file-path-bar>.path-list>.path-bar-item+.path-bar-item:before{content:"/";padding:0 7px;text-align:left}.file-path-bar>.path-list>.path-bar-item{text-decoration:none}.file-path-bar>.path-list .glyphicon{display:inline}.file-path-bar>.path-list>.active{pointer-events:none;color:#333}
\ No newline at end of file
@gray-dark: lighten(#000, 20%);
@gray: lighten(#000, 33.5%); // #555
@table-border-color: #ddd;
@body-bg: #fff;
@gray-base: #000;
@gray-dark: lighten(#000, 20%);
@gray: lighten(#000, 33.5%); // #555
@table-border-color: #ddd;
@body-bg: #fff;
@gray-base: #000;
@border-radius-base: 4px;
@input-bg: #fff;
......@@ -13,6 +13,7 @@
@input-color-placeholder: #999;
/* icons for options and bookmarks in path bar */
.path-bar-icon {
width: 44px;
border-right: 2px solid @table-border-color;
......@@ -31,6 +32,8 @@
}
}
/* path bar */
.file-path-bar {
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
......@@ -44,21 +47,80 @@
align-items: center;
width: 100%;
height: 36px;
/* option gear wheel */
> .options {
&:not(.show-item) {
.dropdown-menu {
.createFolder, .createFile, .upload, .paste, .openFolder, .openFile, .rename, .copy, .cut, .remove, .download, .compress, .divider, .info {
display: none;
visibility: hidden;
}
}
/* menu options depend on selections */
/* no selections */
&.menu-no-selection {
.dropdown-menu {
.createFolder, .createFile, .upload {
display: inline !important;
visibility: visible !important;
}
}
/* no selections and cookie for pasting */
&.menu-paste {
.dropdown-menu {
.paste {
display: inline !important;
visibility: visible !important;
}
}
}
}
/* single node selected */
&.menu-single-selection {
.dropdown-menu {
.rename, .copy, .cut, .remove, .download, .compress, .info {
display: inline !important;
visibility: visible !important;
}
.divider {
display: none !important;
visibility: hidden !important;
display: block !important;
visibility: visible !important;
}
.paste {
display: none !important;
visibility: hidden !important;
}
/* single node and folder selected*/
&.menu-open-folder {
.dropdown-menu {
.openFolder {
display: inline !important;
visibility: visible !important;
}
}
}
/* single node and file selected */
&.menu-open-file {
.dropdown-menu {
.openFile {
display: inline !important;
// visibility: visible !important;
}
}
}
}
/* multiple node selected */
&.menu-multiple-selection {
.dropdown-menu {
.copy, .cut, .remove, .download, .compress, .info {
display: inline !important;
visibility: visible !important;
}
.divider {
display: block !important;
visibility: visible !important;
}
}
}
.path-bar-icon;
}
/* bookmarks */
> .bookmark-dropdown {
> .bookmark-container {
> .bookmarks {
......@@ -128,6 +190,7 @@
}
}
}
/* path list */
> .path-list {
position: relative;
margin-left: 15px;
......
......@@ -2,10 +2,20 @@
<div class="file-path-bar">
<div class="btn-group options"><span data-toggle="dropdown" class="dropdown-toggle"><i class="glyphicon glyphicon-cog"></i></span>
<ul role="menu" class="dropdown-menu">
<li class="new-folder"><a href="#"><i class="glyphicon glyphicon-folder-close"></i>New Folder</a></li>
<li class="new-file"><a href="#"><i class="glyphicon glyphicon-file"></i>New File</a></li>
<li class="divider"></li>
<li class="createFolder"><a href="#"><i class="glyphicon glyphicon-folder-close"></i>New Folder</a></li>
<li class="createFile"><a href="#"><i class="glyphicon glyphicon-file"></i>New File</a></li>
<li class="upload"><a href="#"><i class="glyphicon glyphicon-upload"></i>Upload</a></li>
<li class="openFolder"><a href="#"><i class="glyphicon glyphicon-folder-open"></i>Open Folder</a></li>
<li class="openFile"><a href="#"><i class="glyphicon glyphicon-file"></i>Open File</a></li>
<li class="rename"><a href="#"><i class="glyphicon glyphicon-pencil"></i>Rename</a></li>
<li class="copy"><a href="#"><i class="glyphicon glyphicon-tags"></i>Copy</a></li>
<li class="cut"><a href="#"><i class="glyphicon glyphicon-minus"></i>Cut</a></li>
<li class="paste"><a href="#"><i class="glyphicon glyphicon-share-alt"></i>Paste</a></li>
<li class="remove"><a href="#"><i class="glyphicon glyphicon-remove"></i>Remove</a></li>
<li class="download"><a href="#"><i class="glyphicon glyphicon-download"></i>Download</a></li>
<li class="compress"><a href="#"><i class="glyphicon glyphicon-compressed"></i>Compress</a></li>
<li class="divider"></li>
<li class="info"><a href="#"><i class="glyphicon glyphicon-info-sign"></i>Info</a></li>
</ul>
</div>
<div class="btn-group path-bar-icon bookmark-dropdown"><span data-toggle="dropdown" class="dropdown-toggle"><i class="glyphicon glyphicon-bookmark"></i></span>
......
......@@ -3,19 +3,59 @@
span.dropdown-toggle(data-toggle="dropdown")
i.glyphicon.glyphicon-cog
ul.dropdown-menu(role="menu")
li.new-folder
li.createFolder
a(href="#")
i.glyphicon.glyphicon-folder-close
| New Folder
li.new-file
li.createFile
a(href="#")
i.glyphicon.glyphicon-file
| New File
li.divider
li.upload
a(href="#")
i.glyphicon.glyphicon-upload
| Upload
li.openFolder
a(href="#")
i.glyphicon.glyphicon-folder-open
| Open Folder
li.openFile
a(href="#")
i.glyphicon.glyphicon-file
| Open File
li.rename
a(href="#")
i.glyphicon.glyphicon-pencil
| Rename
li.copy
a(href="#")
i.glyphicon.glyphicon-tags
| Copy
li.cut
a(href="#")
i.glyphicon.glyphicon-minus
| Cut
li.paste
a(href="#")
i.glyphicon.glyphicon-share-alt
| Paste
li.remove
a(href="#")
i.glyphicon.glyphicon-remove
| Remove
li.download
a(href="#")
i.glyphicon.glyphicon-download
| Download
li.compress
a(href="#")
i.glyphicon.glyphicon-compressed
| Compress
li.divider
li.info
a(href="#")
i.glyphicon.glyphicon-info-sign
| Info
.btn-group.path-bar-icon.bookmark-dropdown
span.dropdown-toggle(data-toggle="dropdown")
i.glyphicon.glyphicon-bookmark
......
......@@ -125,7 +125,7 @@ var FileBaseMenuItems = Class.extend({
$(elem).addClass("file-menu");
});
var items = [".createFile", ".createFolder"];
var items = [".createFile", ".createFolder", ".divider", ".info"];
$(items.join(", "), menu).removeClass("file-menu");
var cookie = $.cookie("vispaFile");
if (cookie) {
......
......@@ -5,6 +5,7 @@ var PathBar = Class.extend({
self.FileBase = FileBase;
self.instance = FileBase.instance;
this.actions = FileBase.actions;
this.selections = FileBase.selections;
this.bookmark = new Bookmark(this);
this.node = null;
this.tmpl = null;
......@@ -15,7 +16,7 @@ var PathBar = Class.extend({
this.node = node;
// get template
this.render();
var dfd = this.instance.getTemplate("html/pathbar.html", function(err, tmpl, dfd) {
var dfd = this.instance.getTemplate("html/pathbar.html", function(err, tmpl) {
self.filePathBar = $(tmpl);
});
dfd.done(function() {
......@@ -51,7 +52,7 @@ var PathBar = Class.extend({
});
var directive = {
"pathPart": {
"href": function(nodeObj) {
"href": function() {
return this.pathPartLink;
}
}
......@@ -85,27 +86,50 @@ var PathBar = Class.extend({
var self = this;
var clicktype = vispa.device.hasTouch ? "tap" : "click";
var options = $(".options", this.filePathBar);
$(".new-folder", options).on(clicktype, function(event) {
self.createFolder(event);
});
$(".new-file", options).on(clicktype, function(event) {
self.createFile(event);
});
// show paste entry, if file/folder was copied or cut
options.on(clicktype, function() {
var cookie = $.cookie("vispaFile");
cookie ? options.toggleClass("show-item", true) : options.toggleClass("show-item", false);
// when clicking on option gearwheel, show or hide menu entries depending selectiond nodes
$(".dropdown-toggle", options).on(clicktype, function() {
// number of selected nodes
var nNodesSelected = Object.keys(self.FileBase.selections.entries).length;
// remove all selection classes
options.toggleClass("menu-no-selection", false);
options.toggleClass("menu-single-selection", false);
options.toggleClass("menu-multiple-selection", false);
options.toggleClass("menu-paste", false);
options.toggleClass("menu-open-file", false);
options.toggleClass("menu-open-folder", false);
// first case: no nodes selected
if (nNodesSelected === 0) {
options.toggleClass("menu-no-selection", true);
// show paste entry, if file/folder was copied or cut
var cookie = $.cookie("vispaFile");
cookie ? options.toggleClass("menu-paste", true) : options.toggleClass("menu-paste", false);
}
// second case: one node selected
else if (nNodesSelected == 1) {
options.toggleClass("menu-single-selection", true);
// show open file or open folder entry
if ($(self.FileBase.selections.lastSelectedNode).data().data.type == "d") {
options.toggleClass("menu-open-folder", true);
} else {
options.toggleClass("menu-open-file", true);
}
}
// third case: multiple nodes selected
else {
options.toggleClass("menu-multiple-selection", true);
}
});
$(".paste", options).on(clicktype, function() {
self.actions.paste();
// call actions
var actions = ["createFolder", "createFile", "upload", "openFile", "openFolder",
"rename", "copy", "cut", "remove", "download",
"compress", "info", "paste"
];
$.each(actions, function(i, name) {
$("." + name, options).on("click", function(event) {
event.preventDefault();
self.actions[name]();
});
});
},
createFolder: function() {
this.actions.createFolder();
},
createFile: function() {
this.actions.createFile();
}
});
\ No newline at end of file
});
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