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

refactor: add CIcon component to widgets

Browse Source
This commit is contained in:
woothu
2019-05-31 10:40:13 +02:00
parent 8e8cee719e
commit fb7bf628ad
2 changed files with 261 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/widgets/Widgets.vue
+198 -141
View File
@@ -88,62 +88,37 @@
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-cogs c-bg-primary" variant="primary"
/> >
<CIcon name="settings" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-laptop c-bg-info"
text="Income" text="Income"
/> variant="info"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-moon-o c-bg-warning"
text="Income" text="Income"
/> variant="warning"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-bell c-bg-danger"
text="Income" text="Income"
/> variant="danger"
</CCol> >
</CRow> <CIcon name="bell" width="24"/>
<CRow> </CWidgetIcon>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-cogs c-bg-primary"
text="Income"
link="#"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-laptop c-bg-info"
text="Income"
link="#"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
text="Income" link="#"
/>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
addIconClasses="fa fa-bell c-bg-danger"
text="Income"
link="#"
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
@@ -151,33 +126,83 @@
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-cogs c-bg-primary" variant="primary"
noPadding link="#"
/> >
<CIcon name="settings" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-laptop c-bg-info" variant="info"
noPadding link="#"
/> >
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary" variant="warning"
noPadding link="#"
/> >
<CIcon name="moon" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-bell c-bg-danger" variant="danger"
link="#"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
<CRow>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
noPadding noPadding
/> >
<CIcon name="settings" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
noPadding
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
noPadding
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="danger"
noPadding
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
@@ -185,25 +210,31 @@
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-cogs c-bg-primary c-px-5" variant="primary"
noPadding noPadding
/> >
<CIcon name="settings" class="c-mx-5 " width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-laptop c-bg-info c-px-5" variant="info"
noPadding noPadding
/> >
<CIcon name="laptop" class="c-mx-5 " width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5" variant="warning"
noPadding noPadding
/> >
<CIcon name="moon" class="c-mx-5 " width="24"/>
</CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
@@ -211,206 +242,232 @@
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-cogs c-bg-primary c-px-5" variant="primary"
noPadding noPadding
link="#" link="#"
/> >
<CIcon name="settings" class="c-mx-5 " width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-laptop c-bg-info c-px-5" variant="info"
noPadding noPadding
link="#" link="#"
/> >
<CIcon name="laptop" class="c-mx-5 " width="24"/>
</CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5" variant="warning"
noPadding noPadding
link="#" link="#"
/> >
<CIcon name="moon" class="c-mx-5" width="24"/>
</CWidgetIcon>
</CCol> </CCol>
</CRow> </CRow>
<WidgetsSocial noCharts/> <WidgetsSocial noCharts/>
<WidgetsSocial/> <WidgetsSocial/>
<CCardGroup class="c-mb-4"> <CCardGroup class="c-mb-4">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-people"
header="87.500" header="87.500"
text="Visitors" text="Visitors"
variant="info" variant="info"
/> >
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385" header="385"
text="New Clients" text="New Clients"
variant="success" variant="success"
/> >
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238" header="1238"
text="Products sold" text="Products sold"
variant="warning" variant="warning"
/> >
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%" header="28%"
text="Returning Visitors" text="Returning Visitors"
/> >
<CIcon name="chart" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11" header="5:34:11"
text="Avg. Time" text="Avg. Time"
variant="danger" variant="danger"
/> >
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup> </CCardGroup>
<CCardGroup class="c-mb-4"> <CCardGroup class="c-mb-4">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-people"
header="87.500" header="87.500"
text="Visitors" text="Visitors"
variant="info" variant="info"
inverse inverse
/> >
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385" header="385"
text="New Clients" text="New Clients"
variant="success" variant="success"
inverse inverse
/> >
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238" header="1238"
text="Products sold" text="Products sold"
variant="warning" variant="warning"
inverse inverse
/> >
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%" header="28%"
variant="primary"
text="Returning Visitors" text="Returning Visitors"
variant="primary"
inverse inverse
/> >
<CIcon name="chart" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11" header="5:34:11"
text="Avg. Time" text="Avg. Time"
variant="danger" variant="danger"
inverse inverse
/> >
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup> </CCardGroup>
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-people"
header="87.500" header="87.500"
text="visitors" text="Visitors"
variant="info" variant="info"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385"
text="New Clients"
variant="success"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
iconClasses="icon-basket-loaded"
header="1238"
text="Products sold"
variant="warning"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%"
text="Returning Visitors"
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
iconClasses="icon-speedometer"
header="5:34:11"
text="Avg. Time"
> >
<CProgress <CIcon name="people" height="36"/>
variant="danger" </CWidgetProgressIcon>
:value="25" </CCol>
class="c-progress-xs c-my-3 c-mb-0" <CCol sm="6" md="2">
/> <CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
>
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
>
<CIcon name="chart" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-speech"
header="972" header="972"
text="Comments" text="comments"
variant="info" variant="info"
/> >
<CIcon name="speech" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-people"
header="87.500" header="87.500"
text="visitors" text="Visitors"
variant="info" variant="info"
inverse inverse
/> >
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-user-follow"
header="385" header="385"
text="New Clients" text="New Clients"
variant="success" variant="success"
inverse inverse
/> >
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-basket-loaded" header="1238"
header="1238" text="Products sold" text="Products sold"
variant="warning" variant="warning"
inverse inverse
/> >
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-pie-chart"
header="28%" header="28%"
text="Returning Visitors" text="Returning Visitors"
variant="primary" variant="primary"
inverse inverse
/> >
<CIcon name="chart" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-speedometer" header="5:34:11"
header="5:34:11" text="Avg. Time" text="Avg. Time"
variant="danger" variant="danger"
inverse inverse
/> >
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
iconClasses="icon-speech"
header="972" header="972"
text="Comments" text="comments"
variant="info" variant="info"
inverse inverse
/> >
<CIcon name="speech" height="36"/>
</CWidgetProgressIcon>
</CCol> </CCol>
</CRow> </CRow>
<WidgetsDropdown/> <WidgetsDropdown/>
src/views/widgets/WidgetsSocial.vue
+63 -19
View File
@@ -9,6 +9,11 @@
leftHeader="459" leftHeader="459"
leftFooter="feeds" leftFooter="feeds"
> >
<CIcon
name="socialFacebook"
height="32"
class="c-position-absolute"
/>
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
backgroundColor="rgba(255,255,255,.1)" backgroundColor="rgba(255,255,255,.1)"
@@ -26,6 +31,11 @@
leftHeader="1.792" leftHeader="1.792"
leftFooter="tweets" leftFooter="tweets"
> >
<CIcon
name="socialTwitter"
height="32"
class="c-position-absolute"
/>
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
backgroundColor="rgba(255,255,255,.1)" backgroundColor="rgba(255,255,255,.1)"
@@ -43,6 +53,11 @@
leftHeader="292" leftHeader="292"
leftFooter="feeds" leftFooter="feeds"
> >
<CIcon
name="socialLinkedin"
height="32"
class="c-position-absolute"
/>
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
backgroundColor="rgba(255,255,255,.1)" backgroundColor="rgba(255,255,255,.1)"
@@ -54,12 +69,17 @@
</CCol> </CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetSocial
variant="google-plus" rightHeader="12"
rightHeader="894" rightFooter="events"
rightFooter="followers" leftHeader="4"
leftHeader="92" leftFooter="meetings"
leftFooter="circles" variant="warning"
> >
<CIcon
name="calendar"
height="32"
class="c-position-absolute"
/>
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
backgroundColor="rgba(255,255,255,.1)" backgroundColor="rgba(255,255,255,.1)"
@@ -78,35 +98,58 @@
rightFooter="friends" rightFooter="friends"
leftHeader="459" leftHeader="459"
leftFooter="feeds" leftFooter="feeds"
/> >
</CCol> <CIcon
<CCol md="3" sm="6"> name="socialFacebook"
height="32"
class="c-position-absolute"
/>
</CWidgetSocial>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial <CWidgetSocial
variant="twitter" variant="twitter"
rightHeader="973k" rightHeader="973k"
rightFooter="followers" rightFooter="followers"
leftHeader="1.792" leftHeader="1.792"
leftFooter="tweets" leftFooter="tweets"
/> >
</CCol> <CIcon
<CCol md="3" sm="6"> name="socialTwitter"
height="32"
class="c-position-absolute"
/>
</CWidgetSocial>
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial <CWidgetSocial
variant="linkedin" variant="linkedin"
rightHeader="500+" rightHeader="500+"
rightFooter="contracts" rightFooter="contracts"
leftHeader="292" leftHeader="292"
leftFooter="feeds" leftFooter="feeds"
/> >
</CCol> <CIcon
name="socialLinkedin"
height="32"
class="c-position-absolute"
/>
</CWidgetSocial>
</CCol>
<CCol md="3" sm="6"> <CCol md="3" sm="6">
<CWidgetSocial <CWidgetSocial
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
variant="warning" variant="warning"
iconClasses="fa fa-battery-1" >
rightHeader="0:57" <CIcon
rightFooter="time" name="calendar"
leftHeader="17" height="32"
leftFooter="percentage" class="c-position-absolute"
/> />
</CWidgetSocial>
</CCol> </CCol>
</template> </template>
</CRow> </CRow>
@@ -114,6 +157,7 @@
<script> <script>
import { CChartLineSimple } from '../charts/index.js' import { CChartLineSimple } from '../charts/index.js'
export default { export default {
name: 'WidgetsSocial', name: 'WidgetsSocial',
components: { components: {