Skip to content

Commit 997c19e

Browse files
GretaDGretaD
committed
feat: make summary thread similar to normal thread style
Signed-off-by: greta <[email protected]>
1 parent 3863dd3 commit 997c19e

File tree

3 files changed

+104
-73
lines changed

3 files changed

+104
-73
lines changed

‎src/components/Envelope.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<div v-if="data.encrypted || data.previewText"
8484
class="envelope__preview-text"
8585
:title="data.summary ? t('mail', 'This summary was AI generated') : null">
86-
<SparkleIcon v-if="data.summary" :size="15" />
86+
<NcAssistantIcon v-if="data.summary" :size="15" class="envelope__preview-text__icon" />
8787
{{ isEncrypted ? t('mail', 'Encrypted message') : data.summary ? data.summary.trim() : data.previewText.trim() }}
8888
</div>
8989
<EnvelopeSingleClickActions v-if="oneLineLayout"
@@ -357,13 +357,12 @@ import {
357357
NcActionLink as ActionLink,
358358
NcActionSeparator,
359359
NcActionInput,
360-
NcActionText as ActionText,
360+
NcActionText as ActionText, NcAssistantIcon,
361361
} from '@nextcloud/vue'
362362
import EnvelopeSkeleton from './EnvelopeSkeleton.vue'
363363
import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
364364
import Avatar from './Avatar.vue'
365365
import IconCreateEvent from 'vue-material-design-icons/CalendarOutline.vue'
366-
import SparkleIcon from 'vue-material-design-icons/CreationOutline.vue'
367366
import ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'
368367
import CheckIcon from 'vue-material-design-icons/Check.vue'
369368
import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -437,7 +436,6 @@ export default {
437436
PlusIcon,
438437
TagIcon,
439438
TagModal,
440-
SparkleIcon,
441439
Star,
442440
StarOutline,
443441
EmailRead,
@@ -454,6 +452,7 @@ export default {
454452
CalendarClock,
455453
EnvelopeSingleClickActions,
456454
AlarmIcon,
455+
NcAssistantIcon,
457456
},
458457
directives: {
459458
draggableEnvelope: DraggableEnvelopeDirective,
@@ -1014,6 +1013,9 @@ export default {
10141013
position: relative;
10151014
top: 2px;
10161015
}
1016+
&__icon {
1017+
display: inline;
1018+
}
10171019
}
10181020
}
10191021

‎src/components/Message.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@
4444
<div id="reply-composer" />
4545
<div class="reply-buttons">
4646
<div v-if="smartReplies.length > 0" class="reply-buttons__suggested">
47-
<NcButton v-for="(reply,index) in smartReplies"
47+
<NcAssistantButton v-for="(reply,index) in smartReplies"
4848
:key="index"
4949
class="reply-buttons__suggested__button"
5050
type="secondary"
5151
@click="onReply(reply)">
5252
{{ reply }}
53-
</NcButton>
53+
</NcAssistantButton>
5454
</div>
5555
<NcButton type="primary"
5656
class="reply-buttons__notsuggested"
@@ -66,7 +66,7 @@
6666

