Skip to content

Commit 7e3646e

Browse files
woothuwoothu
committed
refactor: Dashboard, Collapses, Popovers, Tooltips, Table refreshes.
1 parent 6ed6c90 commit 7e3646e

File tree

6 files changed

+157
-154
lines changed

6 files changed

+157
-154
lines changed

‎src/containers/DefaultHeaderDropdownAccnt.vue

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,64 @@
11
<template>
2-
<CDropdown right
3-
nav
4-
no-caret
5-
no-popper
6-
addMenuClasses="dropdown-menu-right"
2+
<CDropdown
3+
right
4+
nav
5+
noCaret
6+
noPopper
7+
addMenuClasses="dropdown-menu-right"
78
>
8-
<img slot="buttonContent"
9-
src="img/avatars/6.jpg"
10-
class="img-avatar"
11-
alt="[email protected]"
12-
/>
13-
<CDropdownHeader tag="div" class="text-center"><strong>Account</strong></CDropdownHeader>
14-
<CDropdownItem><i class="fa fa-bell-o" /> Updates
9+
<template #buttonContent>
10+
<img
11+
src="img/avatars/6.jpg"
12+
class="img-avatar"
13+
alt="[email protected]"
14+
/>
15+
</template>
16+
<CDropdownHeader tag="div" class="text-center">
17+
<strong>Account</strong>
18+
</CDropdownHeader>
19+
<CDropdownItem>
20+
<i class="fa fa-bell-o" /> Updates
1521
<CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
1622
</CDropdownItem>
17-
<CDropdownItem><i class="fa fa-envelope-o" /> Messages
23+
<CDropdownItem>
24+
<i class="fa fa-envelope-o" /> Messages
1825
<CBadge variant="success">{{ itemsCount }}</CBadge>
1926
</CDropdownItem>
20-
<CDropdownItem><i class="fa fa-tasks" /> Tasks
27+
<CDropdownItem>
28+
<i class="fa fa-tasks" /> Tasks
2129
<CBadge variant="danger">{{ itemsCount }}</CBadge>
2230
</CDropdownItem>
23-
<CDropdownItem><i class="fa fa-comments" /> Comments
31+
<CDropdownItem>
32+
<i class="fa fa-comments" /> Comments
2433
<CBadge variant="warning">{{ itemsCount }}</CBadge>
2534
</CDropdownItem>
2635
<CDropdownHeader
2736
tag="div"
28-
class="text-center">
37+
class="text-center"
38+
>
2939
<strong>Settings</strong>
3040
</CDropdownHeader>
31-
<CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
32-
<CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
33-
<CDropdownItem><i class="fa fa-usd" /> Payments
41+
<CDropdownItem>
42+
<i class="fa fa-user" /> Profile
43+
</CDropdownItem>
44+
<CDropdownItem>
45+
<i class="fa fa-wrench" /> Settings
46+
</CDropdownItem>
47+
<CDropdownItem>
48+
<i class="fa fa-usd" /> Payments
3449
<CBadge variant="secondary">{{ itemsCount }}</CBadge>
3550
</CDropdownItem>
36-
<CDropdownItem><i class="fa fa-file" /> Projects
51+
<CDropdownItem>
52+
<i class="fa fa-file" /> Projects
3753
<CBadge variant="primary">{{ itemsCount }}</CBadge>
3854
</CDropdownItem>
3955
<CDropdownDivider/>
40-
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
41-
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
56+
<CDropdownItem>
57+
<i class="fa fa-shield" /> Lock Account
58+
</CDropdownItem>
59+
<CDropdownItem>
60+
<i class="fa fa-lock" /> Logout
61+
</CDropdownItem>
4262
</CDropdown>
4363
</template>
4464

‎src/views/Dashboard.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -186,23 +186,23 @@
186186
<CCol sm="12" lg="6">
187187
<CRow>
188188
<CCol sm="6">
189-
<Callout variant="info">
189+
<CCallout variant="info">
190190
<small class="text-muted">New Clients</small><br>
191191
<strong class="h4">9,123</strong>
192192
<div :style="{ top: '-10px'}">
193193
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
194194
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
195195
</div>
196-
</Callout>
196+
</CCallout>
197197
</CCol>
198198
<CCol sm="6">
199-
<Callout variant="danger">
199+
<CCallout variant="danger">
200200
<small class="text-muted">Recurring Clients</small><br>
201201
<strong class="h4">22,643</strong>
202202
<div :style="{ top: '-10px'}">
203203
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
204204
</div>
205-
</Callout>
205+
</CCallout>
206206
</CCol>
207207
</CRow>
208208
<hr class="mt-0">
@@ -296,22 +296,22 @@
296296
<CCol sm="12" lg="6">
297297
<CRow>
298298
<CCol sm="6">
299-
<Callout variant="warning">
299+
<CCallout variant="warning">
300300
<small class="text-muted">Pageviews</small><br>
301301
<strong class="h4">78,623</strong>
302302
<div :style="{ top: '-10px'}">
303303
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
304304
</div>
305-
</Callout>
305+
</CCallout>
306306
</CCol>
307307
<CCol sm="6">
308-
<Callout variant="success">
308+
<CCallout variant="success">
309309
<small class="text-muted">Organic</small><br>
310310
<strong class="h4">49,123</strong>
311311
<div :style="{ top: '-10px'}">
312312
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
313313
</div>
314-
</Callout>
314+
</CCallout>
315315
</CCol>
316316
</CRow>
317317
<hr class="mt-0">

