Commit 74fdf545 authored by Fabian Heidemann's avatar Fabian Heidemann
Browse files

Bookmarks: reintegrated into new pathbar

parent 4b300a63
......@@ -30,7 +30,7 @@ class FileBrowserExtension(AbstractExtension):
self.add_js('js/base/view.js')
self.add_js('js/base/sort.js')
self.add_js('js/base/pathbar.js')
#self.add_js('js/base/bookmark.js')
self.add_js('js/base/bookmark.js')
self.add_js('js/base/selections.js')
self.add_js('js/base/views/symbol/view.js')
self.add_js('js/base/views/table/view.js')
......@@ -56,6 +56,5 @@ class FileBrowserExtension(AbstractExtension):
self.add_css('css/base/base.css')
self.add_css('css/base/pathbar.css')
self.add_css('css/base/bookmark.css')
self.add_css('css/base/views/symbol/symbol.css')
self.add_css('css/base/views/table/table.css')
.bookmark-container{position:absolute;left:0;top:31px;overflow:hidden;padding:0;border-top:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;background-color:#fff;z-index:1000;visibility:hidden}.bookmark-container .bookmark-button{margin:6px 12px}.bookmark-container>.bookmarks{overflow:auto;white-space:nowrap}.bookmark-container>.bookmarks>.bookmark{padding:6px 12px;margin:0;cursor:pointer}.bookmark-container>.bookmarks>.bookmark:hover{background-color:#e6e6e6}.bookmark-container>.bookmarks>.bookmark:hover>a{color:#333}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol{color:#333}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-symbol:hover{color:#000 !important}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit{color:#fff}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-edit:hover{color:#000 !important}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove{color:#fff}.bookmark-container>.bookmarks>.bookmark>.bookmark-glyphicon-remove:hover{color:#000 !important}/*# sourceMappingURL=bookmark.css.map */
\ No newline at end of file
@table-border-color: #ddd;
@zindex-dropdown: 1000;
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@gray-base: #000;
@gray-dark: lighten(@gray-base, 20%);
@body-bg: #fff;
.bookmark-container {
position: absolute;
left: 0px;
top: 31px;
overflow: hidden;
padding: 0px;
border-top: 1px solid @table-border-color;
border-right: 1px solid @table-border-color;
border-bottom: 1px solid @table-border-color;
background-color: @body-bg;
z-index: @zindex-dropdown;
visibility: hidden;
& .bookmark-button {
margin: @padding-base-vertical @padding-base-horizontal;
}
> .bookmarks {
overflow: auto;
white-space: nowrap;
> .bookmark {
padding: @padding-base-vertical @padding-base-horizontal;
margin: 0px;
cursor: pointer;
&:hover{
background-color: darken(@body-bg, 10%);
> a {
color: @gray-dark;
}
}
> .bookmark-glyphicon-symbol {
color: @gray-dark;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-edit {
color: @body-bg;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-remove {
color: @body-bg;
&:hover {
color: @gray-base !important;
}
}
}
}
}
\ No newline at end of file
.path-bar-icon{width:44px;text-align:center;border-right:2px solid #ddd}.path-bar-icon>.dropdown-toggle{width:100%;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>.bookmarks{width:44px;text-align:center;border-right:2px solid #ddd}.file-path-bar>.bookmarks>.dropdown-toggle{width:100%;cursor:pointer;padding:8px 14px 4px 14px}.file-path-bar>.bookmarks .dropdown-menu{margin-top:4px}.file-path-bar>.bookmarks .dropdown-menu .glyphicon{margin-right:10px}.file-path-bar>.options{width:44px;text-align:center;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{width:100%;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>.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;text-align:center;border-right:2px solid #ddd}.path-bar-icon>.dropdown-toggle{width:100%;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>.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}.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>.options{width:44px;text-align:center;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{width:100%;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>.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}/*# sourceMappingURL=pathbar.css.map */
\ No newline at end of file
@gray-dark: lighten(#000, 20%);
@table-border-color: #ddd;
@body-bg: #fff;
@gray-base: #000;
.path-bar-icon {
width: 44px;
......@@ -12,7 +14,7 @@
}
.dropdown-menu {
margin-top: 4px;
.glyphicon {
.glyphicon {
margin-right: 10px;
}
}
......@@ -31,8 +33,39 @@
align-items: center;
width: 100%;
height: 36px;
> .bookmarks {
.path-bar-icon;
> .bookmark-dropdown {
> .bookmark-container {
> .bookmarks {
> .bookmark {
&:hover{
> i {
color: @gray-dark;
}
}
> .bookmark-glyphicon-symbol {
color: @gray-dark;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-name {
margin-right: 10px;
}
> .bookmark-glyphicon-edit {
color: @body-bg;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-remove {
color: @body-bg;
&:hover {
color: @gray-base !important;
}
}
}
}
}
}
> .options {
&:not(.show-item) {
......
<div class="bookmark-container">
<div class="text-center">
<button class="bookmark-button btn btn-sm btn-default">
<i class="glyphicon glyphicon-plus"></i>
<span>Add bookmark</span>
</button>
</div>
<div class="bookmarks sortable">
<p class="bookmark" data-bind="bookmark">
<a class="bookmark-glyphicon-symbol" title="Edit symbol"><i data-bind="bookmark-glyphicon"></i></a>
<span class="bookmark-name" data-bind="bookmark-name"></span>
<a class="bookmark-glyphicon-edit" title="Edit bookmark"><i class="glyphicon glyphicon-pencil"></i></a>
<a class="bookmark-glyphicon-remove" title="Remove bookmark"><i class="glyphicon glyphicon-remove"></i></a>
</p>
</div>
</div>
\ No newline at end of file
......@@ -8,6 +8,12 @@
<li class="paste"><a href="#"><i class="glyphicon glyphicon-share-alt"></i>Paste</a></li>
</ul>
</div>
<div class="btn-group bookmarks hidden-sm hidden-xs"><span data-toggle="dropdown" class="dropdown-toggle"><i class="glyphicon glyphicon-bookmark"></i></span></div>
<div class="btn-group path-bar-icon bookmark-dropdown hidden-sm hidden-xs"><span data-toggle="dropdown" class="dropdown-toggle"><i class="glyphicon glyphicon-bookmark"></i></span>
<ul role="menu" class="dropdown-menu bookmark-container">
<li class="bookmark-button"><a href="#"><i class="glyphicon glyphicon-plus"></i>Add bookmark</a></li>
<li class="divider"></li>
<li class="bookmarks sortable"><a href="#" data-bind="bookmark" class="bookmark"><i data-bind="bookmark-glyphicon" title="Edit symbol" class="bookmark-glyphicon-symbol"></i><span data-bind="bookmark-name" class="bookmark-name">Test1</span><i title="Edit bookmark" class="bookmark-glyphicon-edit glyphicon glyphicon-pencil"></i><i title="Edit bookmark" class="bookmark-glyphicon-remove glyphicon glyphicon-remove"></i></a></li>
</ul>
</div>
<div class="path-list"><a href="#" data-bind="pathPart" class="path-bar-item"></a></div>
</div>
\ No newline at end of file
......@@ -16,8 +16,20 @@
a(href="#")
i.glyphicon.glyphicon-share-alt
| Paste
.btn-group.bookmarks.hidden-sm.hidden-xs
.btn-group.path-bar-icon.bookmark-dropdown.hidden-sm.hidden-xs
span.dropdown-toggle(data-toggle="dropdown")
i.glyphicon.glyphicon-bookmark
ul.dropdown-menu.bookmark-container(role="menu")
li.bookmark-button
a(href="#")
i.glyphicon.glyphicon-plus
| Add bookmark
li.divider
li.bookmarks.sortable
a.bookmark(href="#", data-bind="bookmark")
i.bookmark-glyphicon-symbol(data-bind="bookmark-glyphicon", title="Edit symbol")
span.bookmark-name(data-bind="bookmark-name") Test1
i.bookmark-glyphicon-edit.glyphicon.glyphicon-pencil(title="Edit bookmark")
i.bookmark-glyphicon-remove.glyphicon.glyphicon-remove(title="Edit bookmark")
.path-list
a(href="#", data-bind="pathPart").path-bar-item
......@@ -13,7 +13,7 @@ var FileBase = Class.extend({
this.helper = new FileBaseHelper(this);
this.sorting = new FileBaseSorting(this);
this.pathBar = new PathBar(this);
// this.bookmarkcontainer = new BookmarkContainer(this);
this.bookmarkcontainer = new BookmarkContainer(this);
// the workflow object may be extended
......@@ -49,7 +49,7 @@ var FileBase = Class.extend({
setContent: function(node) {
this.pathBar.setup(node);
// this.bookmarkcontainer.setContainer(node);
this.bookmarkcontainer.setContainer(node);
this.view.setMainContainer(node);
},
......@@ -149,8 +149,7 @@ var FileBase = Class.extend({
this.helper.sortItems(content, sort, reverse);
this.workflow.currentView.setContent(content);
this.pathBar.render();
// this.bookmarkcontainer.setup();
// this.bookmarkcontainer.hideBookmarks();
this.bookmarkcontainer.setup();
this.menuitems.hideMenu();
this.instance.setLabel(this.workflow.path, true);
this.instance.setLoading(false);
......
......@@ -24,7 +24,7 @@ var BookmarkContainer = Class.extend({
},
"bookmark-glyphicon": {
"class": function(params) {
return "glyphicon glyphicon-" + self.symbols[params.index];
return "bookmark-glyphicon-symbol glyphicon glyphicon-" + self.symbols[params.index];
}
}
};
......@@ -52,10 +52,12 @@ var BookmarkContainer = Class.extend({
setContainer: function(node) {
var self = this;
// get template and append to node
this.instance.getTemplate("html/bookmark.html", function(err, tmpl) {
self.container = $(tmpl).appendTo(node);
});
self.container = node;
// // get template and append to node
// this.instance.getTemplate("html/bookmark.html", function(err, tmpl) {
// self.container = $(tmpl).appendTo(node);
// });
},
setContent: function() {
......@@ -123,9 +125,7 @@ var BookmarkContainer = Class.extend({
// click on bookmark self
$(node).off();
$(node).on(clicktype, function(event) {
event.stopPropagation();
self.FileBase.workflow.path = self.paths[index];
self.hideBookmarks();
self.FileBase.updateView();
});
//click on symbol glyph
......@@ -299,44 +299,6 @@ var BookmarkContainer = Class.extend({
defaultValue: self.symbols[index]
}
);
},
hideBookmarks: function() {
var self = this;
self.container.css({
"visibility": "hidden"
});
$(".bookmarks", self.container).css({
"visibility": "hidden"
});
self.isvisible = false;
},
showBookmarks: function() {
var self = this;
self.FileBase.menuitems.hideMenu();
self.container.css({
"visibility": "visible"
});
if (self.names.length === 0) {
$(".bookmarks", self.container).css({
"visibility": "hidden"
});
} else {
$(".bookmarks", self.container).css({
"visibility": "visible"
});
}
self.isvisible = true;
},
changeVisibility: function() {
var self = this;
if (self.isvisible) {
self.hideBookmarks();
} else {
self.showBookmarks();
}
}
});
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