6767
<script>
6868
import { generateUrl } from '@nextcloud/router'
69-
import { NcButton } from '@nextcloud/vue'
69+
import { NcButton, NcAssistantButton } from '@nextcloud/vue'
7070
7171
import { html, plain } from '../util/text.js'
7272
import { isPgpgMessage } from '../crypto/pgp.js'
@@ -95,6 +95,7 @@ export default {
9595
LockOffIcon,
9696
ReplyIcon,
9797
NcButton,
98+
NcAssistantButton,
9899
},
99100
props: {
100101
envelope: {
@@ -183,19 +184,17 @@ export default {
183184
margin: 0 calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 14);
184185
display: flex;
185186
flex-wrap: wrap;
186-
gap: 5px;
187+
gap: 8px;
187188
justify-content: space-between;
188189
align-items: center;
189190
190191
&__suggested {
191-
justify-content: flex-start;
192192
display: flex;
193193
flex-wrap: wrap;
194-
gap: 5px;
194+
gap: 8px;
195195
196196
&__button {
197-
margin-inline-end: 5px;
198-
border-radius: 12px;
197+
box-sizing: border-box;
199198
200199
:deep(.button-vue__text) {
201200
font-weight: normal;
@@ -207,6 +206,7 @@ export default {
207206
margin-inline-start: auto;
208207
}
209208
}
209+
210210
@media screen and (max-width: 600px) {
211211
.reply-buttons {
212212
display: flex;

‎src/components/ThreadSummary.vue‎

Lines changed: 90 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,59 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55
<template>
6-
<div class="summary">
7-
<div class="summary__header">
8-
<div class="summary__header__actions">
9-
<NcChip :icon-svg="creation" no-close>
10-
{{ brand }}
11-
</NcChip>
12-
<NcButton :aria-label=" t('mail', 'Go to latest message')"
13-
type="secondary"
14-
@click="onScroll">
15-
{{ t('mail', 'Go to newest message') }}
16-
<template #icon>
17-
<ArrowDownIcon :size="20" />
18-
</template>
19-
</NcButton>
6+
<NcAssistantContent class="wrapper">
7+
<div class="summary">
8+
<div class="summary__header">
9+
<div class="summary__header__actions">
10+
<div class="summary__header__info">
11+
<NcAssistantIcon class="summary__header__icon" />
12+
<div class="summary__header__text">
13+
<div class="summary__header__title">
14+
{{ t('mail', 'Thread summary') }}
15+
</div>
16+
<div class="summary__header__brand">
17+
{{ brand }}
18+
</div>
19+
</div>
20+
</div>
21+
22+
<NcButton :aria-label=" t('mail', 'Go to latest message')"
23+
type="tertiary-no-background"
24+
@click="onScroll">
25+
{{ t('mail', 'Newest message') }}
26+
<template #icon>
27+
<ArrowDownIcon :size="20" />
28+
</template>
29+
</NcButton>
30+
</div>
2031
</div>
21-
<div class="summary__header__title">
22-
<h2>{{ t('mail', 'Thread summary') }}</h2>
32+
<div class="summary__body">
33+
<LoadingSkeleton v-if="loading" :number-of-lines="1" :with-avatar="false" />
34+
<p v-else>
35+
{{ summary }}
36+
</p>
37+
</div>
38+
<div class="summary__notice">
39+
{{ t('mail', 'This summary is AI generated and may contain mistakes.') }}
2340
</div>
2441
</div>
25-
<div class="summary__body">
26-
<LoadingSkeleton v-if="loading" :number-of-lines="1" :with-avatar="false" />
27-
<p v-else>
28-
{{ summary }}
29-
</p>
30-
</div>
31-
</div>
42+
</NcAssistantContent>
3243
</template>
3344
<script>
3445
import ArrowDownIcon from 'vue-material-design-icons/ArrowDown.vue'
35-
import creation from '@mdi/svg/svg/creation-outline.svg'
3646
import NcButton from '@nextcloud/vue/components/NcButton'
37-
import NcChip from '@nextcloud/vue/components/NcChip'
47+
import NcAssistantContent from '@nextcloud/vue/components/NcAssistantContent'
48+
import NcAssistantIcon from '@nextcloud/vue/components/NcAssistantIcon'
3849
import LoadingSkeleton from './LoadingSkeleton.vue'
3950
4051
export default {
4152
name: 'ThreadSummary',
4253
components: {
4354
LoadingSkeleton,
4455
NcButton,
45-
NcChip,
4656
ArrowDownIcon,
57+
NcAssistantContent,
58+
NcAssistantIcon,
4759
},
4860
props: {
4961
summary: {
@@ -55,11 +67,6 @@ export default {
5567
required: true,
5668
},
5769
},
58-
data() {
59-
return {
60-
creation,
61-
}
62-
},
6370
computed: {
6471
brand() {
6572
if (OCA.Theming) {
@@ -81,47 +88,69 @@ export default {
8188
}
8289
</script>
8390
<style lang="scss" scoped>
84-
.summary{
85-
border: 2px solid var(--color-primary-element);
86-
border-radius:var( --border-radius-large) ;
87-
margin: 0 10px 20px 10px;
88-
padding: 10px;
89-
display: flex;
90-
flex-direction: column;
91+
.wrapper {
92+
max-width: calc(100% - 20px);
93+
margin: 0 auto;
94+
width: 100%;
95+
}
9196
92-
&__header{
93-
display: flex;
94-
flex-direction: column;
95-
&__actions{
97+
.summary {
98+
position: relative;
99+
border-radius: var(--border-radius-large);
100+
padding: 10px;
101+
display: flex;
102+
flex-direction: column;
103+
&__header {
104+
display: flex;
105+
flex-direction: column;
106+
107+
&__actions {
96108
display: flex;
97109
justify-content: space-between;
98-
&__brand{
99-
display: flex;
100-
align-items: center;
101-
background-color: var(--color-primary-light);
102-
border-radius: var(--border-radius-pill);
103-
width: fit-content;
104-
padding-inline: 4px 10px;
105-
margin: 8px 0 8px 0;
110+
align-items: center;
111+
padding-bottom: 10px;
112+
}
106113
107-
&__icon{
108-
color:var(--color-primary-element);
109-
margin-inline: 5px
110-
}
111-
}
112-
}
114+
&__info {
115+
display: flex;
116+
align-items: center;
117+
gap: var(--default-grid-baseline);
118+
}
113119
114-
}
120+
&__text {
121+
display: flex;
122+
flex-direction: column;
123+
line-height: 1.2;
124+
}
125+
126+
&__title {
127+
font-weight: bold;
128+
}
129+
130+
&__brand {
131+
color: var(--color-text-maxcontrast);
132+
}
133+
&__icon {
134+
padding-inline-end: 14px;
135+
}
136+
}
137+
&__body {
138+
margin-inline-start: 35px;
139+
}
115140
@media only screen and (max-width: 600px) {
116-
.summary{
117-
&__header{
141+
.summary {
142+
&__header {
118143
flex-direction: column;
119-
&__actions{
144+
&__actions {
120145
flex-direction: column;
121146
}
122147
}
123148
}
124149
}
150+
.summary__notice {
151+
margin-top: 0.5rem;
152+
margin-inline-start: 35px;
153+
color: var(--color-text-maxcontrast);
154+
}
125155
}
126-
127156
</style>

0 commit comments

Comments
 (0)