Skip to content

Commit 3317e35

Browse files
joepavittjoepavitt
committed
Improve structure of notifications/message & cleaner CSS
1 parent ef47528 commit 3317e35

File tree

3 files changed

+111
-64
lines changed

3 files changed

+111
-64
lines changed

‎frontend/src/components/notifications/Notification.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="message" @click="go(to)">
3+
<div class="body">
4+
<div class="icon ff-icon ff-icon-lg">
5+
<slot name="icon" />
6+
</div>
7+
<div class="text">
8+
<div class="header">
9+
<h4 class="title"><slot name="title" /></h4>
10+
<!-- <ff-checkbox :model-value="isSelected" label="" @click.prevent.stop="toggleSelection" />-->
11+
</div>
12+
<div class="content">
13+
<slot name="message" />
14+
</div>
15+
</div>
16+
</div>
17+
<div class="footer">
18+
<slot name="timestamp" />
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
import { mapActions } from 'vuex'
25+
26+
import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
27+
28+
export default {
29+
name: 'TeamInvitationNotification',
30+
mixins: [NotificationMessageMixin],
31+
props: {
32+
to: {
33+
type: Object,
34+
required: true
35+
}
36+
},
37+
computed: {
38+
invitorName () {
39+
return this.notification.invitor.name
40+
},
41+
teamName () {
42+
return this.notification.team.name
43+
}
44+
},
45+
methods: {
46+
...mapActions('ux', ['closeRightDrawer']),
47+
go (to) {
48+
this.closeRightDrawer()
49+
this.$router.push(to)
50+
}
51+
}
52+
}
53+
</script>
54+
55+
<style scoped lang="scss">
56+
57+
</style>

‎frontend/src/components/notifications/TeamInvitationNotification.vue

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
<template>
2-
<div class="message" data-el="invitation-message">
3-
<div class="icon">
4-
<UserAddIcon class="ff-btn--icon" />
5-
</div>
6-
<div class="body">
7-
<div class="header">
8-
<router-link class="title" :to="{name: 'User Invitations'}" @click="closeRightDrawer">
9-
<h4>Team Invitation</h4>
10-
</router-link>
11-
<!-- <ff-checkbox :model-value="isSelected" label="" @click.prevent.stop="toggleSelection" />-->
12-
</div>
13-
<div class="content">
14-
You have been invited by <i>{{ invitorName }}</i> to join <i>{{ teamName }}</i>.
15-
</div>
16-
<div class="footer">
17-
{{ notification.createdSince }}
18-
</div>
19-
</div>
20-
</div>
2+
<NotificationMessage data-el="invitation-message" :to="{name: 'User Invitations'}">
3+
<template #icon>
4+
<UserAddIcon />
5+
</template>
6+
<template #title>
7+
Team Invitation
8+
</template>
9+
<template #message>
10+
You have been invited by <i>"{{ invitorName }}"</i> to join <i>"{{ teamName }}"</i>.
11+
</template>
12+
<template #timestamp>
13+
{{ notification.createdSince }}
14+
</template>
15+
</NotificationMessage>
2116
</template>
2217

2318
<script>
2419
import { UserAddIcon } from '@heroicons/vue/solid'
25-
import { mapActions } from 'vuex'
2620
2721
import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
2822
23+
import NotificationMessage from './Notification.vue'
24+
2925
export default {
3026
name: 'TeamInvitationNotification',
31-
components: { UserAddIcon },
27+
components: { NotificationMessage, UserAddIcon },
3228
mixins: [NotificationMessageMixin],
3329
computed: {
3430
invitorName () {
@@ -37,9 +33,6 @@ export default {
3733
teamName () {
3834
return this.notification.team.name
3935
}
40-
},
41-
methods: {
42-
...mapActions('ux', ['closeRightDrawer'])
4336
}
4437
}
4538
</script>

‎frontend/src/stylesheets/components/notifications.scss

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232
}
3333

34-
$ff-notifications-drawer-side-padding: 5px;
34+
$ff-notifications-drawer-side-padding: 12px;
3535

3636
.ff-notifications-drawer {
3737
display: flex;
@@ -48,6 +48,10 @@ $ff-notifications-drawer-side-padding: 5px;
4848
.title {
4949
padding: 0 $ff-notifications-drawer-side-padding;
5050
margin: 0;
51+
color: $ff-grey-800;
52+
font-weight: bold;
53+
font-size: 1.25rem;
54+
line-height: 1.75rem;
5155
}
5256

5357
.actions {
@@ -77,61 +81,54 @@ $ff-notifications-drawer-side-padding: 5px;
7781
.messages-wrapper {
7882
flex: 1;
7983
width: 100%;
84+
background-color: $ff-grey-100;
8085

8186
.message {
87+
background-color: $ff-white;
8288
border-bottom: 1px solid $ff-grey-300;
83-
padding: 10px 0 0;
89+
padding: 9px $ff-notifications-drawer-side-padding;
8490
transition: ease-in-out .3s;
85-
display: flex;
86-
align-items: center;
87-
88-
.icon {
89-
align-self: baseline;
91+
cursor: pointer;
9092

91-
.ff-btn--icon {
92-
width: 30px;
93-
height: 30px;
94-
}
93+
&:hover .title {
94+
color: $ff-blue-500;
9595
}
9696

9797
.body {
9898
flex: 1;
99+
display: flex;
100+
align-items: center;
101+
}
99102

100-
.header {
101-
display: flex;
102-
padding: 0 $ff-notifications-drawer-side-padding;
103-
justify-content: space-between;
104-
margin-bottom: 5px;
105-
106-
.title {
107-
flex: 1;
108-
109-
h4 {
110-
margin: 0;
111-
}
112-
113-
&:hover {
114-
color: $ff-blue-500;
115-
}
116-
}
103+
.text {
104+
padding: 0 $ff-notifications-drawer-side-padding;
105+
flex-grow: 1;
106+
}
117107

118-
input {
119-
&:hover {
120-
cursor: pointer;
121-
}
108+
.header {
109+
display: flex;
110+
justify-content: space-between;
111+
.title {
112+
flex: 1;
113+
transition: ease-in-out .3s;
114+
h4 {
115+
margin: 0;
122116
}
123117
}
124118

125-
.content {
126-
padding: 0 $ff-notifications-drawer-side-padding;
119+
input {
120+
&:hover {
121+
cursor: pointer;
122+
}
127123
}
124+
}
128125

129-
.footer {
130-
text-align: right;
131-
color: $ff-grey-400;
132-
font-size: 80%;
133-
padding: 0 $ff-notifications-drawer-side-padding;
134-
}
126+
.footer {
127+
margin-top: 6px;
128+
text-align: right;
129+
color: $ff-grey-400;
130+
font-size: 80%;
131+
padding: 0 $ff-notifications-drawer-side-padding;
135132
}
136133

137134
&:hover {

0 commit comments

Comments
 (0)