diff options
33 files changed, 50 insertions, 140 deletions
diff --git a/src/App.vue b/src/App.vue index 35a743c7c..3a56c7c3b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -35,6 +35,5 @@ export default { </script> <style lang="scss"> -//@import '@/assets/styles/_obmc-custom'; -//@import './assets/styles/bootstrap/_helpers.scss'; +@import '@/assets/styles/_obmc-custom'; </style> diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 597766ce8..0ab7baa8a 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -73,7 +73,7 @@ position: absolute; right: 0; top: 0; - //z-index: $zindex-dropdown + 1; + z-index: $zindex-dropdown + 1; } // Contain input buttons within input diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss index 56d2ace91..82dda86de 100644 --- a/src/assets/styles/bmc/custom/_dropdown.scss +++ b/src/assets/styles/bmc/custom/_dropdown.scss @@ -1,8 +1,6 @@ -@import 'bootstrap/dist/css/bootstrap.css'; - // Make calendar visible over the table .dropdown-menu { - //z-index: $zindex-dropdown + 1; + z-index: $zindex-dropdown + 1; padding: 0; } .dropdown-item { @@ -30,4 +28,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/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss index deeddc344..e8b5a8321 100644 --- a/src/assets/styles/bmc/custom/_tables.scss +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -1,8 +1,6 @@ -@import 'bootstrap/dist/css/bootstrap.css' - .table { position: relative; - //z-index: $zindex-dropdown; + z-index: $zindex-dropdown; td { border-top: 1px solid gray("300"); diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 25c0f2b3b..b7c417f46 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -249,9 +249,6 @@ export default { </script> <style lang="scss"> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - @mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) { box-shadow: inset 0 0 0 3px $padding-color, @@ -262,11 +259,11 @@ export default { position: absolute; top: -60px; left: 0.5rem; - //z-index: $zindex-popover; - //transition: $duration--moderate-01 $exit-easing--expressive; + z-index: $zindex-popover; + transition: $duration--moderate-01 $exit-easing--expressive; &:focus { top: 0.5rem; - //transition-timing-function: $entrance-easing--expressive; + transition-timing-function: $entrance-easing--expressive; } } .navbar-text, @@ -295,7 +292,6 @@ export default { .navbar { padding: 0; background-color: $navbar-color; - @include media-breakpoint-up($responsive-layout-bp) { height: $header-height; } diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index eb8c2c64a..45a95f56a 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -103,10 +103,7 @@ export default { }; </script> -<style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - +<style scoped lang="scss"> svg { fill: currentColor; height: 1.2rem; diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue index f8d8b88fb..6d2f74029 100644 --- a/src/components/Global/ButtonBackToTop.vue +++ b/src/components/Global/ButtonBackToTop.vue @@ -47,9 +47,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .btn-top { position: fixed; bottom: 24px; diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue index bb3b46fe8..fc9dd3276 100644 --- a/src/components/Global/FormFile.vue +++ b/src/components/Global/FormFile.vue @@ -84,9 +84,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .form-control-file { opacity: 0; height: 0; diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue index f5063e915..fc80216e3 100644 --- a/src/components/Global/InfoTooltip.vue +++ b/src/components/Global/InfoTooltip.vue @@ -31,9 +31,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .btn-tooltip { padding: 0; line-height: 1em; diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index fadb99afa..b682cd58d 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -53,9 +53,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .input-password-toggle-container { position: relative; } diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue index 49f26116f..8b630934c 100644 --- a/src/components/Global/LoadingBar.vue +++ b/src/components/Global/LoadingBar.vue @@ -74,9 +74,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .progress { position: absolute; left: 0; diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue index 0de5fe763..ab4adb63c 100644 --- a/src/components/Global/PageContainer.vue +++ b/src/components/Global/PageContainer.vue @@ -17,10 +17,6 @@ export default { }; </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - -@import 'bootstrap/dist/css/bootstrap.css'; main { width: 100%; height: 100%; diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue index 15aa383ad..dd39ddd51 100644 --- a/src/components/Global/PageSection.vue +++ b/src/components/Global/PageSection.vue @@ -18,9 +18,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .page-section { margin-bottom: $spacer * 4; } diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue index ca7f6082d..4f9ce5eed 100644 --- a/src/components/Global/PageTitle.vue +++ b/src/components/Global/PageTitle.vue @@ -40,9 +40,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .page-title { margin-bottom: $spacer * 2; } diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index 5c51678c9..65da87ba3 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -73,9 +73,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .search-input { padding-left: ($spacer * 2); } diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 6c1505e7b..4552633e9 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -34,9 +34,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .status-icon { vertical-align: text-bottom; diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue index 2ed88bf5e..ba77720b8 100644 --- a/src/components/Global/TableFilter.vue +++ b/src/components/Global/TableFilter.vue @@ -111,11 +111,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - -@import 'bootstrap/dist/css/bootstrap.css'; - .badge { margin-right: $spacer / 2; } diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 85d7c9ca8..0bdb87b1f 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -71,17 +71,12 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - -@import 'bootstrap/dist/css/bootstrap.css'; - $toolbar-height: 46px; .toolbar-container { width: 100%; position: relative; - //z-index: $zindex-dropdown + 1; + z-index: $zindex-dropdown + 1; } .toolbar-content { diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index 4f4684807..2002269fc 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -70,9 +70,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .app-container { display: grid; grid-template-columns: 100%; diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue index a79228fda..36a070c97 100644 --- a/src/layouts/LoginLayout.vue +++ b/src/layouts/LoginLayout.vue @@ -24,7 +24,7 @@ <div class="login-aside__logo-bmc"> <img svg-inline - height="60px" + height="60" src="@/assets/images/built-on-openbmc-logo.svg" alt="Built on OpenBMC" /> @@ -44,16 +44,9 @@ export default { }; }, }; -(''); </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - -@import '@/assets/styles/bmc/helpers'; -@import '@/assets/styles/bootstrap/_helpers'; - .login-container { background: gray('100'); display: flex; diff --git a/src/main.js b/src/main.js index 92c5c903e..9637de9bd 100644 --- a/src/main.js +++ b/src/main.js @@ -13,12 +13,6 @@ import { format } from 'date-fns-tz'; import store from './store'; import eventBus from './eventBus'; -import './assets/styles/bmc/helpers/_index.scss'; -import './assets/styles/bootstrap/_helpers.scss'; - -import 'bootstrap/dist/css/bootstrap.css'; -import 'bootstrap-vue/dist/bootstrap-vue.css'; - import { BootstrapVue, AlertPlugin, diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue index 7778ebee1..a6ac5aba3 100644 --- a/src/views/ChangePassword/ChangePassword.vue +++ b/src/views/ChangePassword/ChangePassword.vue @@ -136,11 +136,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - -@import '@/assets/styles/bootstrap/_helpers.scss'; - .change-password__form-container { @include media-breakpoint-up('md') { max-width: 360px; diff --git a/src/views/Operations/Firmware/FirmwareCardsBios.vue b/src/views/Operations/Firmware/FirmwareCardsBios.vue index 85e3df20f..a2994cc57 100644 --- a/src/views/Operations/Firmware/FirmwareCardsBios.vue +++ b/src/views/Operations/Firmware/FirmwareCardsBios.vue @@ -73,11 +73,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - -@import '@/assets/styles/bootstrap/_helpers.scss'; - .page-section { margin-top: -$spacer * 1.5; } diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue index 2b3084c5e..64ee8977d 100644 --- a/src/views/Operations/Kvm/KvmConsole.vue +++ b/src/views/Operations/Kvm/KvmConsole.vue @@ -176,14 +176,7 @@ export default { }; </script> -<style lang="scss"> -@import '@/assets/styles/bmc/custom/_kvm.scss'; -</style> - -<style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - +<style scoped lang="scss"> .button-ctrl-alt-delete { float: right; } diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue index 0865d77db..d8c529c8a 100644 --- a/src/views/Operations/RebootBmc/RebootBmc.vue +++ b/src/views/Operations/RebootBmc/RebootBmc.vue @@ -88,7 +88,4 @@ export default { }; </script> -<style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; -</style> +<style lang="scss" scoped></style> diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue index b711422f9..8f1c4bc6d 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue @@ -163,9 +163,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - @import '~xterm/css/xterm.css'; #terminal { diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue index 342bf98cf..7cfe55811 100644 --- a/src/views/Overview/OverviewCard.vue +++ b/src/views/Overview/OverviewCard.vue @@ -77,9 +77,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - a { vertical-align: middle; font-size: 14px; diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue index 0056af4a5..147f30cc4 100644 --- a/src/views/Overview/OverviewEvents.vue +++ b/src/views/Overview/OverviewEvents.vue @@ -91,9 +91,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .status-icon { vertical-align: text-top; } diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index 506de112a..d9d7797dc 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -56,9 +56,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - dd, dl { margin: 0; diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue index 6cba88320..58d83638c 100644 --- a/src/views/SecurityAndAccess/Policies/Policies.vue +++ b/src/views/SecurityAndAccess/Policies/Policies.vue @@ -257,9 +257,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .setting-section { border-bottom: 1px solid gray('300'); } diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue index cfe04a6f9..cb057a7cd 100644 --- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue +++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue @@ -425,9 +425,6 @@ export default { </script> <style lang="scss" scoped> -@import '@/assets/styles/bmc/helpers/_index.scss'; -@import '@/assets/styles/bootstrap/_helpers.scss'; - .btn.collapsed { svg { transform: rotate(180deg); diff --git a/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap b/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap index f0df6acc6..f691df243 100644 --- a/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap +++ b/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap @@ -4,11 +4,12 @@ exports[`InputPasswordToggle.vue should render correctly 1`] = ` <div class="input-password-toggle-container" > - - <button - class="btn input-action-btn btn-icon-only btn-link isVisible" - title="global.ariaLabel.hidePassword" - type="button" + + + <b-button + class="input-action-btn btn-icon-only" + title="Show password as plain text. Note: this will visually expose your password on the screen." + variant="link" > <svg aria-hidden="true" @@ -21,18 +22,17 @@ exports[`InputPasswordToggle.vue should render correctly 1`] = ` xmlns="http://www.w3.org/2000/svg" > <path - d="M5.24,22.51l1.43-1.42A14.06,14.06,0,0,1,3.07,16C5.1,10.93,10.7,7,16,7a12.38,12.38,0,0,1,4,.72l1.55-1.56A14.72,14.72,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16,16,0,0,0,5.24,22.51Z" + d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z" /> <path - d="M12 15.73a4 4 0 013.7-3.7l1.81-1.82a6 6 0 00-7.33 7.33zM30.94 15.66A16.4 16.4 0 0025.2 8.22L30 3.41 28.59 2 2 28.59 3.41 30l5.1-5.1A15.29 15.29 0 0016 27 16.69 16.69 0 0030.94 16.34 1 1 0 0030.94 15.66zM20 16a4 4 0 01-6 3.44L19.44 14A4 4 0 0120 16zm-4 9a13.05 13.05 0 01-6-1.58l2.54-2.54a6 6 0 008.35-8.35l2.87-2.87A14.54 14.54 0 0128.93 16C26.9 21.07 21.3 25 16 25z" + d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z" /> </svg> - <span class="sr-only" > - global.ariaLabel.hidePassword + Show password as plain text. Note: this will visually expose your password on the screen. </span> - </button> + </b-button> </div> `; diff --git a/vue.config.js b/vue.config.js index e33918e42..0fc5e6b0f 100644 --- a/vue.config.js +++ b/vue.config.js @@ -3,16 +3,37 @@ const webpack = require('webpack'); const LimitChunkCountPlugin = webpack.optimize.LimitChunkCountPlugin; module.exports = { - devServer: { - server: { - type: 'https', + css: { + loaderOptions: { + sass: { + additionalData: (() => { + const envName = process.env.VUE_APP_ENV_NAME; + const hasCustomStyles = + process.env.CUSTOM_STYLES === 'true' ? true : false; + if (hasCustomStyles && envName !== undefined) { + return ` + @import "@/assets/styles/bmc/helpers"; + @import "@/env/assets/styles/_${envName}"; + @import "@/assets/styles/bootstrap/_helpers"; + @import '@/assets/styles/_obmc-custom.scss'; + `; + } else { + return ` + @import "@/assets/styles/bmc/helpers"; + @import "@/assets/styles/bootstrap/_helpers"; + @import '@/assets/styles/_obmc-custom.scss'; + `; + } + })(), // immediately invoked function expression (IIFE) + }, }, + }, + devServer: { + https: true, proxy: { '/': { target: process.env.BASE_URL, onProxyRes: (proxyRes) => { - // This header is ignored in the browser so removing - // it so we don't see warnings in the browser console delete proxyRes.headers['strict-transport-security']; }, }, @@ -33,7 +54,6 @@ module.exports = { .rule('vue') .use('vue-svg-inline-loader') .loader('vue-svg-inline-loader'); - config.module .rule('ico') .test(/\.ico$/) @@ -45,7 +65,7 @@ module.exports = { config.plugins.delete('preload'); if (process.env.NODE_ENV === 'production') { config.plugin('html').tap((options) => { - options[0].filename = 'index.[contenthash:8].html'; + options[0].filename = 'index.[hash:8].html'; return options; }); } @@ -61,9 +81,6 @@ module.exports = { default: false, }, }; - if (process.env.NODE_ENV === 'development') { - config.devtool = 'source-map'; - } const crypto = require('crypto'); const crypto_orig_createHash = crypto.createHash; crypto.createHash = (algorithm) => |