Merge pull request #37 from jackyzha0/prettify-options-page

Prettify options page
getreflect · Apr 13, 2020 · 4d6dc21 · 4d6dc21
2 parents da81e58 + f3c854e
commit 4d6dc21
Show file tree

Hide file tree

Showing 12 changed files with 321 additions and 89 deletions.
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -3,8 +3,12 @@
 
   "name": "reflect.",
   "description": "a mindful website blocker for the productive.",
-  "version": "0.3",
+  "version": "1.0.0",
   "options_page": "res/pages/options.html",
+  // "options_ui": {
+  //   "page": "res/pages/options.html",
+  //   "open_in_tab": false
+  // },
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
 
   "background": {

diff --git a/dist/res/common.css b/dist/res/common.css
@@ -4,6 +4,59 @@
 	--blue: #8b9ac0;
 }
 
+table {
+	width: 75%;
+}
+
+.styled {
+	margin-top: 3em;
+	border: 1.2px solid var(--blue);
+	border-radius: 5px;
+}
+
+th, td {
+	border: none;
+}
+
+.shadow {
+	box-shadow: 0 14px 28px rgba(0,0,0,0.06), 0 10px 10px rgba(0,0,0,0.02);
+}
+
+.hover {
+	transition: all 1s ease-in;
+}
+
+.hover:hover {
+	box-shadow: 0 14px 28px rgba(0,0,0,0.18), 0 10px 10px rgba(0,0,0,0.04);
+}
+
+button {
+  background-color: var(--white);
+  color: #dd6666;
+  border: none;
+  margin: 0em;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.urlDisplay {
+	margin: 0.2em 0.5em !important;
+	display: inline-block !important;
+}
+
+.options_panel {
+	padding-top: 2em;
+	padding-bottom: 5em;
+}
+
+.contentCol {
+	padding: 0 20vw 30px 20vw;
+	color: var(--shale);
+}
+
 @font-face {
   font-family: "circular";
   src: url("chrome-extension://__MSG_@@extension_id__/res/circular.ttf");
@@ -14,11 +67,29 @@
   src: url("chrome-extension://__MSG_@@extension_id__/res/circular-light.ttf");
 }
 
-h1 {
+h1, h2, h3 {
 	font-family: "circular" !important;
-	font-weight: 350;
-	font-size: 5.5em;
 	margin-bottom: 0;
+	margin-top: 0;
+}
+
+.bold {
+	font-weight: 700 !important;
+}
+
+h1 {
+	font-weight: 300;
+	font-size: 5.5em;
+}
+
+h2 {
+	font-weight: 200;
+	font-size: 4em;
+}
+
+h3 {
+	font-weight: normal;
+	font-size: 2em;
 }
 
 p {
@@ -81,12 +152,25 @@ input:focus, textarea:focus, select:focus{
 	font-family: "circular-lt"
 }
 
-form {
+#inputForm {
 	position: fixed;
 	left: 12.5vw;
 	top: 50vh;
 }
 
+.subtext {
+	font-size: 1em;
+}
+
+input[type=number] {
+	width: 3em;
+	border-radius: 20px;
+	border: 3px solid var(--shale);
+	padding: 0.5em 2em;
+	cursor: pointer;
+	font-size: 1em;
+}
+
 input[type=text] {
 	width: 25em;
 	border-radius: 20px;
@@ -107,6 +191,12 @@ input[type=submit] {
 	font-size: 1em;
 }
 
+.urlSubmit {
+	margin-left: 1.5em;
+	padding: 0.5em 1.4em !important;
+	font-size: 1.2em !important;
+}
+
 #top-text {
 	position: fixed;
 	left: 12.5vw;

diff --git a/dist/res/pages/options.html b/dist/res/pages/options.html
@@ -1,18 +1,40 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<style>
-			table, th, td {
-				border: 1px solid black;
-			}
-		</style>
-		<script src="/build/options.js"></script>
+		<link rel="stylesheet" href="/res/common.css">
+		<script src="/src/options.js"></script>
 	</head>
-	<body>
-		<div id = "filterList"></div>
-		<div id = "addSite">
-			<input type="text" id="urlInput" />
-			<input type="submit" id="add" value="add">
+	<body id="reflectMain">
+		<div class="contentCol">
+			<div class="options_panel">
+				<h1 class="bold">options.</h1>
+				<p>buttons and knobs to customize your reflect experience.</p>
+
+				<table>
+					<tr>
+						<td style="width:90%">
+							<h3 class="setting">whitelist time.</h3>
+							<p class="subtext">time allowed on a website after successful intent (minutes).</p>
+						</td>
+						<td style="width:10%">
+							<input id="whitelistTime" type="number" min="0">
+						</td>
+					</tr>
+				</table>
+			  	<p id="statusMessage">
+				  	<span>&nbsp;</span>
+				  	<span id="statusContent"></span>
+				</p>
+				<input id="save" type="submit" value="save">
+			</div>
+
+			<h2>sites.</h2>
+			<p>a list of sites you would like to be more mindful of. sites added here will have the reflect prompt shown to you.</p>
+			<div id="addSite">
+				<input type="text" id="urlInput" />
+				<input class="urlSubmit" type="submit" id="add" value="add site">
+			</div>
+			<div id="filterList"></div>
 		</div>
 	</body>
 </html>
diff --git a/dist/res/pages/prompt.html b/dist/res/pages/prompt.html
@@ -14,12 +14,12 @@ <h1>reflect.</h1>
 				<p>hey! what are you here for?</p>
 			</div>
 			<form id="inputForm">
-				<input type="text" id="textbox" name="intent" placeholder="i'm trying to..." class="maintext" autocomplete="off" required autofocus>
+				<input class="shadow" type="text" id="textbox" name="intent" placeholder="i'm trying to..." class="maintext" autocomplete="off" required autofocus>
 			  	<p id="statusMessage">
 				  	<span>&nbsp;</span>
 				  	<span id="statusContent"></span>
 				</p>
-				<input type="submit" value="enter.">
+				<input class="shadow" type="submit" value="enter.">
 			</form> 
 			<div id="bottom-right-logo-text">
 				<h1>r.</h1>

diff --git a/dist/src/background.js b/dist/src/background.js
diff --git a/dist/src/background.js.map b/dist/src/background.js.map
diff --git a/dist/src/content.js b/dist/src/content.js
@@ -42,7 +42,6 @@ function iterWhitelist() {
                 else {
                     // is currently on whitelist
                     const timeDifference = parsedDate.getTime() - currentDate.getTime();
-                    console.log(timeDifference);
                     setTimeout(loadBlockPage, timeDifference);
                 }
             }
@@ -95,8 +94,11 @@ function callBackgroundWithIntent(intent) {
             case "ok":
                 // show success message
                 // optional: transition?
-                displayStatus("got it! 5 minutes starting now.", 3000, REFLECT_INFO);
-                location.reload();
+                chrome.storage.sync.get('whitelistTime', (storage) => {
+                    const WHITELIST_PERIOD = storage.whitelistTime;
+                    displayStatus(`got it! ${WHITELIST_PERIOD} minutes starting now.`, 3000, REFLECT_INFO);
+                    location.reload();
+                });
                 break;
             case "too_short":
                 $('#textbox').effect("shake");

diff --git a/dist/src/nn.js.map b/dist/src/nn.js.map