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 <skrah@suse.com>

diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst
index 2221e5ef898f9bdf8c964c320d7198d84b045977..05dea1717850f04e450a272940ed2f0e8fac2f50 100644 (file)
--- 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 3b5cc73ca70d438bd897e29543e48de831c60382..068aa101dfcccd7a6bec698d56997845607b6801 100644 (file)
--- 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 (file)
index 0000000..0cca9de
--- /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 (file)
index 0000000..060eb26
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/vendor.variables.scss
@@ -0,0 +1,2 @@
+/* Vendor specific variables */\r
+\r