Opção de definir tema manualmente

artjacob · artjacob · commit 6b7e08cc85c2 · 2019-06-26T03:25:56.000-03:00
diff --git a/.firebase/hosting.ZGVwbG95.cache b/.firebase/hosting.ZGVwbG95.cache
@@ -1,8 +1,8 @@
 icon.png,1539479478000,27a3dbeb5916976c7132eadd036f7cd61e270b7ac6377f6fc168a88f7548204c
-manifest.json,1560835484725,21839584ab1f6e8f85ac70fd11a8267a2faadb7706a466b002c75918086e1835
-service-worker.js,1560835485773,e00ce8c7df2917b9e4cbc43a565ce86a8e4edfb52c8146d20ff0d3cfc8af87e8
-cabin-700.woff2,1560822840262,4acbf2507da66ea28cbf223e043df6a10353339eb5d11bee6db1319de328cb7b
 cabin-400.woff2,1560822820822,801ab0789a3952093806871540942b18eade36e94b545b2b6ec72a4f5392b6e7
-index.html,1560835485773,90e1d0047e5e33ef0d17552c20689691c3910d2f8d779ecf16f25ca9821a6d11
+manifest.json,1560925129777,21839584ab1f6e8f85ac70fd11a8267a2faadb7706a466b002c75918086e1835
 cabin-500.woff2,1560822819681,2730fa6d8cbacbaf3a531673b501845c4ae54dccae05bc005045694af5e0e057
+cabin-700.woff2,1560822840262,4acbf2507da66ea28cbf223e043df6a10353339eb5d11bee6db1319de328cb7b
+service-worker.js,1560925130625,e00ce8c7df2917b9e4cbc43a565ce86a8e4edfb52c8146d20ff0d3cfc8af87e8
+index.html,1561529863351,7ebde071fd8a70ff7e2798f663648a987d0634c6928461230c711a217aefa10a
 material-icons.woff2,1560822804019,fe00fc3a31cd4aa80dbf1f7c69d03c2765da28e648728fb0603fa00d7a11b9c3
diff --git a/.gitignore b/.gitignore
@@ -59,3 +59,4 @@ typings/
 
 # next.js build output
 .next
+desktop.ini
diff --git a/deploy/index.html b/deploy/index.html
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
  <head>
   <meta charset="utf-8">
   <title>Horários</title>
-  <meta name="description" content="Horário dos próximos trens do VLT">
+  <meta name="description" content="Horário dos próximos trens do VLT Carioca">
   <link rel="stylesheet" href="vlt.css">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -24,6 +24,8 @@ <h1><span class="station-name"></span><span class="placeholder">Estações</span
     </div>
     <div class="list">
      <ul></ul>
+     <div class="settings"><a class="theme" href="#theme">
+       <div class="current-theme"></div><i class="material-icons">brightness_auto</i><span>Tema automático</span></a></div>
     </div>
    </div>
    <div class="panel"></div>
