Merge sidebar js, css

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-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: 100%; color: #DDD; }
+.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 {

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 = $("<div class=\"console-container\">\n	<div class=\"console\">\n		<div class=\"console-top\">\n			<div class=\"console-text\">Loading...</div>\n		</div>\n		<div class=\"console-middle\">\n			<div class=\"mynode\"></div>\n			<div class=\"peers\">\n				<div class=\"peer\"><div class=\"line\"></div><a href=\"#\" class=\"icon\">\u25BD</div></div>\n			</div>\n		</div>\n	</div>\n</div>");
+        this.container = $("<div class=\"console-container\">\n	<div class=\"console\">\n		<div class=\"console-top\">\n			<div class=\"console-tabs\"></div>\n			<div class=\"console-text\">Loading...</div>\n		</div>\n		<div class=\"console-middle\">\n			<div class=\"mynode\"></div>\n			<div class=\"peers\">\n				<div class=\"peer\"><div class=\"line\"></div><a href=\"#\" class=\"icon\">\u25BD</div></div>\n			</div>\n		</div>\n	</div>\n</div>");
         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 = $("<a></a>", {
+            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("<br><br>");
           _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)<br>");
           _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.startDrag();
-      this.sidebar.fixbutton_targety = this.sidebar.page_height;
+      this.sidebar.moved("y");
-      return this.stopDragY();
+      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 ---- */