Skip to content

Commit c064c0a

Browse files
committed
fixup! feat: add recipient info on the right side of the composer
Signed-off-by: greta <[email protected]>
1 parent 503d551 commit c064c0a

File tree

3 files changed

+130
-16
lines changed

3 files changed

+130
-16
lines changed

src/components/Message.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default {
113113
replyButtonLabel: {
114114
required: true,
115115
type: String,
116-
}
116+
},
117117
},
118118
computed: {
119119
from() {

src/components/NewMessageModal.vue

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
-->
55
<template>
66
<Modal v-if="showMessageComposer"
7-
:size="largerModal ? 'large' : 'normal'"
7+
:size="modalSize"
88
:name="modalTitle"
99
:additional-trap-elements="toolbarElements"
1010
@close="$event.type === 'click' ? onClose() : onMinimize()">
@@ -51,7 +51,7 @@
5151
</template>
5252
</EmptyContent>
5353
<template v-else>
54-
<div class="modal-content">
54+
<div :class="['modal-content', { 'with-recipient': composerData.to && composerData.to.length > 0 }]">
5555
<div class="left-pane">
5656
<NcButton class="maximize-button"
5757
type="tertiary-no-background"
@@ -113,8 +113,9 @@
113113
@send="onSend"
114114
@show-toolbar="handleShow" />
115115
</div>
116-
<div class="right-pane">
117-
<RecipientInfo :recipient="recipient" />
116+
117+
<div v-if="composerData.to && composerData.to.length > 0" class="right-pane">
118+
<RecipientInfo :recipient-info="composerData.to" />
118119
</div>
119120
</div>
120121
</template>
@@ -219,6 +220,9 @@ export default {
219220
smartReply() {
220221
return this.composerData?.smartReply ?? null
221222
},
223+
modalSize() {
224+
return this.composerData.to && this.composerData.to.length > 0 ? 'full' : (this.largerModal ? 'large' : 'normal')
225+
},
222226
},
223227
created() {
224228
const id = this.composerData?.id
@@ -604,17 +608,28 @@ export default {
604608
}
605609
.modal-content {
606610
display: flex;
607-
height: 100%
611+
height: 100%;
612+
flex-direction: row;
613+
width: 100%;
608614
}
609615
610616
.left-pane {
611-
flex: 2;
612-
padding: 10px;
617+
flex: 1;
618+
overflow-y: auto;
613619
}
614620
615621
.right-pane {
622+
flex: 0 0 400px;
623+
overflow-y: auto;
624+
padding-left: 5px;
625+
border-left: 1px solid #ccc;
626+
}
627+
628+
.modal-content.with-recipient .left-pane {
616629
flex: 1;
617-
padding: 10px;
618-
border-left: 1px solid #ddd;
630+
width: calc(100% - 400px);
631+
}
632+
.modal-content .left-pane {
633+
width: 100%;
619634
}
620635
</style>

src/components/RecipientInfo.vue

Lines changed: 105 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,117 @@
11
<template>
2-
<div>
3-
<h5>Recipient Info</h5>
4-
<p>Name: {{ recipient.name }}</p>
5-
<p>Email: {{ recipient.email }}</p>
2+
<div class="recipient-info">
3+
<div v-if="recipientInfo.length === 1" class="recipient-single">
4+
<Avatar :user="recipientInfo[0].uid"
5+
:display-name="recipientInfo[0].displayName"
6+
:email="recipientInfo[0].email"
7+
:size="128"
8+
:disable-tooltip="true"
9+
:disable-menu="true" />
10+
<div class="recipient-details">
11+
<p>{{ recipientInfo[0].displayName }}</p>
12+
<p class="recipient-email">
13+
{{ recipientInfo[0].email }}
14+
</p>
15+
</div>
16+
</div>
17+
<div v-else class="recipient-multiple">
18+
<div class="recipient-list">
19+
<div v-for="(recipient, index) in recipientInfo"
20+
:key="recipient.uid"
21+
class="recipient-item">
22+
<Avatar :user="recipient.uid"
23+
:display-name="recipient.displayName"
24+
:email="recipient.email"
25+
:size="64"
26+
:disable-tooltip="true"
27+
:disable-menu="true" />
28+
<div class="recipient-item-details">
29+
<p>{{ recipient.displayName }}</p>
30+
<p class="recipient-email">
31+
{{ recipient.email }}
32+
<span class="expand-toggle" @click="toggleExpand(index)">
33+
<IconArrowUp v-if="expandedIndex === index" size="16" />
34+
<IconArrowDown v-else size="16" />
35+
</span>
36+
</p>
37+
<div v-if="expandedIndex === index" class="expanded-recipient-details">
38+
<p>{{ recipient.displayName }}</p>
39+
<p class="recipient-email">
40+
{{ recipient.email }}
41+
</p>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
647
</div>
748
</template>
849

950
<script>
51+
import Avatar from './Avatar.vue'
52+
import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
53+
import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
54+
1055
export default {
56+
components: {
57+
Avatar,
58+
IconArrowUp,
59+
IconArrowDown,
60+
},
1161
props: {
12-
recipient: {
13-
type: Object,
62+
recipientInfo: {
63+
type: Array,
1464
required: true,
1565
},
1666
},
67+
data() {
68+
return {
69+
expandedIndex: null,
70+
}
71+
},
72+
methods: {
73+
toggleExpand(index) {
74+
this.expandedIndex = this.expandedIndex === index ? null : index
75+
},
76+
},
1777
}
1878
</script>
79+
80+
<style scoped lang="scss">
81+
.recipient-info {
82+
display: flex;
83+
flex-direction: column;
84+
padding: 10px;
85+
}
86+
87+
.recipient-single {
88+
display: flex;
89+
align-items: center;
90+
}
91+
92+
.recipient-multiple {
93+
margin-top: 10px;
94+
}
95+
96+
.recipient-list {
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
101+
.recipient-item {
102+
display: flex;
103+
align-items: center;
104+
margin-right: 20px;
105+
margin-bottom: 10px;
106+
}
107+
108+
.recipient-item-details {
109+
margin-left: 10px;
110+
}
111+
112+
.expand-toggle {
113+
cursor: pointer;
114+
margin-top: 10px;
115+
}
116+
117+
</style>

0 commit comments

Comments
 (0)