Skip to content

Commit

Permalink
feat: WIP UI redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
SolidZORO committed Jul 1, 2020
1 parent 4841122 commit a3f0946
Show file tree
Hide file tree
Showing 35 changed files with 893 additions and 302 deletions.
1 change: 1 addition & 0 deletions packages/leaa-dashboard/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@ant-design/icons": "4.2.1",
"@loadable/component": "^5.12.0",
"@nestjsx/crud-request": "^4.6.2",
"@svgr/webpack": "^5.4.0",
"animated-scroll-to": "^2.0.7",
"antd": "4.3.5",
"axios": "^0.19.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
.ant-form-vertical {
& > .ant-row:last-child {
.ant-row {
margin-bottom: @page-card-padding-x / 2;
//margin-bottom: @pcp-x / 2;
}
}
}
Expand Down
18 changes: 13 additions & 5 deletions packages/leaa-dashboard/src/components/PageCard/PageCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import _ from 'lodash';
import React from 'react';
import cx from 'classnames';
import { Spin } from 'antd';
import { Spin, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import { IRouteItem } from '@leaa/dashboard/src/interfaces';
import { RiAddLine } from 'react-icons/ri';
Expand Down Expand Up @@ -31,11 +31,20 @@ export const PageCard = (props: IProps) => {
return (
<div className={style['title']}>
<span>
{props.route?.icon}
<strong>{t(`${props.route?.namei18n}`)}</strong>
{props.route?.canCreate && (
<Link className="g-page-card-create-link" to={`${props.route?.path}/create`}>
<RiAddLine title="PAGE_CARD_TITLE_CREATE_ICON" />
<Link
className={cx(style['page-card-create-link'], 'g-page-card-create-link')}
to={`${props.route?.path}/create`}
>
<Button
shape="round"
type="ghost"
icon={<RiAddLine />}
className={cx(style['page-card-create-button'])}
>
{t('_lang:create')}
</Button>
</Link>
)}
</span>
Expand All @@ -47,7 +56,6 @@ export const PageCard = (props: IProps) => {
return (
<div className={style['title']}>
<span>
{props.route?.icon}
<strong>{t(`${props.route?.namei18n}`)}</strong>
</span>
</div>
Expand Down
61 changes: 34 additions & 27 deletions packages/leaa-dashboard/src/components/PageCard/style.module.less
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
.page-card-wrapper {
//min-height: 300px;
transition: all 0.3s;
padding-bottom: 30px;
padding-bottom: 60px;

:global {
.ant-card {
Expand All @@ -22,11 +22,12 @@

.header {
background: transparent;
margin: 0 0 12px 0;
//margin: 12px 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 28px;
min-height: 32px;

@media (min-width: @screen-md) {
Expand All @@ -40,39 +41,43 @@
color: #26254b;

:global {
.rcicon {
font-weight: 400;
margin-right: 8px;
vertical-align: -4px;
font-size: 20px;
}

span {
strong {
font-weight: 500;
font-size: 18px;
vertical-align: -1px;
font-size: 28px;
}
}
}
}

.g-page-card-create-link,
.g-page-card-create-button {
display: inline-block;
margin-left: 10px;
color: #ccc;
.page-card-create-link {
margin-left: 20px;
//background-color: #ff0;
//border: 1px solid @primary-color;
}

&:hover {
color: @primary-color;
}
.page-card-create-button {
background-color: transparent;
border-color: @primary-color;
color: @primary-color;
//padding: 15px;
height: 34px;

svg {
line-height: 0;
font-size: 180%;
vertical-align: -2px;
}

.rcicon {
display: inline-block;
font-size: 20px;
}
}
span {
line-height: 0;
vertical-align: 5px;
padding: 0 8px;
font-size: 120%;
}

.page-card-create-button {
}
&:hover {
background-color: @primary-color;
color: #fff;
}
}

Expand Down Expand Up @@ -124,6 +129,8 @@
}

.container {
display: contents;
position: relative;
background: transparent;
margin-bottom: 80px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
//margin-top: 113px;

position: absolute;
bottom: @page-card-padding-x;
right: @page-card-padding-x;
bottom: var(--page-card-padding-x);
right: var(--page-card-padding-x);

span {
margin-top: 0 !important;
Expand Down
66 changes: 37 additions & 29 deletions packages/leaa-dashboard/src/components/SubmitBar/style.module.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@

.submit-bar-wrapper {
position: relative;
display: block;
}

.submit-bar-container {
padding-top: 5px;
margin-bottom: 50px;
position: relative;

:global {
.g-submit-bar-button {
Expand All @@ -25,37 +23,47 @@
bottom: 0;
left: 0;
right: 0;
transition: all 0.3s;
padding: 20px 0;
z-index: 99;

.submit-bar-container {
padding: 18px;
text-align: center;
background: #fffd;
margin: 0;
box-shadow: 0 -1px 5px 1px #bbb4;
}
}

:global {
.g-full-layout-wrapper--mb {
.g-submit-bar-wrapper--full {
margin-left: 0;
}
@media (min-width: @screen-md) {
left: var(--layout-sidebar-width--pc);
}

.g-full-layout-wrapper--pc {
.g-submit-bar-wrapper--full {
margin-left: @layout-sidebar-width--pc;
}
}
.submit-bar-container {
background-color: #fffc;
//padding: 15px;
border-radius: 90px;
display: flex;
width: 90%;
justify-content: space-around;
margin: 0 auto;

.siderbar-collapsed {
:local {
.submit-bar-wrapper--full {
margin-left: 0;
transition: all 0.3s;
}
@media (min-width: @screen-md) {
width: 400px;
}
}
}

//:global {
// .g-full-layout-wrapper--mb {
// .g-submit-bar-wrapper--full {
// margin-left: 0;
// }
// }
//
// .g-full-layout-wrapper--pc {
// .g-submit-bar-wrapper--full {
// margin-left: var(--layout-sidebar-width--pc);
// }
// }
//
// .siderbar-collapsed {
// :local {
// .submit-bar-wrapper--full {
// margin-left: 0;
// transition: all 0.3s;
// }
// }
// }
//}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import cx from 'classnames';
import { Button, Popover } from 'antd';

import { RiMoreFill } from './icons';

import style from './style.module.less';

interface IProps {
buttonGroup: React.ReactNode;
moreGroup: React.ReactNode;
// children: React.ReactNode;
title?: React.ReactNode;
extra?: React.ReactNode;
className?: string;
loading?: boolean;
full?: boolean;
}

export const SubmitToolbar = (props: IProps) => (
<div className={cx(style['submit-toolbar-wrapper'], props.className)}>
<div className={style['submit-toolbar-container']}>
{props.buttonGroup && <div className={style['submit-toolbar-buttonGroup']}>{props.buttonGroup}</div>}

{props.moreGroup && (
<div className={style['submit-toolbar-moreGroup']}>
<Button type="link" icon={<RiMoreFill />} />
</div>
)}
</div>
</div>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// TODO, delete after waiting for `https://github.com/react-icons/react-icons` update
import { GenIcon, IconBaseProps } from 'react-icons';

export const RiMoreFill = (props: IconBaseProps) =>
GenIcon({
tag: 'svg',
attr: { viewBox: '0 0 24 24' },
child: [
{
tag: 'g',
attr: {},
child: [
// @ts-ignore
{ tag: 'path', attr: { fill: 'none', d: 'M0 0h24v24H0z' } },
// @ts-ignore
{
tag: 'path',
attr: {
d:
// eslint-disable-next-line max-len
'M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm14 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z',
},
},
],
},
],
})(props);
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a3f0946

Please sign in to comment.