diff --git a/.env.ibm b/.env.ibm index f17c7f3839..cc91ed0d47 100644 --- a/.env.ibm +++ b/.env.ibm @@ -1,4 +1,3 @@ -# NODE_ENV=production VITE_CUSTOM_ENV=production VITE_APP_ENV_NAME=ibm VITE_APP_COMPANY_NAME="IBM" diff --git a/.env.intel b/.env.intel index b8b743e4a3..a345f2bda9 100644 --- a/.env.intel +++ b/.env.intel @@ -1,4 +1,3 @@ -# NODE_ENV=production VITE_CUSTOM_ENV=production VITE_APP_ENV_NAME="intel" VITE_APP_COMPANY_NAME="intel" @@ -10,7 +9,7 @@ VITE_APP_VIRTUAL_MEDIA_LIST_ENABLED="true" VITE_APP_EVENT_LOGS_DELETE_BUTTON_DISABLED="true" VITE_APP_EVENT_LOGS_TOGGLE_BUTTON_DISABLED="true" VITE_APP_FAN_DATA_FROM_THERMAL_SUBSYSTEM="true" -CUSTOM_STYLES="true" -CUSTOM_APP_NAV="true" -CUSTOM_STORE="true" -CUSTOM_ROUTER="true" \ No newline at end of file +VITE_CUSTOM_STYLES="true" +VITE_CUSTOM_APP_NAV="true" +VITE_CUSTOM_STORE="true" +VITE_CUSTOM_ROUTER="true" \ No newline at end of file diff --git a/README.md b/README.md index 7d4f9ef2ea..6441eaff12 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - # webui-vue webui-vue is a web-based user interface for the OpenBMC firmware stack built on @@ -49,7 +48,7 @@ roadmap ## Documentation -The documentation for coding standards and components is located in the `docs` directory. It is created using the [VuePress](https://vuepress.vuejs.org/) static site generator. Information about how to write documentation can be found on the [VuePress website](https://vuepress.vuejs.org/). +The documentation for coding standards and components is located in the `docs` directory. It is created using the [VitePress](https://vitepress.dev/guide/using-vue) static site generator. Information about how to write documentation can be found on the [VitePress website](https://vitepress.dev/guide/using-vue). ## Recommended IDE Setup diff --git a/docs/.vitepress/styles/palette.styl b/docs/.vitepress/styles/palette.styl index 4d79601e2d..b965d500d3 100644 --- a/docs/.vitepress/styles/palette.styl +++ b/docs/.vitepress/styles/palette.styl @@ -1,4 +1,4 @@ -// VuePress Theme overrides +// VitePress Theme overrides // Change content to be left aligned .theme-default-content:not(.custom), .page-nav @@ -6,8 +6,8 @@ margin 0 padding 2rem -// Overide default margins for p tags -// VuePress is nesting li content in p tags +// Override default margins for p tags +// VitePress is nesting li content in p tags // unless they are nested li elements creating // inconsistent margins between different lists li p diff --git a/docs/customization/build.md b/docs/customization/build.md index b10fd9dbcf..db67e8ab1f 100644 --- a/docs/customization/build.md +++ b/docs/customization/build.md @@ -14,46 +14,47 @@ modifications to the Web UI. ## Setup 1. Create a `.env.` file in the project root -2. Add `NODE_ENV=production` key value pair in the file -3. Add `VUE_APP_ENV_NAME` key with the value set to the new environment name +2. Add `VITE_CUSTOM_ENV=production` key value pair in the file +3. Add `VITE_APP_ENV_NAME` key with the value set to the new environment name Example `.env.ibm`: ``` -NODE_ENV=production -VUE_APP_ENV_NAME=ibm +VITE_CUSTOM_ENV=production +VITE_APP_ENV_NAME=ibm ``` ## Store :::tip -[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the +[Pinia store core concepts](https://pinia.vuejs.org/core-concepts/) contain the application's API calls. ::: -1. If making customizations to the default store, add `CUSTOM_STORE=true` key +1. If making customizations to the default store, add `VITE_CUSTOM_STORE=true` key value pair to the new .env file. 2. Create a `.js` file in `src/env/store` :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the + The filename needs to match the `VITE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file. ::: 3. Import the base store 4. Import environment specific store modules -5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` - and `unregisterModule` instance methods to add/remove store modules +5. Assign the Objects required to the base store. 6. Add default export Example `src/env/store/ibm.js`: ``` -import store from '@/store; //@ aliases to src directory -import HmcStore from './Hmc/HmcStore'; +import stores from '@/store; //@ aliases to src directory +import DumpsStore from '../../store/modules/Logs/DumpsStore.js'; -store.registerModule('hmc', HmcStore); +Object.assign(stores, { + DumpsStore: DumpsStore, +}); -export default store; +export default stores; ``` ## Router @@ -63,11 +64,11 @@ export default store; accessible in the UI. ::: -1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key +1. If making customizations to the default router, add `VITE_CUSTOM_ROUTER=true` key value pair to the new .env file. 2. Create a `.js` file in `src/env/router` :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the + The filename needs to match the `VITE_APP_ENV_NAME` value defined in the .env file. The routes import in `src/router/index.js` will resolve to this new file. ::: @@ -86,17 +87,17 @@ application routes which is not always the same as what is visible in the app navigation. This configuration will make customizations to the rendered markup in src/components/AppNavigation/AppNavigation.vue. -1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key +1. If making customizations to the app navigation, add `VITE_CUSTOM_APP_NAV=true` key value pair to the new .env file. 2. Create a `.js` file in `src/env/components/AppNavigation` :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the - .env file. The AppNavigationMixin import in + The filename needs to match the `VITE_APP_ENV_NAME` value defined in the + .env file. The AppNavigationData import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file. ::: 3. Your custom mixin should follow a very similar structure to the default - AppNavigationMixin.js file. It should include a data property named + AppNavigationData.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties. @@ -109,11 +110,11 @@ in src/components/AppNavigation/AppNavigation.vue. allows for easy visual customizations. ::: -1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key +1. If making customizations to the default styles, add `VITE_CUSTOM_STYLES=true` key value pair to the new .env file. 2. Create a `_.scss` partial in `src/env/assets/styles` :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the + The filename needs to match the `VITE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name. ::: @@ -136,8 +137,8 @@ $success: lime; ## Local development -1. Add the same `VUE_APP_ENV_NAME` key value pair to your - `env.development.local` file. +1. Add the same `VITE_APP_ENV_NAME` key value pair to your + `env.local` file. 2. Use serve script ``` npm run serve @@ -158,5 +159,5 @@ npm run build -- --mode ibm pass env variable directly to script ``` -VUE_APP_ENV_NAME=ibm npm run build +VITE_APP_ENV_NAME=ibm npm run build ``` diff --git a/docs/customization/index.md b/docs/customization/index.md index e3b9dc2dde..63ce0605aa 100644 --- a/docs/customization/index.md +++ b/docs/customization/index.md @@ -182,11 +182,11 @@ set color highlights for some pseudo-elements like `: hover`. // This function is usually used to get a lighter // theme variant color to use as a background color @function theme-color-light($variant) { - @return theme-color-level($variant, -11.3); + @return color-level($variant, -11.3); } @function theme-color-dark($variant) { - @return theme-color-level($variant, 2); + @return color-level($variant, 2); } ``` @@ -194,21 +194,21 @@ set color highlights for some pseudo-elements like `: hover`. ```scss{8-10,16} .b-table-sort-icon-left { - background-position: left calc(1.5rem / 2) center !important; - padding-left: calc(1.2rem + 0.65em) !important; - &:focus { - outline: none; - box-shadow: inset 0 0 0 2px theme-color('primary') !important; - } - &:hover { - background-color: theme-color-dark('light'); - } + background-position: left calc(1.5rem / 2) center !important; + padding-left: calc(1.2rem + 0.65em) !important; + &:focus { + outline: none; + box-shadow: inset 0 0 0 2px $primary !important; + } + &:hover { + background-color: theme-color-dark($light); + } } &.alert-info { -border-left-color: theme-color("info"); -background-color: theme-color-light("info"); -fill: theme-color("info"); + border-left-color: $info; + background-color: theme-color-light($info); + fill: $info; } ``` diff --git a/docs/customization/theme.md b/docs/customization/theme.md index 3646e23c1c..c182781608 100644 --- a/docs/customization/theme.md +++ b/docs/customization/theme.md @@ -1,6 +1,6 @@ # Theme customization Customization of the application requires knowledge of Sass and CSS. It also -will require becoming familiar with the Bootstrap and Bootstrap-Vue component +will require becoming familiar with the Bootstrap and Bootstrap-vue-next component libraries. This section outlines the global options and variables that can be removed or updated to meet organizational brand guidelines. @@ -11,11 +11,6 @@ application navigation, and theming. [Read more in the Build Customization section](/customization/build) - - ## Bootstrap Sass Options The Bootstrap Sass options are global styling toggles. The naming convention for these built-in variables is `enabled-*`. @@ -37,7 +32,7 @@ some custom forms for validation states. ## Bootstrap Sass Variables These are global variables that Bootstrap defines in the -`/node_modules/bootstrap/scss/variables.scss` helper file. Adding a variable +`/node_modules/bootstrap/scss/_variables.scss` helper file. Adding a variable listed in this file to the `/src/assets/styles/bmc/helpers/_variables.scss` file will override the Bootstrap defined value. @@ -163,10 +158,10 @@ gray variable values. [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color) -### Bootstrap Color Functions + #### Example @@ -174,7 +169,7 @@ colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color) .some-selector { color: color("blue"); background: theme-color("light"); - border: 1px solid gray("900") + border: 1px solid $gray-900; } ``` diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 3ef9f7d4a7..183b942d9a 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -2,5 +2,4 @@ @import './bootstrap'; // Custom BMC styles -// @import "./bmc/helpers"; @import './bmc/custom'; diff --git a/src/assets/styles/bmc/custom/_bootstrap-grid.scss b/src/assets/styles/bmc/custom/_bootstrap-grid.scss index 161693d53d..c76afbb5c6 100644 --- a/src/assets/styles/bmc/custom/_bootstrap-grid.scss +++ b/src/assets/styles/bmc/custom/_bootstrap-grid.scss @@ -1,9 +1,4 @@ .container-xl { - // Fluid layout container class sets 100% - // width until xl breakpoint. Once a max-width - // is set, setting the left margin to 0 is needed - // so the content doesn't center align - // https://bootstrap-vue.org/docs/components/layout#fluid-width-container margin-left: 0; } diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index 4a976d71df..aa6db527bf 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -// @import "/node_modules/bootstrap/scss/variables"; .b-table-sticky-header { max-height: 75vh; min-height: 100px; @@ -14,17 +13,6 @@ left: -3px !important; top: 38% !important; } - // svg { - // background-position: left calc(1.5rem / 2) center !important; - // padding-left: calc(1.2rem + 0.65em) !important; - // &:focus { - // outline: none; - // box-shadow: inset 0 0 0 2px $primary !important; - // } - // &:hover { - // background-color: $light; - // } - // } vertical-align: middle; border-top: 1px solid $gray-300; border-bottom: 1px solid $gray-300; @@ -132,17 +120,6 @@ padding-left: calc(50px + (#{$table-cell-padding-y} * 2)); padding-right: calc(50px + (#{$table-cell-padding-y} * 2)); } - // dl { - // margin: 0; - // } - // dt { - // float: left; - // clear: left; - // margin-right: math.div($spacer, 2); - // } - // dd { - // line-height: 1.2; - // } } .table-row-expand { diff --git a/src/assets/styles/bootstrap/_index.scss b/src/assets/styles/bootstrap/_index.scss index 750a518889..b4b9b6b0fc 100644 --- a/src/assets/styles/bootstrap/_index.scss +++ b/src/assets/styles/bootstrap/_index.scss @@ -13,15 +13,11 @@ @import "/node_modules/bootstrap/scss/buttons"; @import "/node_modules/bootstrap/scss/card"; @import "/node_modules/bootstrap/scss/close"; -// @import "/node_modules/bootstrap/scss/code"; -// @import "/node_modules/bootstrap/scss/custom-forms"; @import "/node_modules/bootstrap/scss/dropdown"; @import "/node_modules/bootstrap/scss/forms"; @import "/node_modules/bootstrap/scss/grid"; @import "/node_modules/bootstrap/scss/images"; -// @import "/node_modules/bootstrap/scss/input-group"; @import "/node_modules/bootstrap/scss/list-group"; -// @import "/node_modules/bootstrap/scss/media"; @import "/node_modules/bootstrap/scss/modal"; @import "/node_modules/bootstrap/scss/nav"; @import "/node_modules/bootstrap/scss/navbar"; @@ -35,4 +31,3 @@ // Utils @import "/node_modules/bootstrap/scss/utilities"; -// @import "/node_modules/bootstrap/scss/print"; diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index daeea5c6b7..01b920b110 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -190,7 +190,7 @@ svg { } } .nav-nochild { - ::v-deep a.router-link-exact-active { + :deep(a.router-link-exact-active) { position: relative; background-color: $secondary; color: $light; @@ -209,7 +209,7 @@ svg { background-color: #dadada; color: $light; } - ::v-deep a { + :deep(a) { color: $secondary; } } diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue index d449bb2d38..d14f67f809 100644 --- a/src/components/Global/Alert.vue +++ b/src/components/Global/Alert.vue @@ -23,7 +23,6 @@