diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css index 7e199620..d48199a2 100644 --- a/plugins/Sidebar/media/all.css +++ b/plugins/Sidebar/media/all.css @@ -1,13 +1,23 @@ -/* ---- plugins/Sidebar/media/Console.css ---- */ +/* ---- Console.css ---- */ .console-container { width: 100%; z-index: 998; position: absolute; top: -100vh; padding-bottom: 100%; } .console-container .console { background-color: #212121; height: 100vh; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px) ; padding-top: 80px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; } -.console-top { color: white; font-family: Consolas, monospace; font-size: 11px; line-height: 20px; padding: 5px; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; letter-spacing: 0.5px;} -.console-text { overflow-y: scroll; height: 100%; color: #DDD; } - +.console-top { color: white; font-family: Consolas, monospace; font-size: 11px; line-height: 20px; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; letter-spacing: 0.5px;} +.console-text { overflow-y: scroll; height: calc(100% - 10px); color: #DDD; padding: 5px; margin-top: -36px; } +.console-tabs { + background-color: #41193fad; position: relative; margin-right: 15px; backdrop-filter: blur(2px); + -webkit-box-shadow: 0px 0px 45px #7d2463; -moz-box-shadow: 0px 0px 45px #7d2463; -o-box-shadow: 0px 0px 45px #7d2463; -ms-box-shadow: 0px 0px 45px #7d2463; box-shadow: 0px 0px 45px #7d2463 ; background: -webkit-linear-gradient(-75deg, #591a48ed, #70305e66);background: -moz-linear-gradient(-75deg, #591a48ed, #70305e66);background: -o-linear-gradient(-75deg, #591a48ed, #70305e66);background: -ms-linear-gradient(-75deg, #591a48ed, #70305e66);background: linear-gradient(-75deg, #591a48ed, #70305e66); border-bottom: 1px solid #792e6473; +} +.console-tabs a { + margin-right: 5px; padding: 5px 15px; text-decoration: none; color: #AAA; + font-size: 11px; font-family: "Consolas"; text-transform: uppercase; border: 1px solid #666; + border-bottom: 0px; display: inline-block; margin: 5px; margin-bottom: 0px; background-color: rgba(0,0,0,0.5); +} +.console-tabs a:hover { color: #FFF } +.console-tabs a.active { background-color: #46223c; color: #FFF } .console-middle {height: 0px; top: 50%; position: absolute; width: 100%; left: 50%; display: none; } .console .mynode { @@ -25,7 +35,7 @@ } -/* ---- plugins/Sidebar/media/Menu.css ---- */ +/* ---- Menu.css ---- */ .menu { @@ -48,7 +58,7 @@ .menu, .menu.visible { position: absolute; left: unset !important; right: 20px; } } -/* ---- plugins/Sidebar/media/Scrollbable.css ---- */ +/* ---- Scrollbable.css ---- */ .scrollable { @@ -97,7 +107,7 @@ } -/* ---- plugins/Sidebar/media/Sidebar.css ---- */ +/* ---- Sidebar.css ---- */ .menu { diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js index 82810805..b3a12a31 100644 --- a/plugins/Sidebar/media/all.js +++ b/plugins/Sidebar/media/all.js @@ -70,6 +70,8 @@ function Console(sidebar) { var handleMessageWebsocket_original; this.sidebar = sidebar; + this.handleTabClick = bind(this.handleTabClick, this); + this.changeFilter = bind(this.changeFilter, this); this.stopDragY = bind(this.stopDragY, this); this.cleanup = bind(this.cleanup, this); this.onClosed = bind(this.onClosed, this); @@ -83,6 +85,23 @@ this.tag = null; this.opened = false; this.filter = null; + this.tab_types = [ + { + title: "All", + filter: "" + }, { + title: "Info", + filter: "INFO" + }, { + title: "Warning", + filter: "WARNING" + }, { + title: "Error", + filter: "ERROR" + } + ]; + this.read_size = 32 * 1024; + this.tab_active = ""; handleMessageWebsocket_original = this.sidebar.wrapper.handleMessageWebsocket; this.sidebar.wrapper.handleMessageWebsocket = (function(_this) { return function(message) { @@ -93,7 +112,14 @@ } }; })(this); - if (window.top.location.hash === "#console") { + $(window).on("hashchange", (function(_this) { + return function() { + if (window.top.location.hash === "#ZeroNet:console") { + return _this.open(); + } + }; + })(this)); + if (window.top.location.hash === "#ZeroNet:console") { setTimeout(((function(_this) { return function() { return _this.open(); @@ -103,10 +129,12 @@ } Console.prototype.createHtmltag = function() { + var j, len, ref, tab, tab_type; if (!this.container) { - this.container = $("
\n
\n
\n
Loading...
\n
\n
\n
\n
\n
\u25BD
\n
\n
\n
\n"); + this.container = $("
\n
\n
\n
\n
Loading...
\n
\n
\n
\n
\n
\u25BD
\n
\n
\n
\n"); this.text = this.container.find(".console-text"); this.text_elem = this.text[0]; + this.tabs = this.container.find(".console-tabs"); this.text.on("mousewheel", (function(_this) { return function(e) { if (e.originalEvent.deltaY < 0) { @@ -118,6 +146,19 @@ this.text.is_bottom = true; this.container.appendTo(document.body); this.tag = this.container.find(".console"); + ref = this.tab_types; + for (j = 0, len = ref.length; j < len; j++) { + tab_type = ref[j]; + tab = $("", { + href: "#", + "data-filter": tab_type.filter + }).text(tab_type.title); + if (tab_type.filter === this.tab_active) { + tab.addClass("active"); + } + tab.on("click", this.handleTabClick); + this.tabs.append(tab); + } this.container.on("mousedown touchend touchcancel", (function(_this) { return function(e) { if (e.target !== e.currentTarget) { @@ -193,7 +234,8 @@ Console.prototype.loadConsoleText = function() { this.sidebar.wrapper.ws.cmd("consoleLogRead", { - filter: this.filter + filter: this.filter, + read_size: this.read_size }, (function(_this) { return function(res) { var pos_diff, size_read, size_total; @@ -201,11 +243,17 @@ pos_diff = res["pos_end"] - res["pos_start"]; size_read = Math.round(pos_diff / 1024); size_total = Math.round(res['pos_end'] / 1024); + _this.text.append("

"); _this.text.append("Displaying " + res.lines.length + " of " + res.num_found + " lines found in the last " + size_read + "kB of the log file. (" + size_total + "kB total)
"); _this.addLines(res.lines, false); return _this.text_elem.scrollTop = _this.text_elem.scrollHeight; }; })(this)); + if (this.stream_id) { + this.sidebar.wrapper.ws.cmd("consoleLogStreamRemove", { + stream_id: this.stream_id + }); + } return this.sidebar.wrapper.ws.cmd("consoleLogStream", { filter: this.filter }, (function(_this) { @@ -216,15 +264,17 @@ }; Console.prototype.close = function() { + window.top.location.hash = ""; this.sidebar.move_lock = "y"; this.sidebar.startDrag(); return this.sidebar.stopDrag(); }; Console.prototype.open = function() { - this.createHtmltag(); - this.sidebar.fixbutton_targety = this.sidebar.page_height; - return this.stopDragY(); + this.sidebar.startDrag(); + this.sidebar.moved("y"); + this.sidebar.fixbutton_targety = this.sidebar.page_height - this.sidebar.fixbutton_inity - 50; + return this.sidebar.stopDrag(); }; Console.prototype.onOpened = function() { @@ -275,6 +325,26 @@ } }; + Console.prototype.changeFilter = function(filter) { + this.filter = filter; + if (this.filter === "") { + this.read_size = 32 * 1024; + } else { + this.read_size = 1024 * 1024; + } + return this.loadConsoleText(); + }; + + Console.prototype.handleTabClick = function(e) { + var elem; + elem = $(e.currentTarget); + this.tab_active = elem.data("filter"); + $("a", this.tabs).removeClass("active"); + elem.addClass("active"); + this.changeFilter(this.tab_active); + return false; + }; + return Console; })(Class); @@ -283,6 +353,7 @@ }).call(this); + /* ---- Menu.coffee ---- */ @@ -530,9 +601,9 @@ window.initScrollable = function () { this.globe = null; this.preload_html = null; this.original_set_site_info = this.wrapper.setSiteInfo; - if (window.top.location.hash === "#ZeroNet:OpenSidebar") { + if (false) { this.startDrag(); - this.moved("x"); + this.moved(); this.fixbutton_targetx = this.fixbutton_initx - this.width; this.stopDrag(); } @@ -1274,7 +1345,6 @@ window.initScrollable = function () { }).call(this); - /* ---- morphdom.js ---- */