Frontend changes (#55)

* add rev3 PCB layout to docs * Styling updates to follow new branding * Styling updates to follow new branding * tidy up FE; do styling for settings page * tidy up FE; do styling for settings page * start basic implementation of dark mode * implement some settings items, including dark mode * add disable animations option
charlie-haley · Sep 12, 2021 · 8cea126 · 8cea126
1 parent 69115c5
commit 8cea126
Show file tree

Hide file tree

Showing 13 changed files with 13,465 additions and 13,148 deletions.
diff --git a/src/flowcontrol/app.go b/src/flowcontrol/app.go
@@ -29,6 +29,7 @@ type State struct {
 type Fan struct {
 	Speed int
 	Auto  int
+	Rpm   int
 }
 
 type wailsstruct struct {

diff --git a/src/flowcontrol/frontend/package-lock.json b/src/flowcontrol/frontend/package-lock.json
diff --git a/src/flowcontrol/frontend/package.json b/src/flowcontrol/frontend/package.json
@@ -1,55 +1,57 @@
-{
-  "name": "flowcontrol",
-  "author": "Charlie Haley<[email protected]>",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@wailsapp/runtime": "^1.0.10",
-    "core-js": "^3.6.4",
-    "material-design-icons": "^3.0.1",
-    "regenerator-runtime": "^0.13.3",
-    "vue": "^2.6.11",
-    "vue-router": "^3.5.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.2.1",
-    "eventsource-polyfill": "^0.9.6",
-    "node-sass": "^5.0.0",
-    "sass-loader": "^11.0.1",
-    "vue-template-compiler": "^2.6.11",
-    "webpack-hot-middleware": "^2.25.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
-}
+{
+  "name": "flowcontrol",
+  "author": "Charlie Haley<[email protected]>",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@wailsapp/runtime": "^1.0.10",
+    "core-js": "^3.6.4",
+    "es6-promise": "^4.2.8",
+    "material-design-icons": "^3.0.1",
+    "regenerator-runtime": "^0.13.3",
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-eslint": "^4.2.3",
+    "@vue/cli-service": "^4.2.3",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.2.1",
+    "eventsource-polyfill": "^0.9.6",
+    "node-sass": "^5.0.0",
+    "sass-loader": "^11.0.1",
+    "vue-template-compiler": "^2.6.11",
+    "webpack-hot-middleware": "^2.25.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/src/flowcontrol/frontend/src/App.vue b/src/flowcontrol/frontend/src/App.vue
@@ -5,7 +5,7 @@
           <div class="nav-bar__item">
             <router-link to="/">Home</router-link>
           </div>
-          <div class="nav-bar__item">
+          <div class="nav-bar__item" v-if="rgb_enabled" >
               <router-link to="/Led">LED</router-link>
           </div>
           <div class="nav-bar__item">
@@ -18,17 +18,64 @@
             <router-view :key="$route.fullPath" />
         </keep-alive>
     </div>
+
+    <v-style v-if="rgb_enabled">
+        .nav-bar__item{
+            min-width:33%;
+        }
+    </v-style>
+    <v-style v-if="!rgb_enabled">
+        .nav-bar__item{
+            min-width:50%;
+        }
+    </v-style>
+    <!-- Global Theme Styles -->
+    <v-style v-if="selected_theme == 'theme-default'">
+        html body{
+            background-color: #fffbf5;
+            color:rgb(146, 92, 78);
+        }
+        .nav-bar__item a{ 
+            color: rgb(146, 92, 78);
+        }
+        .nav-bar__item .active, .nav-bar__item a:hover{ 
+            background-color: #f7ead4;
+        }
+    </v-style>
+    <v-style v-if="selected_theme == 'theme-dark'">
+        html body{
+            background-color: #333333;
+            color:#f7ead4;
+        }
+        .nav-bar__item a{ 
+            color: #f7ead4;
+        }
+        .nav-bar__item .active, .nav-bar__item a:hover{ 
+            background-color: #494949;
+        }
+    </v-style>
+    <!-- End -->
   </div>
 </template>
 
 <script>
 import "./assets/css/main.css";
 
 export default {
-  name: "app"
+  name: "app",
+  computed: {
+    selected_theme: {
+        get() { return this.$store.state.selected_theme; },
+        set(value) { this.$store.commit('selected_theme', value); }
+    },
+    rgb_enabled: {
+        get() { return this.$store.state.rgb_enabled; },
+        set(value) { this.$store.commit('enableRgb', value); }
+    }
+  }
 };
 </script>
-
+      
 <style scoped>
 .fan-page{
   width:100%;
@@ -41,7 +88,6 @@ export default {
     padding-top: 25px;
 }
 .nav-bar__item{
-    min-width:33%;
     text-align: center;
 }
 .nav-bar__row{
@@ -53,18 +99,13 @@ export default {
     border:none;
     background: transparent;
     border-radius: 20px;
-    color: rgb(146, 92, 78);
     text-transform: uppercase;
     font-weight: bold;
     text-decoration: none;
     padding: 5px 20px;
 }
-.nav-bar__item .active{ 
-    background-color: #f7ead4;
-}
 
 .nav-bar__item a:hover{ 
-    background-color: #f7ead4;
     transition: 0.3s;
 }
 </style>
diff --git a/src/flowcontrol/frontend/src/assets/css/main.css b/src/flowcontrol/frontend/src/assets/css/main.css
@@ -1,8 +1,6 @@
 html body{
-  background-color: #fffbf5;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
-  color:rgb(146, 92, 78);
 }
 
 /* fallback */
@@ -27,4 +25,13 @@ html body{
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
+}
+
+.theme-default{
+  background-color: #f7ead4;
+}
+
+.theme-dark{
+  background-color: #494949;
+  color: #f7ead4;
 }