Commit 21da1403 authored by Fabian Heidemann's avatar Fabian Heidemann
Browse files

Bookmarks: clean-up, refactor

parent f9dd6dfe
......@@ -39,67 +39,14 @@
.symbol-icon-p {
margin-bottom: 0px;
margin-top: -19px;@table-border-color: #ddd;
@breadcrumb-bg: #f5f5f5;
@zindex-dropdown: 1000;
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@gray-base: #000;
@gray-dark: lighten(@gray-base, 20%);
@gray-light: lighten(@gray-base, 46.7%);
@gray-lighter: lighten(@gray-base, 93.5%);
.bookmark-container {
position: absolute;
left: 0px;
top: 32px;
overflow: hidden;
padding: 0px;
border-top: 1px solid @table-border-color;
border-right: 1px solid @table-border-color;
background-color: @breadcrumb-bg;
z-index: @zindex-dropdown;
visibility: hidden;
& .bookmark-button {
background-color: @breadcrumb-bg;
margin: @padding-base-vertical @padding-base-horizontal;
&:hover {
background-color: darken(@breadcrumb-bg, 10%);
}
}
> .bookmarks {
overflow: auto;
white-space: nowrap;
> .bookmark {
padding: @padding-base-vertical @padding-base-horizontal;
margin: 0px;
cursor: pointer;
&:hover{
background-color: darken(@breadcrumb-bg, 10%);
> a {
color: @gray-dark;
}
}
> .bookmark-glyphicon-symbol {
color: @gray-dark;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-edit {
color: @breadcrumb-bg;
&:hover {
color: @gray-base !important;
}
}
> .bookmark-glyphicon-remove {
color: @breadcrumb-bg;
&:hover {
color: @gray-base !important;
}
}
}
}
}
@breadcrumb-bg: #f5f5f5;
@zindex-dropdown: 1000;
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@gray-base: #000;
@gray-dark: lighten(@gray-base, 20%);
@gray-light: lighten(@gray-base, 46.7%);
@gray-lighter: lighten(@gray-base, 93.5%);
text-align: center;
z-index: -1;
padding: 0px;
......
......@@ -12,7 +12,7 @@
<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>
<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"></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>
......
......@@ -28,7 +28,7 @@
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
span.bookmark-name(data-bind="bookmark-name")
i.bookmark-glyphicon-edit.glyphicon.glyphicon-pencil(title="Edit bookmark")
i.bookmark-glyphicon-remove.glyphicon.glyphicon-remove(title="Edit bookmark")
.path-list
......
......@@ -13,8 +13,6 @@ var FileBase = Class.extend({
this.helper = new FileBaseHelper(this);
this.sorting = new FileBaseSorting(this);
this.pathBar = new PathBar(this);
this.bookmarkcontainer = new BookmarkContainer(this);
// the workflow object may be extended
this.workflow = {
......@@ -49,7 +47,6 @@ var FileBase = Class.extend({
setContent: function(node) {
this.pathBar.setup(node);
this.bookmarkcontainer.setContainer(node);
this.view.setMainContainer(node);
},
......@@ -149,7 +146,6 @@ var FileBase = Class.extend({
this.helper.sortItems(content, sort, reverse);
this.workflow.currentView.setContent(content);
this.pathBar.render();
this.bookmarkcontainer.setup();
this.menuitems.hideMenu();
this.instance.setLabel(this.workflow.path, true);
this.instance.setLoading(false);
......
var BookmarkContainer = Class.extend({
var Bookmark = Class.extend({
init: function(FileBase) {
init: function(PathBar) {
var self = this;
self.FileBase = FileBase;
self.instance = FileBase.instance;
self.FileBase = PathBar.FileBase;
self.instance = self.FileBase.instance;
self.container = null;
self.isvisible = null;
self.allowedSymbols = ["asterisk", "plus", "euro", "minus", "cloud", "envelope",
"pencil", "glass", "music", "search", "heart", "star", "star-empty",
"user", "film", "th-large", "th", "th-list", "ok", "remove", "zoom-in",
"zoom-out", "off", "signal", "cog", "trash", "home", "file", "time",
"road", "download-alt", "download", "upload", "inbox", "play-circle",
"repeat", "refresh", "list-alt", "lock", "flag", "headphones",
"volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag",
"tags", "book", "bookmark", "print", "camera", "font", "bold", "italic",
"text-height", "text-width", "align-left", "align-center",
"align-right", "align-justify", "list", "indent-left", "indent-right",
"facetime-video", "picture", "map-marker", "adjust", "tint", "edit",
"share", "check", "move", "step-backward", "fast-backward", "backward",
"play", "pause", "stop", "forward", "fast-forward", "step-forward",
"eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign",
"remove-sign", "ok-sign", "question-sign", "info-sign", "screenshot",
"remove-circle", "ok-circle", "ban-circle", "arrow-left", "arrow-right",
"arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small",
"exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close",
"warning-sign", "plane", "calendar", "random", "comment", "magnet",
"chevron-up", "chevron-down", "retweet", "shopping-cart",
"folder-close", "folder-open", "resize-vertical", "resize-horizontal",
"hdd", "bullhorn", "bell", "certificate", "thumbs-up", "thumbs-down",
"hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right",
"circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe",
"wrench", "tasks", "filter", "briefcase", "fullscreen", "dashboard",
"paperclip", "heart-empty", "link", "phone", "pushpin", "usd", "gbp",
"sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order",
"sort-by-order-alt", "sort-by-attributes", "sort-by-attributes-alt",
"unchecked", "expand", "collapse-down", "collapse-up", "log-in",
"flash", "log-out", "new-window", "record", "save", "open", "saved",
"import", "export", "send", "floppy-disk", "floppy-saved",
"floppy-remove", "floppy-save", "floppy-open", "credit-card",
"transfer", "cutlery", "header", "compressed", "earphone", "phone-alt",
"tower", "stats", "sd-video", "hd-video", "subtitles", "sound-stereo",
"sound-dolby", "sound-5-1", "sound-6-1", "sound-7-1", "copyright-mark",
"registration-mark", "cloud-download", "cloud-upload", "tree-conifer",
"tree-deciduous"];
self.names = null;
self.paths = null;
......@@ -33,13 +69,14 @@ var BookmarkContainer = Class.extend({
self._setup_done = false;
},
setup: function() {
setup: function(node) {
if (this._setup_done) {
return;
}
this._setup_done = true;
var self = this;
self.container = node;
vispa.socket.on("workspace.ini_modified", function(data) {
if (data.workspaceId == self.instance.getWorkspaceId() &&
self._workspaceini_mtime != data.mtime) {
......@@ -50,16 +87,6 @@ var BookmarkContainer = Class.extend({
this.setContent();
},
setContainer: function(node) {
var self = this;
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() {
var self = this;
// get names from workspaceini
......@@ -124,7 +151,7 @@ var BookmarkContainer = Class.extend({
$.each($(".bookmark", self.container), function(index, node) {
// click on bookmark self
$(node).off();
$(node).on(clicktype, function(event) {
$(node).on(clicktype, function() {
self.FileBase.workflow.path = self.paths[index];
self.FileBase.updateView();
});
......@@ -258,7 +285,7 @@ var BookmarkContainer = Class.extend({
editBookmark: function(index) {
var self = this;
// prompt for new data
this.instance.prompt(
console.log(this.instance.prompt(
"Enter new name",
function(newdata) {
// change name
......@@ -273,9 +300,10 @@ var BookmarkContainer = Class.extend({
}
});
}, {
defaultValue: self.names[index]
defaultValue: self.names[index],
header: "<i class='glyphicon glyphicon-pencil'></i> Edit bookmark"
}
);
));
},
editSymbol: function(index) {
......@@ -284,6 +312,10 @@ var BookmarkContainer = Class.extend({
this.instance.prompt(
"Enter new symbol (Bootstrap glyphicon name)",
function(newdata) {
if (self.allowedSymbols.indexOf(newdata) == -1){
self.instance.alert("Glyphicon not found!");
return;
}
// change name
var oldsymbol = self.symbols[index];
self.symbols[index] = String(newdata);
......@@ -296,7 +328,8 @@ var BookmarkContainer = Class.extend({
}
});
}, {
defaultValue: self.symbols[index]
defaultValue: self.symbols[index],
header: "<i class='glyphicon glyphicon-pencil'></i> Edit symbol"
}
);
}
......
......@@ -32,7 +32,6 @@ var FileBaseMenuItems = Class.extend({
var self = this;
event.preventDefault();
event.stopPropagation();
// self.FileBase.bookmarkcontainer.hideBookmarks();
var menu = $(".actionmenu", this.FileBase.view.fileContentContainer.parent());
menu.on("contextmenu", function(evt) {
evt.preventDefault();
......
......@@ -5,6 +5,7 @@ var PathBar = Class.extend({
self.FileBase = FileBase;
self.instance = FileBase.instance;
this.actions = FileBase.actions;
this.bookmark = new Bookmark(this);
this.node = null;
this.tmpl = null;
},
......@@ -75,7 +76,8 @@ var PathBar = Class.extend({
}
self.FileBase.updateView();
});
// bookmarks
self.bookmark.setup(self.node);
});
},
......@@ -106,4 +108,4 @@ var PathBar = Class.extend({
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