gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix accordion, delete aside

Browse Source
This commit is contained in:
woothu 2020-05-25 11:45:29 +02:00
parent e236aad4ab
commit 0e6506ea33
4 changed files with 24 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
src/containers/TheAside.js
View File

@ -1,242 +0,0 @@
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
CNav,
CNavItem,
CNavLink,
CTabs,
CTabContent,
CTabPane,
CListGroup,
CListGroupItem,
CSwitch,
CProgress,
CSidebar,
CImg,
CSidebarClose
} from '@coreui/react'
import { CIcon } from '@coreui/icons-react'
const TheAside = () => {
const show = useSelector(state => state.asideShow)
const dispatch = useDispatch()
const setState = (state) => dispatch({type: 'set', asideShow: state})
return (
<CSidebar
aside
colorScheme='light'
size='lg'
overlaid
show={show}
onShowChange={(state) => setState(state)}
>
<CSidebarClose onClick={() => setState(false) } />
<CTabs>
<CNav variant='tabs' className='nav-underline nav-underline-primary'>
<CNavItem>
<CNavLink>
<CIcon name="cil-list" alt="CoreUI Icons List" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-speech" alt="CoreUI Icons Speech" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-settings" alt="CoreUI Icons Settings" />
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane>
<CListGroup variant="accent">
<CListGroupItem color="secondary" className="bg-light text-center font-weight-bold text-muted text-uppercase small">Today</CListGroupItem>
<CListGroupItem accent="warning" href="#" className="list-group-item-divider">
<div className="c-avatar float-right">
<CImg
className="c-avatar-img"
src="avatars/7.jpg"
alt="admin@bootstrapmaster.com"
/>
</div>
<div>Meeting with <strong>Lucas</strong></div>
<small className="text-muted mr-3"><CIcon name="cil-calendar" /> 1 - 3pm</small>
<small className="text-muted"><CIcon name="cil-location-pin" /> Palo Alto, CA</small>
</CListGroupItem>
<CListGroupItem accent="info" href="#">
<div className="c-avatar float-right">
<CImg
className="c-avatar-img"
src="avatars/4.jpg"
alt="admin@bootstrapmaster.com"
/>
</div>
<div>Skype with <strong>Megan</strong></div>
<small className="text-muted mr-3"><CIcon name="cil-calendar" /> 4 - 5pm</small>
<small className="text-muted"><CIcon name="cib-skype" /> On-line</small>
</CListGroupItem>
<hr className="transparent mx-3 my-0" />
<CListGroupItem color="secondary" className="bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</CListGroupItem>
<CListGroupItem accent="danger" href="#" className="list-group-item-divider">
<div>New UI Project - <strong>deadline</strong></div>
<small className="text-muted mr-3"><CIcon name="cil-calendar" /> 10 - 11pm</small>
<small className="text-muted"><CIcon name="cil-home" /> creativeLabs HQ</small>
<div className="c-avatars-stack mt-2">
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/2.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/3.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/4.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/5.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/6.jpg" alt="admin@bootstrapmaster.com" /></div>
</div>
</CListGroupItem>
<CListGroupItem accent="success" href="#" className="c-list-group-item-divider">
<div><strong>#10 Startups.Garden</strong> Meetup</div>
<small className="text-muted mr-3"><CIcon name="cil-calendar" /> 1 - 3pm</small>
<small className="text-muted"><CIcon name="cil-location-pin" /> Palo Alto, CA</small>
</CListGroupItem>
<CListGroupItem accent="primary" href="#" className="c-list-group-item-divider">
<div><strong>Team meeting</strong></div>
<small className="text-muted mr-3"><CIcon name="cil-calendar" /> 4 - 6pm</small>
<small className="text-muted"><CIcon name="cil-home" /> creativeLabs HQ</small>
<div className="c-avatars-stack mt-2">
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/2.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/3.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/4.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/5.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/6.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" /></div>
<div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/8.jpg" alt="admin@bootstrapmaster.com" /></div>
</div>
</CListGroupItem>
</CListGroup>
</CTabPane>
<CTabPane className="p-3">
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="c-avatar">
<CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">Lukasz Holeczek</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="c-avatar">
<CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">Lukasz Holeczek</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="c-avatar">
<CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">Lukasz Holeczek</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="c-avatar">
<CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">Lukasz Holeczek</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="c-avatar">
<CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</div>
<div>
<small className="text-muted">Lukasz Holeczek</small>
<small className="text-muted float-right mt-1">1:52 PM</small>
</div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div>
</CTabPane>
<CTabPane className="p-3">
<h6>Settings</h6>
<div>
<div className="clearfix mt-4"><small><b>Option 1</b></small>
<CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" defaultChecked />
</div>
<div><small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></div>
</div>
<div>
<div className="clearfix mt-3"><small><b>Option 2</b></small>
<CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" />
</div>
<div><small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></div>
</div>
<div>
<div className="clearfix mt-3"><small><b>Option 3</b></small>
<CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" />
</div>
</div>
<div>
<div className="clearfix mt-3"><small><b>Option 4</b></small>
<CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" defaultChecked />
</div>
</div>
<hr />
<h6>System Utilization</h6>
<div className="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
<CProgress size="xs" color="info" value={25} />
<small className="text-muted">348 Processes. 1/4 Cores.</small>
<div className="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
<CProgress size="xs" color="warning" value={70} />
<small className="text-muted">11444GB/16384MB</small>
<div className="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
<CProgress size="xs" color="danger" value={95} />
<small className="text-muted">243GB/256GB</small>
<div className="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
<CProgress size="xs" color="success" value={10} />
<small className="text-muted">25GB/256GB</small>
</CTabPane>
</CTabContent>
</CTabs>
</CSidebar>
)
}
export default React.memo(TheAside)

