refactor: add CIcon component to widgets
This commit is contained in:
woothu
+198
-141
@@ -88,62 +88,37 @@
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-cogs c-bg-primary"
|
||||
/>
|
||||
variant="primary"
|
||||
>
|
||||
<CIcon name="settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
addIconClasses="fa fa-laptop c-bg-info"
|
||||
text="Income"
|
||||
/>
|
||||
variant="info"
|
||||
>
|
||||
<CIcon name="laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
addIconClasses="fa fa-moon-o c-bg-warning"
|
||||
text="Income"
|
||||
/>
|
||||
variant="warning"
|
||||
>
|
||||
<CIcon name="moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
addIconClasses="fa fa-bell c-bg-danger"
|
||||
text="Income"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<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="#"
|
||||
/>
|
||||
variant="danger"
|
||||
>
|
||||
<CIcon name="bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
@@ -151,33 +126,83 @@
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-cogs c-bg-primary"
|
||||
noPadding
|
||||
/>
|
||||
variant="primary"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-laptop c-bg-info"
|
||||
noPadding
|
||||
/>
|
||||
variant="info"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
|
||||
noPadding
|
||||
/>
|
||||
variant="warning"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
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
|
||||
/>
|
||||
>
|
||||
<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>
|
||||
</CRow>
|
||||
<CRow>
|
||||
@@ -185,25 +210,31 @@
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-cogs c-bg-primary c-px-5"
|
||||
variant="primary"
|
||||
noPadding
|
||||
/>
|
||||
>
|
||||
<CIcon name="settings" class="c-mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-laptop c-bg-info c-px-5"
|
||||
variant="info"
|
||||
noPadding
|
||||
/>
|
||||
>
|
||||
<CIcon name="laptop" class="c-mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
|
||||
variant="warning"
|
||||
noPadding
|
||||
/>
|
||||
>
|
||||
<CIcon name="moon" class="c-mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
@@ -211,206 +242,232 @@
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-cogs c-bg-primary c-px-5"
|
||||
variant="primary"
|
||||
noPadding
|
||||
link="#"
|
||||
/>
|
||||
>
|
||||
<CIcon name="settings" class="c-mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-laptop c-bg-info c-px-5"
|
||||
variant="info"
|
||||
noPadding
|
||||
link="#"
|
||||
/>
|
||||
>
|
||||
<CIcon name="laptop" class="c-mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
|
||||
variant="warning"
|
||||
noPadding
|
||||
link="#"
|
||||
/>
|
||||
>
|
||||
<CIcon name="moon" class="c-mx-5" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<WidgetsSocial noCharts/>
|
||||
<WidgetsSocial/>
|
||||
<CCardGroup class="c-mb-4">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-people"
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
variant="info"
|
||||
/>
|
||||
>
|
||||
<CIcon name="people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-user-follow"
|
||||
header="385"
|
||||
text="New Clients"
|
||||
variant="success"
|
||||
/>
|
||||
>
|
||||
<CIcon name="userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-basket-loaded"
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
variant="warning"
|
||||
/>
|
||||
>
|
||||
<CIcon name="basketLoaded" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-pie-chart"
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
/>
|
||||
>
|
||||
<CIcon name="chart" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-speedometer"
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
variant="danger"
|
||||
/>
|
||||
>
|
||||
<CIcon name="speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CCardGroup class="c-mb-4">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-people"
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
variant="info"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-user-follow"
|
||||
header="385"
|
||||
text="New Clients"
|
||||
variant="success"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-basket-loaded"
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
variant="warning"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="basketLoaded" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-pie-chart"
|
||||
header="28%"
|
||||
variant="primary"
|
||||
text="Returning Visitors"
|
||||
variant="primary"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="chart" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-speedometer"
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
variant="danger"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-people"
|
||||
header="87.500"
|
||||
text="visitors"
|
||||
text="Visitors"
|
||||
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
|
||||
variant="danger"
|
||||
:value="25"
|
||||
class="c-progress-xs c-my-3 c-mb-0"
|
||||
/>
|
||||
<CIcon name="people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-speech"
|
||||
header="972"
|
||||
text="Comments"
|
||||
text="comments"
|
||||
variant="info"
|
||||
/>
|
||||
>
|
||||
<CIcon name="speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-people"
|
||||
header="87.500"
|
||||
text="visitors"
|
||||
text="Visitors"
|
||||
variant="info"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-user-follow"
|
||||
header="385"
|
||||
text="New Clients"
|
||||
variant="success"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-basket-loaded"
|
||||
header="1238" text="Products sold"
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
variant="warning"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="basketLoaded" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-pie-chart"
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
variant="primary"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="chart" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-speedometer"
|
||||
header="5:34:11" text="Avg. Time"
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
variant="danger"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
iconClasses="icon-speech"
|
||||
header="972"
|
||||
text="Comments"
|
||||
text="comments"
|
||||
variant="info"
|
||||
inverse
|
||||
/>
|
||||
>
|
||||
<CIcon name="speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<WidgetsDropdown/>
|
||||
|
||||
@@ -9,6 +9,11 @@
|
||||
leftHeader="459"
|
||||
leftFooter="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="socialFacebook"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
style="height:100px"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
@@ -26,6 +31,11 @@
|
||||
leftHeader="1.792"
|
||||
leftFooter="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="socialTwitter"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
style="height:100px"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
@@ -43,6 +53,11 @@
|
||||
leftHeader="292"
|
||||
leftFooter="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="socialLinkedin"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
style="height:100px"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
@@ -54,12 +69,17 @@
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetSocial
|
||||
variant="google-plus"
|
||||
rightHeader="894"
|
||||
rightFooter="followers"
|
||||
leftHeader="92"
|
||||
leftFooter="circles"
|
||||
rightHeader="12"
|
||||
rightFooter="events"
|
||||
leftHeader="4"
|
||||
leftFooter="meetings"
|
||||
variant="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="calendar"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
style="height:100px"
|
||||
backgroundColor="rgba(255,255,255,.1)"
|
||||
@@ -78,7 +98,13 @@
|
||||
rightFooter="friends"
|
||||
leftHeader="459"
|
||||
leftFooter="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="socialFacebook"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
</CWidgetSocial>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetSocial
|
||||
@@ -87,7 +113,13 @@
|
||||
rightFooter="followers"
|
||||
leftHeader="1.792"
|
||||
leftFooter="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="socialTwitter"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
</CWidgetSocial>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetSocial
|
||||
@@ -96,17 +128,28 @@
|
||||
rightFooter="contracts"
|
||||
leftHeader="292"
|
||||
leftFooter="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="socialLinkedin"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
</CWidgetSocial>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetSocial
|
||||
rightHeader="12"
|
||||
rightFooter="events"
|
||||
leftHeader="4"
|
||||
leftFooter="meetings"
|
||||
variant="warning"
|
||||
iconClasses="fa fa-battery-1"
|
||||
rightHeader="0:57"
|
||||
rightFooter="time"
|
||||
leftHeader="17"
|
||||
leftFooter="percentage"
|
||||
>
|
||||
<CIcon
|
||||
name="calendar"
|
||||
height="32"
|
||||
class="c-position-absolute"
|
||||
/>
|
||||
</CWidgetSocial>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
@@ -114,6 +157,7 @@
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsSocial',
|
||||
components: {
|
||||
|
||||
Reference in New Issue
Block a user