apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-02 20:02:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

FIX - Changing project no longer changes the sidebar background/theme (#821)

Browse Source 
* fix customize navigation background color when change project view

* remove change color for the logo when switch project view

* add doc help for customizing the navigation background color of the project view

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Hoang Nguyen 2020-10-28 16:46:11 +07:00 committed by Rohit Yadav
parent 0f3586a011
commit 147794d103
4 changed files with 92 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/docs/customize.md
View File

@ -48,6 +48,8 @@ Customize themes like colors, border color, etc.
```
- `@logo-background-color` changes the logo background color.
- `@project-nav-background-color` changes the navigation menu background color of the project .
- `@project-nav-text-color` changes the navigation menu background color of the project view.
- `@navigation-background-color` changes the navigation menu background color.
- `@navigation-text-color` changes the navigation text color.
- `@primary-color` change the major background color of the page (background button, icon hover, etc).

2
ui/public/config.json vendored
View File

@ -13,6 +13,8 @@
"theme": {
"@logo-background-color": "#ffffff",
"@navigation-background-color": "#ffffff",
"@project-nav-background-color": "#001529",
"@project-nav-text-color": "rgba(255, 255, 255, 0.65)",
"@navigation-text-color": "rgba(0, 0, 0, 0.65)",
"@primary-color": "#1890ff",
"@link-color": "#1890ff",

127
ui/src/style/vars.less
View File

@ -24,6 +24,8 @@
@logo-background-color: #ffffff;
@navigation-background-color: #ffffff;
@project-nav-background-color: #001529;
@project-nav-text-color: rgba(255, 255, 255, 0.65);
@navigation-text-color: rgba(0, 0, 0, 0.65);
@primary-color: #1890ff;
@link-color: @primary-color;
@ -83,7 +85,6 @@ a {
}
}
.sider .logo,
.sider.light .logo {
background-color: @logo-background-color;
box-shadow: 1px 1px 0px 0px #e8e8e8;
@ -91,22 +92,23 @@ a {
.sider.light {
background: @navigation-background-color;
.ant-menu-submenu > .ant-menu {
background: @navigation-background-color;
}
}
.ant-menu {
.sider.light .ant-menu-light {
background: @navigation-background-color;
}
.ant-menu-submenu-popup,
.ant-menu-submenu > .ant-menu,
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
background-color: @navigation-background-color;
.ant-menu-submenu-popup.ant-menu-light,
.ant-menu-light > .ant-menu {
background: @navigation-background-color;
}
.ant-menu-item > a,
.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a {
.ant-menu-item > a
{
color: @navigation-text-color;
}
@ -144,12 +146,7 @@ a {
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover
.ant-menu-submenu-title:hover
{
color: @primary-color;
@ -169,29 +166,77 @@ a {
background-color: @navigation-text-color;
}
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before {
background-color: @primary-color;
.sider.dark {
.ant-menu-vertical .ant-menu-item,
.ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-right .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-submenu-title,
.ant-menu-vertical-left .ant-menu-submenu-title,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-submenu-title {
color: @project-nav-text-color;
}
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after
{
background-color: @project-nav-text-color;
}
.ant-menu-submenu-active .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-submenu-active .ant-menu-submenu-title .ant-menu-submenu-arrow::after
{
background-color: @primary-color;
}
.ant-menu-dark .ant-menu-item:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover
{
color: @primary-color;
.custom-icon path {
color: @primary-color;
}
}
.ant-menu-submenu-selected {
.ant-menu-submenu-title {
color: @primary-color;
}
}
}
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.ant-menu-dark .ant-menu-inline.ant-menu-sub{
background-color: @project-nav-background-color;
}
.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a {
color: @project-nav-text-color;
}
.ant-menu-dark .ant-menu-item:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover > a,
.ant-menu-dark .ant-menu-submenu-title:hover,
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover
{
color: @primary-color;
.custom-icon path {
color: @primary-color;
}
}

2
ui/theme.config.js
View File

@ -28,6 +28,8 @@ const options = {
varFile: resolve('./src/style/vars.less'),
themeVariables: [
'@logo-background-color',
'@project-nav-background-color',
'@project-nav-text-color',
'@navigation-background-color',
'@navigation-text-color',
'@primary-color',