blob: f33173da6f9e938e413901daec23eb4f1544dae5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
|
<template>
<div class="message" :data-is-me="isMe">
<mk-avatar class="avatar" :user="message.user" target="_blank"/>
<div class="content">
<div class="balloon" :data-no-text="message.text == null">
<p class="read" v-if="isMe && message.isRead">%i18n:@is-read%</p>
<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
</button>
<div class="content" v-if="!message.isDeleted">
<misskey-flavored-markdown class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/>
<div class="file" v-if="message.file">
<a :href="message.file.url" target="_blank" :title="message.file.name">
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
<p v-else>{{ message.file.name }}</p>
</a>
</div>
</div>
<div class="content" v-if="message.isDeleted">
<p class="is-deleted">%i18n:@deleted%</p>
</div>
</div>
<div></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<footer>
<mk-time :time="message.createdAt"/>
<template v-if="message.is_edited">%fa:pencil-alt%</template>
</footer>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import parse from '../../../../../mfm/parse';
export default Vue.extend({
props: {
message: {
required: true
}
},
computed: {
isMe(): boolean {
return this.message.userId == this.$store.state.i.id;
},
urls(): string[] {
if (this.message.text) {
const ast = parse(this.message.text);
return ast
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
.map(t => t.url);
} else {
return null;
}
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
$me-balloon-color = $theme-color
padding 10px 12px 10px 12px
background-color transparent
> .avatar
display block
position absolute
top 10px
width 54px
height 54px
border-radius 8px
transition all 0.1s ease
> .content
> .balloon
display block
padding 0
max-width calc(100% - 16px)
min-height 38px
border-radius 16px
&:before
content ""
pointer-events none
display block
position absolute
top 12px
& + *
clear both
&:hover
> .delete-button
display block
> .delete-button
display none
position absolute
z-index 1
top -4px
right -4px
margin 0
padding 0
cursor pointer
outline none
border none
border-radius 0
box-shadow none
background transparent
> img
vertical-align bottom
width 16px
height 16px
cursor pointer
> .read
user-select none
display block
position absolute
z-index 1
bottom -4px
left -12px
margin 0
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
font-size 11px
> .content
> .is-deleted
display block
margin 0
padding 0
overflow hidden
overflow-wrap break-word
font-size 1em
color rgba(#000, 0.5)
> .text
display block
margin 0
padding 8px 16px
overflow hidden
overflow-wrap break-word
font-size 1em
color rgba(#000, 0.8)
& + .file
> a
border-radius 0 0 16px 16px
> .file
> a
display block
max-width 100%
max-height 512px
border-radius 16px
overflow hidden
text-decoration none
&:hover
text-decoration none
> p
background #ccc
> *
display block
margin 0
width 100%
height 100%
> p
padding 30px
text-align center
color #555
background #ddd
> .mk-url-preview
margin 8px 0
> footer
display block
margin 2px 0 0 0
font-size 10px
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
> [data-fa]
margin-left 4px
&:not([data-is-me])
> .avatar
left 12px
> .content
padding-left 66px
> .balloon
$color = isDark ? #2d3338 : #eee
float left
background $color
&[data-no-text]
background transparent
&:not([data-no-text]):before
left -14px
border-top solid 8px transparent
border-right solid 8px $color
border-bottom solid 8px transparent
border-left solid 8px transparent
> .content
> .text
if isDark
color #fff
> footer
text-align left
&[data-is-me]
> .avatar
right 12px
> .content
padding-right 66px
> .balloon
float right
background $me-balloon-color
&[data-no-text]
background transparent
&:not([data-no-text]):before
right -14px
left auto
border-top solid 8px transparent
border-right solid 8px transparent
border-bottom solid 8px transparent
border-left solid 8px $me-balloon-color
> .content
> p.is-deleted
color rgba(#fff, 0.5)
> .text >>>
&, *
color #fff !important
> footer
text-align right
&[data-is-deleted]
> .baloon
opacity 0.5
.message[data-darkmode]
root(true)
.message:not([data-darkmode])
root(false)
</style>
|
