Skip to content

Commit

Permalink
refactor: 💡 update console-ui theme (#8951)
Browse files Browse the repository at this point in the history
Closes: #8950
  • Loading branch information
heimanba authored Aug 11, 2022
1 parent 0c61c5d commit 8cede1c
Show file tree
Hide file tree
Showing 38 changed files with 28,871 additions and 587 deletions.
28,116 changes: 28,116 additions & 0 deletions console-ui/package-lock.json

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions console-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@
"husky": "^3.1.0",
"lint-staged": "^9.5.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"prettier": "1.19.1",
"sass": "^1.54.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
"uglifyjs-webpack-plugin": "^2.2.0",
Expand All @@ -65,11 +65,12 @@
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@alifd/next": "^1.17.4",
"@alifd/next": "^1.19.4",
"@alifd/theme-design-pro": "0.x",
"axios": "^0.21.1",
"moment": "^2.23.0",
"qs": "^6.8.2",
"prop-types": "^15.6.2",
"qs": "^6.8.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
Expand Down
83 changes: 83 additions & 0 deletions console-ui/src/components/Copy/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from 'react';
import { withRouter } from 'react-router-dom';
import { Icon, Message } from '@alifd/next';
import PropTypes from 'prop-types';

// 创建假元素
function createFakeElement(value) {
const fakeElement = document.createElement('textarea');

fakeElement.style.border = '0';
fakeElement.style.padding = '0';
fakeElement.style.margin = '0';

fakeElement.style.position = 'absolute';
fakeElement.style.left = '-999px';
fakeElement.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
fakeElement.setAttribute('readonly', '');
fakeElement.value = value;
return fakeElement;
}

function copyText(value) {
const element = createFakeElement(value);
document.body.appendChild(element);

// 选中元素
element.focus();
element.select();
element.setSelectionRange(0, element.value.length);

document.execCommand('copy');
document.body.removeChild(element);
Message.success('Success copied!');
}

@withRouter
class Copy extends React.Component {
static displayName = 'Copy';

static propTypes = {
style: PropTypes.object,
value: PropTypes.string,
textNode: PropTypes.string,
className: PropTypes.string,
showIcon: PropTypes.bool,
};

render() {
const { style = {}, value, textNode, className, showIcon = true } = this.props;
return (
<div className={className} onClick={() => (showIcon ? '' : copyText(value))} style={style}>
{textNode || value}
{showIcon && (
<Icon
title="复制"
className="copy-icon"
size="small"
type="copy"
onClick={() => copyText(value)}
/>
)}
</div>
);
}
}

export default Copy;
4 changes: 2 additions & 2 deletions console-ui/src/components/DeleteDialog/DeleteDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,11 @@ class DeleteDialog extends React.Component {
<div>
<h3>{this.state.isok ? locale.deletedSuccessfully : locale.deleteFailed}</h3>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#999', marginRight: 5 }}>Data ID</span>
<span style={{ color: '#c7254e' }}>{this.state.dataId}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#999', marginRight: 5 }}>Group</span>
<span style={{ color: '#c7254e' }}>{this.state.group}</span>
</p>
{this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}
Expand Down
27 changes: 13 additions & 14 deletions console-ui/src/components/NameSpaceList/NameSpaceList.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,13 +165,12 @@ class NameSpaceList extends React.Component {
const namespacesBtn = namespaceList.map((obj, index) => {
const style =
obj.namespace === nownamespace
? { color: '#00C1DE', paddingRight: 10, border: 'none', fontSize: 12 }
: { color: '#666', paddingRight: 10, border: 'none', fontSize: 12 };
? { color: '#209BFA', paddingRight: 10, border: 'none', fontSize: 14 }
: { color: '#666', paddingRight: 10, border: 'none', fontSize: 14 };
return (
<div key={index} style={{ float: 'left', cursor: 'pointer' }}>
{index === 0 ? '' : <span style={{ marginRight: 5, marginLeft: 5 }}>|</span>}
<div key={index} style={{ cursor: 'pointer' }}>
{index === 0 ? '' : <span style={{ marginRight: 8, color: '#999' }}>|</span>}
<span
type={'light'}
style={style}
onClick={this.changeNameSpace.bind(this, obj.namespace, obj.namespaceShowName)}
key={index}
Expand All @@ -181,23 +180,23 @@ class NameSpaceList extends React.Component {
</div>
);
});
return <div style={{ paddingTop: 9 }}>{namespacesBtn}</div>;
return namespacesBtn;
}

render() {
const namespaceList = this.state.namespaceList || [];
const title = this.props.title || '';
const namespacestyle = {
marginTop: 5,
marginBottom: '10px',
paddingBottom: '10px',
borderBottom: '1px solid #ccc',
};

return (
<div
className={namespaceList.length ? 'namespacewrapper' : ''}
style={namespaceList.length ? namespacestyle : {}}
style={{
display: 'flex',
height: 40,
alignItems: 'center',
marginTop: 8,
marginBottom: 16,
}}
>
{}
{title ? (
Expand All @@ -218,7 +217,7 @@ class NameSpaceList extends React.Component {
) : (
''
)}
<div style={{ float: 'left' }}>{this.rendernamespace(namespaceList)}</div>
{this.rendernamespace(namespaceList)}
</div>
);
}
Expand Down
69 changes: 69 additions & 0 deletions console-ui/src/components/PageTitle/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from 'react';
import { Provider, connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import Copy from '../Copy';

@withRouter
@connect(state => ({ ...state.locale }))
class PageTitle extends React.Component {
static propTypes = {
title: PropTypes.string,
desc: PropTypes.string,
nameSpace: PropTypes.bool,
locale: PropTypes.object,
};

getNameSpace(locale, desc, nameSpace) {
if (!nameSpace) {
return desc;
}
return (
<span style={{ display: 'flex', alignItems: 'center', marginLeft: 16 }}>
{locale.NameSpace.namespaceID}
<Copy
style={{
marginLeft: 16,
height: 32,
display: 'flex',
alignItems: 'center',
background: 'rgb(239, 243, 248)',
padding: '0px 8px',
minWidth: 220,
}}
value={desc}
/>
</span>
);
}

render() {
const { title, desc, nameSpace, locale } = this.props;
return (
<div style={{ display: 'flex', alignItems: 'center', marginTop: 8, marginBottom: 8 }}>
<span style={{ fontSize: 28, height: 40, fontWeight: 500 }}>{title}</span>
<span style={{ marginLeft: 4 }}>
{desc && desc !== 'undefined' ? this.getNameSpace(locale, desc, nameSpace) : ''}
</span>
</div>
);
}
}

export default PageTitle;
43 changes: 43 additions & 0 deletions console-ui/src/components/QueryResult/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright 1999-2018 Alibaba Group Holding Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from 'react';
import PropTypes from 'prop-types';
import { Provider, connect } from 'react-redux';
import './index.scss';

@connect(state => ({ ...state.locale }))
class QueryResult extends React.Component {
static displayName = 'QueryResult';

static propTypes = {
locale: PropTypes.object,
total: PropTypes.number,
};

render() {
const { locale = {}, total } = this.props;
return (
<div className="query_result_wrapper">
{locale.ConfigurationManagement.queryResults}
<strong style={{ fontWeight: 'bold' }}> {total} </strong>
{locale.ConfigurationManagement.articleMeetRequirements}
</div>
);
}
}

export default QueryResult;
21 changes: 21 additions & 0 deletions console-ui/src/components/QueryResult/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*!
* Copyright 1999-2018 Alibaba Group Holding Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

.query_result_wrapper{
font-size: 16px;
margin-bottom: 16px;
font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
}
17 changes: 8 additions & 9 deletions console-ui/src/components/RegionGroup/RegionGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import $ from 'jquery';
import { Button } from '@alifd/next';
import NameSpaceList from '../NameSpaceList';
import { setParams, request } from '../../globalLib';
import PageTitle from '../PageTitle';

import './index.scss';

Expand Down Expand Up @@ -261,7 +262,7 @@ class RegionGroup extends React.Component {

render() {
return (
<div>
<div style={{ marginTop: this.state.left ? 0 : -30 }}>
<div ref={ref => (this.mainRef = ref)} className="clearfix">
<div style={{ overflow: 'hidden' }}>
<div id="left" style={{ float: 'left', display: 'inline-block', marginRight: 20 }}>
Expand All @@ -270,7 +271,7 @@ class RegionGroup extends React.Component {
style={{ display: 'inline-block', verticalAlign: 'top' }}
>
{typeof this.state.left === 'string' ? (
<h5 style={this.styles.title}>{this.state.left}</h5>
<PageTitle title={this.state.left} />
) : (
this.state.left
)}
Expand Down Expand Up @@ -314,13 +315,11 @@ class RegionGroup extends React.Component {
</div>
</div>
{this.props.namespaceCallBack && (
<div>
<NameSpaceList
ref={this.nameSpaceList}
namespaceCallBack={this.props.namespaceCallBack}
setNowNameSpace={this.props.setNowNameSpace}
/>
</div>
<NameSpaceList
ref={this.nameSpaceList}
namespaceCallBack={this.props.namespaceCallBack}
setNowNameSpace={this.props.setNowNameSpace}
/>
)}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions console-ui/src/components/SuccessDialog/SuccessDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,11 @@ class SuccessDialog extends React.Component {
</h3>
)}
<p>
<span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
<span style={{ color: '#999', marginRight: 5 }}>Data ID</span>
<span style={{ color: '#c7254e' }}>{this.state.dataId}</span>
</p>
<p>
<span style={{ color: '#999', marginRight: 5 }}>Group:</span>
<span style={{ color: '#999', marginRight: 5 }}>Group</span>
<span style={{ color: '#c7254e' }}>{this.state.group}</span>
</p>
{this.state.isok ? '' : <p style={{ color: 'red' }}>{this.state.message}</p>}
Expand Down
2 changes: 2 additions & 0 deletions console-ui/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ import reducers from './reducers';
import { changeLanguage } from './reducers/locale';

import './index.scss';
import '@alifd/theme-design-pro/variables.css';
import '@alifd/theme-design-pro/dist/next.var.css';
import PropTypes from 'prop-types';

module.hot && module.hot.accept();
Expand Down
Loading

0 comments on commit 8cede1c

Please sign in to comment.