mgr/dashboard: Add guideline how to brand the UI and update the color scheme #25988

Exotelis · 2019-01-16T14:16:53Z

Add guidelines for the vendors how to brand the frontend of the ceph dashboard.

I also updated the color scheme of the UI to match the branding of ceph.com

As you can see in the screenshot I changed the layout of the buttons as well as the hyperlink text color. The idea was to use as less different colors as possible to keep the color scheme consistent and clean. That's why I added the scss variables $color-primary, $color-secondary and $color-accent which are assigned to the most important and eye-catching elements.

References tracker ticket
Updates documentation if necessary
Includes tests for new functionality or reproducer for bug

votdev · 2019-01-16T14:44:08Z

src/pybind/mgr/dashboard/HACKING.rst

+    $ npm run build -- --prod
+
+Unfortunately it's currently not possible to use multiple configurations when
+serving or buildung the ui at the same time. That means a configuration just


s/buildung/building/

Upsi, thanks :)

p-se · 2019-01-16T14:56:51Z

src/pybind/mgr/dashboard/HACKING.rst

+    $ npm run build -- --prod
+
+Unfortunately it's currently not possible to use multiple configurations when
+serving or buildung the ui at the same time. That means a configuration just


UI instead of ui?

callithea · 2019-01-17T08:58:41Z

src/pybind/mgr/dashboard/HACKING.rst

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


Suggested change

for the branding ``fileReplacements`` it not an option, because you want to use

for the branding ``fileReplacements`` is not an option, because you want to use

callithea · 2019-01-17T08:59:37Z

src/pybind/mgr/dashboard/HACKING.rst

