Merge pull request #11 from telerik/design-updates
feat: update drawer, grid and avatars styling
This commit is contained in:
Silviya Boteva
GitHub
Коммит
6452bd42c1
46
package.json
46
package.json
|
|
@ -4,29 +4,29 @@
|
|||
"private": true,
|
||||
"homepage": "http://telerik.github.io/react-coffee-warehouse",
|
||||
"dependencies": {
|
||||
"@progress/kendo-data-query": "^1.5.3",
|
||||
"@progress/kendo-date-math": "^1.5.0",
|
||||
"@progress/kendo-drawing": "^1.6.0",
|
||||
"@progress/kendo-licensing": "^1.1.3",
|
||||
"@progress/kendo-react-buttons": "^4.3.0",
|
||||
"@progress/kendo-react-charts": "^4.3.0",
|
||||
"@progress/kendo-react-data-tools": "^4.3.0",
|
||||
"@progress/kendo-react-dateinputs": "^4.3.0",
|
||||
"@progress/kendo-react-dialogs": "^4.3.0",
|
||||
"@progress/kendo-react-dropdowns": "^4.3.0",
|
||||
"@progress/kendo-react-editor": "^4.3.0",
|
||||
"@progress/kendo-react-excel-export": "^4.3.0",
|
||||
"@progress/kendo-react-form": "^4.3.0",
|
||||
"@progress/kendo-react-grid": "^4.3.0",
|
||||
"@progress/kendo-react-inputs": "^4.3.0",
|
||||
"@progress/kendo-react-intl": "^4.3.0",
|
||||
"@progress/kendo-react-layout": "^4.3.0",
|
||||
"@progress/kendo-react-pdf": "^4.3.0",
|
||||
"@progress/kendo-react-progressbars": "^4.3.0",
|
||||
"@progress/kendo-react-scheduler": "^4.3.0",
|
||||
"@progress/kendo-react-treeview": "^4.3.0",
|
||||
"@progress/kendo-react-upload": "^4.3.0",
|
||||
"@progress/kendo-theme-default": "^4.32.0",
|
||||
"@progress/kendo-data-query": "^1.5.4",
|
||||
"@progress/kendo-date-math": "^1.5.1",
|
||||
"@progress/kendo-drawing": "^1.9.4",
|
||||
"@progress/kendo-licensing": "^1.1.4",
|
||||
"@progress/kendo-react-buttons": "^4.5.0",
|
||||
"@progress/kendo-react-charts": "^4.5.0",
|
||||
"@progress/kendo-react-data-tools": "^4.5.0",
|
||||
"@progress/kendo-react-dateinputs": "^4.5.0",
|
||||
"@progress/kendo-react-dialogs": "^4.5.0",
|
||||
"@progress/kendo-react-dropdowns": "^4.5.0",
|
||||
"@progress/kendo-react-editor": "^4.5.0",
|
||||
"@progress/kendo-react-excel-export": "^4.5.0",
|
||||
"@progress/kendo-react-form": "^4.5.0",
|
||||
"@progress/kendo-react-grid": "^4.5.0",
|
||||
"@progress/kendo-react-inputs": "^4.5.0",
|
||||
"@progress/kendo-react-intl": "^4.5.0",
|
||||
"@progress/kendo-react-layout": "^4.5.0",
|
||||
"@progress/kendo-react-pdf": "^4.5.0",
|
||||
"@progress/kendo-react-progressbars": "^4.5.0",
|
||||
"@progress/kendo-react-scheduler": "^4.5.0",
|
||||
"@progress/kendo-react-treeview": "^4.5.0",
|
||||
"@progress/kendo-react-upload": "^4.5.0",
|
||||
"@progress/kendo-theme-default": "^4.36.0",
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
|
|
|
|||
|
|
@ -1,31 +1,20 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
|
||||
import { Drawer, DrawerContent, DrawerItem } from '@progress/kendo-react-layout';
|
||||
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
|
||||
|
||||
import { Header } from './Header.jsx';
|
||||
|
||||
|
||||
const items = [
|
||||
{ name: 'dashboard', iconSvg: 'dashboard-icon', selected: true , route: '/' },
|
||||
{ name: 'planning', iconSvg: 'planning-icon', route: '/planning' },
|
||||
{ name: 'profile', iconSvg: 'profile-icon', route: '/profile' },
|
||||
{ name: 'dashboard', icon: 'k-i-grid', selected: true , route: '/' },
|
||||
{ name: 'planning', icon: 'k-i-calendar', route: '/planning' },
|
||||
{ name: 'profile', icon: 'k-i-user', route: '/profile' },
|
||||
{ separator: true },
|
||||
{ name: 'info', iconSvg: 'info-icon', route: '/info' }
|
||||
{ name: 'info', icon: 'k-i-information', route: '/info' }
|
||||
];
|
||||
|
||||
const CustomDrawerItem = (props) => {
|
||||
const { iconSvg, text, ...others } = props;
|
||||
return (
|
||||
<DrawerItem {...others}>
|
||||
<span className={'k-icon ' + iconSvg} />
|
||||
<span className="k-item-text">{text}</span>
|
||||
</DrawerItem>
|
||||
);
|
||||
};
|
||||
|
||||
class DrawerRouterContainer extends React.Component {
|
||||
state = {
|
||||
expanded: true,
|
||||
|
|
@ -81,7 +70,6 @@ class DrawerRouterContainer extends React.Component {
|
|||
selected: item.name === selected
|
||||
}))
|
||||
}
|
||||
item={CustomDrawerItem}
|
||||
position='start'
|
||||
mode={this.state.isSmallerScreen ? 'overlay' : 'push'}
|
||||
mini={this.state.isSmallerScreen ? false : true}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const FlagCell = (props) => {
|
|||
<td style={{textAlign: 'center'}}>
|
||||
<img
|
||||
src={images[props.dataItem.country]}
|
||||
style={{width: 30}}
|
||||
style={{width: 30, verticalAlign: 'middle', borderStyle: 'none'}}
|
||||
alt={props.dataItem.country}
|
||||
/>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -71,13 +71,10 @@ const Planning = () => {
|
|||
borderWidth: 2,
|
||||
borderColor: teams.find(({teamID}) => teamID === employee.teamId).teamColor,
|
||||
}}>
|
||||
<img alt="" style={{
|
||||
<div class="k-avatar-image" style={{
|
||||
backgroundImage: images[employee.imgId + employee.gender],
|
||||
boxShadow: 'inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2)',
|
||||
borderRadius: '50%',
|
||||
backgroundSize: 'contain',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center center',
|
||||
verticalAlign: 'middle'
|
||||
}}
|
||||
/>
|
||||
</Avatar>
|
||||
|
|
|
|||
|
|
@ -28,47 +28,6 @@ a {
|
|||
|
||||
.k-drawer-item {
|
||||
user-select: none;
|
||||
|
||||
&:not(.k-drawer-separator) {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.k-icon {
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: #656565;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
|
||||
&.dashboard-icon {
|
||||
-webkit-mask-image: url('./../assets/dashboard-icon.svg');
|
||||
mask-image: url('./../assets/dashboard-icon.svg');
|
||||
margin-top: 3px;
|
||||
margin-left: 7px;
|
||||
|
||||
}
|
||||
&.planning-icon {
|
||||
-webkit-mask-image: url('./../assets/planning-icon.svg');
|
||||
mask-image: url('./../assets/planning-icon.svg');
|
||||
}
|
||||
&.profile-icon {
|
||||
-webkit-mask-image: url('./../assets/profile-icon.svg');
|
||||
mask-image: url('./../assets/profile-icon.svg');
|
||||
}
|
||||
&.info-icon {
|
||||
-webkit-mask-image: url('./../assets/info-icon.svg');
|
||||
mask-image: url('./../assets/info-icon.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.k-state-selected .k-icon {
|
||||
&.dashboard-icon,
|
||||
&.planning-icon,
|
||||
&.profile-icon,
|
||||
&.info-icon {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -295,6 +254,7 @@ a {
|
|||
.k-hbox {
|
||||
padding: 0 20px;
|
||||
background: transparent;
|
||||
align-items: center;
|
||||
}
|
||||
.k-card-title {
|
||||
font-size: 15px;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче