From b6f644bfb82c87ae398410c4d204720fbe8e9fea Mon Sep 17 00:00:00 2001 From: Sebastian Krah Date: Wed, 16 Jan 2019 16:20:34 +0100 Subject: [PATCH] mgr/dashboard: Add vendor.overrides.scss and vendor.variables.scss Adds the files vendor.overrides.scss and vendor.variables.scss. In those files the css and variable defaults can be overwritten. Signed-off-by: Sebastian Krah --- src/pybind/mgr/dashboard/HACKING.rst | 18 ++++++++++++------ src/pybind/mgr/dashboard/frontend/angular.json | 1 + .../frontend/src/vendor.overrides.scss | 3 +++ .../frontend/src/vendor.variables.scss | 2 ++ 4 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/vendor.overrides.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/vendor.variables.scss diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst index 2221e5ef898..05dea171785 100644 --- a/src/pybind/mgr/dashboard/HACKING.rst +++ b/src/pybind/mgr/dashboard/HACKING.rst @@ -234,7 +234,7 @@ Frontend branding ~~~~~~~~~~~~~~~~~ Every vendor can customize the 'Ceph dashboard' to his needs. No matter if -Logo, HTML-Template or Typescript, every file inside the frontend folder can be +logo, HTML-Template or TypeScript, every file inside the frontend folder can be replaced. To replace files, open ``./frontend/angular.json`` and scroll to the section @@ -260,18 +260,24 @@ or $ npm run build -- --prod Unfortunately it's currently not possible to use multiple configurations when -serving or building the ui at the same time. That means a configuration just -for the branding ``fileReplacements`` it not an option, because you want to use +serving or building the UI at the same time. That means a configuration just +for the branding ``fileReplacements`` is not an option, because you want to use the production configuration anyway (https://github.com/angular/angular-cli/issues/10612). Furthermore it's also not possible to use glob expressions for -``fileReplacements``. As long as the feature hasn't been implemented, the -vendor has to add the file replacements manually to the angular.json +``fileReplacements``. As long as the feature hasn't been implemented, you have +to add the file replacements manually to the angular.json file (https://github.com/angular/angular-cli/issues/12354). -Nethertheless you should stick to the suggested naming scheme because it makes +Nevertheless you should stick to the suggested naming scheme because it makes it easier for you to use glob expressions once it's supported in the future. +To change the variable defaults you can overwrite them in the file +``./frontend/src/vendor.variables.scss``. Just reassign the variable you want +to change, for example ``$color-primary: teal;`` +To overwrite or extend the default CSS, you can add your own styles in +``./frontend/src/vendor.overrides.scss``. + I18N ---- diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json index 3b5cc73ca70..068aa101dfc 100644 --- a/src/pybind/mgr/dashboard/frontend/angular.json +++ b/src/pybind/mgr/dashboard/frontend/angular.json @@ -27,6 +27,7 @@ "node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css", "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.scss", + "src/vendor.overrides.scss", "node_modules/ng2-tree/styles.css" ], "scripts": [ diff --git a/src/pybind/mgr/dashboard/frontend/src/vendor.overrides.scss b/src/pybind/mgr/dashboard/frontend/src/vendor.overrides.scss new file mode 100644 index 00000000000..0cca9de8f02 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/vendor.overrides.scss @@ -0,0 +1,3 @@ +/* Vendor specific scss */ + +@import 'defaults'; diff --git a/src/pybind/mgr/dashboard/frontend/src/vendor.variables.scss b/src/pybind/mgr/dashboard/frontend/src/vendor.variables.scss new file mode 100644 index 00000000000..060eb26efa2 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/vendor.variables.scss @@ -0,0 +1,2 @@ +/* Vendor specific variables */ + -- 2.39.5