Cleanup types. Properly vendor pure.css.

moribellamy · May 17, 2020 · c39111c · c39111c
1 parent 6754394
commit c39111c
Show file tree

Hide file tree

Showing 16 changed files with 232 additions and 1,498 deletions.
diff --git a/@types/graytabby.d.ts b/@types/graytabby.d.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,6 +54,8 @@
     "webpack-shell-plugin-next": "^1.1.9"
   },
   "dependencies": {
-    "google-fonts-plugin": "^5.0.2"
+    "google-fonts-plugin": "^5.0.2",
+    "object-sizeof": "^1.6.0",
+    "purecss": "^2.0.3"
   }
 }
diff --git a/src/app.html b/src/app.html
@@ -8,13 +8,9 @@
 </head>
 
 <body>
-  <!-- Trigger/Open The Modal -->
-  <button id="optionsButton">Options</button>
-
   <!-- Options Modal -->
   <div id="optionsModal" class="modal">
     <div class="content">
-      <span class="close">&times;</span>
       <form class='pure-form pure-form-stacked'>
         <fieldset>
           <legend>Options</legend>
@@ -24,9 +20,12 @@
             limit.</span>
 
           <label for="stacked-remember" class="pure-checkbox">
-            <input type="checkbox" id="optionsDupes" />Keep duplicates.</label>
+            <input type="checkbox" id="optionsDupes" /><span>Keep duplicates.</span>
+          </label>
           <span class="pure-form-message">If checked, identical tabs will not de-duplicate on archival.</span>
         </fieldset>
+        <legend>Info</legend>
+        <a href="https://github.com/moribellamy/graytabby" target="_new">Source Code (on GitHub)</a>
       </form>
     </div>
   </div>
@@ -36,9 +35,7 @@
     <h1>Welcome to GrayTabby!</h1>
     <p id="info"></p>
     <div id="groups"></div>
-    <a href="https://github.com/moribellamy/graytabby" target="_new">
-      <img src="assets/img/blobbycat/logo.png" id="logo" />
-    </a>
+    <img src="assets/img/blobbycat/logo.png" id="logo" />
   </div>
   <script src="app.js"></script>
 </body>

diff --git a/src/app.ts b/src/app.ts
@@ -3,10 +3,8 @@
  * non-trivial logic here.
  */
 
-// Webpack uses MiniCssExtractPlugin when it sees these.
+// Webpack uses MiniCssExtractPlugin when it sees this.
 import './scss/app.scss';
-import './scss/pure.css';
-import './scss/montserrat.css';
 
 import { grayTabby } from './ui';
 import { PAGE_LOAD } from './globals';

diff --git a/src/archive.ts b/src/archive.ts
@@ -1,6 +1,13 @@
-import { BrowserTab, OnClickData } from '../@types/graytabby';
-import { PAGE_LOAD, BROWSER, ARCHIVAL } from './globals';
+/**
+ * Any logic having to do with archival.
+ */
+
+import { Menus } from 'webextension-polyfill-ts/dist/generated/menus';
+import { ARCHIVAL, BROWSER, PAGE_LOAD } from './globals';
 import { getOptions } from './options';
+import { BrowserTab } from './tabs';
+
+export type OnClickData = Menus.OnClickData;
 
 /**
  * @returns where the user should browse to for the main GrayTabby page.
@@ -32,7 +39,7 @@ function shouldJustClose(url: string): boolean {
  * archived. Second element is tabs that will just be closed and not archived.
  * None of the GrayTabby tabs are counted in either member.
  */
-function archivePlan(
+export function archivePlan(
   browserTabs: BrowserTab[],
   homeURL: string,
   archiveDupes: boolean,
@@ -42,6 +49,7 @@ function archivePlan(
   const seen: Set<string> = new Set();
 
   for (const tab of browserTabs) {
+    console.log('aaa', tab.url, tab.pinned);
     if (tab.url === homeURL || tab.pinned) continue;
     else if (seen.has(tab.url) && !archiveDupes) tabsToClose.push(tab);
     else if (shouldJustClose(tab.url)) tabsToClose.push(tab);
@@ -50,7 +58,7 @@ function archivePlan(
       seen.add(tab.url);
     }
   }
-
+  console.log(tabsToArchive, tabsToClose);
   return [tabsToArchive, tabsToClose];
 }
 

diff --git a/src/globals.ts b/src/globals.ts
@@ -1,6 +1,6 @@
 import { browser } from 'webextension-polyfill-ts';
-import { BrowserTab } from '../@types/graytabby';
 import { Broker } from './brokers';
+import { BrowserTab } from './tabs';
 
 class Wrapper<T> {
   wrapped: T;

diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -4,34 +4,49 @@
 //$font-family-base: "Montserrat", "sans-serif";
 // @import "~bootstrap/scss/bootstrap";
 
-@import 'modal.scss';
+@import "purecss";
+@import "modal.scss";
+@import "montserrat.css";
 
 body {
-  font-family: 'Montserrat', 'sans-serif';
+  font-family: "Montserrat", "sans-serif";
 }
 
-ul {
-  list-style-type: none;
-  padding-left: 20px;
-}
-
-#app a {
-  padding-left: 5px;
-}
+$padding: 10px;
 
-.form-group {
-  label {
-    font-weight: bold;
+#app {
+  padding: $padding;
+  h1 {
+    margin: 0;
+    margin-bottom: 0.67em;
+  }
+  ul {
+    list-style-type: none;
+    padding-left: 20px;
   }
-  span {
-    font-style: italic;
+  a {
+    padding-left: 5px;
+  }
+  #optionsButton {
+    @extend .pure-button;
+    @extend .pure-button-primary;
+    float: right;
+  }
+  #logo {
+    position: fixed;
+    right: $padding;
+    bottom: $padding;
+    width: 250px;
+    height: 208px;
   }
 }
 
-#logo {
-  position: fixed;
-  right: 0px;
-  bottom: 0px;
-  width: 250px;
-  height: 208px;
+#optionsModal {
+  form {
+    label {
+      input[type='checkbox'] {
+        margin-right: 5px;
+      }
+    }
+  }
 }
diff --git a/src/scss/modal.scss b/src/scss/modal.scss
@@ -1,4 +1,4 @@
-/* The Modal (background) */
+/* The Modal (background). Cribbed from W3Schools. */
 .modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
@@ -19,16 +19,16 @@
     width: 70%; /* Could be more or less, depending on screen size */
   }
 
-  .close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+  // .close {
+  //   color: #aaa;
+  //   float: right;
+  //   font-size: 28px;
+  //   font-weight: bold;
 
-    :hover :focus {
-      color: black;
-      text-decoration: none;
-      cursor: pointer;
-    }
-  }
+  //   :hover :focus {
+  //     color: black;
+  //     text-decoration: none;
+  //     cursor: pointer;
+  //   }
+  // }
 }