From e57fc753b3a083ddea52dbe4cd003261e836b2d4 Mon Sep 17 00:00:00 2001 From: Roger Zanoni Date: Wed, 3 Jan 2024 16:13:11 -0300 Subject: Style refresh with square grid motif and blue palette. It tries to follow the visual language of the flutter sample apps. Bug-AGL: SPEC-4041 Signed-off-by: Roger Zanoni Change-Id: I68f4ebf82ac5cb5dbe856e9ffe5fca26f47b3442 --- src/images/dashboardTextures.svg | 2527 ++++++++++++++++++++++++++++++++++++++ src/index.html | 34 +- src/index.js | 5 +- src/js/app.js | 2 - src/styles/app.scss | 8 +- src/styles/landscape.scss | 5 +- src/styles/portrait.scss | 5 +- webpack.config.js | 7 +- 8 files changed, 2559 insertions(+), 34 deletions(-) create mode 100644 src/images/dashboardTextures.svg diff --git a/src/images/dashboardTextures.svg b/src/images/dashboardTextures.svg new file mode 100644 index 0000000..04b8767 --- /dev/null +++ b/src/images/dashboardTextures.svg @@ -0,0 +1,2527 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index c12b13e..e94c770 100644 --- a/src/index.html +++ b/src/index.html @@ -26,26 +26,26 @@ Mixer
-
+ diff --git a/src/index.js b/src/index.js index a022899..4db937f 100644 --- a/src/index.js +++ b/src/index.js @@ -14,14 +14,11 @@ * limitations under the License. */ -/* JS */ -import { init } from './js/app'; - /* CSS */ import './styles/app.scss'; document.addEventListener('DOMContentLoaded', function(){ - init(); + APP.init(); KUKSA.init([ [PATHS.volume, VOLUME], diff --git a/src/js/app.js b/src/js/app.js index 9ad4ea1..d4cc919 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -17,7 +17,5 @@ function render_sliders(sliders) { export function init() { template = document.getElementById('slider-template').innerHTML; - Mustache.parse(template); - render_sliders(controls); } diff --git a/src/styles/app.scss b/src/styles/app.scss index cbba7fc..18af381 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,7 +1,7 @@ $colors: ( - primary: #00ADDC, - font: #FFFFFF, - grey: #848286 + primary: #2962ff, + font: #c1d8ff, + grey: #1c2d92 ); @media (max-device-width: 720px) and (orientation: portrait) { @import "main.scss"; @@ -27,4 +27,4 @@ $colors: ( @import "1080.scss"; } -@import "style.css"; \ No newline at end of file +@import "style.css"; diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss index d215960..ee504e9 100644 --- a/src/styles/landscape.scss +++ b/src/styles/landscape.scss @@ -1,7 +1,8 @@ @media (orientation: landscape) { html { - background-image: url('../images/horizontal_background.png'); + background-image: url('../images/dashboardTextures.svg'); + background-color: black; } body { @@ -14,4 +15,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index eff553c..ab28917 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -1,7 +1,8 @@ @media (orientation: portrait) { html { - background-image: url('../images/vertical_background.png'); + background-image: url('../images/dashboardTextures.svg'); + background-color: black; } body { @@ -9,4 +10,4 @@ width: 100%; } } -} \ No newline at end of file +} diff --git a/webpack.config.js b/webpack.config.js index 6b15f00..483e600 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,13 +8,14 @@ const CopyPlugin = require('copy-webpack-plugin'); module.exports = { mode: 'production', entry: { + index: './src/index.js', + APP: './src/js/app.js', PATHS: './src/js/paths.js', KUKSA: './src/js/kuksa.js', VAL_WEB: './src/generated/val_grpc_web_pb.js', VAL: './src/generated/val_pb.js', TYPES: './src/generated/types_pb.js', - VOLUME: './src/js/volume.js', - index: './src/index.js' + VOLUME: './src/js/volume.js' }, output: { path: __dirname + '/dist', @@ -79,7 +80,7 @@ module.exports = { ] }, { - test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, + test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/, type: 'asset/resource', generator: { filename: 'fonts/[name][ext]' -- cgit