Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files
primate: Add support for UI customisation (#372)
- New config.json global config file
- Customisation: API endpoint, app name, doc link, logo, error and banner images, theme
- Basic external plugin support to allow users to write UI plugins in any framework, build and import/plug a html file as integration

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit.yadav@shapeblue.com>
  • Loading branch information
utchoang and rohityadavcloud committed Jun 22, 2020
1 parent 7c0d6aa commit 439803245c0082736da9f6e89ccb563862d373b5
Showing 33 changed files with 442 additions and 131 deletions.
@@ -0,0 +1,77 @@
# UI customization
Use a `public/config.json` (or `dist/config.json` after build) file for customizing theme, logos,...

## Images
Change the image of the logo, login banner, error page, etc.
```json
{
"logo": "assets/logo.svg",
"banner": "assets/banner.svg",
"error": {
"404": "assets/404.png",
"403": "assets/403.png",
"500": "assets/500.png"
}
}
```

- `logo` changes the logo top-left side image.
- `banner` changes the login banner image.
- `error.404` change the image of error Page not found.
- `error.403` change the image of error Forbidden.
- `error.500` change the image of error Internal Server Error.

## Theme
Customize themes like colors, border color, etc.
```json
{
"theme": {
"@primary-color": "#1890ff",
"@success-color": "#52c41a",
"@processing-color": "#1890ff",
"@warning-color": "#faad14",
"@error-color": "#f5222d",
"@font-size-base": "14px",
"@heading-color": "rgba(0, 0, 0, 0.85)",
"@text-color": "rgba(0, 0, 0, 0.65)",
"@text-color-secondary": "rgba(0, 0, 0, 0.45)",
"@disabled-color": "rgba(0, 0, 0, 0.25)",
"@border-color-base": "#d9d9d9",
"@logo-width": "256px",
"@logo-height": "64px",
"@banner-width": "700px",
"@banner-height": "110px",
"@error-width": "256px",
"@error-height": "256px"
}
}
```

- `@primary-color` change the major background color of the page (background button, icon hover, etc).
- `@success-color` change success state color.
- `@processing-color` change processing state color. Exp: progress status.
- `@warning-color` change warning state color.
- `@error-color` change error state color.
- `@heading-color` change table header color.
- `@text-color` change in major text color.
- `@text-color-secondary` change of secondary text color (breadcrumb icon).
- `@disabled-color` change disable state color (disabled button, switch, etc).
- `@border-color-base` change in major border color.
- `@logo-width` change the width of the logo top-left side.
- `@logo-height` change the height of the logo top-left side.
- `@banner-width` changes the width of the login banner.
- `@banner-height` changes the height of the login banner.
- `@error-width` changes the width of the error image.
- `@error-height` changes the height of the error image.

Assorted primary theme colours:

- Blue: #1890FF
- Red: #F5222D
- Yellow: #FAAD14
- Cyan: #13C2C2
- Green: #52C41A
- Purple: #722ED1

Also, to add other properties, we can add new properties into `theme.config.js` based on the Ant Design Vue Less variable.
Refer: https://www.antdv.com/docs/vue/customize-theme/#Ant-Design-Vue-Less-variables

Some generated files are not rendered by default. Learn more.

@@ -39,6 +39,7 @@
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/vue-fontawesome": "^0.1.9",
"ant-design-vue": "~1.6.2",
"antd-theme-webpack-plugin": "^1.3.4",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"enquire.js": "^2.1.6",
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes
File renamed without changes.
@@ -0,0 +1,47 @@
{
"apiBase": "/client/api",
"docBase": "http://docs.cloudstack.apache.org/en/latest",
"appTitle": "CloudStack",
"logo": "assets/logo.svg",
"banner": "assets/banner.svg",
"error": {
"404": "assets/404.png",
"403": "assets/403.png",
"500": "assets/500.png"
},
"theme": {
"@primary-color": "#1890ff",
"@processing-color": "#1890ff",
"@success-color": "#52c41a",
"@warning-color": "#faad14",
"@error-color": "#f5222d",
"@font-size-base": "14px",
"@heading-color": "rgba(0, 0, 0, 0.85)",
"@text-color": "rgba(0, 0, 0, 0.65)",
"@text-color-secondary": "rgba(0, 0, 0, 0.45)",
"@disabled-color": "rgba(0, 0, 0, 0.25)",
"@border-color-base": "#d9d9d9",
"@border-radius-base": "4px",
"@box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)",
"@logo-width": "256px",
"@logo-height": "64px",
"@login-banner-width": "700px",
"@login-banner-height": "110px",
"@error-width": "256px",
"@error-height": "256px"
},
"keyboardOptions": {
"us": "label.standard.us.keyboard",
"uk": "label.uk.keyboard",
"fr": "label.french.azerty.keyboard",
"jp": "label.japanese.keyboard",
"sc": "label.simplified.chinese.keyboard"
},
"plugins": [
{
"name": "ExamplePlugin",
"icon": "appstore",
"path": "example.html"
}
]
}
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Example Plugin</title>
</head>
<body>
This is an example iframe plugin, please configure the config.json to remove this in production environment.
</body>
</html>

0 comments on commit 4398032

Please sign in to comment.