fix: add collapse feature to panel and release 0.16.4

manifest.json

@@ -2,7 +2,7 @@
   "name": "Octo Mate",
   "description": "Missing mate of GitHub, making single file download effortless and with more features",
   "default_locale": "en",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "background": {
     "persistent": false,
     "page": "background.html"

panel.js

@@ -37,8 +37,11 @@ var panelNode = $('div.github-mate-panel');
 
 function initPanelNode() {
   if (panelNode.length === 0) {
-    panelNode = $('<div class="github-mate-panel"></div>').html(
-      "<a href='#' class='add btn'>Add this page</a>" +
+    let isCollapse = localStorage.getItem('github-mate-panel-collapse') === 'true';
+
+    panelNode = $('<div class="github-mate-panel' + (isCollapse ? ' collapse' : '') + '"></div>').html(
+      "<a href='javascript:;' class='add btn'>➕</a>" +
+      "<a href='javascript:;' class='toggle btn collapse'></a>" +
       "<b>Favorites</b>" +
       "<ul class='github-mate-favorites'></ul>" +
       "<div class='github-mate-outline'></div>"
@@ -48,9 +51,15 @@ function initPanelNode() {
     setInterval(gm_refresh_favorites, 5000);
     gm_refresh_favorites();
 
+    panelNode.on('click', 'a.toggle', function (e) {
+      $('.github-mate-panel').toggleClass('collapse');
+      localStorage.setItem('github-mate-panel-collapse', $('.github-mate-panel').hasClass('collapse'));
+      $(e.target).blur();
+    });
+
     panelNode.on('click', 'a.add', function (e) {
       var path = location.pathname.split('/'); // /winsite/iprace_fe/issues/779
-      var text = prompt('Edit title:', path[2] + ' ' + document.title);
+      var text = prompt('Add this page, edit title:', path[2] + ' ' + document.title);
 
       if (!text) return;
 

style.css

@@ -32,32 +32,51 @@
 }
 /* tab size end */
 
-
 /* github mate panel start, including outline style and favorites style */
 .github-mate-panel {
   position: fixed;
   top:0;
   right: 0;
-  z-index: 35;
-  background:rgba(255,255,255,0.9);
-  border-left: 3px #d26911 solid;
-  border-radius: 3px;
+  bottom: 0;
+  z-index: 1000001;
   width: 200px;
+  background-color: rgba(247, 247, 247, 0.8);
+  transform: translate3d(0, 0px, 0px);
   padding: 10px 5px 15px 15px;
-  max-height:100%;
+  border-left: 1px solid rgb(221, 221, 221);
+  transition: transform 0.2s ease;
   overflow-y:auto
 }
-@media(max-width: 1400px) {
-  .github-mate-panel {
-    right:-185px;
-  }
-  .github-mate-panel:hover {
-    right:0;
-  }
-}
-.github-mate-panel a.add.btn {
+
+.github-mate-panel a.btn.add {
   font-size: 10px; float: right; padding: 2px 7px;
 }
+
+.github-mate-panel a.btn.toggle {
+  font-size: 10px; padding: 2px 7px;
+  margin-left: -10px;
+  margin-right: 4px;
+  color: #999;
+}
+.github-mate-panel a.btn.toggle::after {
+  content: '▶️';
+}
+.github-mate-panel a.btn.toggle:hover {
+  color: rgb(65, 131, 196);
+}
+.github-mate-panel a.btn.toggle:focus {
+}
+.github-mate-panel.collapse a.btn.toggle::after {
+  content: '◀️';
+}
+.github-mate-panel.collapse {
+  overflow: visible;
+  transform: translate3d(100%, 0px, 0px);
+}
+.github-mate-panel.collapse a.btn.toggle {
+  position: absolute;
+  margin-left: -50px;
+}
 .github-mate-panel b {
   line-height: 30px
 }