From cd3a06269c3922b12d714ab2367b5430ee07aefa Mon Sep 17 00:00:00 2001 From: richa Date: Thu, 29 Sep 2022 14:03:48 +0200 Subject: [PATCH] Featured carousel (#5585) * Created featured carousel * Created dummy data for Featured chart * Added style * Added toggle button * Added slider width dynamically * Fixed review comments * Removed not used code * Added link to Carousel slides * Created featured carousel * Created dummy data for Featured chart * Added style * Added toggle button * Added slider width dynamically * Fixed review comments * Removed not used code * Added link to Carousel slides * Merged master * Added featured annotation * Added auto scroll on page load * Fixed filtering of featured charts data * Removed duplicate keys --- assets/styles/themes/_dark.scss | 207 +++ assets/styles/themes/_light.scss | 536 ++++++ pages/c/_cluster/apps/charts/index.vue | 661 +++++++ pages/c/_cluster/apps/charts/install.vue | 1633 ++++++++++++++++++ shell/assets/images/featured.jpg | Bin 0 -> 17417 bytes shell/assets/images/featured/img1.jpg | Bin 0 -> 2724 bytes shell/assets/styles/themes/_dark.scss | 3 + shell/assets/styles/themes/_light.scss | 3 + shell/components/Carousel.vue | 291 ++++ shell/config/labels-annotations.js | 2 +- shell/pages/c/_cluster/apps/charts/index.vue | 42 +- shell/store/prefs.js | 1 + store/prefs.js | 485 ++++++ 13 files changed, 3862 insertions(+), 2 deletions(-) create mode 100644 assets/styles/themes/_dark.scss create mode 100644 assets/styles/themes/_light.scss create mode 100644 pages/c/_cluster/apps/charts/index.vue create mode 100644 pages/c/_cluster/apps/charts/install.vue create mode 100644 shell/assets/images/featured.jpg create mode 100644 shell/assets/images/featured/img1.jpg create mode 100644 shell/components/Carousel.vue create mode 100644 store/prefs.js diff --git a/assets/styles/themes/_dark.scss b/assets/styles/themes/_dark.scss new file mode 100644 index 0000000000..d8d45c35c8 --- /dev/null +++ b/assets/styles/themes/_dark.scss @@ -0,0 +1,207 @@ +.theme-dark { + // Local variables for reused colors + + //dark sidebar + $darkest: #141419; + + //dark body + $darker: #1b1c21; + + //dark inputs + $dark: #27292e; + + //dark borders and button + $medium: #4a4b52; + + // dark disabled, + $light: #6c6c76; + + //dark secondary + $lighter: #b6b6c2; + + // dark main text + $lightest: #ffffff; + + $secondary: $lighter; + $disabled: $light; + + //Contrast colors + $contrasted-dark: $lightest !default; + $contrasted-light: $darkest !default; + + + --default : #{$dark}; + --default-text : #{$light}; + --default-hover-bg : #{darken($dark, 10%)}; + --default-hover-text : #{saturate($lightest, 20%)}; + --default-active-bg : #{darken($dark, 25%)}; + --default-active-text : #{contrast-color(darken($dark, 25%))}; + --default-border : #($dark); + --default-banner-bg : #{rgba($dark, 0.15)}; + --default-light-bg : #{rgba($dark, 0.05)}; + --slider-light-bg : #{rgba($darker, 1)}; + --slider-light-bg-right : #{rgba($darker, 0)}; + + --muted : #{$disabled}; + + --body-bg : #{$darker}; + --body-text : #{$lightest}; + --scrollbar-thumb : #{$medium}; + --scrollbar-thumb-dropdown : #{$medium}; + + --header-bg : #{$darker}; + --header-border : #{$medium}; + --header-btn-bg : transparent; + --header-btn-text : #{$lightest}; + --header-input-text : #{$lightest}; + + // Header, Footer and Consent banner defaults + --banner-text-color : #{$lightest}; + + --nav-bg : #{$darkest}; + --nav-active : var(--primary-active-bg); + --nav-border : #{$medium}; + --nav-hover : var(--primary); + --nav-expander-hover : var(--primary-banner-bg); + + --disabled-bg : #{darken($disabled, 10%)}; + --disabled-text : #{$secondary}; + --box-bg : #{$darkest}; + --subtle-border : #{$darkest}; + --border : #{$medium}; + + --topmenu-bg : #{$darkest}; + --topmenu-text : #{$lightest}; + --topmost-border : #{$medium}; + --topmost-shadow : #{lighten($darkest, 5%)}; + --topmost-light-hover : #{$medium}; + + --accent-btn : var(--primary-banner-bg); + --accent-btn-hover : var(--primary); + --accent-btn-hover-text : #{$lightest}; + + --modal-bg : #{$dark}; + --modal-border : #{$medium}; + --overlay-bg : #{rgba($darkest, 0.75)}; + --shadow : #{rgba($darkest, 0.9)}; + + --checkbox-tick : #{$lightest}; + --checkbox-border : #{$medium}; + --checkbox-tick-disabled : #{lighten($disabled, 50%)}; + --checkbox-disabled-bg : #{$disabled}; + --checkbox-ticked-bg : var(--primary); + + --dropdown-bg : #{mix($medium, $dark, 10%)}; + --dropdown-border : #{$light}; + --dropdown-divider : #{$light}; + --dropdown-text : #{$link}; + --dropdown-active-text : #{$lightest}; + --dropdown-active-bg : #{$selected}; + --dropdown-hover-text : #{$lightest}; + --dropdown-hover-bg : #{$link}; + --dropdown-disabled-bg : #{$disabled}; + --dropdown-disabled-text : #{$disabled}; + + --input-text : #{$lightest}; + --input-label : #{$lighter}; + --input-placeholder : #{$disabled}; + --input-border : var(--border); + --input-bg : var(--body-bg); + --input-bg-accent : #{darken($dark, 3%)}; + --input-hover-bg : var(--box-bg); + --input-focus-bg : var(--box-bg); + --input-disabled-text : #{darken($lightest, 50%)}; + --input-disabled-label : #{darken($lighter, 30%)}; + --input-disabled-bg : #{darken($disabled, 30%)}; + --input-disabled-border : #{darken($medium, 30%)}; + --input-disabled-placeholder : #{darken($disabled, 10%)}; + --input-addon-bg : #{$darker}; + + --progress-bg : #{$medium}; + --progress-divider : #{$lightest}; + + --sortable-table-bg : #{lighten($darkest, 10%)}; + --sortable-table-row-bg : #{$darker};; + --sortable-table-header-bg : #{$darkest}; + --sortable-table-top-divider : var(--border); + --sortable-table-hover-bg : #{$darkest}; + --sortable-table-selected-bg : var(--primary-light-bg); + --sortable-table-group-label : #{$lighter}; + + --tag-primary : #{$lightest}; + --tag-bg : #{$medium}; + + --popover-bg : var(--body-bg); + --popover-border : var(--border); + --popover-text : var(--body-text); + + --tooltip-bg : #{$medium}; + --tooltip-border : var(--tag-primary); + --tooltip-text : var(--body-text); + --tooltip-text-warning : var(--body-text); + + + --tabbed-border : #{$medium}; + --tabbed-sidebar-bg : #{$darkest}; + --tabbed-container-bg : #{mix($medium, $dark, 20%)}; + + --yaml-editor-bg : #{$darkest}; + + --diff-border : var(--border); + --diff-header-bg : var(--nav-bg); + --diff-header-border : var(--border); + --diff-header : #{rgba($darkest, 0.3)}; + --diff-linenum-bg : var(--nav-bg); + --diff-linenum : var(--muted); + --diff-linenum-border : var(--border); + --diff-line-ins-bg : $success; + --diff-line-del-bg : #{rgba($error, 0.75)}; + --diff-del-bg : #{rgba($error, 0.3)}; + --diff-del-border : #{$error}; + --diff-ins-bg : #{rgba($success, 0.3)}; + --diff-ins-border : #{rgba($success, 0.5)}; + --diff-chg-ins : #{rgba($success, 0.25)}; + --diff-chg-del : #{rgba($warning, 0.5)}; + --diff-chg-dela : #{rgba($warning, 1)}; + --diff-empty-placeholder : #{$darker}; + + + --wm-tabs-bg : #{mix($medium, $dark, 10%)}; + --wm-tab-bg : #{$darkest}; + --wm-closer-hover-bg : #{$medium}; + --wm-tab-active-bg : #{$darker}; + --wm-title-bg : #{$darkest}; + --wm-title-border : #{$medium}; + --wm-body-bg : #{$darkest}; + --wm-border : black; + + --glance-divider : #{$medium}; + + --resource-gauge-back-circle : 74, 75, 82, 0.5; + + --simple-box-bg : #{$darker}; + --simple-box-border : #{$medium}; + --simple-box-divider : #{$medium}; + --simple-box-shadow : none; + + --terminal-bg : var(--wm-body-bg); + --terminal-cursor : var(--warning); + --terminal-selection : #{$selected}; + --terminal-text : var(--body-text); + + --logs-bg : var(--wm-body-bg); + --logs-highlight : var(--wm-body-bg); + --logs-highlight-bg : var(--warning); + --logs-text : var(--body-text); + + --gauge-divider : rgba(255, 255, 255, 0.3); + --gauge-success-primary : 75, 95, 64; + --gauge-success-secondary : 150, 189, 127; + --gauge-warning-primary : 218, 195, 66; + --gauge-warning-secondary : 109, 98, 33; + --gauge-error-primary : 239, 90, 83; + --gauge-error-secondary : 120, 45, 42; + + --product-icon : #{$lighter}; + --product-icon-active : #{$lightest}; +} diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss new file mode 100644 index 0000000000..d4c0f37679 --- /dev/null +++ b/assets/styles/themes/_light.scss @@ -0,0 +1,536 @@ +// Local variables for reused colors +//light main text +$darkest : #141419; + +//light secondary +$darker : #6C6C76; + +//light disabled +$dark : #B6B6C2; + +//light border and buttons +$medium : #DCDEE7; + +//light inputs +$light : #EEEFF4; + +//light sidebar and box +$lighter : #F4F5FA; + +//light body bg +$lightest : #FFFFFF; + +//color for items that are not enabled +$disabled : $medium; + +$primary : #3D98D3; +$secondary : $darker; +$link : #3D98D3; + +// Status colors +$success : #5D995D; +$warning : #DAC342; +$error : #F64747; +$info : #3D98D3; + +$contrasted-dark: $darkest !default; +$contrasted-light: $lightest !default; + +// Text selection color for terminal window (we don't want this to change with the primary color) +// The terminal alway uses a light background, so okay to use a fixed color +$selected: rgba(#3D98D3, .5); + +BODY, .theme-light { + + --primary : #{$primary}; + --primary-text : #{contrast-color($primary)}; + --primary-hover-bg : #{darken($primary, 10%)}; + --primary-hover-text : #{saturate($lightest, 20%)}; + --primary-active-bg : #{darken($primary, 25%)}; + --primary-active-text : #{contrast-color(darken($primary, 25%))}; + --primary-border : #{$primary}; + --primary-banner-bg : #{rgba($primary, 0.15)}; + --primary-light-bg : #{rgba($primary, 0.05)}; + + + .text-primary { + color: var(--primary) !important; + } + + .bg-primary { + background-color: var(--primary); + color: var(--primary-text); + + &.btn:hover { + color: var(--primary-hover-text); + background: var(--primary-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--primary-active-text); + background: var(--primary-active-bg); + } + } + + --link : #{$link}; + --link-text : #{contrast-color($link)}; + --link-hover-bg : #{darken($link, 10%)}; + --link-hover-text : #{saturate($lightest, 20%)}; + --link-active-bg : #{darken($link, 25%)}; + --link-active-text : #{contrast-color(darken($link, 25%))}; + --link-border : #{$link}; + --link-banner-bg : #{rgba($link, 0.15)}; + --link-light-bg : #{rgba($link, 0.05)}; + + + + .text-link { + color: var(--link) !important; + } + + .bg-link { + background-color: var(--link); + color: var(--link-text); + + &.btn:hover { + color: var(--link-hover-text); + background: var(--link-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--link-active-text); + background: var(--link-active-bg); + } + } + + --default : #{$light}; + --default-text : #{contrast-color($light)}; + --default-hover-bg : #{darken($light, 10%)}; + --default-hover-text : #{saturate($lightest, 20%)}; + --default-active-bg : #{darken($light, 25%)}; + --default-active-text : #{contrast-color(darken($light, 25%))}; + --default-border : #{$light}; + --default-banner-bg : #{rgba($light, 0.15)}; + --default-light-bg : #{rgba($light, 0.05)}; + --slider-light-bg : #{rgba($lightest, 1)}; + --slider-light-bg-right : #{rgba($lightest, 0)}; + + + .text-default { + color: var(--default) !important; + } + + .bg-default { + background-color: var(--default); + color: var(--default-text); + + &.btn:hover { + color: var(--default-hover-text); + background: var(--default-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--default-active-text); + background: var(--default-active-bg); + } + } + + --muted : #{$dark}; + + .text-muted { + color: var(--muted) !important; + } + + --darker : #{$darker}; + --darker-text : #{contrast-color($darker)}; + --darker-hover-bg : #{darken($darker, 10%)}; + --darker-hover-text : #{saturate($lightest, 20%)}; + --darker-active-bg : #{darken($darker, 25%)}; + --darker-active-text : #{contrast-color(darken($darker, 25%))}; + --darker-border : #{$darker}; + --darker-banner-bg : #{rgba($darker, 0.15)}; + --darker-light-bg : #{rgba($darker, 0.05)}; + + .text-darker { + color: var(--default) !important; + } + + .bg-darker { + background-color: var(--darker); + color: var(--darker-text); + + &.btn:hover { + color: var(--darker-hover-text); + background: var(--darker-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--darker-active-text); + background: var(--darker-active-bg); + } + } + + + + --success : #{$success}; + --success-text : #{contrast-color($success)}; + --success-hover-bg : #{darken($success, 10%)}; + --success-hover-text : #{saturate($lightest, 20%)}; + --success-active-bg : #{darken($success, 25%)}; + --success-active-text : #{contrast-color(darken($success, 25%))}; + --success-border : #{$success}; + --success-banner-bg : #{rgba($success, 0.15)}; + --success-light-bg : #{rgba($success, 0.05)}; + + .text-success { + color: var(--success) !important; + } + + .bg-success { + background-color: var(--success); + color: var(--success-text); + + &.btn:hover { + color: var(--success-hover-text); + background: var(--success-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--success-active-text); + background: var(--success-active-bg); + } + } + + + --info : #{$info}; + --info-text : #{contrast-color($info)}; + --info-hover-bg : #{darken($info, 10%)}; + --info-hover-text : #{saturate($lightest, 20%)}; + --info-active-bg : #{darken($info, 25%)}; + --info-active-text : #{contrast-color(darken($info, 25%))}; + --info-border : #{$info}; + --info-banner-bg : #{rgba($info, 0.15)}; + --info-light-bg : #{rgba($info, 0.05)}; + + .text-info { + color: var(--info) !important; + } + + .bg-info { + background-color: var(--info); + color: var(--info-text); + + &.btn:hover { + color: var(--info-hover-text); + background: var(--info-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--info-active-text); + background: var(--info-active-bg); + } + } + + + --warning : #{$warning}; + --warning-text : #{contrast-color($warning)}; + --warning-hover-bg : #{darken($warning, 10%)}; + --warning-hover-text : #{saturate($lightest, 20%)}; + --warning-active-bg : #{darken($warning, 25%)}; + --warning-active-text : #{contrast-color(darken($warning, 25%))}; + --warning-border : #{$warning}; + --warning-banner-bg : #{rgba($warning, 0.15)}; + --warning-light-bg : #{rgba($warning, 0.05)}; + + .text-warning { + color: var(--error) !important; + } + + .bg-warning { + background-color: var(--warning); + color: var(--warning-text); + + &.btn:hover { + color: var(--warning-hover-text); + background: var(--warning-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--warning-active-text); + background: var(--warning-active-bg); + } + } + + + --error : #{$error}; + --error-text : #{contrast-color($error)}; + --error-hover-bg : #{darken($error, 10%)}; + --error-hover-text : #{saturate($lightest, 20%)}; + --error-active-bg : #{darken($error, 25%)}; + --error-active-text : #{contrast-color(darken($error, 25%))}; + --error-border : #{$error}; + --error-banner-bg : #{rgba($error, 0.15)}; + --error-light-bg : #{rgba($error, 0.05)}; + + + .text-error { + color: var(--error) !important; + } + + .bg-error { + background-color: var(--error); + color: var(--error-text); + + &.btn:hover { + color: var(--error-hover-text); + background: var(--error-hover-bg); + transition: all 0.3s ease; + } + + &.btn:active { + color: var(--error-active-text); + background: var(--error-active-bg); + } + } + + + --body-bg : #{$lightest}; + --body-text : #{$darkest}; + --scrollbar-thumb : #{$dark}; + --scrollbar-thumb-dropdown : #{$lighter}; + --scrollbar-track : transparent; + + // Header, Footer and Consent banner defaults + --banner-text-color : #{$darkest}; + + --header-bg : #{$lightest}; + --header-btn-bg : transparent; + --header-btn-text : #{$darkest}; + --header-input-text : #{$darkest}; + --header-height : 55px; + --header-border : #{$medium}; + --header-border-size : 1px; + --nav-width : 230px; + --nav-bg : #{$lightest}; + --nav-active : #{$light}; + --nav-hover : #{$medium}; + --nav-expander-hover : #{darken($medium, 10%)}; + --nav-border : #{$medium}; + --nav-border-size : 1px; + + --footer-bg : transparent; + --footer-height : 0px; + + --topmenu-bg : #{$lightest}; + --topmenu-text : #{$darkest}; + --topmost-border : #{$medium}; + --topmost-shadow : #{lighten($lightest, 10%)}; + --topmost-light-hover : #{$light}; + + --disabled-bg : #{$disabled}; + --disabled-text : #{$secondary}; + --box-bg : #{$lighter}; + --subtle-border : #{$medium}; + --border : #{$medium}; + --border-width : 1px; + --border-radius : 4px; + --outline : var(--primary); + --outline-width : 1px; + + --accent-btn : var(--primary-banner-bg); + --accent-btn-hover : var(--primary); + --accent-btn-hover-text : #{$lightest}; + + --modal-bg : #{$lightest}; + --modal-border : #{$dark}; + --overlay-bg : #{rgba($lighter, 0.75)}; + --shadow : #{rgba($medium, 0.85)}; + + --checkbox-tick : #{$lightest}; + --checkbox-border : #{$medium}; + --checkbox-tick-disabled : #{darken($disabled, 40%)}; + --checkbox-disabled-bg : #{$disabled}; + --checkbox-ticked-bg : #{$link}; + + --dropdown-bg : #{$lightest}; + --dropdown-border : #{$medium}; + --dropdown-divider : #{$medium}; + --dropdown-text : #{$link}; + --dropdown-active-text : #{$lightest}; + --dropdown-active-bg : #{$dark}; + --dropdown-hover-text : #{$lightest}; + --dropdown-hover-bg : var(--primary); + --dropdown-disabled-text : var(--muted); + --dropdown-disabled-bg : #{$disabled}; + + --card-badge-text : #ffffff; + + // UNUSED? + --card-header : var(--primary-banner-bg); + + --input-text : #{$darkest}; + --input-label : #{$secondary}; + --input-placeholder : #{darken($disabled, 10%)}; + --input-border : var(--border); + --input-bg : var(--body-bg); + --input-bg-accent : #{darken($light, 2%)}; + --input-hover-bg : var(--box-bg); + --input-focus-bg : var(--box-bg); + --input-disabled-text : #{darken($disabled, 60%)}; + --input-disabled-label : #{darken($disabled, 40%)}; + --input-disabled-bg : #{$disabled}; + --input-disabled-border : #{darken($medium, 10%)}; + --input-disabled-placeholder : #{darken($medium, 15%)}; + --input-addon-bg : #{$darker}; + --input-hover-border : #{darken($medium, 25%)}; + + --progress-bg : #{$medium}; + --progress-divider : #{$medium}; + + --sortable-table-bg : #{darken($lightest, 5%)}; + --sortable-table-row-bg : #{$lightest}; + --sortable-table-header-bg : #{$lighter}; + --sortable-table-top-divider : var(--border); + --sortable-table-body-divider : #{$medium}; + + --sortable-table-hover-bg : #{$lighter}; + //--sortable-table-selected-bg : #{rgba($primary, 0.02)}; + + --sortable-table-selected-bg : var(--primary-light-bg); + --sortable-table-group-label : #{$secondary}; + + --tag-primary : #{$darkest}; + --tag-bg : #{$medium}; + + --popover-bg : var(--body-bg); + --popover-border : var(--border); + --popover-text : var(--body-text); + --popover-border-radius : var(--border-radius); + --tooltip-bg : #{$medium}; + --tooltip-border : var(--tag-primary); + --tooltip-text : var(--tag-primary); + --tooltip-bg-warning : #{rgba($warning, 0.8)}; + --tooltip-text-warning : var(--body-text); + + --tabbed-border : #{$medium}; + --tabbed-sidebar-bg : #{$lighter}; + --tabbed-container-bg : #{mix($light, $lighter, 15%)}; + + --yaml-editor-bg : #{$lighter}; + + --diff-border : var(--border); + --diff-header-bg : var(--nav-bg); + --diff-header-border : var(--border); + --diff-header : #{rgba($darkest, 0.3)}; + --diff-linenum-bg : var(--nav-bg); + --diff-linenum : var(--muted); + --diff-linenum-border : var(--border); + --diff-line-ins-bg : $success; + --diff-line-del-bg : #{rgba($error, 0.75)}; + --diff-del-bg : #{rgba($error, 0.3)}; + --diff-del-border : #{$error}; + --diff-ins-bg : #{rgba($success, 0.3)}; + --diff-ins-border : #{rgba($success, 0.5)}; + --diff-chg-ins : #{rgba($success, 0.25)}; + --diff-chg-del : #{rgba($warning, 0.5)}; + --diff-empty-placeholder : #{$lightest}; + + --wm-tabs-bg : #{$medium}; + --wm-tab-bg : #{$light}; + --wm-closer-hover-bg : #{$lighter}; + --wm-tab-active-bg : #{$lighter}; + --wm-title-bg : #{$lightest}; + --wm-title-border : #{$medium}; + --wm-body-bg : #{$lighter}; + --wm-border : var(--border); + --wm-tab-height : 29px; + + --glance-bg-rgb : 61, 152, 211; + --glance-divider : #{$medium}; + + --resource-gauge-back-circle : 255, 255, 255, 0.15; + + --simple-box-bg : #{$lightest}; + --simple-box-border : #{$medium}; + --simple-box-divider : #{$medium}; + --simple-box-shadow : none; + + --terminal-bg : var(--body-bg); + --terminal-cursor : var(--warning); + --terminal-selection : #{$selected}; + --terminal-text : var(--body-text); + + --logs-bg : var(--wm-body-bg); + --logs-highlight : var(--wm-body-bg); + --logs-highlight-bg : var(--warning); + --logs-text : var(--body-text); + + --gauge-divider : #{$lightest}; + --gauge-zero : #{$medium}; + --gauge-success-primary : 150, 189, 127; + --gauge-success-secondary : 190, 211, 172; + --gauge-warning-primary : 238, 226, 176; + --gauge-warning-secondary : 218, 195, 66; + --gauge-error-primary : 249, 186, 171; + --gauge-error-secondary : 239, 90, 83; + + --sizzle-0 : 180, 210, 30; + --sizzle-1 : 225, 45, 74; + --sizzle-2 : 212, 66, 148; + --sizzle-3 : 0, 169, 217; + --sizzle-4 : 244, 136, 68; + --sizzle-5 : 0, 147, 128; + --sizzle-6 : 136, 81, 165; + --sizzle-7 : 45, 47, 149; + --sizzle-8 : 255, 235, 0; + + --sizzle-success : #{red($success)}, #{green($success)}, #{blue($success)}; + --sizzle-info : #{red($info)}, #{green($info)}, #{blue($info)}; + --sizzle-warning : #{red($warning)}, #{green($warning)}, #{blue($warning)}; + --sizzle-error : #{red($error)}, #{green($error)}, #{blue($error)}; + --sizzle-unknown : #{red($disabled)},#{green($disabled)},#{blue($disabled)}; + + $rancher : $primary; + $partner : #FEA424; + $other : #614EA2; + + --app-rancher-accent : #{$rancher}; + --app-rancher-accent-text : #ffffff; + + --app-partner-accent : #{$partner}; + --app-partner-accent-text : black; + + --app-color1-accent : rgba(var(--sizzle-1), 1); + --app-color1-accent-text : white; + + --app-color2-accent : rgba(var(--sizzle-2), 1); + --app-color2-accent-text : white; + + --app-color3-accent : rgba(var(--sizzle-3), 1); + --app-color3-accent-text : white; + + --app-color4-accent : rgba(var(--sizzle-4), 1); + --app-color4-accent-text : white; + + --app-color5-accent : rgba(var(--sizzle-5), 1); + --app-color5-accent-text : white; + + --app-color6-accent : rgba(var(--sizzle-6), 1); + --app-color6-accent-text : white; + + --app-color7-accent : rgba(var(--sizzle-7), 1); + --app-color7-accent-text : white; + + --app-color8-accent : rgba(var(--sizzle-8), 1); + --app-color8-accent-text : white; + + --product-icon : #{$darker}; + --product-icon-active : #{$darkest}; +} diff --git a/pages/c/_cluster/apps/charts/index.vue b/pages/c/_cluster/apps/charts/index.vue new file mode 100644 index 0000000000..bd49597565 --- /dev/null +++ b/pages/c/_cluster/apps/charts/index.vue @@ -0,0 +1,661 @@ + + + + + diff --git a/pages/c/_cluster/apps/charts/install.vue b/pages/c/_cluster/apps/charts/install.vue new file mode 100644 index 0000000000..5a854fd0a8 --- /dev/null +++ b/pages/c/_cluster/apps/charts/install.vue @@ -0,0 +1,1633 @@ + + + + + diff --git a/shell/assets/images/featured.jpg b/shell/assets/images/featured.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bfdeb898bf76e744b255e7146ad5fe0bdae6a40e GIT binary patch literal 17417 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 literal 0 HcmV?d00001 diff --git a/shell/assets/images/featured/img1.jpg b/shell/assets/images/featured/img1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6e3b9a97356097e8e2cc916e43c9b312748c0b8e GIT binary patch literal 2724 zcmb7Edpy&7AOA9!MA?SMl4e3B`)y;`a^G?(bJYCuEjHUmJ>k08WKBqACF2@(lW9APv}U<>(>JW2$S z2t)`tyU9gS>^NA0i-tFH1upop3ypXjm*avDp)iR|5gm@@`Xq_r?~?q3*-3G1DhKc8 zigT9JRN5Ad~sOL-~Bw2&QNgB`o-By?;xb7`#~oLo7H^C>66|Ww?b3ETYlH zaFj$S4i*aIXXY3fE0hQmV}&Bs$jCTm6q_qhIi>(iCe2rnD2WoVVPA#|UP(dVayc}z zC!OTw;6?SIlN?E;Rdi1WCpvYNBiX@`VrTC`^qRpkgls7v7D#5WoUd4qS+OcL@I}hZ z3|P$F1arK^LOyP)XBv0*S{!HPo5pfxuf=IrETk+3Qf>B|P0zTL@=^VMQLggvMfgkW2BC%r>L@h?N=?xWij~(~9igW7^#K4H+UlBGD%W4# z%0|=?8b|;%)qxfgp`|^IQF&3C=IA_$krv4#C@O(`uG65)&_1}DvNq=|KJ9kDC(Gip z_{Us3w)O%PP*(>CEiHA#OhPr3x;Y8q5tLSrHb}_1d^=j>tS6cEqvAf$Lnuo_AyB{# zj6j(5LitWBj~?%|BN>@B0?cdDh6w4U_f%f9e4sjI-M!yp!(To%Zi}eWEl!qR_D~4wCG3C%Nr~)-=~PqK56|6-6N> z^(H3%IV=U>OoJ1$J`%vb z+A_4M^8H;+M-iy9eXqH%Dw2ONZNs0CV~^_GoMidY zVE>kP^^;dF9ztrpyDmrm3S4tcicv;>agMok4p0YU!hGhsvpwyEmR$^YPlY*uA_UTXz7OinT99ByuK;o*`C22)2mEmNtWzx#QZ!V>;b-q&*SK%XL>5G|tuEX#dj?HEB%3njhy}Dj{y7?~s57qT?chYE8?U3|}>4Bl&9>ZLzRYkbz zyh}CCon=w^WfAfDagQun`^_Kn-qkPY^OHXdUVpe$KGAWtVC{IX5iP&Mq|%EQ)Nki( z6+PsQa@JTZtf^qyKet9hl@GdW29`W|mlqLpoW1*1l|+wx$g_+|x^wsm&1A$#reU+L zKC-+ufF~LBvirRmnwwtRvHae#Th#4WO-A>(N7IaKP+F{K^^16vYv__l(`?JeUF$;i zwtEn02Y*Q-e`r6&Jh9z+mu&{-pnJ#tXULPnsf8D^T}&74ewB*@;6X0O>{UWX-g9=U z$LL+td#*7~I(;p-Tr&S#8i=YjO=dp;1RxwvFlh2Dz_6TtdSbq#@n!RI{xX@2Sx>ZNmuHP5_ad1d@Gkfzayx8 zzKxMp{@yd47wFjvP*%KY2(IN@ZEq@f`<#Aogk-Sc*u$V4{;j+ZS+Z3RhI%9Vm-M{s zNLxy=6xcFC(ad5K1(41O$*VBEe!9(mpk#Dedt`eeB~T6?Rj+L=>;qs0qt)g9(-Q0U z7O?eU74=+7yU3s}`#`eUo;T!60T#;_$BM>Bv6-!LEg`4Z$&5=Xu*}dLPf6Pwr&WG# z?eu(2(;m{rCNNj|cB;KXbB+ZZVR##MUGEK(O=L?p(gtY*{VOSh&ea75VJMUk6`1Y? z%KcK6V*vn^fb4S-Sw(ZnJ~wyJf#aZ0v79Q>Ps~rdl6ZX3TlXsO0 zkkFd&VP$1Q-nk2X3CVo$py|(m1=i1^~IUlzn1H z#4mN~TG?r%XWxivskg^n?zsAU2Li{I!Pfoehn^&#OexJeV4tEd&Cbi|28hLbaBr}# z+CR5kZyiQ>H@y#?q%Lv?q)D;}UH^ gbqiw)Y9b`JK6f1eCGA^2;V_6xlK>3byD9Gd0SLM$xBvhE literal 0 HcmV?d00001 diff --git a/shell/assets/styles/themes/_dark.scss b/shell/assets/styles/themes/_dark.scss index 7ee8c14f6a..d8d45c35c8 100644 --- a/shell/assets/styles/themes/_dark.scss +++ b/shell/assets/styles/themes/_dark.scss @@ -39,6 +39,8 @@ --default-border : #($dark); --default-banner-bg : #{rgba($dark, 0.15)}; --default-light-bg : #{rgba($dark, 0.05)}; + --slider-light-bg : #{rgba($darker, 1)}; + --slider-light-bg-right : #{rgba($darker, 0)}; --muted : #{$disabled}; @@ -160,6 +162,7 @@ --diff-ins-border : #{rgba($success, 0.5)}; --diff-chg-ins : #{rgba($success, 0.25)}; --diff-chg-del : #{rgba($warning, 0.5)}; + --diff-chg-dela : #{rgba($warning, 1)}; --diff-empty-placeholder : #{$darker}; diff --git a/shell/assets/styles/themes/_light.scss b/shell/assets/styles/themes/_light.scss index 507eee8bbb..d4c0f37679 100644 --- a/shell/assets/styles/themes/_light.scss +++ b/shell/assets/styles/themes/_light.scss @@ -82,6 +82,7 @@ BODY, .theme-light { --link-border : #{$link}; --link-banner-bg : #{rgba($link, 0.15)}; --link-light-bg : #{rgba($link, 0.05)}; + .text-link { @@ -113,6 +114,8 @@ BODY, .theme-light { --default-border : #{$light}; --default-banner-bg : #{rgba($light, 0.15)}; --default-light-bg : #{rgba($light, 0.05)}; + --slider-light-bg : #{rgba($lightest, 1)}; + --slider-light-bg-right : #{rgba($lightest, 0)}; .text-default { diff --git a/shell/components/Carousel.vue b/shell/components/Carousel.vue new file mode 100644 index 0000000000..143a222501 --- /dev/null +++ b/shell/components/Carousel.vue @@ -0,0 +1,291 @@ + + + + + diff --git a/shell/config/labels-annotations.js b/shell/config/labels-annotations.js index 8417b3f252..f0096c15ed 100644 --- a/shell/config/labels-annotations.js +++ b/shell/config/labels-annotations.js @@ -95,7 +95,7 @@ export const CATALOG = { DEPLOYED_OS: 'catalog.cattle.io/deploys-on-os', MIGRATED: 'apps.cattle.io/migrated', - MANAGED: 'catalog.cattle.io/managed' + MANAGED: 'catalog.cattle.io/managed', }; export const FLEET = { diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue index 667131de22..1e96f8567c 100644 --- a/shell/pages/c/_cluster/apps/charts/index.vue +++ b/shell/pages/c/_cluster/apps/charts/index.vue @@ -2,6 +2,8 @@ import AsyncButton from '@shell/components/AsyncButton'; import Loading from '@shell/components/Loading'; import { Banner } from '@components/Banner'; +import Carousel from '@shell/components/Carousel'; +import ButtonGroup from '@shell/components/ButtonGroup'; import SelectIconGrid from '@shell/components/SelectIconGrid'; import TypeDescription from '@shell/components/TypeDescription'; import { @@ -12,7 +14,7 @@ import { sortBy } from '@shell/utils/sort'; import { mapGetters } from 'vuex'; import { Checkbox } from '@components/Form/Checkbox'; import Select from '@shell/components/form/Select'; -import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE } from '@shell/store/prefs'; +import { mapPref, HIDE_REPOS, SHOW_PRE_RELEASE, SHOW_CHART_MODE } from '@shell/store/prefs'; import { removeObject, addObject, findBy } from '@shell/utils/array'; import { compatibleVersionsFor, filterAndArrangeCharts } from '@shell/store/catalog'; import { CATALOG } from '@shell/config/labels-annotations'; @@ -21,6 +23,8 @@ export default { components: { AsyncButton, Banner, + Carousel, + ButtonGroup, Loading, Checkbox, Select, @@ -48,6 +52,17 @@ export default { searchQuery: null, showDeprecated: null, showHidden: null, + chartMode: this.$store.getters['prefs/get'](SHOW_CHART_MODE), + chartOptions: [ + { + label: 'Browse', + value: 'browse', + }, + { + label: 'Featured', + value: 'featured' + } + ] }; }, @@ -154,6 +169,14 @@ export default { }); }, + getFeaturedCharts() { + const allCharts = (this.filteredCharts || []); + + const featuredCharts = allCharts.filter(value => value.featured).sort((a, b) => a.featured - b.featured); + + return featuredCharts.slice(0, 5); + }, + categories() { const map = {}; @@ -184,6 +207,10 @@ export default { return out; }, + showCarousel() { + return this.chartMode === 'featured' && this.getFeaturedCharts.length; + } + }, watch: { @@ -313,7 +340,20 @@ export default { {{ t('catalog.charts.header') }} +
+ +
+
+

Featured Charts

+ +