Skip to content

Commit f539ac8

Browse files
nickvergessennickvergessen
authored
Merge pull request #10537 from nextcloud/fix/noid/redo-shared-items
techdebt(SharedItemsTab) - refactoring of shared items tab
2 parents 939f0d3 + def4a3a commit f539ac8

File tree

17 files changed

+276
-253
lines changed

17 files changed

+276
-253
lines changed

‎src/components/MessagesList/MessagesGroup/Message/Message.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ describe('Message.vue', () => {
324324

325325
const messageEl = wrapper.findComponent({ name: 'NcRichText' })
326326
// note: indices as object keys are on purpose
327-
expect(messageEl.props('arguments')).toStrictEqual(expectedRichParameters)
327+
expect(messageEl.props('arguments')).toMatchObject(expectedRichParameters)
328328
}
329329

330330
test('renders mentions', () => {

‎src/components/MessagesList/MessagesGroup/Message/Message.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,7 @@ import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
281281
import participant from '../../../../mixins/participant.js'
282282
import { EventBus } from '../../../../services/EventBus.js'
283283
import { useGuestNameStore } from '../../../../stores/guestName.js'
284+
import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.js'
284285
285286
const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
286287
@@ -581,17 +582,19 @@ export default {
581582
Object.keys(this.messageParameters).forEach(function(p) {
582583
const type = this.messageParameters[p].type
583584
const mimetype = this.messageParameters[p].mimetype
585+
const itemType = getItemTypeFromMessage(this.messageObject)
584586
if (type === 'user' || type === 'call' || type === 'guest' || type === 'user-group' || type === 'group') {
585587
richParameters[p] = {
586588
component: Mention,
587589
props: this.messageParameters[p],
588590
}
589591
} else if (type === 'file' && mimetype !== 'text/vcard') {
590-
const parameters = this.messageParameters[p]
591-
parameters['is-voice-message'] = this.messageType === 'voice-message'
592592
richParameters[p] = {
593593
component: FilePreview,
594-
props: parameters,
594+
props: Object.assign({
595+
token: this.token,
596+
itemType,
597+
}, this.messageParameters[p]),
595598
}
596599
} else if (type === 'deck-card') {
597600
richParameters[p] = {

‎src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,21 +98,23 @@ export default {
9898
<style lang="scss" scoped>
9999
.deck-card {
100100
display: flex;
101-
transition: box-shadow 0.1s ease-in-out;
102-
border: 1px solid var(--color-border);
103-
box-shadow: 0 0 2px 0 var(--color-box-shadow);
101+
border: 2px solid var(--color-border);
104102
border-radius: var(--border-radius-large);
105103
font-size: 100%;
106104
background-color: var(--color-main-background);
107-
margin: 4px 0;
108105
max-width: 300px;
109106
padding: 8px 16px;
110107
flex-direction: column;
111108
white-space: nowrap;
109+
transition: border-color 0.1s ease-in-out;
110+
112111
&:hover,
113-
&:focus{
114-
box-shadow: 0 0 5px 0 var(--color-box-shadow);
112+
&:focus,
113+
&:focus-visible {
114+
border-color: var(--color-primary-element);
115+
outline: none;
115116
}
117+
116118
&__lineone {
117119
height: 30px;
118120
display: flex;
@@ -126,6 +128,7 @@ export default {
126128
margin-left: 8px;
127129
}
128130
}
131+
129132
&__linetwo {
130133
height: 30px;
131134
color: var(--color-text-lighter);
@@ -141,7 +144,7 @@ export default {
141144
142145
.wide {
143146
max-width: 400px;
144-
margin: 4px auto;
147+
width: 100%;
145148
}
146149
147150
</style>

‎src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ describe('FilePreview.vue', () => {
4848
})
4949

5050
propsData = {
51+
token: 'TOKEN',
5152
id: '123',
5253
name: 'test.jpg',
5354
path: 'path/to/test.jpg',
@@ -196,6 +197,7 @@ describe('FilePreview.vue', () => {
196197
})
197198

198199
test('renders default mime icon on load error', async () => {
200+
OC.MimeType.getIconUrl.mockReturnValueOnce(imagePath('core', 'image/jpeg'))
199201
const wrapper = shallowMount(FilePreview, {
200202
localVue,
201203
store,
@@ -206,7 +208,7 @@ describe('FilePreview.vue', () => {
206208

207209
expect(wrapper.element.tagName).toBe('A')
208210
const imageUrl = wrapper.find('img').attributes('src')
209-
expect(imageUrl).toBe(imagePath('core', 'filetypes/file'))
211+
expect(imageUrl).toBe(imagePath('core', 'image/jpeg'))
210212
})
211213

212214
test('renders generic mime type icon for unknown mime types', async () => {

‎src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
class="file-preview"
2929
:class="{ 'file-preview--viewer-available': isViewerAvailable,
3030
'file-preview--upload-editor': isUploadEditor,
31-
'file-preview--shared-items-grid': isSharedItemsTab && !rowLayout,
31+
'file-preview--shared-items-grid': isSharedItems && !rowLayout,
3232
'file-preview--row-layout': rowLayout }"
3333
@click.exact="handleClick"
3434
@keydown.enter="handleClick">
@@ -109,6 +109,10 @@ export default {
109109
},
110110
111111
props: {
112+
token: {
113+
type: String,
114+
required: true,
115+
},
112116
/**
113117
* File id
114118
*/
@@ -220,22 +224,17 @@ export default {
220224
default: '',
221225
},
222226
223-
isVoiceMessage: {
224-
type: Boolean,
225-
default: false,
226-
},
227-
228227
rowLayout: {
229228
type: Boolean,
230229
default: false,
231230
},
232231
233-
isSharedItemsTab: {
232+
isSharedItems: {
234233
type: Boolean,
235234
default: false,
236235
},
237236
238-
sharedItemsType: {
237+
itemType: {
239238
type: String,
240239
default: '',
241240
},
@@ -260,7 +259,7 @@ export default {
260259
},
261260
computed: {
262261
shouldShowFileDetail() {
263-
if (this.isSharedItemsTab && !this.rowLayout) {
262+
if (this.isSharedItems && !this.rowLayout) {
264263
return false
265264
}
266265
// display the file detail below the preview if the preview
@@ -300,7 +299,7 @@ export default {
300299
return {
301300
is: 'div',
302301
}
303-
} else if (this.isVoiceMessage) {
302+
} else if (this.isVoiceMessage && !this.isSharedItems) {
304303
return {
305304
is: AudioPlayer,
306305
name: this.name,
@@ -317,7 +316,7 @@ export default {
317316
},
318317
319318
defaultIconUrl() {
320-
return imagePath('core', 'filetypes/file')
319+
return OC.MimeType.getIconUrl(this.mimetype) || imagePath('core', 'filetypes/file')
321320
},
322321
323322
previewImageClass() {
@@ -332,7 +331,10 @@ export default {
332331
333332
if (this.failed || this.previewType === PREVIEW_TYPE.MIME_ICON || this.rowLayout) {
334333
classes += 'mimeicon'
334+
} else if (this.previewAvailable === 'yes') {
335+
classes += 'media'
335336
}
337+
336338
return classes
337339
},
338340
@@ -410,6 +412,10 @@ export default {
410412
return false
411413
},
412414
415+
isVoiceMessage() {
416+
return this.itemType === SHARED_ITEM.TYPES.VOICE
417+
},
418+
413419
isPlayable() {
414420
// don't show play button for direct renders
415421
if (this.failed || !this.isViewerAvailable || this.previewType !== PREVIEW_TYPE.PREVIEW) {
@@ -480,17 +486,16 @@ export default {
480486
481487
const fileInfo = this.generateViewerObject(this)
482488
483-
if (this.isSharedItemsTab && this.sharedItemsType === SHARED_ITEM.TYPES.MEDIA) {
484-
const token = this.$store.getters.getToken()
489+
if (this.itemType === SHARED_ITEM.TYPES.MEDIA) {
485490
const getRevertedList = (items) => Object.values(items).reverse()
486491
.map(item => this.generateViewerObject(item.messageParameters.file))
487492
488493
// Get available media files from store and put them to the list to navigate through slides
489-
const mediaFiles = this.$store.getters.sharedItems(token).media
494+
const mediaFiles = this.$store.getters.sharedItems(this.token).media
490495
const list = getRevertedList(mediaFiles)
491496
const loadMore = async () => {
492497
const { messages } = await this.$store.dispatch('getSharedItems',
493-
{ token, type: SHARED_ITEM.TYPES.MEDIA })
498+
{ token: this.token, type: SHARED_ITEM.TYPES.MEDIA })
494499
return getRevertedList(messages)
495500
}
496501
@@ -518,15 +523,23 @@ export default {
518523
519524
box-sizing: content-box !important;
520525
&:hover,
521-
&:focus {
526+
&:focus,
527+
&:focus-visible {
522528
background-color: var(--color-background-hover);
529+
outline: none;
530+
523531
.remove-file {
524532
visibility: visible;
525533
}
534+
535+
.file-preview__image.media {
536+
outline: 2px solid var(--color-primary-element);
537+
}
526538
}
527539
528540
&__image {
529541
object-fit: cover;
542+
transition: outline 0.1s ease-in-out;
530543
}
531544
532545
.loading {
@@ -549,12 +562,14 @@ export default {
549562
max-width: 100%;
550563
max-height: 384px;
551564
}
565+
552566
.preview-medium {
553567
display: inline-block;
554568
border-radius: var(--border-radius);
555569
max-width: 100%;
556570
max-height: 192px;
557571
}
572+
558573
.preview-small {
559574
display: inline-block;
560575
border-radius: var(--border-radius);
@@ -607,6 +622,7 @@ export default {
607622
content: ' ↗';
608623
}
609624
}
625+
610626
&--upload-editor {
611627
max-width: 140px;
612628
max-height: 140px;
@@ -618,6 +634,7 @@ export default {
618634
width: 128px;
619635
height: 128px;
620636
}
637+
621638
.loading {
622639
width: 100%;
623640
}
@@ -646,6 +663,7 @@ export default {
646663
647664
&--shared-items-grid {
648665
aspect-ratio: 1;
666+
649667
.preview {
650668
width: 100%;
651669
min-height: unset;

‎src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,13 @@ export default {
142142
height: 300px;
143143
max-height: 30vh;
144144
margin: 4px;
145+
transition: outline 0.1s ease-in-out;
146+
147+
&:hover,
148+
&:focus,
149+
&:focus-visible {
150+
outline: 2px solid var(--color-primary-element);
151+
}
145152
146153
&.wide {
147154
width: 100%;

‎src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -455,16 +455,21 @@ export default {
455455
456456
.poll {
457457
display: flex;
458-
transition: box-shadow 0.1s ease-in-out;
459-
border: 1px solid var(--color-border);
460-
box-shadow: 0 0 2px 0 var(--color-box-shadow);
461-
margin: 4px 0;
458+
border: 2px solid var(--color-border);
462459
max-width: 300px;
463460
padding: 0 16px 16px 16px;
464461
flex-direction: column;
465462
background: var(--color-main-background);
466463
border-radius: var(--border-radius-large);
467464
justify-content: space-between;
465+
transition: border-color 0.1s ease-in-out;
466+
467+
&:hover,
468+
&:focus,
469+
&:focus-visible {
470+
border-color: var(--color-primary-element);
471+
outline: none;
472+
}
468473
469474
&__header {
470475
display: flex;

‎src/components/NewMessage/NewMessageUploadEditor.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
group>
4141
<template v-for="file in files">
4242
<FilePreview :key="file.temporaryMessage.id"
43+
:token="token"
4344
v-bind="file.temporaryMessage.messageParameters.file"
4445
:is-upload-editor="true"
4546
@remove-file="handleRemoveFileFromSelection" />

‎src/components/Quote.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,9 @@ export default {
178178
richParameters[p] = {
179179
component: FilePreview,
180180
props: Object.assign({
181+
token: this.token,
181182
smallPreview: true,
182-
}, this.messageParameters[p]
183-
),
183+
}, this.messageParameters[p]),
184184
}
185185
} else {
186186
richParameters[p] = {

0 commit comments

Comments
 (0)