13
src/containers/TheHeader.js
View File

@ -26,7 +26,6 @@ import logo from '../assets/img/brand/coreui-react-neg.svg'
const TheHeader = () => {
const dispatch = useDispatch()
const asideShow = useSelector(state => state.asideShow)
const sidebarShow = useSelector(state => state.sidebarShow)
const toggleSidebar = () => {
@ -72,17 +71,13 @@ const TheHeader = () => {
<TheHeaderDropdownTasks/>
<TheHeaderDropdownMssg/>
<TheHeaderDropdown/>
<CToggler
inHeader
className="d-md-down-none"
onClick={() => dispatch({type: 'set', asideShow: !asideShow})}
>
<CIcon className="mr-2" size="lg" name="cil-applications-settings" />
</CToggler>
</CHeaderNav>
<CSubheader className="px-3 justify-content-between">
<CBreadcrumbRouter className="border-0 c-subheader-nav m-0 px-0 px-md-3" routes={routes} />
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<div className="d-md-down-none mfe-2 c-subheader-nav">
<CLink className="c-subheader-nav-link"href="#">
<CIcon name="cil-speech" alt="Settings" />

3
src/store.js
View File

@ -1,8 +1,7 @@
import { createStore } from 'redux'
const initialState = {
sidebarShow: 'responsive',
asideShow: false
sidebarShow: 'responsive'
}
const changeState = (state = initialState, { type, ...rest }) => {

48
src/views/Base/Collapses/Collapses.js
View File

@ -17,23 +17,6 @@ const Collapses = () => {
const [collapseMulti, setCollapseMulti] = useState([false, false])
const [accordion, setAccordion] = useState(1)
const [fade, setFade] = useState(true)
const [status, setStatus] = useState('Closed')
const onEntering = () => {
setStatus('Opening...')
}
const onEntered = () => {
setStatus('Opened')
}
const onExiting = () => {
setStatus('Closing...')
}
const onExited = () => {
setStatus('Closed')
}
const toggle = (e) => {
setCollapse(!collapse)
@ -74,13 +57,7 @@ const Collapses = () => {
</a>
</div>
</CCardHeader>
<CCollapse
show={collapse}
onEntering={onEntering}
onEntered={onEntered}
onExiting={onExiting}
onExited={onExited}
>
<CCollapse show={collapse}>
<CCardBody>
<p>
Anim pariatur cliche reprehenderit,
@ -107,8 +84,6 @@ const Collapses = () => {
onClick={toggle}
className={'mb-1'}
>Toggling button</CButton>
<hr/>
<h5>Current state: {status}</h5>
</CCardFooter>
</CCard>
@ -180,7 +155,12 @@ const Collapses = () => {
<div id="accordion">
<CCard className="mb-0">
<CCardHeader id="headingOne">
<CButton block color="link" className="text-left m-0 p-0" onClick={() => setAccordion(0)}>
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 0 ? null : 0)}
>
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
</CButton>
</CCardHeader>
@ -196,7 +176,12 @@ const Collapses = () => {
</CCard>
<CCard className="mb-0">
<CCardHeader id="headingTwo">
<CButton block color="link" className="text-left m-0 p-0" onClick={() => setAccordion(1)}>
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 1 ? null : 1)}
>
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
</CButton>
</CCardHeader>
@ -212,7 +197,12 @@ const Collapses = () => {
</CCard>
<CCard className="mb-0">
<CCardHeader id="headingThree">
<CButton block color="link" className="text-left m-0 p-0" onClick={() => setAccordion(2)}>
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 2 ? null : 2)}
>
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
</CButton>
</CCardHeader>