‎src/views/base/Collapses.vue

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,33 @@
1313
</div>
1414
</CCardHeader>
1515
<div>
16-
<CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
17-
<CCollapse id="collapse1" class="mt-2">
16+
<CButton id="collapse1" variant="primary">
17+
Toggle Collapse
18+
</CButton>
19+
<CCollapse toggler="collapse1" class="mt-2">
1820
<CCard>
1921
<p class="card-text">Collapse contents Here</p>
20-
<CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
21-
<CCollapse id=collapse1_inner class="mt-2">
22+
<CButton id="collapse2" size="sm">
23+
Toggle Inner Collapse
24+
</CButton>
25+
<CCollapse toggler="collapse2" class="mt-2">
2226
<CCard>Hello!</CCard>
2327
</CCollapse>
2428
</CCard>
2529
</CCollapse>
2630
</div>
2731
</CCard>
2832
</CCol>
29-
<CCol cols="12" md="6">
33+
<!-- <CCol cols="12" md="6">
3034
<CCard>
3135
<CCardHeader slot="header">
3236
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
3337
</CCardHeader>
3438
<div>
35-
<!-- Using modifiers -->
3639
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
3740
38-
<!-- Using value -->
3941
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
4042
41-
<!-- element to collapse -->
4243
<CCollapse id="collapse2">
4344
<CCard>
4445
I am collapsible content!
@@ -92,10 +93,8 @@
9293
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
9394
</CCardHeader>
9495
<div>
95-
<!-- Single button triggers two CCollapse components -->
9696
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
9797
98-
<!-- elements to collapse -->
9998
<CCollapse id="collapseA" class="mt-2">
10099
<CCard>
101100
I am collapsable content A!
@@ -115,7 +114,7 @@
115114
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
116115
</CCardHeader>
117116
<div role="tablist">
118-
<CCard noWrapper class="mb-1">
117+
<CCard class="mb-1">
119118
<CCardHeader slot="header" class="p-1" role="tab">
120119
<CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
121120
</CCardHeader>
@@ -130,7 +129,7 @@
130129
</CCardBody>
131130
</CCollapse>
132131
</CCard>
133-
<CCard noWrapper class="mb-1">
132+
<CCard class="mb-1">
134133
<CCardHeader slot="header" class="p-1" role="tab">
135134
<CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
136135
</CCardHeader>
@@ -142,7 +141,7 @@
142141
</CCardBody>
143142
</CCollapse>
144143
</CCard>
145-
<CCard noWrapper class="mb-1">
144+
<CCard class="mb-1">
146145
<CCardHeader slot="header" class="p-1" role="tab">
147146
<CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
148147
</CCardHeader>
@@ -156,7 +155,7 @@
156155
</CCard>
157156
</div>
158157
</CCard>
159-
</CCol>
158+
</CCol> -->
160159
</CRow>
161160
</div>
162161
</div>

‎src/views/base/Popovers.vue

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@
1111
</div>
1212
</CCardHeader>
1313
<CRow>
14-
<CCol cols="6">
14+
<CCol cols="4">
1515
<div class="my-3 text-center">
1616
<CButton
17-
v-c-popover.hover="{
17+
variant="primary"
18+
v-c-popover="{
1819
header: 'Popover header',
1920
content: 'I am popover content!'
2021
}"
@@ -23,16 +24,31 @@
2324
</CButton>
2425
</div>
2526
</CCol>
26-
<CCol cols="6">
27+
<CCol cols="4">
28+
<div class="my-3 text-center">
29+
<CButton
30+
variant="primary"
31+
v-c-popover="{
32+
header: 'Popover!',
33+
content: 'I start <strong>open</strong>',
34+
active: true
35+
}"
36+
text="Hover me"
37+
/>
38+
</div>
39+
</CCol>
40+
<CCol cols="4">
2741
<div class="my-3 text-center">
2842
<CButton
2943
variant="primary"
30-
v-c-popover.hover.active="{
44+
v-c-popover.click="{
3145
header: 'Popover!',
32-
content: 'I start <strong>open</strong>'
46+
content: 'I am showing on click and hiding on click outside tooltip!',
47+
placement: 'bottom',
48+
active: true
3349
}"
3450
>
35-
Button
51+
Click me
3652
</CButton>
3753
</div>
3854
</CCol>
@@ -53,7 +69,7 @@
5369
>
5470
<CButton
5571
variant="primary"
56-
v-c-popover.hover.focus="{
72+
v-c-popover="{
5773
header: 'Popover!',
5874
content: `Placement ${placement}`,
5975
placement

0 commit comments

Comments
 (0)