Skip to content

Commit 36ef7af

Browse files
BlariBlari
committed
Fix dropdown notification color
1 parent db4855a commit 36ef7af

File tree

3 files changed

+75
-31
lines changed

3 files changed

+75
-31
lines changed

‎src/components/Notifications/Notifications.vue‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,56 @@
55
<strong>You have 13 notifications</strong>
66
</div>
77
<b-button-group id="notification-b-buttons">
8-
<b-button variant="default" @click="changeNotificationsTab(1)">Notifications</b-button>
9-
<b-button variant="default" @click="changeNotificationsTab(2)">Messages</b-button>
10-
<b-button variant="default" @click="changeNotificationsTab(3)">Progress</b-button>
8+
<b-button variant="default" @click="changeNotificationsTab(1)"
9+
>Notifications</b-button
10+
>
11+
<b-button variant="default" @click="changeNotificationsTab(2)"
12+
>Messages</b-button
13+
>
14+
<b-button variant="default" @click="changeNotificationsTab(3)"
15+
>Progress</b-button
16+
>
1117
</b-button-group>
1218
</header>
1319
<NewNotifictionsList v-if="newNotifications" />
1420
<NotifictionsList v-else-if="notificationsTabSelected === 1" />
1521
<Messages v-else-if="notificationsTabSelected === 2" />
1622
<Progress v-else-if="notificationsTabSelected === 3" />
17-
<NotifictionsList v-else/>
23+
<NotifictionsList v-else />
1824
<footer class="cardFooter text-sm card-footer">
1925
<span class="fs-mini">Synced at: 21 Apr 2014 18:36</span>
2026
<b-button
2127
variant="link"
2228
@click="loadNotifications"
23-
:class="{disabled: isLoad, 'btnNotificationsReload btn-xs float-right py-0': true}"
29+
:class="{
30+
disabled: isLoad,
31+
'btnNotificationsReload btn-xs float-right py-0': true,
32+
}"
2433
>
25-
<span v-if="isLoad"><i class="la la-refresh la-spin" /> Loading...</span>
34+
<span v-if="isLoad"
35+
><i class="la la-refresh la-spin" /> Loading...</span
36+
>
2637
<i v-else class="la la-refresh" />
2738
</b-button>
2839
</footer>
2940
</section>
3041
</template>
3142

