Skip to content

T
Tia-dev
Commit 3295596e authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

layout home

parent 523732c1
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 77 deletions
src/assets/sass/app.css
View file @ 3295596e
.main-color{
background-color: #1a2d3e !important;
}
.sub-color{
background-color: #f0f1f3 !important;
}
.gradient-purple {
background: linear-gradient(to top, #9b59b6 10%, #e74c3c 100%);
......@@ -127,6 +134,18 @@
padding: 5px 15px;
border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
color: #444444; }
.active {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
color: #fff;
background-color: #62dafc;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.color-white {
color: #fff; }
......@@ -5968,6 +5987,7 @@
font-size: 10pt;
text-align: center;
cursor: pointer;
outline: 'none';
/*&:focus {
box-shadow: 0 0 0 4px $pos-color;
}*/ }
src/container/Beranda.js
View file @ 3295596e
......@@ -5,7 +5,7 @@ class Beranda extends Component {
render() {
return (
<div style={{ flex: 1 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 20 }}>
<div style={{ height: 150, width: '100%', padding: 20 }} className={"main-color"}>
<Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
<Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
</div>
......
src/container/BudgetTahunan.js
View file @ 3295596e
......@@ -99,7 +99,7 @@ export default class BudgetTahunan extends Component {
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div>
<div style={{ padding: 20, width: '100%' }}>
......
src/container/BudgetTahunan/BalanceSheet.js
View file @ 3295596e
......@@ -254,7 +254,7 @@ export default class BalanceSheet extends Component {
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
......
src/container/Home.js
View file @ 3295596e
......@@ -79,7 +79,7 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
backgroundColor: '#0d2846'
backgroundColor: '#f6f7f9'
},
drawerClose: {
transition: theme.transitions.create('width', {
......@@ -87,11 +87,11 @@ const useStyles = makeStyles((theme) => ({
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: theme.spacing(7) + 1,
width: theme.spacing(3) + 2,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
width: theme.spacing(7) + 1,
},
backgroundColor: '#0d2846'
backgroundColor: '#f6f7f9'
},
toolbar: {
display: 'flex',
......@@ -124,6 +124,8 @@ export default function MiniDrawer() {
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [selectedIndex, setSelectedIndex] = React.useState([]);
const [selectedIndexs, setSelectedIndexs] = React.useState([]);
const [selectedSubIndex, setSelectSub] = React.useState([]);
// React.useEffect(() => {
// //
......@@ -137,6 +139,21 @@ export default function MiniDrawer() {
setOpen(false);
};
const resetIndex = () => {
setSelectedIndex("")
setSelectedIndexs("")
}
const selectSub = (e) => {
setSelectSub(e)
setSelectedIndex("")
}
const selectIndex = (e) => {
setSelectSub("")
setSelectedIndex(e)
}
let { path, url } = useRouteMatch();
const { height, width } = UseWindowDimensions();
......@@ -150,34 +167,6 @@ export default function MiniDrawer() {
[classes.appBarShift]: open,
})}
>
<Toolbar style={{ flex: 1, backgroundColor: '#51c6ea' }}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
<div style={{ backgroundColor: '#51c6ea', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
<div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
<Typography style={{ color: 'white' }}>Tommy</Typography>
{/* <img src={require('./assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} /> */}
<FadeMenu />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
<img src={Images.search} alt="React Logo" style={{ height: 18, width: 18 }} />
</div>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
<img src={Images.flagEnglish} alt="React Logo" style={{ height: 32, width: 32 }} />
<Typography style={{ color: 'white' }}>EN</Typography>
</div>
</div>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
......@@ -193,16 +182,33 @@ export default function MiniDrawer() {
}}
>
<div className={classes.toolbarDrawer} style={{
backgroundColor: '#51c5ea',
height: open ? null : 68,
paddingBottom: open ? 55 : null
backgroundColor: '#1a2d3e',
height: open ? null : 78,
paddingLeft: open ? null : 55,
display: open ? null : 'grid',
paddingBottom: open ? 55 : null,
alignSelf: open? null : 'center'
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
<IconButton onClick={handleDrawerClose}>
<ChevronLeftIcon style={{ fill: 'white' }} />
</IconButton>
</div>
{open === true ?
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
<IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
<ChevronLeftIcon style={{ fill: 'white' }} />
</IconButton>
</div> :
<IconButton
color="inherit"
aria-label="open drawer"
style={{outline: 'none'}}
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon style={{ fill: 'white' }} />
</IconButton>}
{open &&
<div style={{ width: '100%' }}>
<Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
......@@ -213,57 +219,57 @@ export default function MiniDrawer() {
<Divider />
{open &&
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}>
<div style={{ width: 90, height: 90, backgroundColor: '#0d2846', borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: 'white', borderRadius: 50, alignSelf: 'center' }}>
<div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
</div>
</div>
</div>
}
{open &&
<div style={{ marginLeft: 20, marginTop: 20 }}>
<Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
<div style={{ marginLeft: 20, marginTop: 10 }}>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>Application</Typography>
</div>
}
<List>
{ArraySide.map((item, index) => (
<div style={{ marginTop: index === 0 ? null : 10 }}>
<div style={{ marginTop: index === 0 ? null : 5 }} >
{item.subItem != null ?
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndex == 0 ? setSelectedIndex(index) : setSelectedIndex(0)}>
<ListItem button key={item.label}>
<div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 10, paddingRight: 10 }} onClick={() => selectedIndexs == null ? setSelectedIndexs(item.label) : setSelectedIndexs(null)}>
<ListItem key={item.label}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
{item.subItem != null ? (index === selectedIndex ? <ExpandLess style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "white", marginLeft: 50, alignSelf: 'center' }} />) : null}
{item.subItem != null ? (item.label === selectedIndex ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
</div>
:
item.label === 'Settings' ?
open ?
<Link to={`${url}/${item.path}`}>
<ListItem button key={item.label} onClick={() => null}>
<Typography style={{ color: 'white', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'nunito' }}>{item.label}</Typography>
</ListItem>
</Link> : null
:
<Link to={`${url}/${item.path}`}>
<div style={{ paddingLeft: 10 }}>
<ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{item.label}</Typography>
<div style={{ paddingLeft: 10 }} className={selectedIndex === item.label ? "active" : ""}>
<ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
<ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
</ListItem>
</div>
</Link>
}
{item.subItem != null &&
<div>
<Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
<Collapse in={item.label === selectedIndexs} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.subItem.map((sub, index) => {
{item.subItem.map((sub, indexs) => {
return (
<Link to={`${url}/${sub.path}`}>
<div style={{ paddingLeft: 10 }}>
<ListItem style={{ paddingLeft: 57 }}>
<Typography style={{ fontFamily: 'nunito', color: 'white', fontSize: 14 }}>{sub.label}</Typography>
<div style={{ paddingLeft: 10, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => selectSub(sub.label)}>
<ListItem button style={{ paddingLeft: 61 }}>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
</ListItem>
</div>
</Link>
......@@ -279,7 +285,7 @@ export default function MiniDrawer() {
</Drawer>
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div>
<div className={classes.toolbar} />
{/* <div className={classes.toolbar} /> */}
<MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
<Switch>
{HomeRoutes.map((route, index) => (
......@@ -299,9 +305,9 @@ export default function MiniDrawer() {
))}
</Switch>
</MuiPickersUtilsProvider>
<Footer>
{/* <Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer>
</Footer> */}
</div>
</div>
......
src/container/HomePage.js
View file @ 3295596e
......@@ -84,7 +84,7 @@ class HomePage extends Component {
}]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
......
src/container/Laporan/DashboardCAT.js
View file @ 3295596e
......@@ -32,8 +32,8 @@ export default class DashboardCAT extends Component {
{ value: '2016', label: '2016' },
]
return (
<div style={{}}>
<div style={{ backgroundColor: '#354960', padding: 28 }}>
<div className='a-s-p-mid no-header'>
<div className={"main-color"} style={{ padding: 28 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
</div>
<div className="padding-20px">
......
src/container/MasterData/Parameter/Parameter.js
View file @ 3295596e
......@@ -155,7 +155,7 @@ export default class Parameter extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Parameter</label>
......
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ 3295596e
......@@ -263,7 +263,7 @@ export default class Perusahaan extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
{this.state.visiblePerusahaan === true ?
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/MasterData/ReportItems.js
View file @ 3295596e
......@@ -113,7 +113,7 @@ export default class ReportItems extends Component {
<div>
{this.state.itemReport === true ?
<div style={{ height: this.props.height }}>
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Item Report</label>
......@@ -200,7 +200,7 @@ export default class ReportItems extends Component {
/>
:
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div style={{ height: 199, width: '100%' }} className={"main-color"}/>
<div>
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/MasterData/UnitBisnis.js
View file @ 3295596e
......@@ -352,7 +352,7 @@ export default class UnitBisnis extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div style={{ height: 199, width: '100%' }} className={"main-color"}/>
{this.state.visibleUnitBisnis === true ?
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 3295596e
......@@ -58,7 +58,7 @@ export default class VisualReportItems extends Component {
return (
<div>
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div style={{ height: 199, width: '100%' }} className={"main-color"} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label>
......
src/container/Otorisasi/User.js
View file @ 3295596e
......@@ -289,7 +289,7 @@ export default class UserRole extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
{this.state.visibleUser ? <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>
......
src/container/Otorisasi/UserRole.js
View file @ 3295596e
......@@ -178,7 +178,7 @@ class UserRole extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div className={"main-color"} style={{ height: 199, width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment