openstack/skyline-console
Code Issues Proposed changes

feat: update color variables

Browse Source 
Use color variables to set color in less and jsx, this makes it easy to change the theme for all pages.

Change-Id: I9b82c4624826854d40d11da4e6ce4a9137b86085
This commit is contained in:
Jingwei.Zhang 2023-05-24 16:48:56 +08:00
parent 8ecf24e69f
commit ec59419f4f
36 changed files with 130 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc
View File

@ -74,6 +74,10 @@
[
"asset",
"./src/asset"
],
[
"styles",
"./src/styles"
]
],
"extensions": [
@ -134,6 +138,7 @@
"t": true,
"globals": true,
"request": true,
"METRICDICT": true
"METRICDICT": true,
"globalCSS": true
}
}
}

8
.stylelintrc.json
View File

@ -10,6 +10,12 @@
"rules": {
"no-descending-specificity": null,
"at-rule-no-unknown": null,
"color-function-notation": "legacy"
"color-function-notation": "legacy",
"property-no-unknown": [
true,
{
"ignoreProperties": ["/Color$/"]
}
]
}
}

2
src/components/Cards/NotFound/index.less
View File

@ -18,7 +18,7 @@
vertical-align: top;
:global .h1 {
color: #abb4be;
color: @light-color08;
font-size: 120px;
line-height: 1.4;
text-align: left;

5
src/components/DetailCard/index.less
View File

@ -8,11 +8,6 @@
@resource-box-bg: #fbfdff;
@resource-box-border: 1px solid #cfe1ff;
@success: #57e39b;
@warning: #fedf40;
@error: #eb354d;
@link: #0068ff;
.card {
flex: 1;
margin-bottom: @mid-space;

2
src/components/Form/index.less
View File

@ -100,7 +100,7 @@
.tips-icon {
margin-top: 2px;
margin-right: 4px;
color: #0068ff;
color: @primary-color;
}
.footer-left {

4
src/components/FormItem/Upload/index.jsx
View File

@ -28,8 +28,8 @@ export default class index extends Component {
get progress() {
return {
strokeColor: {
'0%': '#108ee9',
'100%': '#87d068',
'0%': globalCSS.primaryColor,
'100%': globalCSS.successColor,
},
strokeWidth: 3,
format: (percent) => `${parseFloat(percent.toFixed(2))}%`,

2
src/components/Layout/GlobalHeader/Token.jsx
View File

@ -82,7 +82,7 @@ export class Token extends ModalAction {
const now = Date.now();
if (now > this.keystoneTokenExp) {
return (
<span style={{ color: 'rgb(232, 104, 74)' }}>
<span style={globalCSS.warnDarkColor}>
{t('Keystone token is expired.')}
</span>
);

2
src/components/Loading/index.jsx
View File

@ -28,7 +28,7 @@ const Loading = ({ pastDelay, timedOut, error }) => {
>
<Icon
type="loading"
style={{ fontSize: 32, color: '#1890ff' }}
style={{ fontSize: 32, color: globalCSS.primaryColor }}
theme="outlined"
/>
<p>Loading...</p>

10
src/components/Notify/index.jsx
View File

@ -42,19 +42,19 @@ const open = (args) => {
let icon = null;
if (type === 'info') {
iconColor = '#0068FF';
iconColor = globalCSS.primaryColor;
icon = <InfoCircleOutlined theme="filled" style={{ color: iconColor }} />;
} else if (type === 'success') {
iconColor = '#57E39B';
iconColor = globalCSS.successColor;
icon = <CheckCircleOutlined theme="filled" style={{ color: iconColor }} />;
} else if (type === 'error') {
iconColor = '#EB354D';
iconColor = globalCSS.errorColor;
icon = <CloseCircleOutlined theme="filled" style={{ color: iconColor }} />;
} else if (type === 'process') {
iconColor = '#0068FF';
iconColor = globalCSS.primaryColor;
icon = <LoadingOutlined style={{ color: iconColor }} />;
} else if (type === 'warn') {
iconColor = '#FEDF40';
iconColor = globalCSS.warnColor;
icon = <InfoCircleOutlined theme="filled" style={{ color: iconColor }} />;
}

6
src/components/Progress/index.jsx
View File

@ -30,9 +30,9 @@ export default class index extends Component {
static defaultProps = {
wanValue: 70,
dangerValue: 90,
infoColor: 'rgba(0, 104, 255, 0.65)',
warnColor: 'rgba(254, 223, 64, 0.65)',
dangerColor: 'rgba(235, 53, 77, 0.65)',
infoColor: globalCSS.primaryColor,
warnColor: globalCSS.warnDarkColor,
dangerColor: globalCSS.dangerColor,
label: '',
};

6
src/components/ProjectProgress/index.jsx
View File

@ -30,9 +30,9 @@ export default class index extends Component {
static defaultProps = {
wanValue: 70,
dangerValue: 90,
infoColor: 'rgba(0, 104, 255, 0.65)',
warnColor: 'rgba(254, 223, 64, 0.65)',
dangerColor: 'rgba(235, 53, 77, 0.65)',
infoColor: globalCSS.primaryColor,
warnColor: globalCSS.warnDarkColor,
dangerColor: globalCSS.dangerColor,
label: '',
};

6
src/components/QuotaChart/Ring.jsx
View File

@ -25,11 +25,11 @@ import {
import { Tooltip as AntTooltip } from 'antd';
export const typeColors = {
used: '#5B8FF9',
used: globalCSS.primaryColor,
reserved: '#5D7092',
add: '#5AD8A6',
add: globalCSS.successColor,
left: '#eee',
danger: '#E8684A',
danger: globalCSS.warnDarkColor,
};
export const getAddValueColor = (percent) => {

2
src/components/Tables/Base/index.jsx
View File

@ -337,7 +337,7 @@ export class BaseTable extends React.Component {
}
return (value) => {
const valueStr = isString(value) ? value : (value || 0).toFixed(2);
return <span style={{ color: '#f50' }}>{valueStr}</span>;
return <span style={{ color: globalCSS.moneyColor }}>{valueStr}</span>;
};
};

2
src/components/Tables/SimpleTable/index.jsx
View File

@ -171,7 +171,7 @@ export default class SimpleTable extends React.Component {
}
return (value) => {
const valueStr = isString(value) ? value : (value || 0).toFixed(2);
return <span style={{ color: '#f50' }}>{valueStr}</span>;
return <span style={{ color: globalCSS.moneyColor }}>{valueStr}</span>;
};
};

2
src/containers/List/index.less
View File

@ -17,7 +17,7 @@
border: 1px solid #ffe58f;
.ant-alert-icon {
color: #faad14;
color: @warn-color;
}
}
}

2
src/core/index.jsx
View File

@ -22,11 +22,13 @@ import enUS from 'antd/es/locale/en_US';
import globalRootStore from 'stores/root';
import PageLoading from 'components/PageLoading';
import metricDict from 'resources/prometheus/metricDict';
import variables from 'styles/variables.less';
import i18n from './i18n';
import App from './App';
window.t = i18n.t;
window.METRICDICT = metricDict;
window.globalCSS = variables;
const store = globalRootStore;
const browserHistory = createBrowserHistory();

2
src/layouts/Base/index.less
View File

@ -312,7 +312,7 @@
margin-bottom: 16px;
padding: 16px 24px;
overflow: hidden;
color: #0068ff;
color: @primary-color;
font-size: 18px;
line-height: 24px;
word-wrap: break-word;

2
src/pages/auth/containers/ChangePassword/index.jsx
View File

@ -138,7 +138,7 @@ export class Password extends Component {
name: 'hint',
render: () => (
<div className={styles.hint}>
<InfoCircleFilled style={{ color: '#FAAD14' }} />
<InfoCircleFilled style={{ color: globalCSS.warnColor }} />
{t('User need to change password')}
</div>
),

6
src/pages/auth/containers/ChangePassword/index.less
View File

@ -1,3 +1,5 @@
@import '~styles/variables';
.register {
float: right;
}
@ -47,11 +49,11 @@
.error {
padding-left: 12px;
color: #a43a39;
color: @login-error;
font-size: 14px;
line-height: 38px;
background: #f2dede;
border: 1px solid #a43a39;
border: 1px solid @login-error;
border-radius: 4px;
:global {

6
src/pages/auth/containers/Login/index.less
View File

@ -1,3 +1,5 @@
@import '~styles/variables';
.register {
float: right;
}
@ -13,11 +15,11 @@
.login-error {
padding: 8px 12px;
color: #a43a39;
color: @login-error;
font-size: 14px;
line-height: 1.5;
background: #f2dede;
border: 1px solid #a43a39;
border: 1px solid @login-error;
border-radius: 4px;
:global {

12
src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx
View File

@ -68,17 +68,17 @@ export const smallCard = [
];
const instanceColors = {
active: { color: '#52C41A', text: t('Active Status') },
error: { color: '#E8684A', text: t('Error') },
active: { color: globalCSS.successColor, text: t('Active Status') },
error: { color: globalCSS.errorColor, text: t('Error') },
shutoff: { color: '#E6F2E0', text: t('Shutoff') },
other: { color: '#F6B23D', text: t('Others') },
other: { color: globalCSS.warnLightColor, text: t('Others') },
};
const volumeColors = {
active: { color: '#52C41A', text: t('Attaching') },
error: { color: '#E8684A', text: t('Error') },
active: { color: globalCSS.successColor, text: t('Attaching') },
error: { color: globalCSS.errorColor, text: t('Error') },
available: { color: '#E6F2E0', text: t('Unattached') },
other: { color: '#F6B23D', text: t('Others') },
other: { color: globalCSS.warnLightColor, text: t('Others') },
};
export class virtualResourceInfo extends Component {

10
src/pages/base/containers/AdminOverview/components/VirtualResource.jsx
View File

@ -31,9 +31,9 @@ export const resourceCircle = [
];
export const color = {
infoColor: 'rgba(0, 104, 255, 0.65)',
warnColor: '#FE9901',
dangerColor: '#D93126',
infoColor: globalCSS.primaryColor,
warnColor: globalCSS.warnDarkColor,
dangerColor: globalCSS.errorColor,
};
export class ResourceCircle extends Component {
@ -56,9 +56,9 @@ export class ResourceCircle extends Component {
const used = overview[item.used];
const percentNum = parseFloat(((used / resource) * 100).toFixed(2));
const unUsed = parseFloat((resource - used).toFixed(2));
let circleColor = color.infoColor;
let circleColor = color.primaryColor;
if (percentNum > 70) {
circleColor = color.warnColor;
circleColor = color.warnDarkColor;
}
if (percentNum > 90) {
circleColor = color.dangerColor;

6
src/pages/base/containers/Overview/components/QuotaOverview.jsx
View File

@ -23,9 +23,9 @@ import { isNumber } from 'lodash';
import styles from '../style.less';
const colors = {
normal: { color: '#4CC9F0', text: t('Normal') },
danger: { color: '#4361EE', text: t('Danger') },
full: { color: '#E8684A', text: t('Full') },
normal: { color: globalCSS.primaryColor, text: t('Normal') },
danger: { color: globalCSS.warnDarkColor, text: t('Danger') },
full: { color: globalCSS.errorColor, text: t('Full') },
};
const keyPairTitle = (

2
src/pages/base/containers/Overview/style.less
View File

@ -137,7 +137,7 @@
.action {
float: right;
margin-top: 6px;
color: #0068ff;
color: @primary-color;
font-size: 12px;
cursor: pointer;
}

2
src/pages/compute/containers/Instance/actions/Resize.jsx
View File

@ -143,7 +143,7 @@ export class Resize extends ModalAction {
get tips() {
return (
<div>
<p style={{ color: '#0068FF' }}>
<p style={{ color: globalCSS.primaryColor }}>
{t('The current operation requires the instance to be shut down:')}
</p>
<p>

2
src/pages/monitor/containers/OpenstackService/Services.jsx
View File

@ -30,7 +30,7 @@ const statusToIcon = {
down: (
<InfoCircleTwoTone
style={{ fontSize: 24, marginLeft: 36 }}
twoToneColor="#EB354D"
twoToneColor={globalCSS.errorColor}
/>
),
};

3
src/pages/monitor/containers/Overview/components/Tops/index.jsx
View File

@ -23,7 +23,8 @@ export const renderTopProgress = ({ data }) => {
<Row style={{ height: '100%' }}>
{data.map((d) => {
const percentage = get(d, 'y', 0);
const percentageColor = percentage > 80 ? '#FAAD14' : '#1890FF';
const percentageColor =
percentage > 80 ? globalCSS.warnDarkColor : globalCSS.primaryColor;
return (
<Col span={24} key={d.type}>
<div>{d.type}</div>

6
src/pages/monitor/containers/Overview/config.jsx
View File

@ -137,7 +137,11 @@ export const physicalNodeLeftTopCardList = [
<Progress
style={{ width: '95%' }}
percent={progressPercentage}
strokeColor={progressPercentage > 80 ? '#FAAD14' : '#1890FF'}
strokeColor={
progressPercentage > 80
? globalCSS.warnDarkColor
: globalCSS.primaryColor
}
showInfo={progressPercentage !== 100}
/>
</Row>

3
src/pages/monitor/containers/PhysicalNode/index.jsx
View File

@ -99,7 +99,8 @@ export const topCardList = [
>
{(value.data || []).map((item, index) => {
const percentage = computePercentage(item.avail, item.total);
const percentageColor = percentage > 80 ? '#FAAD14' : '#1890FF';
const percentageColor =
percentage > 80 ? globalCSS.warnDarkColor : globalCSS.primaryColor;
return (
<div
key={item.mountpoint}

6
src/pages/monitor/containers/StorageCluster/index.jsx
View File

@ -211,7 +211,11 @@ const StorageCluster = () => {
<Progress
style={{ width: '95%' }}
percent={progressPercentage}
strokeColor={progressPercentage > 80 ? '#FAAD14' : '#1890FF'}
strokeColor={
progressPercentage > 80
? globalCSS.warnDarkColor
: globalCSS.primaryColor
}
showInfo={progressPercentage !== 100}
/>
</Row>

4
src/pages/monitor/containers/StorageCluster/index.less
View File

@ -1,3 +1,5 @@
@import '~styles/variables';
.osd {
height: 100%;
color: rgba(0, 0, 0, 85%);
@ -17,7 +19,7 @@
}
.ant-radio-button-wrapper-checked {
color: #0068ff;
color: @primary-color;
}
}
}

2
src/pages/network/containers/LoadBalancers/Listener/Detail/Member/Actions/CreateMember.jsx
View File

@ -96,7 +96,7 @@ export class CreateAction extends ModalAction {
get tips() {
return (
<div style={{ display: 'inline-table' }}>
<p style={{ color: '#0068FF' }}>
<p style={{ color: globalCSS.primaryColor }}>
{t(
'The amphora instance is required for load balancing service setup and is not recommended'
)}

31
src/pages/network/containers/Topology/index.jsx
View File

@ -43,6 +43,10 @@ import NodeCard from './NodeCard';
let graph = null;
const { isIpInRangeAll } = ipValidate;
export const activeShadowColor = 'rgba(87,227,155,0.61)';
export const errorShadowColor = 'rgba(237,33,48,1)';
export const errorStrokeColor = '#DB3A3A';
export class Topology extends React.Component {
constructor(props) {
super(props);
@ -142,11 +146,12 @@ export class Topology extends React.Component {
style: {
radius: 4,
fill: '#FFFFFFFF',
stroke: router.status === 'ACTIVE' ? '#57E39B' : '#DB3A3A',
shadowColor:
stroke:
router.status === 'ACTIVE'
? 'rgba(87,227,155,0.61)'
: 'rgba(237,33,48,1)',
? globalCSS.successColor
: errorStrokeColor,
shadowColor:
router.status === 'ACTIVE' ? activeShadowColor : errorShadowColor,
shadowBlur: router.status === 'ACTIVE' ? 5 : 4,
},
anchorPoints: [[0.5, 0]],
@ -336,11 +341,14 @@ export class Topology extends React.Component {
style: {
radius: 4,
fill: '#FFFFFFFF',
stroke: server.vm_state === 'active' ? '#57E39B' : '#DB3A3A',
stroke:
server.vm_state === 'active'
? globalCSS.successColor
: errorStrokeColor,
shadowColor:
server.vm_state === 'active'
? 'rgba(87,227,155,0.61)'
: 'rgba(237,33,48,1)',
? activeShadowColor
: errorShadowColor,
shadowBlur: server.vm_state === 'active' ? 5 : 4,
},
});
@ -403,11 +411,14 @@ export class Topology extends React.Component {
style: {
radius: 4,
fill: '#FFFFFFFF',
stroke: server.vm_state === 'active' ? '#57E39B' : '#DB3A3A',
stroke:
server.vm_state === 'active'
? globalCSS.successColor
: errorStrokeColor,
shadowColor:
server.vm_state === 'active'
? 'rgba(87,227,155,0.61)'
: 'rgba(237,33,48,1)',
? activeShadowColor
: errorShadowColor,
shadowBlur: server.vm_state === 'active' ? 5 : 4,
},
});

6
src/resources/prometheus/monitoring.js
View File

@ -391,7 +391,7 @@ export const cephStatusMap = {
};
export const cephStatusColorMap = {
0: '#379738',
1: '#FAAD14',
2: '#D93126',
0: globalCSS.successColor,
1: globalCSS.warnDarkColor,
2: globalCSS.errorColor,
};

2
src/styles/base.less
View File

@ -64,7 +64,7 @@
&:hover {
svg {
color: #1890ff;
color: @primary-color;
fill: #6fb4f5;
}
}

21
src/styles/variables.less
View File

@ -4,6 +4,7 @@
@blue-3: rgba(89, 157, 255, 35%);
@blue-4: #005ade;
@primary-color: @blue-1;
@info-color: @blue-2;
@hover-color: @blue-4;
@green-1: #57e39b;
@ -16,6 +17,9 @@
@yellow-3: rgba(254, 223, 64, 35%);
@warn-color: @yellow-1;
@warn-light-color: #f6b23d;
@warn-dark-color: #fa8c16;
@red-1: #eb354d;
@red-2: rgba(235, 53, 77, 65%);
@red-3: rgba(235, 53, 77, 35%);
@ -124,3 +128,20 @@
/* sider */
@sider-background: #26262b;
@sider-open-background: #222121;
/* login */
@login-error: #a43a39;
@money-color: #f50;
:export {
primaryColor: @primary-color;
successColor: @success-color;
warnColor: @warn-color;
warnDarkColor: @warn-dark-color;
warnLightColor: @warn-light-color;
errorColor: @error-color;
dangerColor: @danger-color;
moneyColor: @money-color;
infoColor: @info-color;
}