+(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


Suggested change

vendor has to add the file replacements manually to the angular.json

vendor has to add the file replacements manually to the angular.json file

callithea · 2019-01-17T09:00:29Z

src/pybind/mgr/dashboard/HACKING.rst

+vendor has to add the file replacements manually to the angular.json
+(https://github.com/angular/angular-cli/issues/12354).
+
+Nethertheless you should stick to the suggested naming scheme because it makes


Suggested change

Nethertheless you should stick to the suggested naming scheme because it makes

Nevertheless you should stick to the suggested naming scheme because it makes

callithea · 2019-01-17T09:33:43Z

src/pybind/mgr/dashboard/HACKING.rst

+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 you own styles in


Suggested change

To overwrite or extend the default css, you can add you own styles in

To overwrite or extend the default css, you can add your own styles in

callithea · 2019-01-17T09:38:10Z

src/pybind/mgr/dashboard/HACKING.rst

+~~~~~~~~~~~~~~~~~
+
+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


Suggested change

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

callithea · 2019-01-17T09:42:58Z

src/pybind/mgr/dashboard/HACKING.rst

+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 you own styles in


Suggested change

To overwrite or extend the default css, you can add you own styles in

To overwrite or extend the default CSS, you can add you own styles in

s0nea

Is it correct that the 'Back'-Button is not as round as the 'Create'-Button?

s0nea

Could you please do a little clean-up of your git history?

LenzGr · 2019-01-17T15:36:31Z

Could you please do a little clean-up of your git history?

Agreed, can you please squash your commits, @Exotelis ?

LenzGr · 2019-01-17T15:38:01Z

src/pybind/mgr/dashboard/HACKING.rst

+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


I suggest to replace "the vendor" with "you".

Explains how to brand the ui without running in merge conflicts once a source file gets updated Signed-off-by: Sebastian Krah <skrah@suse.com>

Adds a new scss variable called color-primary that the primary color only has to be changed at one point Signed-off-by: Sebastian Krah <skrah@suse.com>

Changes the primary, secondary and accent color and adds a radius to all buttons to match the branding of ceph.com Signed-off-by: Sebastian Krah <skrah@suse.com>

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>

Mark all variables as default, that they can get overwritten. Also import the file vendor.variables Signed-off-by: Sebastian Krah <skrah@suse.com>

Fixes linting error in two files Signed-off-by: Sebastian Krah <skrah@suse.com>

Exotelis · 2019-01-23T09:46:50Z

jenkins test make check arm64

Exotelis added the dashboard label Jan 16, 2019

Exotelis requested review from tspmelo, votdev and a2batic January 16, 2019 14:16

votdev requested changes Jan 16, 2019

View reviewed changes

p-se reviewed Jan 16, 2019

View reviewed changes

callithea reviewed Jan 17, 2019

View reviewed changes

s0nea reviewed Jan 17, 2019

View reviewed changes

s0nea requested changes Jan 17, 2019

View reviewed changes

LenzGr reviewed Jan 17, 2019

View reviewed changes

Sebastian Krah added 6 commits January 18, 2019 14:44

mgr/dashboard: Add branding documentation

1200211

Explains how to brand the ui without running in merge conflicts once a source file gets updated Signed-off-by: Sebastian Krah <skrah@suse.com>

mgr/dashboard: Introduce new scss variable

c43b5b9

Adds a new scss variable called color-primary that the primary color only has to be changed at one point Signed-off-by: Sebastian Krah <skrah@suse.com>

mgr/dashboard: Adapt to ceph.com branding

e493647

Changes the primary, secondary and accent color and adds a radius to all buttons to match the branding of ceph.com Signed-off-by: Sebastian Krah <skrah@suse.com>

mgr/dashboard: Add vendor.overrides.scss and vendor.variables.scss

b6f644b

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>

mgr/dashboard: Mark variables as default

2b9090c

Mark all variables as default, that they can get overwritten. Also import the file vendor.variables Signed-off-by: Sebastian Krah <skrah@suse.com>

mgr/dashboard: Fix linting errors

3140096

Fixes linting error in two files Signed-off-by: Sebastian Krah <skrah@suse.com>

LenzGr added the needs-review label Jan 23, 2019

votdev approved these changes Jan 23, 2019

View reviewed changes

s0nea approved these changes Jan 23, 2019

View reviewed changes

a2batic approved these changes Jan 23, 2019

View reviewed changes

LenzGr merged commit 2b36b7f into ceph:master Jan 23, 2019

Exotelis removed the needs-review label Jan 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mgr/dashboard: Add guideline how to brand the UI and update the color scheme #25988

mgr/dashboard: Add guideline how to brand the UI and update the color scheme #25988

Exotelis commented Jan 16, 2019

votdev Jan 16, 2019

Exotelis Jan 16, 2019

p-se Jan 16, 2019

callithea Jan 17, 2019

callithea Jan 17, 2019

callithea Jan 17, 2019

callithea Jan 17, 2019

callithea Jan 17, 2019

callithea Jan 17, 2019

s0nea left a comment

s0nea left a comment

LenzGr commented Jan 17, 2019

LenzGr Jan 17, 2019

Exotelis commented Jan 23, 2019

	for the branding ``fileReplacements`` it not an option, because you want to use
	for the branding ``fileReplacements`` is not an option, because you want to use

	vendor has to add the file replacements manually to the angular.json
	vendor has to add the file replacements manually to the angular.json file

	Nethertheless you should stick to the suggested naming scheme because it makes
	Nevertheless you should stick to the suggested naming scheme because it makes

	To overwrite or extend the default css, you can add you own styles in
	To overwrite or extend the default css, you can add your own styles in

	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

mgr/dashboard: Add guideline how to brand the UI and update the color scheme #25988

mgr/dashboard: Add guideline how to brand the UI and update the color scheme #25988

Conversation

Exotelis commented Jan 16, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

s0nea left a comment

Choose a reason for hiding this comment

s0nea left a comment

Choose a reason for hiding this comment

LenzGr commented Jan 17, 2019

Choose a reason for hiding this comment

Exotelis commented Jan 23, 2019