diff --git a/public/vlt.css b/public/vlt.css
diff --git a/public/vlt.js b/public/vlt.js
diff --git a/source/css/_list.scss b/source/css/_list.scss
diff --git a/source/css/_settings.scss b/source/css/_settings.scss
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////////////////////////
+// settings ////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+.settings {
+    padding: 24px 12px 0;
+
+    a {
+        opacity: 0.75;
+        display: inline-flex;
+        justify-content: flex-start;
+
+        i {
+            padding-right: 9px;
+        }
+    }
+
+    .theme {
+        border-radius: $panel-border-radius * 0.75;
+        border: 1px solid #fff;
+
+        .current-theme {
+            display: none;
+            content: "auto";
+
+            @media (prefers-color-scheme: light) {
+                content: "light";
+            }
+
+            @media (prefers-color-scheme: dark) {
+                content: "dark";
+            }
+        }
+    }
+}
diff --git a/source/css/vlt.scss b/source/css/vlt.scss
@@ -91,5 +91,6 @@ a {
 
 @import "fonts";
 @import "panel";
-@import "stations";
+@import "list";
 @import "loading";
+@import "settings";
diff --git a/source/html/vlt.pug b/source/html/vlt.pug
@@ -4,11 +4,7 @@ html(lang="pt-br")
 		meta(charset="utf-8")
 		title Horários
 
-		meta(name="description", content="Horário dos próximos trens do VLT")
-
-		//- link(rel="stylesheet", defer, href="https://fonts.googleapis.com/css?family=Cabin:400,500,700|Material+Icons")
-		//- link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Barlow:400,500,600,700,800|Material+Icons")
-		//- link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Cabin:400,500,700|Dosis:400,500,700|Fira+Sans:400,500,700|Montserrat:400,500,700|Muli:400,600,700|Titillium+Web:400,600,700|Work+Sans:400,500,700")
+		meta(name="description", content="Horário dos próximos trens do VLT Carioca")
 
 		if (env === "development")
 			link(rel="stylesheet", href="vlt.css")
@@ -30,10 +26,6 @@ html(lang="pt-br")
 			link(rel="icon" type="image/png" sizes="512x512" href="/icon.png")
 			link(rel="apple-touch-icon" type="image/png" sizes="512x512" href="/icon.png")
 
-		//- link(rel="preload", as="font", href="cabin-400.woff2", type="font/woff2")
-		//- link(rel="preload", as="font", href="cabin-500.woff2", type="font/woff2")
-		//- link(rel="preload", as="font", href="material-icons.woff2", type="font/woff2")
-
 		script var env = "#{env}";
 
 	body
@@ -45,7 +37,13 @@ html(lang="pt-br")
 						span.placeholder Estações
 					i.station-list-trigger.material-icons menu
 					i.options-trigger.material-icons more_vert
-				.list: ul
+				.list
+					ul
+					.settings
+						a.theme(href="#theme")
+							.current-theme
+							i.material-icons brightness_auto
+							span Tema automático
 			.panel
 
 		- var inline = env === "development"? false : true;
diff --git a/source/js/modules.json b/source/js/modules.json
@@ -8,6 +8,7 @@
 	"source/js/nearest-station.js",
 	"source/js/next-departures.js",
 	"source/js/station-list.js",
+	"source/js/theme.js",
 
 	"source/js/start.js"
 ]
diff --git a/source/js/theme.js b/source/js/theme.js
@@ -0,0 +1,63 @@
+////////////////////////////////////////////////////////////////////////////////////////////////////
+// theme ///////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+let Theme = (() => {
+    let theme_order = [
+        "auto",
+        "light",
+        "dark"
+    ];
+
+    let theme_settings = {
+        "auto": {
+            "title": "Tema automático",
+            "icon": "brightness_auto"
+        },
+        "light": {
+            "title": "Tema claro",
+            "icon": "brightness_5"
+        },
+        "dark": {
+            "title": "Tema escuro",
+            "icon": "brightness_4"
+        },
+    };
+
+    let set = (new_theme, old_theme) => {
+        current_theme = new_theme;
+
+        $(".settings .theme span").text(theme_settings[new_theme]["title"]);
+        $(".settings .theme i").text(theme_settings[new_theme]["icon"]);
+
+        $("body").removeClass("-theme--" + old_theme).addClass("-theme--" + new_theme);
+
+        // Salva configuração no localStorage
+        if (new_theme === "auto") {
+            localStorage.removeItem("theme");
+        } else {
+            localStorage.setItem("theme", new_theme);
+        }
+    };
+
+    // Confere se já há tema salvo no localStorage.
+    // Se não houver, pega o padrão do sistema
+    let current_theme = localStorage.getItem("theme") || getComputedStyle($(".settings .current-theme")[0]).getPropertyValue("content").replace(/"/g, "");
+
+    if (current_theme) {
+        set(current_theme, "");
+    }
+
+    $(function() {
+        $(".settings .theme").on("click", (event) => {
+            event.preventDefault();
+
+            // Descobre a posição do tema na ordem
+            let theme_position = theme_order.indexOf(current_theme);
+            let new_theme = theme_order[theme_position + 1] || theme_order[0];
+
+            // Seta o novo tema
+            set(new_theme, current_theme);
+        })
+    });
+})();

Original file line number	Diff line number	Diff line change
`@@ -59,3 +59,4 @@ typings/`
`59`	`59`
`60`	`60`	`# next.js build output`
`61`	`61`	`.next`
	`62`	`+desktop.ini`