From cec81394c5bc25845076566b44faf082bc847ca5 Mon Sep 17 00:00:00 2001 From: "Andrey V.Kosteltsev" Date: Mon, 20 Jun 2022 14:52:43 +0300 Subject: image: rofs, rwfs sizes; WEBUI: IBS Theme --- .../conf/machine/include/sila-ast2500.inc | 1 + .../linux-aspeed/openbmc-flash-layout-32MB.dtsi | 6 +- .../webui/webui-vue/0006-IBS-Global-Styles.patch | 727 +++++++++++++++++++++ .../recipes-phosphor/webui/webui-vue_%.bbappend | 3 +- 4 files changed, 733 insertions(+), 4 deletions(-) create mode 100644 meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch diff --git a/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc b/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc index 4e1691a358..6cededa6e6 100644 --- a/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc +++ b/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc @@ -18,5 +18,6 @@ SERIAL_CONSOLES = "115200;ttyS3 115200;ttyS4" FLASH_SIZE = "32768" FLASH_ROFS_OFFSET = "5632" +FLASH_RWFS_OFFSET = "29696" IMAGE_FEATURES += "allow-root-login" diff --git a/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi b/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi index 8412e0ec17..874bfd4e3b 100644 --- a/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi +++ b/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi @@ -22,12 +22,12 @@ partitions { }; rofs@580000 { - reg = <0x580000 0x1680000>; + reg = <0x580000 0x1780000>; label = "rofs"; }; - rwfs@1c00000 { - reg = <0x1c00000 0x400000>; + rwfs@1d00000 { + reg = <0x1d00000 0x300000>; label = "rwfs"; }; }; diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch new file mode 100644 index 0000000000..6f6e7a3bd2 --- /dev/null +++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch @@ -0,0 +1,727 @@ +From e52a0e1b581906319ab126da568f8722ffd51ecd Mon Sep 17 00:00:00 2001 +From: "Andrey V.Kosteltsev" +Date: Mon, 20 Jun 2022 14:38:52 +0300 +Subject: [PATCH] IBS: Global Styles + +--- + src/assets/styles/bmc/custom/_alert.scss | 110 ++++++++--------- + src/assets/styles/bmc/custom/_base.scss | 44 ++++--- + src/assets/styles/bmc/custom/_buttons.scss | 130 +++++++++++++++++--- + src/assets/styles/bmc/custom/_card.scss | 24 +++- + src/assets/styles/bmc/custom/_dropdown.scss | 5 +- + src/assets/styles/bmc/custom/_forms.scss | 123 ++++++++++++++---- + src/assets/styles/bmc/custom/_tables.scss | 33 ++--- + 7 files changed, 328 insertions(+), 141 deletions(-) + +diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss +index 0e78ba64..d85e9127 100644 +--- a/src/assets/styles/bmc/custom/_alert.scss ++++ b/src/assets/styles/bmc/custom/_alert.scss +@@ -1,70 +1,70 @@ + .alert { +- display: flex; +- padding: $spacer; +- border-width: 0 0 0 3px; +- color: gray("800"); +- margin-bottom: $spacer; ++ display: flex; ++ padding: $spacer; ++ border-width: 0 0 0 3px; ++ color: gray("800"); ++ margin-bottom: $spacer; + +- &.small { +- padding: $spacer / 2; +- font-size: 1rem; +- } ++ &.small { ++ padding: $spacer / 2; ++ font-size: 1rem; ++ } + +- .close { +- font-weight: 300; +- opacity: 1; +- } ++ .close { ++ font-weight: 300; ++ opacity: 1; ++ } + +- .alert-icon { +- display: inline-flex; +- align-items: flex-start; +- margin-right: $spacer; +- margin-bottom: $spacer; ++ .alert-icon { ++ display: inline-flex; ++ align-items: flex-start; ++ margin-right: $spacer; ++ margin-bottom: $spacer; + +- @include media-breakpoint-up(sm) { +- margin-bottom: 0; +- } ++ @include media-breakpoint-up(sm) { ++ margin-bottom: 0; + } ++ } + +- .alert-content { +- flex: 1 1 auto; +- } ++ .alert-content { ++ flex: 1 1 auto; ++ } + +- .alert-title { +- margin-bottom: $spacer / 2; +- } ++ .alert-title { ++ margin-bottom: $spacer / 2; ++ } + +- .alert-msg { +- p + p { +- margin-bottom: $spacer; +- } +- +- p:last-of-type { +- margin-bottom: 0; +- } ++ .alert-msg { ++ p + p { ++ margin-bottom: $spacer; + } + +- &.alert-info { +- border-left-color: theme-color("info"); +- background-color: theme-color-light("info"); +- fill: theme-color("info"); ++ p:last-of-type { ++ margin-bottom: 0; + } ++ } + +- &.alert-success { +- border-left-color: theme-color("success"); +- background-color: theme-color-light("success"); +- fill: theme-color("success"); +- } ++ &.alert-info { ++ border-left-color: theme-color("info"); ++ background-color: theme-color-light("info"); ++ fill: theme-color("info"); ++ } + +- &.alert-danger { +- border-left-color: theme-color("danger"); +- background-color: theme-color-light("danger"); +- fill: theme-color("danger"); +- } ++ &.alert-success { ++ border-left-color: theme-color("success"); ++ background-color: theme-color-light("success"); ++ fill: theme-color("success"); ++ } + +- &.alert-warning { +- border-left-color: theme-color("warning"); +- background-color: theme-color-light("warning"); +- fill: theme-color("warning"); +- } +- } +\ No newline at end of file ++ &.alert-danger { ++ border-left-color: theme-color("danger"); ++ background-color: theme-color-light("danger"); ++ fill: theme-color("danger"); ++ } ++ ++ &.alert-warning { ++ border-left-color: theme-color("warning"); ++ background-color: theme-color-light("warning"); ++ fill: theme-color("warning"); ++ } ++} +diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss +index c11e046c..baa92b10 100644 +--- a/src/assets/styles/bmc/custom/_base.scss ++++ b/src/assets/styles/bmc/custom/_base.scss +@@ -1,50 +1,60 @@ +-dt, +-legend, +-label { +- color: gray("800"); +- font-size: 14px; +- font-weight: 400; +- line-height: 1.4285; +-} +- + h1, + .h1 { +- font-size: 2.625rem; +- font-weight: 300; ++ font-size: 1.75rem !important; ++ font-weight: 700; + line-height: 1.238; + } + + h2, + .h2 { +- font-size: 2.25rem; +- font-weight: 300; ++ font-size: 1.25rem !important; ++ font-weight: 500; + line-height: 1.3333; + } + + h3, + .h3 { +- font-size: 1.75rem; ++ font-size: 1rem !important; + font-weight: 400; + line-height: 1.2857; + } + + h4, + .h4 { +- font-size: 1.25rem; ++ font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.3; + } + + h5, + .h5 { +- font-size: 1rem; ++ font-size: 0.75rem !important; + font-weight: 500; + line-height: 1.375; + } + + h6, + .h6 { +- font-size: 0.875rem; ++ font-size: 0.625rem !important; + font-weight: 500; + line-height: 1.2857; + } ++ ++.page-section { ++ margin-bottom: 2rem !important; ++} ++ ++.nav-link--current{ ++ background-color: $red-light-background !important; ++ color: $red !important; ++ &:hover, ++ &:focus { ++ background-color: $red-light-background !important; ++ color: $red !important; ++ } ++} ++ ++.btn-link:active { ++ background-color: $red-light-background !important; ++ color: $red !important; ++} +diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss +index 2a7b8169..93d329f1 100644 +--- a/src/assets/styles/bmc/custom/_buttons.scss ++++ b/src/assets/styles/bmc/custom/_buttons.scss +@@ -10,7 +10,7 @@ + margin-right: $spacer / 4; + } + &:disabled { +- color: gray("600"); ++ color: $red; + fill: currentColor; + box-shadow: none !important; + &:not(.btn-link) { +@@ -21,27 +21,114 @@ + } + + .btn-primary { +- fill: currentColor; +- &:focus, +- &:not(:disabled):not(.disabled):active:focus { +- border-color: $white; +- box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white; ++ background-color: $red; ++ border-radius: $border-radius; ++ border: none; ++ box-shadow: 1px 2px 2px -1px #4f252566 inset; ++ &:hover { ++ background-color: $red-hover; ++ } ++ &:not(:disabled):not(.disabled):active:focus, ++ &:focus-visible { ++ border: none; ++ box-shadow: none; ++ background-color: $red-click; ++ } ++ &:focus { ++ border: none; ++ box-shadow: 0px 0px 0px 4px $red-shadow; ++ background-color: $red; ++ } ++ &:active { ++ border: none; ++ box-shadow: none; ++ background-color: $red; + } + } + + .btn-secondary { +- fill: currentColor; +- &:focus, +- &:not(:disabled):not(.disabled):active:focus { +- border-color: $white; +- box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white; ++ background-color: $gray-5; ++ color: $red; ++ border-radius: $border-radius; ++ border: none; ++ box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; ++ font-style: normal; ++ font-weight: 600; ++ font-size: 16px; ++ line-height: 20px; ++ &:hover { ++ background-color: $gray-5-hover; ++ color: $red; ++ } ++ &:focus { ++ border: none; ++ box-shadow: 0px 0px 0px 4px $red-shadow; ++ color: $red; ++ background-color: $gray-5; ++ } ++ &:not(:disabled):not(.disabled):active:focus, ++ &:focus-visible { ++ border: none; ++ box-shadow: none; ++ color: $red; ++ background-color: $gray-20; ++ } ++} ++ ++.btn-unstiled { ++ border: none; ++ &:focus { ++ box-shadow: none; ++ } ++ &:active { ++ box-shadow: none; ++ } ++} ++ ++.btn-popover { ++ border: none; ++ color: $red; ++ height: 28px; ++ border-radius: $border-radius; ++ font-weight: 500; ++ font-size: 12px; ++ transition: ease-in 0.2s; ++ &:hover { ++ color: $white; ++ transition: ease-in 0.2s; ++ } ++ &:focus { ++ box-shadow: none; ++ } ++ &:active { ++ box-shadow: none; ++ } ++ &.selected-unit-button { ++ transition: ease-in 0.2s; ++ color: $white; ++ } ++ &.selected-choice-button { ++ transition: ease-in 0.2s; ++ color: $white; ++ } ++} ++ ++.btn-toogle-popover { ++ justify-content: flex-start; ++ width: 25px; ++ height: 16px; ++ padding: 0; ++ &:focus { ++ box-shadow: none; ++ } ++ &:active { ++ box-shadow: none; + } + } + + // Global style for all button link + .btn-link { +- font-weight: $headings-font-weight; +- fill: theme-color("primary"); ++ color: $text-primary; + text-decoration: none !important; + &:hover { + background-color: gray("200"); +@@ -50,14 +137,19 @@ + &:active { + background-color: gray("300"); + } +- &:focus { +- box-shadow: inset 0 0 0 2px theme-color("primary"); +- color: theme-color("primary"); +- outline: none; +- } + &:disabled { + box-shadow: $btn-focus-box-shadow; + } ++ &.collapsed { ++ .icon-expand { ++ transform: rotate(180deg); ++ transition: 0.3s linear; ++ } ++ .icon-expand-right { ++ transform: rotate(180deg); ++ transition: 0.3s linear; ++ } ++ } + } + + // Icon only buttons +@@ -79,4 +171,4 @@ + .input-action-btn { + padding: 7px; + margin: 1px; +-} +\ No newline at end of file ++} +diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss +index 5f2a5962..34334687 100644 +--- a/src/assets/styles/bmc/custom/_card.scss ++++ b/src/assets/styles/bmc/custom/_card.scss +@@ -1,5 +1,27 @@ + .card { ++ border-radius: $border-radius; + .bg-success { + background-color: theme-color-light('success')!important; + } +-} +\ No newline at end of file ++} ++ ++.card-header { ++ .card-header-tabs { ++ border: none !important; ++ ++ .nav-link { ++ border: none !important; ++ color: $text-secondary; ++ font-weight: 500 !important; ++ background: none !important; ++ &:hover { ++ color: $red-hover ++ } ++ } ++ ++ .nav-link.active { ++ color: $red-active !important; ++ text-decoration: underline; ++ } ++ } ++} +diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss +index 969c4c68..8b2e2835 100644 +--- a/src/assets/styles/bmc/custom/_dropdown.scss ++++ b/src/assets/styles/bmc/custom/_dropdown.scss +@@ -3,16 +3,19 @@ + z-index: $zindex-dropdown + 1; + padding: 0; + } ++ + .dropdown-item { + padding-left: $spacer/4; + margin-top: -1 * $spacer/4; + } ++ + .b-dropdown-form { + padding: $spacer/2; + .form-group { + margin-bottom: $spacer/2; + } + } ++ + // Table filter dropdown clear button style + .table-filter { + .dropdown-item { +@@ -28,4 +31,4 @@ + box-shadow: inset 0 0 0 2px theme-color("primary"); + } + } +-} +\ No newline at end of file ++} +diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss +index 428a40c2..28287688 100644 +--- a/src/assets/styles/bmc/custom/_forms.scss ++++ b/src/assets/styles/bmc/custom/_forms.scss +@@ -14,27 +14,15 @@ + line-height: $form-line-height; + } + +-.form-group { +- margin-bottom: $spacer * 2; +-} +- + .custom-select, + .form-control, + .input-group-text { +- border-color: gray("500") !important; +- background-color: gray("100"); ++ border-radius: $border-radius; ++ background-color: $white; + } + + .custom-select, + .form-control { +- &:active { +- border: 1px solid $primary!important; +- } +- &:focus { +- color: theme-color("dark"); +- background-color: gray("100"); +- box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important; +- } + &:disabled { + background-color: gray("400"); + color: gray("600"); +@@ -48,26 +36,51 @@ + } + } + +-.custom-select, +-.custom-control-label, ++.form-control::-webkit-outer-spin-button, ++.form-control::-webkit-inner-spin-button { ++ -webkit-appearance: none; ++ margin: 0; ++} ++.form-control[type='number'] { ++ -moz-appearance: textfield; ++} ++ + .form-control { +- color: theme-color("dark") !important; +- font-size: 1rem; ++ color: $text-secondary; ++ border-radius: $border-radius; ++ border: none; ++ background-color: $gray-5; ++ &:focus { ++ color: $text-secondary; ++ } ++ &:hover { ++ background-color: $gray-5-hover; ++ } + } + + // Inverted form colors + .form-background { +- background-color: gray("100"); ++ background-color: none; ++ padding: 0 !important; + .custom-select, + .form-control { +- background-color: $white; ++ color: #0c1c29e6; ++ border-radius: $border-radius; ++ border: none; ++ background-color: $gray-5; ++ &:hover { ++ background-color: $gray-5-hover; ++ } + &:focus { +- background-color: $white; ++ border: 1px solid gray("400"); + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } ++ &.is-valid { ++ border: 1px solid gray("400"); ++ } + } + } + +@@ -76,12 +89,22 @@ + line-height: $form-line-height; + } + ++.custom-checkbox ::before { ++ box-shadow: none !important; ++ border: 2px solid $on-surface-secondary; ++ background-color: #fff; ++ border-radius: 3px; ++} ++ + .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, + .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, + .custom-control-input:checked ~ .custom-control-label::before { +- background-color: $black; +- border-color: $black; ++ background-color: $red; ++ border-color: $red; + cursor: pointer; ++ &:focus { ++ box-shadow: none !important; ++ } + } + + .custom-control { +@@ -94,8 +117,35 @@ + } + } + +-.custom-control-input:focus ~ .custom-control-label::before{ +- box-shadow: 0 0 0 2px theme-color("primary"); ++.custom-switch { ++ width: 28px; ++ height: 16px; ++} ++ ++.custom-switch ++.custom-control-input:focus ~ .custom-control-label::before { ++ box-shadow: none; ++} ++ ++.custom-switch ++.custom-control-input ~ .custom-control-label::after { ++ border: 1px solid $gray-20; ++ background: $white; ++} ++ ++.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { ++ border-color: $gray-20; ++} ++ ++.custom-control-input:not(:disabled):active ~ .custom-control-label::before { ++ background-color: rgba(4, 10, 15, 0.3); ++ border-color: $gray-20; ++} ++ ++.custom-switch ++.custom-control-input ~ .custom-control-label::before { ++ border: 1px solid $gray-20; ++ background: rgba(4, 10, 15, 0.3); + } + + .custom-control-label::after { +@@ -130,3 +180,26 @@ + background-position: right 3rem bottom 50%; + } + } ++// For invisible label of fields ++.invisible { ++ height: 0; ++ margin-bottom: 0; ++} ++// Global style progress bar ++.progress { ++ height: 8px; ++ background-color: $gray-10; ++} ++ ++.progress-bar { ++ background-color: $red; ++ border-radius: 4px; ++} ++ ++.progress_bar_percent { ++ color: $red; ++} ++ ++.system-control__radio label { ++ padding-top: 4px; ++} +diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss +index e8b5a832..0403c5e5 100644 +--- a/src/assets/styles/bmc/custom/_tables.scss ++++ b/src/assets/styles/bmc/custom/_tables.scss +@@ -1,18 +1,11 @@ + .table { + position: relative; + z-index: $zindex-dropdown; ++ border-radius: 10px; + + td { +- border-top: 1px solid gray("300"); +- border-bottom: 1px solid gray("300"); +- &:first-of-type { +- border-left: 1px solid gray("300"); +- } +- &:last-of-type { +- border-right: 1px solid gray("300"); +- } + vertical-align: middle; +- ++ font-size: 0.875rem; + // Table action buttons + .btn-link { + width: 40px; +@@ -26,16 +19,10 @@ + + // thead-light added for specificity + .thead-light th { ++ color: $text-primary; ++ background-color: $gray-2; + vertical-align: middle; +- border-top: 1px solid gray("300"); + border-bottom: 1px solid gray("300"); +- &:first-of-type { +- border-left: 1px solid gray("300"); +- } +- &:last-of-type { +- border-right: 1px solid gray("300"); +- } +- color: theme-color("dark"); + &:focus { + outline: none; + } +@@ -58,8 +45,7 @@ + .b-table-details { + background-color: theme-color("light"); + td { +- padding-left: calc(50px + (#{$table-cell-padding} * 2)); +- padding-right: calc(50px + (#{$table-cell-padding} * 2)); ++ padding: 0px 16px 16px 16px; + } + dl { + margin: 0; +@@ -109,7 +95,6 @@ + tr { + + &:not(:first-child) > td[aria-colindex='1'] { +- border-top: 1px solid gray("300"); + padding-top: 0.625rem; + } + +@@ -164,8 +149,10 @@ + padding-left: 1rem; + } + } ++} + +- .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { +- border-top-width: 1px; +- } ++.table-responsive, .table-responsive-md { ++ margin-left: -15px; ++ margin-right: -15px; ++ margin-top: 0.5rem; + } +-- +2.35.1 + diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend index 23665b13e1..ba1d1a9159 100644 --- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend +++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend @@ -7,7 +7,7 @@ LICENSE = "Apache-2.0" LIC_FILES_CHKSUM = "file://LICENSE;md5=e3fc50a88d0a364313df4b21ef20c29e" SRC_URI = "git://git@git.sila.ru/srv/pub/scm/git/openbmc/webui-vue.git;branch=sila;protocol=ssh" -SRCREV = "9123ef0673ac7a8e3e383d83a92ef65d8c89a399" +SRCREV = "60419af332cc79e751f246bfa665c19aa19d2932" SRC_URI += "\ file://favicon.ico \ @@ -20,6 +20,7 @@ SRC_URI += "\ file://0003-GlobalStore-Trim-assetTag-and-serialNumber.patch \ file://0004-main-padding-right-when-media-gt-992px.patch \ file://0005-AppLayout-refresh-UI-on-time.patch \ + file://0006-IBS-Global-Styles.patch \ " do_update_logo () { -- cgit v1.2.3