3243
<script>
33-
import Vue from 'vue';
44+
import Vue from "vue";
3445
35-
import NotifictionsList from './NotificationsDemo/NotificationsList';
36-
import NewNotifictionsList from './NotificationsDemo/NewNotificationsList';
37-
import Messages from './NotificationsDemo/Messages';
38-
import Progress from './NotificationsDemo/Progress';
46+
import NotifictionsList from "./NotificationsDemo/NotificationsList";
47+
import NewNotifictionsList from "./NotificationsDemo/NewNotificationsList";
48+
import Messages from "./NotificationsDemo/Messages";
49+
import Progress from "./NotificationsDemo/Progress";
3950
4051
export default {
41-
name: 'Notification',
52+
name: "Notification",
4253
components: {
43-
NotifictionsList, NewNotifictionsList, Messages, Progress,
54+
NotifictionsList,
55+
NewNotifictionsList,
56+
Messages,
57+
Progress,
4458
},
4559
data() {
4660
return {
@@ -51,15 +65,16 @@ export default {
5165
},
5266
methods: {
5367
changeNotificationsTab(tab) {
54-
Vue.set(this, 'notificationsTabSelected', tab);
55-
Vue.set(this, 'newNotifications', null);
68+
Vue.set(this, "notificationsTabSelected", tab);
69+
Vue.set(this, "newNotifications", null);
5670
},
5771
loadNotifications() {
58-
Vue.set(this, 'isLoad', true);
72+
Vue.set(this, "isLoad", true);
5973
6074
setTimeout(() => {
61-
Vue.set(this, 'newNotifications', 'new notifications component');
62-
Vue.set(this, 'isLoad', false);
75+
Vue.set(this, "newNotifications", "new notifications component");
76+
Vue.set(this, "isLoad", false);
77+
this.changeNotificationsTab(1);
6378
}, 1500);
6479
},
6580
},

‎src/components/Notifications/NotificationsDemo/Messages.vue‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
<template>
22
<b-list-group class="listGroup thin-scroll">
3-
<b-list-group-item class="listGroupItem bg-warning-light">
3+
<b-list-group-item class="listGroupItem bg-primary-light">
44
<span class="notificationIcon thumb-sm">
5-
<img class="rounded-circle" src="../../../assets/people/a2.jpg" alt="..." />
5+
<img
6+
class="rounded-circle"
7+
src="../../../assets/people/a2.jpg"
8+
alt="..."
9+
/>
610
<i class="status status-bottom bg-success" />
711
</span>
812
<time class="text-link help float-right">10 sec ago</time>
913
<h6 class="m-0 fw-bold mb-1">Chris Gray</h6>
10-
<p class="deemphasize text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
14+
<p class="deemphasize text-ellipsis m-0">
15+
Hey! What&apos;s up? So many times since we
16+
</p>
1117
</b-list-group-item>
1218
<b-list-group-item class="listGroupItem">
1319
<span class="notificationIcon thumb-sm">
14-
<img class="rounded-circle" src="../../../assets/people/a5.jpg" alt="..." />
20+
<img
21+
class="rounded-circle"
22+
src="../../../assets/people/a5.jpg"
23+
alt="..."
24+
/>
1525
<i class="status status-bottom bg-success" />
1626
</span>
1727
<time class="text-link help float-right">2 min ago</time>
@@ -22,16 +32,26 @@
2232
</b-list-group-item>
2333
<b-list-group-item class="listGroupItem">
2434
<span class="notificationIcon thumb-sm">
25-
<img class="rounded-circle" src="../../../assets/people/a1.jpg" alt="..." />
35+
<img
36+
class="rounded-circle"
37+
src="../../../assets/people/a1.jpg"
38+
alt="..."
39+
/>
2640
<i class="status status-bottom bg-warning" />
2741
</span>
2842
<time class="text-link help float-right">9 min ago</time>
2943
<h6 class="m-0 mb-1">Livia Walsh</h6>
30-
<p class="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
44+
<p class="deemphasize text-ellipsis m-0">
45+
Check out my latest email plz!
46+
</p>
3147
</b-list-group-item>
3248
<b-list-group-item class="listGroupItem">
3349
<span class="notificationIcon thumb-sm">
34-
<img class="rounded-circle" src="../../../assets/people/a6.jpg" alt="..." />
50+
<img
51+
class="rounded-circle"
52+
src="../../../assets/people/a6.jpg"
53+
alt="..."
54+
/>
3555
<i class="status status-bottom bg-danger" />
3656
</span>
3757
<time class="text-link help float-right">12:56 AM</time>
@@ -40,7 +60,11 @@
4060
</b-list-group-item>
4161
<b-list-group-item class="listGroupItem">
4262
<span class="notificationIcon thumb-sm">
43-
<img class="rounded-circle" src="../../../assets/people/a4.jpg" alt="..." />
63+
<img
64+
class="rounded-circle"
65+
src="../../../assets/people/a4.jpg"
66+
alt="..."
67+
/>
4468
<i class="status status-bottom bg-gray-light" />
4569
</span>
4670
<time class="text-link help float-right">Yesterday</time>
@@ -51,21 +75,26 @@
5175
</b-list-group-item>
5276
<b-list-group-item class="listGroupItem">
5377
<span class="notificationIcon thumb-sm">
54-
<img class="rounded-circle" src="../../../assets/people/a6.jpg" alt="..." />
78+
<img
79+
class="rounded-circle"
80+
src="../../../assets/people/a6.jpg"
81+
alt="..."
82+
/>
5583
<i class="status status-bottom bg-success" />
5684
</span>
5785
<time class="text-link help float-right">Apr 23</time>
5886
<h6 class="m-0 mb-1">Freda Edison</h6>
5987
<p class="deemphasize text-ellipsis m-0">
60-
Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna join?
88+
Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna
89+
join?
6190
</p>
6291
</b-list-group-item>
6392
</b-list-group>
6493
</template>
6594

6695
<script>
6796
export default {
68-
name: 'Messages',
97+
name: "Messages",
6998
};
7099
</script>
71100

‎src/styles/_utils.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -314,11 +314,11 @@ $z-index-variants: (more: 1, less: -1, '10': 10, '-10': -10);
314314

315315
@include keyframes('bg-attention') {
316316
0% {
317-
background-color: lighten(theme-color('warning'), 43%);
317+
background-color: lighten(theme-color('primary'), 63%);
318318
}
319319

320320
5% {
321-
background-color: lighten(theme-color('warning'), 33%);
321+
background-color: lighten(theme-color('primary'), 53%);
322322
}
323323

324324
0% {

0 commit comments

Comments
 (0)