Change sidebar to use content.db cache
This commit is contained in:
shortcutme
parent
682fa80a8a
commit
53c087f1ea
4 changed files with 82 additions and 36 deletions
|
|
@ -11,7 +11,8 @@
|
|||
|
||||
.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; }
|
||||
.sidebar { background-color: #212121; position: fixed; backface-visibility: hidden; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
|
||||
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200 }
|
||||
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200; transition: all 1s; opacity: 0 }
|
||||
.sidebar-container.loaded .content { opacity: 1; transform: none }
|
||||
.sidebar h1, .sidebar h2 { font-weight: lighter; }
|
||||
.sidebar .button { margin: 0px; display: inline-block; transition: all 0.3s; box-sizing: border-box; max-width: 160px }
|
||||
.sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
|
||||
|
|
@ -56,9 +57,10 @@
|
|||
|
||||
/* GRAPH */
|
||||
|
||||
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative;}
|
||||
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative; font-size: 0 }
|
||||
.graph li { height: 100%; position: absolute; transition: all 0.3s; }
|
||||
.graph-stacked li { position: static; float: left; }
|
||||
.graph-stacked { white-space: nowrap; }
|
||||
.graph-stacked li { position: static; display: inline-block; height: 20px }
|
||||
|
||||
.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
|
||||
.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
|
||||
|
|
@ -77,8 +79,8 @@
|
|||
.color-green:before { color: #2ECC71 }
|
||||
.back-blue { background-color: #3BAFDA }
|
||||
.color-blue:before { color: #3BAFDA }
|
||||
.back-darkblue { background-color: #2196F3 }
|
||||
.color-darkblue:before { color: #2196F3 }
|
||||
.back-darkblue { background-color: #156fb7 }
|
||||
.color-darkblue:before { color: #156fb7 }
|
||||
.back-purple { background-color: #B10DC9 }
|
||||
.color-purple:before { color: #B10DC9 }
|
||||
.back-yellow { background-color: #FFDC00 }
|
||||
|
|
@ -89,8 +91,14 @@
|
|||
.color-gray:before { color: #ECF0F1 }
|
||||
.back-black { background-color: #34495E }
|
||||
.color-black:before { color: #34495E }
|
||||
.back-red { background-color: #5E4934 }
|
||||
.color-red:before { color: #5E4934 }
|
||||
.back-gray { background-color: #9e9e9e }
|
||||
.color-gray:before { color: #9e9e9e }
|
||||
.back-white { background-color: #EEE }
|
||||
.color-white:before { color: #EEE }
|
||||
.back-red { background-color: #E91E63 }
|
||||
.color-red:before { color: #E91E63 }
|
||||
|
||||
|
||||
/* Settings owned */
|
||||
|
|
|
|||
|
|
@ -111,9 +111,10 @@
|
|||
|
||||
/* GRAPH */
|
||||
|
||||
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px ; overflow: hidden; position: relative;}
|
||||
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px ; overflow: hidden; position: relative; font-size: 0 }
|
||||
.graph li { height: 100%; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; }
|
||||
.graph-stacked li { position: static; float: left; }
|
||||
.graph-stacked { white-space: nowrap; }
|
||||
.graph-stacked li { position: static; display: inline-block; height: 20px }
|
||||
|
||||
.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
|
||||
.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
|
||||
|
|
@ -132,8 +133,8 @@
|
|||
.color-green:before { color: #2ECC71 }
|
||||
.back-blue { background-color: #3BAFDA }
|
||||
.color-blue:before { color: #3BAFDA }
|
||||
.back-darkblue { background-color: #2196F3 }
|
||||
.color-darkblue:before { color: #2196F3 }
|
||||
.back-darkblue { background-color: #156fb7 }
|
||||
.color-darkblue:before { color: #156fb7 }
|
||||
.back-purple { background-color: #B10DC9 }
|
||||
.color-purple:before { color: #B10DC9 }
|
||||
.back-yellow { background-color: #FFDC00 }
|
||||
|
|
@ -144,8 +145,14 @@
|
|||
.color-gray:before { color: #ECF0F1 }
|
||||
.back-black { background-color: #34495E }
|
||||
.color-black:before { color: #34495E }
|
||||
.back-red { background-color: #5E4934 }
|
||||
.color-red:before { color: #5E4934 }
|
||||
.back-gray { background-color: #9e9e9e }
|
||||
.color-gray:before { color: #9e9e9e }
|
||||
.back-white { background-color: #EEE }
|
||||
.color-white:before { color: #EEE }
|
||||
.back-red { background-color: #E91E63 }
|
||||
.color-red:before { color: #E91E63 }
|
||||
|
||||
|
||||
/* Settings owned */
|
||||
|
|
|
|||
|
|
@ -199,6 +199,7 @@ window.initScrollable = function () {
|
|||
this.displayGlobe = __bind(this.displayGlobe, this);
|
||||
this.loadGlobe = __bind(this.loadGlobe, this);
|
||||
this.animDrag = __bind(this.animDrag, this);
|
||||
this.setHtmlTag = __bind(this.setHtmlTag, this);
|
||||
this.waitMove = __bind(this.waitMove, this);
|
||||
this.resized = __bind(this.resized, this);
|
||||
this.tag = null;
|
||||
|
|
@ -214,6 +215,7 @@ window.initScrollable = function () {
|
|||
this.initFixbutton();
|
||||
this.dragStarted = 0;
|
||||
this.globe = null;
|
||||
this.preload_html = null;
|
||||
this.original_set_site_info = wrapper.setSiteInfo;
|
||||
if (false) {
|
||||
this.startDrag();
|
||||
|
|
@ -224,6 +226,15 @@ window.initScrollable = function () {
|
|||
}
|
||||
|
||||
Sidebar.prototype.initFixbutton = function() {
|
||||
|
||||
/*
|
||||
@fixbutton.on "mousedown touchstart", (e) =>
|
||||
if not @opened
|
||||
@logStart("Preloading")
|
||||
wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) =>
|
||||
@logEnd("Preloading")
|
||||
@preload_html = res
|
||||
*/
|
||||
this.fixbutton.on("mousedown touchstart", (function(_this) {
|
||||
return function(e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -347,26 +358,32 @@ window.initScrollable = function () {
|
|||
};
|
||||
|
||||
Sidebar.prototype.updateHtmlTag = function() {
|
||||
return wrapper.ws.cmd("sidebarGetHtmlTag", {}, (function(_this) {
|
||||
return function(res) {
|
||||
if (_this.tag.find(".content").children().length === 0) {
|
||||
_this.log("Creating content");
|
||||
morphdom(_this.tag.find(".content")[0], '<div class="content">' + res + '</div>');
|
||||
return _this.when_loaded.resolve();
|
||||
} else {
|
||||
_this.log("Patching content");
|
||||
return morphdom(_this.tag.find(".content")[0], '<div class="content">' + res + '</div>', {
|
||||
onBeforeMorphEl: function(from_el, to_el) {
|
||||
if (from_el.className === "globe" || from_el.className.indexOf("noupdate") >= 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (this.preload_html) {
|
||||
this.setHtmlTag(this.preload_html);
|
||||
return this.preload_html = null;
|
||||
} else {
|
||||
return wrapper.ws.cmd("sidebarGetHtmlTag", {}, this.setHtmlTag);
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.setHtmlTag = function(res) {
|
||||
if (this.tag.find(".content").children().length === 0) {
|
||||
this.log("Creating content");
|
||||
this.container.addClass("loaded");
|
||||
morphdom(this.tag.find(".content")[0], '<div class="content">' + res + '</div>');
|
||||
return this.when_loaded.resolve();
|
||||
} else {
|
||||
this.log("Patching content");
|
||||
return morphdom(this.tag.find(".content")[0], '<div class="content">' + res + '</div>', {
|
||||
onBeforeMorphEl: function(from_el, to_el) {
|
||||
if (from_el.className === "globe" || from_el.className.indexOf("noupdate") >= 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
})(this));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Sidebar.prototype.animDrag = function(e) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue