From: Sebastian Krah <skrah@suse.com>
Date: Wed, 16 Jan 2019 15:20:34 +0000 (+0100)
Subject: mgr/dashboard: Add vendor.overrides.scss and vendor.variables.scss
X-Git-Tag: v14.1.0~312^2~2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=b6f644bfb82c87ae398410c4d204720fbe8e9fea;p=ceph.git

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 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 */
+