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/widgets/Widgets.vue
+25 -56
View File
@@ -121,48 +121,6 @@
</CWidgetIcon>
</CCol>
</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>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
@@ -234,10 +192,21 @@
no-padding
>
<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>
</CCol>
</CRow>
<CRow>
<!-- <CRow>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
@@ -271,9 +240,9 @@
<CIcon name="moon" class="c-mx-5" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
<WidgetsSocial noCharts/>
<WidgetsSocial/>
</CRow> -->
<WidgetsBrand noCharts/>
<WidgetsBrand/>
<CCardGroup class="c-mb-4">
<CWidgetProgressIcon
header="87.500"
@@ -473,7 +442,7 @@
<WidgetsDropdown/>
<CRow>
<CCol sm="6" lg="3">
<CWidgetSmallText
<CWidgetHeaderDetails
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -481,10 +450,10 @@
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText
<CWidgetHeaderDetails
variant="success"
right-header="SALE"
right-footer="Today 6:43 AM"
@@ -493,10 +462,10 @@
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText
<CWidgetHeaderDetails
variant="danger"
right-header="SALE"
right-footer="Today 6:43 AM"
@@ -505,10 +474,10 @@
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText
<CWidgetHeaderDetails
variant="warning"
right-header="SALE"
right-footer="Today 6:43 AM"
@@ -517,7 +486,7 @@
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CWidgetHeaderDetails>
</CCol>
</CRow>
<CRow>
@@ -556,7 +525,7 @@
</template>
<script>
import WidgetsSocial from './WidgetsSocial'
import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown'
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
@@ -565,7 +534,7 @@ export default {
components: {
CChartLineSimple,
CChartBarSimple,
WidgetsSocial,
WidgetsBrand,
WidgetsDropdown
}
}
src/views/widgets/WidgetsSocial.vue → src/views/widgets/WidgetsBrand.vue
+16 -16
View File
@@ -2,7 +2,7 @@
<CRow>
<template v-if="!noCharts">
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
variant="facebook"
right-header="89k"
right-footer="friends"
@@ -22,10 +22,10 @@
label="Friends"
labels="months"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
variant="twitter"
right-header="973k"
right-footer="followers"
@@ -45,10 +45,10 @@
label="Followers"
labels="months"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
variant="linkedin"
right-header="500+"
right-footer="contracts"
@@ -68,10 +68,10 @@
label="Contracts"
labels="months"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
right-header="12"
right-footer="events"
left-header="4"
@@ -91,12 +91,12 @@
label="Followers"
labels="months"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
</template>
<template v-else>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
variant="facebook"
right-header="89k"
right-footer="friends"
@@ -108,10 +108,10 @@
height="56"
class="c-my-4"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
variant="twitter"
right-header="973k"
right-footer="followers"
@@ -123,10 +123,10 @@
height="56"
class="c-my-4"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
variant="linkedin"
right-header="500+"
right-footer="contracts"
@@ -138,10 +138,10 @@
height="56"
class="c-my-4"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
<CWidgetBrand
right-header="12"
right-footer="events"
left-header="4"
@@ -153,7 +153,7 @@
height="56"
class="c-my-4"
/>
</CWidgetSocial>
</CWidgetBrand>
</CCol>
</template>
</CRow>
src/views/widgets/WidgetsDropdown.vue
+37 -36
View File
@@ -2,7 +2,7 @@
<CRow>
<CCol sm="6" lg="3">
<CWidgetDropdown header="9.823" text="Members online">
<template #dropdown>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
@@ -15,20 +15,22 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CChartLineSimple
pointed
class="c-px-3"
style="height:70px"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
background-color="primary"
label="Members"
labels="months"
/>
<template #footer>
<CChartLineSimple
pointed
class="c-px-3"
style="height:70px"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
background-color="primary"
label="Members"
labels="months"
/>
</template>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown variant="info" header="9.823" text="Members online">
<template #dropdown>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
@@ -42,16 +44,18 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CChartLineSimple
pointed
class="c-px-3"
style="height:70px"
:data-points="[1, 18, 9, 17, 34, 22, 11]"
background-color="info"
:options="{ elements: { line: { tension: 0.00001 }}}"
label="Members"
labels="months"
/>
<template #footer>
<CChartLineSimple
pointed
class="c-px-3"
style="height:70px"
:data-points="[1, 18, 9, 17, 34, 22, 11]"
background-color="info"
:options="{ elements: { line: { tension: 0.00001 }}}"
label="Members"
labels="months"
/>
</template>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
@@ -60,8 +64,7 @@
header="9.823"
text="Members online"
>
<template #dropdown>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
@@ -74,6 +77,7 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<template #footer>
<CChartLineSimple
style="height:70px"
background-color="rgba(255,255,255,.2)"
@@ -83,6 +87,7 @@
label="Members"
labels="months"
/>
</template>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
@@ -91,8 +96,7 @@
header="9.823"
text="Members online"
>
<template #dropdown>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
@@ -105,12 +109,14 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CChartBarSimple
style="height:70px"
background-color="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
<template #footer>
<CChartBarSimple
style="height:70px"
background-color="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
</template>
</CWidgetDropdown>
</CCol>
</CRow>
@@ -121,11 +127,6 @@ import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
export default {
name: 'WidgetsDropdown',
// data () {
// return {
// months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
// }
// },
components: { CChartLineSimple, CChartBarSimple }
}
</script>