This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch bump-material-3 in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit a713c4c46b56bd129beff510106a5b916cab43c8 Author: Dominik Riemer <[email protected]> AuthorDate: Fri Aug 15 17:11:06 2025 +0200 Add Material 3 samples --- .../general-configuration.component.html | 36 +- .../scss/{sp => custom-theme}/_theme-colors.scss | 0 ui/src/scss/custom-theme/custom-variables.scss | 0 ui/src/scss/main.scss | 2 +- ui/src/scss/sp/sp-theme.scss | 571 +++++++++++---------- 5 files changed, 343 insertions(+), 266 deletions(-) diff --git a/ui/src/app/configuration/general-configuration/general-configuration.component.html b/ui/src/app/configuration/general-configuration/general-configuration.component.html index 945171769a..31c2d1d7b8 100644 --- a/ui/src/app/configuration/general-configuration/general-configuration.component.html +++ b/ui/src/app/configuration/general-configuration/general-configuration.component.html @@ -32,8 +32,13 @@ These are default values - to use features such as email you need to store these values once. </div> - <div class="subsection-title">App Name</div> - <mat-form-field color="accent"> + <!-- <div class="subsection-title">App Name</div>--> + <mat-form-field + color="accent" + appearance="outline" + class="mt-10" + > + <mat-label>App Name</mat-label> <input formControlName="appName" fxFlex @@ -59,7 +64,12 @@ </mat-button-toggle> </mat-button-toggle-group> </div> - <mat-form-field color="accent" class="ml-10"> + <mat-form-field + color="accent" + class="ml-10" + appearance="outline" + subscriptSizing="dynamic" + > <mat-label>Host</mat-label> <input formControlName="hostname" @@ -69,7 +79,12 @@ data-cy="general-config-hostname" /> </mat-form-field> - <mat-form-field color="accent" class="ml-10"> + <mat-form-field + color="accent" + class="ml-10" + appearance="outline" + subscriptSizing="dynamic" + > <mat-label>Port</mat-label> <input formControlName="port" @@ -137,9 +152,7 @@ <sp-split-section> <div class="mt-10"> <button - mat-button - mat-raised-button - color="accent" + mat-flat-button (click)="updateConfig()" style="margin-right: 10px" [disabled]="!parentForm.valid" @@ -148,6 +161,15 @@ <i class="material-icons">save</i ><span> Save</span> </button> + <button + mat-flat-button + class="btn-secondary" + style="margin-right: 10px" + data-cy="sp-element-general-config-save" + > + <i class="material-icons">save</i + ><span> Test</span> + </button> </div> </sp-split-section> </form> diff --git a/ui/src/scss/sp/_theme-colors.scss b/ui/src/scss/custom-theme/_theme-colors.scss similarity index 100% rename from ui/src/scss/sp/_theme-colors.scss rename to ui/src/scss/custom-theme/_theme-colors.scss diff --git a/ui/src/scss/custom-theme/custom-variables.scss b/ui/src/scss/custom-theme/custom-variables.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss index ecb4295caa..055b647d89 100644 --- a/ui/src/scss/main.scss +++ b/ui/src/scss/main.scss @@ -32,7 +32,7 @@ @use './sp/shepherd-new'; @use './sp/main'; -@use './sp/buttons'; +//@use './sp/buttons'; @use './sp/spinner'; @use './sp/forms'; @use './sp/dialog'; diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss index 20ed477e8c..956dc7ecab 100644 --- a/ui/src/scss/sp/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme.scss @@ -19,275 +19,330 @@ @use '@angular/material' as mat; @use '../_variables' as sp; @use 'sass:map'; -@use 'theme-colors' as mat3theme; - -@include mat.elevation-classes(); -@include mat.app-background(); - -$dark-primary-text: rgba(black, 0.87); -$light-primary-text: white; - -.nav-input { - @include mat.input-density(-3); -} - -.nav-form-field { - @include mat.form-field-density(-2); -} - -$mat-streampipes-primary: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #72e879, - 300: #49e750, - 400: #49e750, - 500: sp.$sp-color-primary, - 600: #06c12a, - 700: #01a51d, - 800: #00841b, - 900: #005818, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: white, - 600: white, - 700: white, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: white, - A400: white, - A700: white, - ), -); - -$mat-streampipes-accent: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #4e3c93, - 300: #2a0c9a, - 400: #395481, - 500: sp.$sp-color-accent, - 600: #0303a3, - 700: #01016a, - 800: #000039, - 900: #00002b, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: white, - 600: white, - 700: white, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: white, - A400: white, - A700: white, - ), -); - -$mat-streampipes-accent-dark: ( - 50: #ffebee, - 100: #ffcdd2, - 200: #4e3c93, - 300: #2a0c9a, - 400: #395481, - 500: sp.$sp-color-accent-dark, - 600: #0303a3, - 700: #01016a, - 800: #000039, - 900: #00002b, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: white, - 600: white, - 700: white, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: white, - A400: white, - A700: white, - ), -); - -$custom-theme-primary: mat.m2-define-palette($mat-streampipes-primary); -$custom-theme-accent-dark: mat.m2-define-palette($mat-streampipes-accent-dark); -$custom-theme-accent: mat.m2-define-palette($mat-streampipes-accent); -$custom-theme-warn: mat.m2-define-palette(mat.$m2-red-palette); - -$custom-typography: mat.m2-define-typography-config( - $font-family: 'Roboto-Regular, Arial', -); - -$custom-theme-light: mat.m2-define-light-theme( - ( - color: ( - primary: $custom-theme-primary, - accent: $custom-theme-accent, - warn: $custom-theme-warn, - ), - typography: $custom-typography, - density: -1, - ) -); - -$custom-theme-dark: mat.m2-define-light-theme( - ( - color: ( - primary: $custom-theme-primary, - accent: $custom-theme-accent-dark, - warn: $custom-theme-warn, - ), - typography: $custom-typography, - density: -1, - ) -); +@use '../custom-theme/_theme-colors' as mat3theme; + +//@include mat.elevation-classes(); +//@include mat.app-background(); +// +//$dark-primary-text: rgba(black, 0.87); +//$light-primary-text: white; +// +//.nav-input { +// @include mat.input-density(-3); +//} +// +//.nav-form-field { +// @include mat.form-field-density(-2); +//} +// +//$mat-streampipes-primary: ( +// 50: #ffebee, +// 100: #ffcdd2, +// 200: #72e879, +// 300: #49e750, +// 400: #49e750, +// 500: sp.$sp-color-primary, +// 600: #06c12a, +// 700: #01a51d, +// 800: #00841b, +// 900: #005818, +// A100: #ff8a80, +// A200: #ff5252, +// A400: #ff1744, +// A700: #d50000, +// contrast: ( +// 50: $dark-primary-text, +// 100: $dark-primary-text, +// 200: $dark-primary-text, +// 300: $dark-primary-text, +// 400: $dark-primary-text, +// 500: white, +// 600: white, +// 700: white, +// 800: $light-primary-text, +// 900: $light-primary-text, +// A100: $dark-primary-text, +// A200: white, +// A400: white, +// A700: white, +// ), +//); +// +//$mat-streampipes-accent: ( +// 50: #ffebee, +// 100: #ffcdd2, +// 200: #4e3c93, +// 300: #2a0c9a, +// 400: #395481, +// 500: sp.$sp-color-accent, +// 600: #0303a3, +// 700: #01016a, +// 800: #000039, +// 900: #00002b, +// A100: #ff8a80, +// A200: #ff5252, +// A400: #ff1744, +// A700: #d50000, +// contrast: ( +// 50: $dark-primary-text, +// 100: $dark-primary-text, +// 200: $dark-primary-text, +// 300: $dark-primary-text, +// 400: $dark-primary-text, +// 500: white, +// 600: white, +// 700: white, +// 800: $light-primary-text, +// 900: $light-primary-text, +// A100: $dark-primary-text, +// A200: white, +// A400: white, +// A700: white, +// ), +//); +// +//$mat-streampipes-accent-dark: ( +// 50: #ffebee, +// 100: #ffcdd2, +// 200: #4e3c93, +// 300: #2a0c9a, +// 400: #395481, +// 500: sp.$sp-color-accent-dark, +// 600: #0303a3, +// 700: #01016a, +// 800: #000039, +// 900: #00002b, +// A100: #ff8a80, +// A200: #ff5252, +// A400: #ff1744, +// A700: #d50000, +// contrast: ( +// 50: $dark-primary-text, +// 100: $dark-primary-text, +// 200: $dark-primary-text, +// 300: $dark-primary-text, +// 400: $dark-primary-text, +// 500: white, +// 600: white, +// 700: white, +// 800: $light-primary-text, +// 900: $light-primary-text, +// A100: $dark-primary-text, +// A200: white, +// A400: white, +// A700: white, +// ), +//); +// +//$custom-theme-primary: mat.m2-define-palette($mat-streampipes-primary); +//$custom-theme-accent-dark: mat.m2-define-palette($mat-streampipes-accent-dark); +//$custom-theme-accent: mat.m2-define-palette($mat-streampipes-accent); +//$custom-theme-warn: mat.m2-define-palette(mat.$m2-red-palette); +// +//$custom-typography: mat.m2-define-typography-config( +// $font-family: 'Roboto-Regular, Arial', +//); +// +//$custom-theme-light: mat.m2-define-light-theme( +// ( +// color: ( +// primary: $custom-theme-primary, +// accent: $custom-theme-accent, +// warn: $custom-theme-warn, +// ), +// typography: $custom-typography, +// density: -1, +// ) +//); +// +//$custom-theme-dark: mat.m2-define-light-theme( +// ( +// color: ( +// primary: $custom-theme-primary, +// accent: $custom-theme-accent-dark, +// warn: $custom-theme-warn, +// ), +// typography: $custom-typography, +// density: -1, +// ) +//); html { color-scheme: light; + @include mat.theme( ( - color: mat3theme.$primary-palette, + color: ( + theme-type: light, + primary: mat3theme.$primary-palette, + ), + density: -2, ), - $overrides: () + $overrides: ( + surface: #ffffff, + surface-variant: #eeeeee, + on-surface-variant: #434343, + primary: sp.$sp-color-accent, + on-primary: #ccc + ) ); -} - -$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: 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; -} - -@include mat.all-component-themes($custom-theme-light); -.dark-mode { - @include mat.all-component-colors($custom-theme-dark); + --mat-sys-body-medium-size: 10pt; - .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; - } + @include mat.form-field-overrides( + ( + container-height: 40px, + outlined-container-shape: 2px, + + outlined-outline-color: var(--mat-sys-surface-container-highest), + outlined-hover-outline-color: + color-mix(in srgb, var(--mat-sys-outline) 85%, #000 0%), + outlined-focus-outline-color: var(--mat-sys-primary), + label-text-color: var(--mat-sys-on-surface-variant), + outlined-caret-color: var(--mat-sys-primary), + input-text-color: var(--mat-sys-on-surface), + input-text-placeholder-color: + color-mix(in srgb, var(--mat-sys-on-surface) 60%, transparent), + ) + ); - .mat-toolbar.mat-primary { - color: #121212; - } + @include mat.button-overrides( + ( + filled-container-shape: 8px, + filled-container-color: var(--mat-sys-primary), + outlined-outline-color: var(--mat-sys-outline), + outlined-label-text-color: var(--mat-sys-on-surface), + label-text-weight: 400, + filled-label-text-tracking: -0.01em, + outlined-label-text-tracking: -0.01em, + text-label-text-tracking: -0.01em, + filled-hover-state-layer-opacity: 0.2, + ) + ); - .mat-tooltip.tooltip { - background-color: rgba(255, 255, 255, 0.87); - font-size: 12px; + .btn-secondary { + @include mat.button-overrides( + ( + filled-container-color: #f3f3f3, + filled-label-text-color: var(--mat-sys-primary), + text-hover-state-layer-opacity: 1, + label-text-weight: 400, + ) + ); } } -.light-mode { - @include mat.all-component-colors($custom-theme-light); - - .small-form-field-density { - @include mat.form-field-density(-3); - } - - .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; - } - - .mdc-text-field--filled:not(.mdc-text-field--disabled) { - background: var(--color-bg-0); - border: 1px solid var(--color-bg-3); - } - - .mdc-text-field--filled:not(.mdc-text-field--disabled) - .mdc-line-ripple::before { - border-bottom-color: var(--color-bg-3); - } - - .mat-mdc-form-field-focus-overlay { - background: var(--color-bg-3); - } - - .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper { - transform: none; - } - - .form-field-small { - .mdc-list-item__primary-text { - font-size: 14px; - } - } - - .form-field-small-min-width { - min-width: 130px; - - .mdc-list-item__primary-text { - font-size: 14px; - } - } -} +//$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: 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; +//} +// +//@include mat.all-component-themes($custom-theme-light); +// +//.dark-mode { +// @include mat.all-component-colors($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; +// } +//} +// +//.light-mode { +// //@include mat.all-component-colors($custom-theme-light); +// +// .small-form-field-density { +// @include mat.form-field-density(-3); +// } +// +// .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; +// } +// +// .mdc-text-field--filled:not(.mdc-text-field--disabled) { +// background: var(--color-bg-0); +// border: 1px solid var(--color-bg-3); +// } +// +// .mdc-text-field--filled:not(.mdc-text-field--disabled) +// .mdc-line-ripple::before { +// border-bottom-color: var(--color-bg-3); +// } +// +// .mat-mdc-form-field-focus-overlay { +// background: var(--color-bg-3); +// } +// +// .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper { +// transform: none; +// } +// +// .form-field-small { +// .mdc-list-item__primary-text { +// font-size: 14px; +// } +// } +// +// .form-field-small-min-width { +// min-width: 130px; +// +// .mdc-list-item__primary-text { +// font-size: 14px; +// } +// } +//}
