sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: adjust widgets to library component changes

Browse Source
This commit is contained in:
woothu
2019-06-24 14:40:18 +02:00
parent a87d4266e7
commit f4a35cffc2
4 changed files with 81 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+3 -3
View File
@@ -82,7 +82,7 @@
</CRow> </CRow>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<WidgetsSocial/> <WidgetsBrand/>
<CRow> <CRow>
<CCol md="12"> <CCol md="12">
<CCard header-html="Traffic &amp; Sales" body-wrapper> <CCard header-html="Traffic &amp; Sales" body-wrapper>
@@ -451,7 +451,7 @@
<script> <script>
import MainChartExample from './charts/MainChartExample' import MainChartExample from './charts/MainChartExample'
import WidgetsDropdown from './widgets/WidgetsDropdown' import WidgetsDropdown from './widgets/WidgetsDropdown'
import WidgetsSocial from './widgets/WidgetsSocial' import WidgetsBrand from './widgets/WidgetsBrand'
import CChartLineSimple from './charts/CChartLineSimple' import CChartLineSimple from './charts/CChartLineSimple'
export default { export default {
@@ -459,7 +459,7 @@ export default {
components: { components: {
MainChartExample, MainChartExample,
WidgetsDropdown, WidgetsDropdown,
WidgetsSocial, WidgetsBrand,
CChartLineSimple CChartLineSimple
}, },
data () { data () {
src/views/widgets/Widgets.vue
+25 -56
View File
@@ -121,48 +121,6 @@
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
<CRow>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
link="#"
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
link="#"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
link="#"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="danger"
link="#"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
<CRow> <CRow>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
@@ -234,10 +192,21 @@
no-padding no-padding
> >
<CIcon name="moon" class="c-mx-5 " width="24"/> <CIcon name="moon" class="c-mx-5 " width="24"/>
<template #footer>
<CCardFooter class="c-card-footer c-px-3 c-py-2">
<CLink
class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
href="https://coreui.io/"
>
View more
<CIcon name="arrowRight" class="c-float-right" width="16"/>
</CLink>
</CCardFooter>
</template>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <!-- <CRow>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
@@ -271,9 +240,9 @@
<CIcon name="moon" class="c-mx-5" width="24"/> <CIcon name="moon" class="c-mx-5" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow> -->
<WidgetsSocial noCharts/> <WidgetsBrand noCharts/>
<WidgetsSocial/> <WidgetsBrand/>
<CCardGroup class="c-mb-4"> <CCardGroup class="c-mb-4">
<CWidgetProgressIcon <CWidgetProgressIcon
header="87.500" header="87.500"
@@ -473,7 +442,7 @@
<WidgetsDropdown/> <WidgetsDropdown/>
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetSmallText <CWidgetHeaderDetails
right-header="SALE" right-header="SALE"
right-footer="Today 6:43 AM" right-footer="Today 6:43 AM"
left-header="$1.890,65" left-header="$1.890,65"
@@ -481,10 +450,10 @@
> >
<CChartLineSimple style="height:40px"/> <CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/> <CChartBarSimple style="height:40px"/>
</CWidgetSmallText> </CWidgetHeaderDetails>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetSmallText <CWidgetHeaderDetails
variant="success" variant="success"
right-header="SALE" right-header="SALE"
right-footer="Today 6:43 AM" right-footer="Today 6:43 AM"
@@ -493,10 +462,10 @@
> >
<CChartLineSimple style="height:40px"/> <CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/> <CChartBarSimple style="height:40px"/>
</CWidgetSmallText> </CWidgetHeaderDetails>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetSmallText <CWidgetHeaderDetails
variant="danger" variant="danger"
right-header="SALE" right-header="SALE"
right-footer="Today 6:43 AM" right-footer="Today 6:43 AM"
@@ -505,10 +474,10 @@
> >
<CChartLineSimple style="height:40px"/> <CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/> <CChartBarSimple style="height:40px"/>
</CWidgetSmallText> </CWidgetHeaderDetails>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetSmallText <CWidgetHeaderDetails
variant="warning" variant="warning"
right-header="SALE" right-header="SALE"
right-footer="Today 6:43 AM" right-footer="Today 6:43 AM"
@@ -517,7 +486,7 @@
> >
<CChartLineSimple style="height:40px"/> <CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/> <CChartBarSimple style="height:40px"/>
</CWidgetSmallText> </CWidgetHeaderDetails>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
@@ -556,7 +525,7 @@
</template> </template>
<script> <script>
import WidgetsSocial from './WidgetsSocial' import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown' import WidgetsDropdown from './WidgetsDropdown'
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js' import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
@@ -565,7 +534,7 @@ export default {
components: { components: {
CChartLineSimple, CChartLineSimple,
CChartBarSimple, CChartBarSimple,
WidgetsSocial, WidgetsBrand,
WidgetsDropdown WidgetsDropdown
} }
} }
src/views/widgets/WidgetsSocial.vue → src/views/widgets/WidgetsBrand.vue
+16 -16
View File
@@ -2,7 +2,7 @@
<CRow> <CRow>
<template v-if="!noCharts"> <template v-if="!noCharts">
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
variant="facebook" variant="facebook"
right-header="89k" right-header="89k"
right-footer="friends" right-footer="friends"
@@ -22,10 +22,10 @@
label="Friends" label="Friends"
labels="months" labels="months"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
variant="twitter" variant="twitter"
right-header="973k" right-header="973k"
right-footer="followers" right-footer="followers"
@@ -45,10 +45,10 @@
label="Followers" label="Followers"
labels="months" labels="months"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
variant="linkedin" variant="linkedin"
right-header="500+" right-header="500+"
right-footer="contracts" right-footer="contracts"
@@ -68,10 +68,10 @@
label="Contracts" label="Contracts"
labels="months" labels="months"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
right-header="12" right-header="12"
right-footer="events" right-footer="events"
left-header="4" left-header="4"
@@ -91,12 +91,12 @@
label="Followers" label="Followers"
labels="months" labels="months"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
</template> </template>
<template v-else> <template v-else>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
variant="facebook" variant="facebook"
right-header="89k" right-header="89k"
right-footer="friends" right-footer="friends"
@@ -108,10 +108,10 @@
height="56" height="56"
class="c-my-4" class="c-my-4"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
variant="twitter" variant="twitter"
right-header="973k" right-header="973k"
right-footer="followers" right-footer="followers"
@@ -123,10 +123,10 @@
height="56" height="56"
class="c-my-4" class="c-my-4"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
variant="linkedin" variant="linkedin"
right-header="500+" right-header="500+"
right-footer="contracts" right-footer="contracts"
@@ -138,10 +138,10 @@
height="56" height="56"
class="c-my-4" class="c-my-4"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetBrand
right-header="12" right-header="12"
right-footer="events" right-footer="events"
left-header="4" left-header="4"
@@ -153,7 +153,7 @@
height="56" height="56"
class="c-my-4" class="c-my-4"
/> />
</CWidgetSocial> </CWidgetBrand>
</CCol> </CCol>
</template> </template>
</CRow> </CRow>
src/views/widgets/WidgetsDropdown.vue
+37 -36
View File
@@ -2,7 +2,7 @@
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown header="9.823" text="Members online"> <CWidgetDropdown header="9.823" text="Members online">
<template #dropdown> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
@@ -15,20 +15,22 @@
<CDropdownItem disabled>Disabled action</CDropdownItem> <CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
<CChartLineSimple <template #footer>
pointed <CChartLineSimple
class="c-px-3" pointed
style="height:70px" class="c-px-3"
:data-points="[65, 59, 84, 84, 51, 55, 40]" style="height:70px"
background-color="primary" :data-points="[65, 59, 84, 84, 51, 55, 40]"
label="Members" background-color="primary"
labels="months" label="Members"
/> labels="months"
/>
</template>
</CWidgetDropdown> </CWidgetDropdown>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown variant="info" header="9.823" text="Members online"> <CWidgetDropdown variant="info" header="9.823" text="Members online">
<template #dropdown> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
@@ -42,16 +44,18 @@
<CDropdownItem disabled>Disabled action</CDropdownItem> <CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
<CChartLineSimple <template #footer>
pointed <CChartLineSimple
class="c-px-3" pointed
style="height:70px" class="c-px-3"
:data-points="[1, 18, 9, 17, 34, 22, 11]" style="height:70px"
background-color="info" :data-points="[1, 18, 9, 17, 34, 22, 11]"
:options="{ elements: { line: { tension: 0.00001 }}}" background-color="info"
label="Members" :options="{ elements: { line: { tension: 0.00001 }}}"
labels="months" label="Members"
/> labels="months"
/>
</template>
</CWidgetDropdown> </CWidgetDropdown>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
@@ -60,8 +64,7 @@
header="9.823" header="9.823"
text="Members online" text="Members online"
> >
<template #default>
<template #dropdown>
<CDropdown <CDropdown
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
@@ -74,6 +77,7 @@
<CDropdownItem disabled>Disabled action</CDropdownItem> <CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
<template #footer>
<CChartLineSimple <CChartLineSimple
style="height:70px" style="height:70px"
background-color="rgba(255,255,255,.2)" background-color="rgba(255,255,255,.2)"
@@ -83,6 +87,7 @@
label="Members" label="Members"
labels="months" labels="months"
/> />
</template>
</CWidgetDropdown> </CWidgetDropdown>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
@@ -91,8 +96,7 @@
header="9.823" header="9.823"
text="Members online" text="Members online"
> >
<template #default>
<template #dropdown>
<CDropdown <CDropdown
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
@@ -105,12 +109,14 @@
<CDropdownItem disabled>Disabled action</CDropdownItem> <CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
<CChartBarSimple <template #footer>
style="height:70px" <CChartBarSimple
background-color="rgb(250, 152, 152)" style="height:70px"
label="Members" background-color="rgb(250, 152, 152)"
labels="months" label="Members"
/> labels="months"
/>
</template>
</CWidgetDropdown> </CWidgetDropdown>
</CCol> </CCol>
</CRow> </CRow>
@@ -121,11 +127,6 @@ import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
export default { export default {
name: 'WidgetsDropdown', name: 'WidgetsDropdown',
// data () {
// return {
// months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
// }
// },
components: { CChartLineSimple, CChartBarSimple } components: { CChartLineSimple, CChartBarSimple }
} }
</script> </script>