From cfdd1b9614b2b1c35212b9f96c483493e7e99fe4 Mon Sep 17 00:00:00 2001 From: KinoLien Date: Fri, 19 Mar 2021 17:41:08 +0800 Subject: [PATCH 1/2] Handle dark mode. --- css/main.css | 22 +++++++++++++++++++++- js/content/main.js | 3 ++- manifest.json | 2 +- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/css/main.css b/css/main.css index 96912f0..c21f482 100644 --- a/css/main.css +++ b/css/main.css @@ -28,6 +28,12 @@ border-top-right-radius: 3px; } +.gitzip-dark .gitzip-header { + color: #f0f6fc; + background-color: #1e2126; + border-bottom: 1px solid #222; +} + .gitzip-body{ margin: 15px; padding: 0px; @@ -35,6 +41,15 @@ overflow: auto; } +.gitzip-dark .gitzip-body p.warn, .gitzip-dark .gitzip-body p.error{ + background-color: inherit; + border: none; +} + +.gitzip-dark .gitzip-body p.warn{ + color: #e3b341; +} + .gitzip-downloading{ width: 480px !important; height: 320px !important; @@ -50,7 +65,6 @@ margin:0 !important; visibility: hidden; opacity: 0; - color: black; } .gitzip-collect-wrap{ @@ -97,6 +111,12 @@ opacity: 0; } +.gitzip-dark .gitzip-collect-dash { + box-shadow: 1px 1px 10px 0px #2f2f2f; + background-color: #13171d; + border: 1px solid #222; +} + .gitzip-downloading .gitzip-collect-dash{ height: 100%; display: block; diff --git a/js/content/main.js b/js/content/main.js index 1927ce3..a289105 100644 --- a/js/content/main.js +++ b/js/content/main.js @@ -100,6 +100,7 @@ var Pool = { // create dom // Make the dom on right bottom var self = this; + var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if(!self._el){ var wrap = document.createElement('div'), @@ -107,7 +108,7 @@ var Pool = { down = document.createElement('p'), tip = document.createElement('p'); - wrap.className = "gitzip-collect-wrap"; + wrap.className = "gitzip-collect-wrap" + (isDark ? " gitzip-dark" : ""); dash.className = "gitzip-collect-dash"; down.className = "gitzip-collect-down"; tip.className = "gitzip-collect-tip"; diff --git a/manifest.json b/manifest.json index 0614a9a..8ec3b26 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "GitZip", "description": "It can make the sub-directories and files of github repository as zip and download it", - "version": "0.3.1", + "version": "0.3.2", "page_action": { "default_icon": "images/icon-empty.png", From 98e1b409d2055adafc3b38c33b6b0b6ed023b977 Mon Sep 17 00:00:00 2001 From: KinoLien Date: Mon, 22 Mar 2021 20:23:45 +0800 Subject: [PATCH 2/2] Fix the error during pages changing. --- css/main.css | 4 ++++ js/content/main.js | 13 ++++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index c21f482..d10a5a4 100644 --- a/css/main.css +++ b/css/main.css @@ -41,6 +41,10 @@ overflow: auto; } +.gitzip-dark .gitzip-body{ + color: #b3b3b3; +} + .gitzip-dark .gitzip-body p.warn, .gitzip-dark .gitzip-body p.error{ background-color: inherit; border: none; diff --git a/js/content/main.js b/js/content/main.js index a289105..a95791c 100644 --- a/js/content/main.js +++ b/js/content/main.js @@ -324,7 +324,7 @@ function hookItemEvents(){ blob = item.querySelector(".octicon-file-text, .octicon-file"), tree = item.querySelector(".octicon-file-directory"); - if(link && (tree || blob)){ + if(!item._hasBind && link && (tree || blob)){ createMark( item, item.offsetHeight, @@ -333,6 +333,7 @@ function hookItemEvents(){ link.href ); item.addEventListener("dblclick", onItemDblClick); + item._hasBind = true; } } } @@ -340,7 +341,7 @@ function hookItemEvents(){ var lazyCaseObserver = null; var repoContent = document.querySelector(".repository-content"); - var lazyElement = repoContent ? repoContent.querySelector("include-fragment .js-details-container") : null; + var lazyElement = repoContent ? repoContent.querySelector(".js-navigation-container") : null; if(lazyElement){ // lazy case @@ -348,7 +349,7 @@ function hookItemEvents(){ mutations.forEach(function(mutation) { var addNodes = mutation.addedNodes; addNodes && addNodes.length && addNodes.forEach(function(el){ - if(el.classList && el.classList.contains("js-details-container") && lazyCaseObserver){ + if(el.classList && (el.classList.contains("js-details-container") || el.classList.contains("js-navigation-container"))){ appendToIcons(); lazyCaseObserver.disconnect(); lazyCaseObserver = null; @@ -357,8 +358,10 @@ function hookItemEvents(){ }); }); lazyCaseObserver.observe(repoContent, { childList: true, subtree: true } ); - } else { - appendToIcons(); + } + + if (document.querySelector(itemCollectSelector)) { + appendToIcons(); } Pool.init();