From ce93930f42a0bc43d1ffe07fd9a82ef3597022ef Mon Sep 17 00:00:00 2001 From: Samuel Abt Date: Wed, 28 Dec 2022 23:27:12 +0100 Subject: [PATCH] style: [apache/streampipes#877] format and lint deployment directory --- ui/.eslintignore | 1 - ui/.prettierignore | 1 - ui/deployment/app-constants.ts | 1 - ui/deployment/apps.ts | 24 +- ui/deployment/dev/config.yml | 26 +- ui/deployment/modules.yml | 261 ++++++++-------- ui/deployment/prebuild.js | 131 ++++++-- ui/deployment/sp-theme.scss | 439 ++++++++++++++------------- ui/deployment/webpack.partial.dev.js | 2 +- 9 files changed, 487 insertions(+), 399 deletions(-) diff --git a/ui/.eslintignore b/ui/.eslintignore index b3d95ad0ed..1c49c614cb 100644 --- a/ui/.eslintignore +++ b/ui/.eslintignore @@ -18,7 +18,6 @@ dist # Remove these in the future to lint additional modules # Please also see .prettierignore -deployment projects src/app/_enums src/app/_guards diff --git a/ui/.prettierignore b/ui/.prettierignore index 17e25bda9f..920a48bda7 100644 --- a/ui/.prettierignore +++ b/ui/.prettierignore @@ -18,7 +18,6 @@ dist # Remove these in the future to format additional modules # Please also see .eslintignore -deployment projects src/app/_enums src/app/_guards diff --git a/ui/deployment/app-constants.ts b/ui/deployment/app-constants.ts index 6bca2efca0..b237a76851 100644 --- a/ui/deployment/app-constants.ts +++ b/ui/deployment/app-constants.ts @@ -20,7 +20,6 @@ import { Injectable } from '@angular/core'; @Injectable() export class AppConstants { - public readonly APP_NAME = 'Apache StreamPipes'; public readonly APP_TITLE = 'Apache StreamPipes'; public readonly EMAIL = 'dev@streampipes.apache.org'; diff --git a/ui/deployment/apps.ts b/ui/deployment/apps.ts index c049dedd3f..63c3710b11 100644 --- a/ui/deployment/apps.ts +++ b/ui/deployment/apps.ts @@ -19,15 +19,17 @@ import { App } from './apps.model'; export class AvailableAppsService { - - public static apps: App[] = [ - { - appName: 'Asset Dashboards', - appDescription: 'Monitor measurements of your assets by placing visualizations on an image of your asset.', - appId: 'asset-monitoring', - appLink: 'asset-monitoring', - appModuleLink: () => - import('../app-asset-monitoring/app-asset-monitoring.module').then(m => m.AppAssetMonitoringModule) - } - ]; + public static apps: App[] = [ + { + appName: 'Asset Dashboards', + appDescription: + 'Monitor measurements of your assets by placing visualizations on an image of your asset.', + appId: 'asset-monitoring', + appLink: 'asset-monitoring', + appModuleLink: () => + import( + '../app-asset-monitoring/app-asset-monitoring.module' + ).then(m => m.AppAssetMonitoringModule), + }, + ]; } diff --git a/ui/deployment/dev/config.yml b/ui/deployment/dev/config.yml index dc1acdfef7..d3980f177b 100644 --- a/ui/deployment/dev/config.yml +++ b/ui/deployment/dev/config.yml @@ -14,17 +14,17 @@ # limitations under the License. login: - backgroundImage: 'deployment/dev/img/background.png' - logo: 'deployment/dev/img/logo.png' - logo-navigation: 'deployment/dev/img/logo-navigation.png' - favicon: 'deployment/dev/img/favicon.png' + backgroundImage: 'deployment/dev/img/background.png' + logo: 'deployment/dev/img/logo.png' + logo-navigation: 'deployment/dev/img/logo-navigation.png' + favicon: 'deployment/dev/img/favicon.png' modules: - - spPipelines - - spConnect - - spDashboard - - spDataExplorer - - spAppOverview - - spAdd - - spAssets - - spFiles - - spConfiguration + - spPipelines + - spConnect + - spDashboard + - spDataExplorer + - spAppOverview + - spAdd + - spAssets + - spFiles + - spConfiguration diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml index d643fb371c..156ad07dfc 100644 --- a/ui/deployment/modules.yml +++ b/ui/deployment/modules.yml @@ -13,144 +13,143 @@ # See the License for the specific language governing permissions and # limitations under the License. - spAssets: - componentImport: False - ng5_moduleName: 'AssetsModule' - ng5_component: 'EditorComponent' - ng5_componentPath: './editor/editor.component' - path: './assets/assets.module' - link: 'assets' - url: '/editor/:pipeline' - title: 'Asset Management' - description: 'Manage assets which help assigning pipelines, dashboards and adapters to real-world objects such as machines and plants.' - icon: 'precision_manufacturing' - homeImage: '' - admin: true - pageNames: 'PageName.ASSETS' + componentImport: False + ng5_moduleName: 'AssetsModule' + ng5_component: 'EditorComponent' + ng5_componentPath: './editor/editor.component' + path: './assets/assets.module' + link: 'assets' + url: '/editor/:pipeline' + title: 'Asset Management' + description: 'Manage assets which help assigning pipelines, dashboards and adapters to real-world objects such as machines and plants.' + icon: 'precision_manufacturing' + homeImage: '' + admin: true + pageNames: 'PageName.ASSETS' spEditor: - componentImport: True - ng5_moduleName: 'EditorModule' - ng5_component: 'EditorComponent' - ng5_componentPath: './editor/editor.component' - path: './editor/editor.module' - link: 'editor' - url: '/editor/:pipeline' - title: 'Pipeline Editor' - description: 'The pipeline editor lets you create flexible data pipelines based on installed data streams, data sets, data processors and data sinks.' - icon: 'dashboard' - homeImage: '/assets/img/home/editor.png' - admin: false - pageNames: 'PageName.PIPELINE_EDITOR' + componentImport: True + ng5_moduleName: 'EditorModule' + ng5_component: 'EditorComponent' + ng5_componentPath: './editor/editor.component' + path: './editor/editor.module' + link: 'editor' + url: '/editor/:pipeline' + title: 'Pipeline Editor' + description: 'The pipeline editor lets you create flexible data pipelines based on installed data streams, data sets, data processors and data sinks.' + icon: 'dashboard' + homeImage: '/assets/img/home/editor.png' + admin: false + pageNames: 'PageName.PIPELINE_EDITOR' spConnect: - componentImport: False - ng5_moduleName: 'ConnectModule' - ng5_component: 'ConnectComponent' - ng5_componentPath: './connect/connect.component' - path: './connect/connect.module' - link: 'connect' - url: '/connect' - title: 'Connect' - description: 'StreamPipes Connect lets you easily connect new data sources for a variety of data formats and protocols.' - icon: 'power' - homeImage: '/assets/img/home/editor.png' - admin: False - pageNames: 'PageName.CONNECT' + componentImport: False + ng5_moduleName: 'ConnectModule' + ng5_component: 'ConnectComponent' + ng5_componentPath: './connect/connect.component' + path: './connect/connect.module' + link: 'connect' + url: '/connect' + title: 'Connect' + description: 'StreamPipes Connect lets you easily connect new data sources for a variety of data formats and protocols.' + icon: 'power' + homeImage: '/assets/img/home/editor.png' + admin: False + pageNames: 'PageName.CONNECT' spPipelines: - componentImport: False - ng5_moduleName: 'PipelinesModule' - ng5_component: 'PipelinesComponent' - ng5_componentPath: './pipelines/pipelines.component' - path: './pipelines/pipelines.module' - link: 'pipelines' - url: '/pipelines/:pipeline' - title: 'Pipelines' - description: 'All created pipelines are available in the pipeline view, where you can also start and stop pipelines.' - icon: 'play_arrow' - homeImage: '/assets/img/home/pipelines.png' - admin: False - pageNames: 'PageName.PIPELINE_OVERVIEW' + componentImport: False + ng5_moduleName: 'PipelinesModule' + ng5_component: 'PipelinesComponent' + ng5_componentPath: './pipelines/pipelines.component' + path: './pipelines/pipelines.module' + link: 'pipelines' + url: '/pipelines/:pipeline' + title: 'Pipelines' + description: 'All created pipelines are available in the pipeline view, where you can also start and stop pipelines.' + icon: 'play_arrow' + homeImage: '/assets/img/home/pipelines.png' + admin: False + pageNames: 'PageName.PIPELINE_OVERVIEW' spAdd: - componentImport: False - ng5_moduleName: 'AddModule' - ng5_component: 'AddComponent' - ng5_componentPath: './add/add.component' - path: './add/add.module' - link: 'add' - url: '/add' - title: 'Install Pipeline Elements' - description: 'The pipeline element installation module can be used to extend StreamPipes with new algorithms and data sinks.' - icon: 'cloud_download' - homeImage: '/assets/img/home/add.png' - admin: True - pageNames: 'PageName.INSTALL_PIPELINE_ELEMENTS' + componentImport: False + ng5_moduleName: 'AddModule' + ng5_component: 'AddComponent' + ng5_componentPath: './add/add.component' + path: './add/add.module' + link: 'add' + url: '/add' + title: 'Install Pipeline Elements' + description: 'The pipeline element installation module can be used to extend StreamPipes with new algorithms and data sinks.' + icon: 'cloud_download' + homeImage: '/assets/img/home/add.png' + admin: True + pageNames: 'PageName.INSTALL_PIPELINE_ELEMENTS' spConfiguration: - componentImport: False - ng5_moduleName: 'ConfigurationModule' - ng5_component: 'GeneralConfigurationComponent' - ng5_componentPath: './configuration/general-configuration/general-configuration.component' - path: './configuration/configuration.module' - link: 'configuration' - url: '/configuration' - title: 'Configuration' - description: 'In the configuration module, basic StreamPipes settings and services can be configured.' - icon: 'settings' - homeImage: '/assets/img/home/configuration.png' - pageNames: 'PageName.SETTINGS' - admin: True + componentImport: False + ng5_moduleName: 'ConfigurationModule' + ng5_component: 'GeneralConfigurationComponent' + ng5_componentPath: './configuration/general-configuration/general-configuration.component' + path: './configuration/configuration.module' + link: 'configuration' + url: '/configuration' + title: 'Configuration' + description: 'In the configuration module, basic StreamPipes settings and services can be configured.' + icon: 'settings' + homeImage: '/assets/img/home/configuration.png' + pageNames: 'PageName.SETTINGS' + admin: True spAppOverview: - componentImport: False - ng5_moduleName: 'AppOverviewModule' - ng5_component: 'AppOverviewComponent' - ng5_componentPath: './app-overview/app-overview.component' - path: './app-overview/app-overview.module' - link: 'apps' - url: '/apps' - title: 'Apps' - description: 'The app overview lets you access additional plugins.' - icon: 'apps' - homeImage: '/assets/img/home/configuration.png' - admin: false - pageNames: 'PageName.APPS' + componentImport: False + ng5_moduleName: 'AppOverviewModule' + ng5_component: 'AppOverviewComponent' + ng5_componentPath: './app-overview/app-overview.component' + path: './app-overview/app-overview.module' + link: 'apps' + url: '/apps' + title: 'Apps' + description: 'The app overview lets you access additional plugins.' + icon: 'apps' + homeImage: '/assets/img/home/configuration.png' + admin: false + pageNames: 'PageName.APPS' spDashboard: - componentImport: False - ng5_moduleName: 'DashboardModule' - ng5_component: 'DashboardComponent' - ng5_componentPath: './dashboard/dashboard.component' - path: './dashboard/dashboard.module' - link: 'dashboard' - url: '/dashboard' - title: 'Dashboard' - description: 'The live dashboard visualizes data in real-time.' - icon: 'insert_chart' - homeImage: '/assets/img/home/configuration.png' - admin: false - pageNames: 'PageName.DASHBOARD' + componentImport: False + ng5_moduleName: 'DashboardModule' + ng5_component: 'DashboardComponent' + ng5_componentPath: './dashboard/dashboard.component' + path: './dashboard/dashboard.module' + link: 'dashboard' + url: '/dashboard' + title: 'Dashboard' + description: 'The live dashboard visualizes data in real-time.' + icon: 'insert_chart' + homeImage: '/assets/img/home/configuration.png' + admin: false + pageNames: 'PageName.DASHBOARD' spDataExplorer: - componentImport: False - ng5_moduleName: 'DataExplorerModule' - ng5_component: 'DataExplorerComponent' - ng5_componentPath: './data-explorer/data-explorer.component' - path: './data-explorer/data-explorer.module' - link: 'dataexplorer' - url: '/dataexplorer' - title: 'Data Explorer' - description: 'The data explorer lets you visually inspect historical data from your connected sources.' - icon: 'search' - homeImage: '/assets/img/home/configuration.png' - admin: false - pageNames: 'PageName.DATA_EXPLORER' + componentImport: False + ng5_moduleName: 'DataExplorerModule' + ng5_component: 'DataExplorerComponent' + ng5_componentPath: './data-explorer/data-explorer.component' + path: './data-explorer/data-explorer.module' + link: 'dataexplorer' + url: '/dataexplorer' + title: 'Data Explorer' + description: 'The data explorer lets you visually inspect historical data from your connected sources.' + icon: 'search' + homeImage: '/assets/img/home/configuration.png' + admin: false + pageNames: 'PageName.DATA_EXPLORER' spFiles: - componentImport: False - ng5_moduleName: 'FilesModule' - ng5_component: 'FilesComponent' - ng5_componentPath: './files/files.component' - path: './files/files.module' - link: 'files' - url: '/files' - title: 'File Management' - description: 'The file management module lets you upload and manage files that are used by adapters or pipeline elements.' - icon: 'folder' - homeImage: '/assets/img/home/configuration.png' - admin: true - pageNames: 'PageName.FILE_UPLOAD' + componentImport: False + ng5_moduleName: 'FilesModule' + ng5_component: 'FilesComponent' + ng5_componentPath: './files/files.component' + path: './files/files.module' + link: 'files' + url: '/files' + title: 'File Management' + description: 'The file management module lets you upload and manage files that are used by adapters or pipeline elements.' + icon: 'folder' + homeImage: '/assets/img/home/configuration.png' + admin: true + pageNames: 'PageName.FILE_UPLOAD' diff --git a/ui/deployment/prebuild.js b/ui/deployment/prebuild.js index 0c1a81d871..88ce5ad278 100644 --- a/ui/deployment/prebuild.js +++ b/ui/deployment/prebuild.js @@ -22,7 +22,7 @@ mustache = require('mustache'); console.log('Pre-Build started.'); -let branchName = "dev"; +let branchName = 'dev'; let programArgs = process.argv; // If build config is not valid, use "dev" if (programArgs.length <= 2) { @@ -34,15 +34,19 @@ if (programArgs.length <= 2) { } // Check if Confgit stig-File for current Branch exists, otherwise use "def" -if (!(fs.existsSync('deployment/' + branchName + '/config.yml'))) { - console.log('Could not find config for ' + branchName + '. Using config for dev.'); +if (!fs.existsSync('deployment/' + branchName + '/config.yml')) { + console.log( + 'Could not find config for ' + branchName + '. Using config for dev.', + ); branchName = 'dev'; } // Read Config-File and check if it is valid let config = {}; try { - config = yaml.safeLoad(fs.readFileSync('deployment/' + branchName + '/config.yml', 'utf8')); + config = yaml.safeLoad( + fs.readFileSync('deployment/' + branchName + '/config.yml', 'utf8'), + ); } catch (error) { console.log('Invalid Config-File. Pre-Build failed.'); process.exit(1); @@ -58,7 +62,7 @@ try { } // Add active Modules to Template-Variable -let modulesActive = {modulesActive: []}; +let modulesActive = { modulesActive: [] }; for (let module of config.modules) { modulesActive['modulesActive'].push({ module: module, @@ -75,55 +79,126 @@ for (let module of config.modules) { icon: modules[module]['icon'], admin: modules[module]['admin'], description: modules[module]['description'], - homeImage: modules[module]['homeImage'] + homeImage: modules[module]['homeImage'], }); console.log('Active Angular Module: ' + module); } // Create necessary JavaScript-Files from Template and move to respective Directory -fs.writeFileSync('src/app/appng5.module.ts', mustache.render(fs.readFileSync('deployment/appng5.module.mst', 'utf8').toString(), modulesActive)); -fs.writeFileSync('src/app/home/home.service.ts', mustache.render(fs.readFileSync('deployment/home.service.mst', 'utf8').toString(), modulesActive)); -fs.writeFileSync('src/app/app-routing.module.ts', mustache.render(fs.readFileSync('deployment/app-routing.module.mst', 'utf8').toString(), modulesActive)); -fs.writeFileSync('src/app/core/components/base-navigation.component.ts', mustache.render(fs.readFileSync('deployment/base-navigation.component.mst', 'utf8').toString(), modulesActive)); -fs.writeFileSync('src/app/app-overview/apps.ts', fs.readFileSync('deployment/apps.ts')); -fs.writeFileSync('src/scss/sp/sp-theme.scss', fs.readFileSync('deployment/sp-theme.scss')); -fs.writeFileSync('src/app/services/app.constants.ts', fs.readFileSync('deployment/app-constants.ts', 'utf8')); +fs.writeFileSync( + 'src/app/appng5.module.ts', + mustache.render( + fs.readFileSync('deployment/appng5.module.mst', 'utf8').toString(), + modulesActive, + ), +); +fs.writeFileSync( + 'src/app/home/home.service.ts', + mustache.render( + fs.readFileSync('deployment/home.service.mst', 'utf8').toString(), + modulesActive, + ), +); +fs.writeFileSync( + 'src/app/app-routing.module.ts', + mustache.render( + fs.readFileSync('deployment/app-routing.module.mst', 'utf8').toString(), + modulesActive, + ), +); +fs.writeFileSync( + 'src/app/core/components/base-navigation.component.ts', + mustache.render( + fs + .readFileSync('deployment/base-navigation.component.mst', 'utf8') + .toString(), + modulesActive, + ), +); +fs.writeFileSync( + 'src/app/app-overview/apps.ts', + fs.readFileSync('deployment/apps.ts'), +); +fs.writeFileSync( + 'src/scss/sp/sp-theme.scss', + fs.readFileSync('deployment/sp-theme.scss'), +); +fs.writeFileSync( + 'src/app/services/app.constants.ts', + fs.readFileSync('deployment/app-constants.ts', 'utf8'), +); // Move Images -fs.writeFileSync('src/assets/img/sp/logo.png', fs.readFileSync(config['login']['logo'])); +fs.writeFileSync( + 'src/assets/img/sp/logo.png', + fs.readFileSync(config['login']['logo']), +); console.log('Moved: logo.png'); -fs.writeFileSync('src/assets/img/sp/logo-navigation.png', fs.readFileSync(config['login']['logo-navigation'])); +fs.writeFileSync( + 'src/assets/img/sp/logo-navigation.png', + fs.readFileSync(config['login']['logo-navigation']), +); console.log('Moved: sp-logo-navigation.png'); -fs.writeFileSync('src/assets/img/favicon/favicon-96x96.png', fs.readFileSync(config['login']['favicon'])); +fs.writeFileSync( + 'src/assets/img/favicon/favicon-96x96.png', + fs.readFileSync(config['login']['favicon']), +); console.log('Moved: favicon'); -fs.writeFileSync('src/scss/sp/sp-theme.scss', fs.readFileSync('deployment/sp-theme.scss', 'utf8')); -console.log("Moved: theme file"); -fs.writeFileSync('webpack.partial.dev.js', fs.readFileSync('deployment/webpack.partial.dev.js', 'utf8')); -console.log("Moved: webpack dev config"); +fs.writeFileSync( + 'src/scss/sp/sp-theme.scss', + fs.readFileSync('deployment/sp-theme.scss', 'utf8'), +); +console.log('Moved: theme file'); +fs.writeFileSync( + 'webpack.partial.dev.js', + fs.readFileSync('deployment/webpack.partial.dev.js', 'utf8'), +); +console.log('Moved: webpack dev config'); if (process.env.THEME_LOC !== undefined) { console.log('Using custom-provided theme ' + process.env.THEME_LOC); - fs.writeFileSync('src/scss/sp/sp-theme.scss', fs.readFileSync(process.env.THEME_LOC, 'utf8')); + fs.writeFileSync( + 'src/scss/sp/sp-theme.scss', + fs.readFileSync(process.env.THEME_LOC, 'utf8'), + ); } if (process.env.LOGO_HEADER_LOC !== undefined) { - console.log('Using custom-provided header logo ' + process.env.LOGO_HEADER_LOC); - fs.writeFileSync('src/assets/img/login/logo.png', fs.readFileSync(process.env.LOGO_HEADER_LOC)); + console.log( + 'Using custom-provided header logo ' + process.env.LOGO_HEADER_LOC, + ); + fs.writeFileSync( + 'src/assets/img/login/logo.png', + fs.readFileSync(process.env.LOGO_HEADER_LOC), + ); } if (process.env.LOGO_NAV_LOC !== undefined) { - console.log('Using custom-provided navbar logo ' + process.env.LOGO_NAV_LOC); - fs.writeFileSync('src/assets/img/sp/logo-navigation.png', fs.readFileSync(process.env.LOGO_NAV_LOC)); + console.log( + 'Using custom-provided navbar logo ' + process.env.LOGO_NAV_LOC, + ); + fs.writeFileSync( + 'src/assets/img/sp/logo-navigation.png', + fs.readFileSync(process.env.LOGO_NAV_LOC), + ); } if (process.env.FAVICON_LOC !== undefined) { console.log('Using custom-provided favicon ' + process.env.FAVICON_LOC); - fs.writeFileSync('src/assets/img/favicon/favicon-96x96.png', fs.readFileSync(process.env.FAVICON_LOC)); + fs.writeFileSync( + 'src/assets/img/favicon/favicon-96x96.png', + fs.readFileSync(process.env.FAVICON_LOC), + ); } if (process.env.CONSTANTS_FILE !== undefined) { - console.log('Using custom-provided constants file ' + process.env.CONSTANTS_FILE); - fs.writeFileSync('src/app/services/app.constants.ts', fs.readFileSync(process.env.CONSTANTS_FILE, 'utf8')); + console.log( + 'Using custom-provided constants file ' + process.env.CONSTANTS_FILE, + ); + fs.writeFileSync( + 'src/app/services/app.constants.ts', + fs.readFileSync(process.env.CONSTANTS_FILE, 'utf8'), + ); } console.log('Pre-Build finished.'); diff --git a/ui/deployment/sp-theme.scss b/ui/deployment/sp-theme.scss index 286bd61062..97f462cd84 100644 --- a/ui/deployment/sp-theme.scss +++ b/ui/deployment/sp-theme.scss @@ -29,102 +29,102 @@ @include mat-core(); $mat-streampipes-primary: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #72e879, - 300: #49e750, - 400: #49e750, - 500: $sp-color-primary, - 600: #06c12a, - 700: #01a51d, - 800: #00841b, - 900: #005818, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ) + 50: #ffebee, + 100: #ffcdd2, + 200: #72e879, + 300: #49e750, + 400: #49e750, + 500: $sp-color-primary, + 600: #06c12a, + 700: #01a51d, + 800: #00841b, + 900: #005818, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ), ); $mat-streampipes-accent: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #4e3c93, - 300: #2a0c9a, - 400: #395481, - 500: $sp-color-accent, - 600: #0303a3, - 700: #01016a, - 800: #000039, - 900: #00002b, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ) + 50: #ffebee, + 100: #ffcdd2, + 200: #4e3c93, + 300: #2a0c9a, + 400: #395481, + 500: $sp-color-accent, + 600: #0303a3, + 700: #01016a, + 800: #000039, + 900: #00002b, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ), ); $mat-streampipes-accent-dark: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #4e3c93, - 300: #2a0c9a, - 400: #395481, - 500: #83a3de, - 600: #0303a3, - 700: #01016a, - 800: #000039, - 900: #00002b, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ) + 50: #ffebee, + 100: #ffcdd2, + 200: #4e3c93, + 300: #2a0c9a, + 400: #395481, + 500: #83a3de, + 600: #0303a3, + 700: #01016a, + 800: #000039, + 900: #00002b, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ), ); $custom-theme-primary: mat-palette($mat-streampipes-primary); @@ -132,11 +132,20 @@ $custom-theme-accent-dark: mat-palette($mat-streampipes-accent-dark); $custom-theme-accent: mat-palette($mat-streampipes-accent); $custom-theme-warn: mat-palette($mat-red); -$custom-theme-light: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); -$custom-theme-dark: mat-dark-theme($custom-theme-primary, $custom-theme-accent-dark, $custom-theme-warn); - -$custom-typography: mat-typography-config($font-family: 'Roboto, Arial'); +$custom-theme-light: mat-light-theme( + $custom-theme-primary, + $custom-theme-accent, + $custom-theme-warn +); +$custom-theme-dark: mat-dark-theme( + $custom-theme-primary, + $custom-theme-accent-dark, + $custom-theme-warn +); +$custom-typography: mat-typography-config( + $font-family: 'Roboto, Arial', +); @include angular-material-typography($custom-typography); @@ -144,135 +153,141 @@ $primary: map-get($custom-theme-light, primary); $accent-dark: map-get($custom-theme-dark, accent); $accent: map-get($custom-theme-light, accent); - .small .mat-tab-label { - height: 24px; - padding: 0 12px; - cursor: pointer; - box-sizing: border-box; - opacity: .6; - min-width: 80px; - text-align: center; - display: inline-flex; - justify-content: center; - align-items: center; - white-space: nowrap; - position: relative; + height: 24px; + padding: 0 12px; + cursor: pointer; + box-sizing: border-box; + opacity: 0.6; + min-width: 80px; + text-align: center; + display: inline-flex; + justify-content: center; + align-items: center; + white-space: nowrap; + position: relative; } .small .mat-tab-label-content { - text-transform: none; - font-size: 11pt; + text-transform: none; + font-size: 11pt; } :root { - --color-loading-bar: #{mat-color($accent)}; + --color-loading-bar: #{mat-color($accent)}; } .dark-mode { - @include angular-material-theme($custom-theme-dark); - - .base-style { - color: rgba(255, 255, 255, 0.87); - background: #121212; - } - - .mat-button-toggle-checked { - background: var(--color-accent); - color: var(--color-bg-0); - } - - .mat-button-toggle-checked.mat-button-toggle-appearance-standard { - color: var(--color-bg-0); - } - - .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { - line-height: 30px; - } - - .mat-toolbar.mat-primary { - color: #121212; - } - - .mat-tooltip.tooltip { - background-color: rgba(255, 255, 255, 0.87); - font-size: 12px; - } - - --color-primary: #{mat-color($primary)}; - --color-accent: #{mat-color($accent-dark)}; - --color-bg-0: #121212; - --color-bg-1: #282828; - --color-bg-2: #404040; - --color-bg-3: #424242; - --color-bg-4: #5f5f5f; - --color-bg-dialog: rgb(66, 66, 66); - --color-shadow: #c4c4c4; - --color-pe: #404040; - --color-default-text: rgba(255, 255, 255, 0.87); - --color-warn: #b36161; - - --color-tab-border : #cccccc; - - --color-navigation-bg: #{mat-color($primary)}; - --color-navigation-link-text: #121212; - --color-navigation-text: #121212; - --color-navigation-selected: #{mat-color($primary)}; - --color-navigation-hover: #{mat-color($primary, 600)}; - --color-navigation-bg-selected: #121212; - --color-navigation-divider: #{mat-color($primary)}; - - --content-box-color: #404040; - --canvas-color: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, transparent 0%), linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%); - + @include angular-material-theme($custom-theme-dark); + + .base-style { + color: rgba(255, 255, 255, 0.87); + background: #121212; + } + + .mat-button-toggle-checked { + background: var(--color-accent); + color: var(--color-bg-0); + } + + .mat-button-toggle-checked.mat-button-toggle-appearance-standard { + color: var(--color-bg-0); + } + + .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { + line-height: 30px; + } + + .mat-toolbar.mat-primary { + color: #121212; + } + + .mat-tooltip.tooltip { + background-color: rgba(255, 255, 255, 0.87); + font-size: 12px; + } + + --color-primary: #{mat-color($primary)}; + --color-accent: #{mat-color($accent-dark)}; + --color-bg-0: #121212; + --color-bg-1: #282828; + --color-bg-2: #404040; + --color-bg-3: #424242; + --color-bg-4: #5f5f5f; + --color-bg-dialog: rgb(66, 66, 66); + --color-shadow: #c4c4c4; + --color-pe: #404040; + --color-default-text: rgba(255, 255, 255, 0.87); + --color-warn: #b36161; + + --color-tab-border: #cccccc; + + --color-navigation-bg: #{mat-color($primary)}; + --color-navigation-link-text: #121212; + --color-navigation-text: #121212; + --color-navigation-selected: #{mat-color($primary)}; + --color-navigation-hover: #{mat-color($primary, 600)}; + --color-navigation-bg-selected: #121212; + --color-navigation-divider: #{mat-color($primary)}; + + --content-box-color: #404040; + --canvas-color: linear-gradient( + 90deg, + rgba(50, 50, 50, 0.5) 10%, + transparent 0% + ), + linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%); } .light-mode { - @include angular-material-theme($custom-theme-light); - - .base-style { - color: #121212; - background: #FFFFFF; - } - - .mat-button-toggle-checked { - background: var(--color-accent); - color: var(--color-bg-0); - } - - .mat-button-toggle-checked.mat-button-toggle-appearance-standard { - color: var(--color-bg-0); - } - - .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { - line-height: 30px; - } - - - --color-primary: #{mat-color($primary)}; - --color-accent: #{mat-color($accent)}; - --color-bg-0: #FFFFFF; - --color-bg-1: #FAFAFA; - --color-bg-2: #f1f1f1; - --color-bg-3: rgb(224, 224, 224); - --color-bg-4: rgb(212, 212, 212); - --color-bg-dialog: #FFFFFF; - --color-shadow: #555; - --color-pe: #FFFFFF; - --color-default-text: #121212; - --color-warn: #B71C1C; - - --color-tab-border : #cccccc; - - --color-navigation-bg: #{mat-color($primary)}; - --color-navigation-link-text: #FFFFFF; - --color-navigation-text: #FFFFFF; - --color-navigation-selected: #{mat-color($primary)}; - --color-navigation-hover: #{mat-color($primary, 600)}; - --color-navigation-bg-selected: #FFFFFF; - --color-navigation-divider: #{mat-color($primary)}; - - --content-box-color: rgb(156, 156, 156); - --canvas-color: linear-gradient(90deg, rgba(208, 208, 208, 0.5) 10%, transparent 0%), linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); - + @include angular-material-theme($custom-theme-light); + + .base-style { + color: #121212; + background: #ffffff; + } + + .mat-button-toggle-checked { + background: var(--color-accent); + color: var(--color-bg-0); + } + + .mat-button-toggle-checked.mat-button-toggle-appearance-standard { + color: var(--color-bg-0); + } + + .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { + line-height: 30px; + } + + --color-primary: #{mat-color($primary)}; + --color-accent: #{mat-color($accent)}; + --color-bg-0: #ffffff; + --color-bg-1: #fafafa; + --color-bg-2: #f1f1f1; + --color-bg-3: rgb(224, 224, 224); + --color-bg-4: rgb(212, 212, 212); + --color-bg-dialog: #ffffff; + --color-shadow: #555; + --color-pe: #ffffff; + --color-default-text: #121212; + --color-warn: #b71c1c; + + --color-tab-border: #cccccc; + + --color-navigation-bg: #{mat-color($primary)}; + --color-navigation-link-text: #ffffff; + --color-navigation-text: #ffffff; + --color-navigation-selected: #{mat-color($primary)}; + --color-navigation-hover: #{mat-color($primary, 600)}; + --color-navigation-bg-selected: #ffffff; + --color-navigation-divider: #{mat-color($primary)}; + + --content-box-color: rgb(156, 156, 156); + --canvas-color: linear-gradient( + 90deg, + rgba(208, 208, 208, 0.5) 10%, + transparent 0% + ), + linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); } diff --git a/ui/deployment/webpack.partial.dev.js b/ui/deployment/webpack.partial.dev.js index 1c1b9409ce..6bd35b3f59 100644 --- a/ui/deployment/webpack.partial.dev.js +++ b/ui/deployment/webpack.partial.dev.js @@ -54,7 +54,7 @@ module.exports = merge(baseConfig, { '/pipeline': { target: 'http://localhost:5984', secure: false, - } + }, }, }, });