New style for file attachment items
This commit is contained in:
N-Pex
parent
76cd9bc55b
commit
e31ea61c97
5 changed files with 39 additions and 1 deletions
|
|
@ -148,11 +148,20 @@
|
|||
|
||||
/* Style file items (i.e. PDF files) */
|
||||
.thumbnail-item.file-item {
|
||||
border: 1px solid black;
|
||||
background-color: rgba(245,245,245,1);
|
||||
border-radius: 8px;
|
||||
padding: 15px 40px 15px 60px;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
font-family: Inter;
|
||||
font-size: 14 * $chat-text-size;
|
||||
font-weight: 400;
|
||||
line-height: 16.38 * $chat-text-size;
|
||||
letter-spacing: 0.4 * $chat-text-size;
|
||||
text-align: left;
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
svg, .v-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
|
|
@ -170,6 +179,9 @@
|
|||
width: 24px;
|
||||
margin: auto 0;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.swipeable-thumbnails-view {
|
||||
|
|
|
|||
8
src/assets/icons/ic_channel_apk.vue
Normal file
8
src/assets/icons/ic_channel_apk.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="56" height="56" rx="8" fill="white" />
|
||||
<path
|
||||
d="M18.6672 24.6277C18.6672 23.5554 17.7396 22.6659 16.6673 22.6678C15.593 22.6659 14.6674 23.5553 14.6674 24.6296V32.7701C14.6674 33.8443 15.593 34.6672 16.6673 34.6672C17.7396 34.6672 18.6672 33.8462 18.6672 32.7701V24.6277ZM35.9996 22.6678H20.0004L20.0023 35.2595C20.0023 36.408 20.9299 37.3337 22.0784 37.3337H22.6669V42.0553C22.6669 43.1277 23.6078 44 24.6802 44C25.7544 44 26.6667 43.1277 26.6667 42.0553V37.3337H29.3333V42.0553C29.3333 43.1277 30.278 44 31.3484 44C32.4226 44 33.3331 43.1277 33.3331 42.0553V37.3337H33.9273C35.0701 37.3337 36.0015 36.4061 36.0015 35.2576L35.9996 22.6678ZM35.9996 21.3307C35.9996 18.3232 34.394 16.2567 31.935 14.8796L33.1883 12.4016C33.2531 12.2721 33.2112 12.1083 33.0874 12.034C32.9655 11.9636 32.815 12.0112 32.7483 12.1426L31.4855 14.6453C29.4456 13.6625 26.762 13.5616 24.5126 14.6453L23.2479 12.1407C23.1831 12.0112 23.0326 11.9617 22.9107 12.0321C22.7888 12.1064 22.745 12.2702 22.8117 12.4016L24.065 14.8796C21.606 16.2567 20.0004 18.3251 20.0004 21.3307H35.9996ZM41.3326 24.6277C41.3326 23.5554 40.407 22.6659 39.3327 22.6678C38.2604 22.6659 37.3328 23.5553 37.3328 24.6296V32.7701C37.3328 33.8443 38.2585 34.6672 39.3327 34.6672C40.407 34.6672 41.3326 33.8462 41.3326 32.7701V24.6277Z"
|
||||
fill="#5CE500" />
|
||||
</svg>
|
||||
</template>
|
||||
11
src/assets/icons/ic_channel_pdf.vue
Normal file
11
src/assets/icons/ic_channel_pdf.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="56" height="56" rx="8" fill="white" />
|
||||
<path
|
||||
d="M38.3256 12H17.6814C16.5583 12.0004 15.4815 12.4474 14.6882 13.2423C13.8949 14.0372 13.4502 15.115 13.452 16.2379V39.7532C13.452 40.8764 13.8972 41.9539 14.6898 42.7498C15.4824 43.5459 16.558 43.9953 17.6814 44H33.4577C33.751 43.997 34.0252 43.8533 34.1947 43.6139L42.3373 35.4713C42.4002 35.4063 42.448 35.3286 42.4776 35.2432C42.5258 35.1388 42.55 35.0248 42.5478 34.9099V16.238C42.5497 15.1151 42.105 14.0373 41.3117 13.2424C40.5184 12.4475 39.4416 12.0005 38.3185 12.0001L38.3256 12Z"
|
||||
fill="#E50000" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M18.7925 23.6122H21.1529C21.8021 23.605 22.4269 23.8595 22.8866 24.3179C23.3464 24.7763 23.6025 25.4004 23.5973 26.0498C23.5973 26.6993 23.3402 27.3222 22.882 27.7827C22.424 28.2431 21.8022 28.5033 21.1529 28.5066H19.6699V30.7582C19.6699 31.0716 19.5027 31.3612 19.2312 31.5179C18.9597 31.6747 18.6252 31.6747 18.3538 31.5179C18.0823 31.3612 17.915 31.0716 17.915 30.7582V24.4896C17.915 24.2568 18.0074 24.0337 18.1721 23.8691C18.3366 23.7046 18.5598 23.6122 18.7925 23.6122ZM19.6699 26.7463H21.1529L21.1529 26.7516C21.3367 26.7516 21.5129 26.6782 21.6423 26.5478C21.7718 26.4173 21.8439 26.2405 21.8425 26.0567C21.8468 25.8724 21.7755 25.6945 21.6453 25.5641C21.515 25.4339 21.3369 25.3626 21.1529 25.367H19.6699V26.7463ZM25.7049 23.6016H28.074C28.7241 23.6016 29.3476 23.8591 29.808 24.3179C30.2686 24.7768 30.5284 25.3994 30.5308 26.0495V29.1872C30.5308 29.8388 30.2719 30.4637 29.8112 30.9244C29.3504 31.3851 28.7256 31.644 28.074 31.644H25.7049C25.4721 31.644 25.2489 31.5516 25.0844 31.387C24.9198 31.2225 24.8274 30.9992 24.8274 30.7666V24.479C24.8274 24.2464 24.9198 24.0232 25.0844 23.8587C25.2489 23.694 25.4721 23.6016 25.7049 23.6016ZM28.5703 29.6908C28.7019 29.5593 28.7759 29.3806 28.7759 29.1945V26.0583C28.7759 25.8723 28.7019 25.6936 28.5703 25.5621C28.4386 25.4304 28.2602 25.3564 28.074 25.3564H26.5823L26.5822 29.8964H28.0738C28.2601 29.8964 28.4386 29.8225 28.5703 29.6908ZM37.2281 25.0996C37.3928 24.9349 37.4852 24.7118 37.4852 24.479L37.4781 24.479C37.4781 24.2463 37.3856 24.0231 37.2211 23.8586C37.0566 23.694 36.8333 23.6016 36.6007 23.6016H32.661C32.4283 23.6016 32.2051 23.694 32.0406 23.8586C31.8761 24.0231 31.7836 24.2464 31.7836 24.479V30.772C31.7836 31.0855 31.9508 31.3751 32.2223 31.5319C32.4938 31.6886 32.8282 31.6886 33.0997 31.5319C33.3712 31.3751 33.5384 31.0855 33.5384 30.772V28.5065H35.5724C35.8858 28.5065 36.1755 28.3392 36.3323 28.0678C36.4889 27.7963 36.4889 27.4618 36.3323 27.1903C36.1755 26.9188 35.8858 26.7516 35.5724 26.7516H33.5384V25.3565H36.6077C36.8404 25.3565 37.0636 25.2641 37.2281 25.0996Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -999,6 +999,7 @@ export default {
|
|||
const pinnedEvents = this.$matrix.getPinnedEvents(this.room);
|
||||
updated.forEach((e) => {
|
||||
Vue.set(e, "isPinned", pinnedEvents.includes(e.threadParent ? e.threadParent.getId() : e.getId()));
|
||||
Vue.set(e, "isChannelMessage", (this.room && this.roomDisplayType == ROOM_TYPE_CHANNEL));
|
||||
});
|
||||
|
||||
updated = updated.sort((e1, e2) => {
|
||||
|
|
|
|||
|
|
@ -38,10 +38,16 @@ export default {
|
|||
computed: {
|
||||
fileTypeIcon() {
|
||||
if (util.isFileTypeAPK(this.item.event)) {
|
||||
if (this.item.event.isChannelMessage) {
|
||||
return "$vuetify.icons.ic_channel_apk";
|
||||
}
|
||||
return "$vuetify.icons.ic_apk";
|
||||
} else if (util.isFileTypeIPA(this.item.event)) {
|
||||
return "$vuetify.icons.ic_ipa";
|
||||
} else if (util.isFileTypePDF(this.item.event)) {
|
||||
if (this.item.event.isChannelMessage) {
|
||||
return "$vuetify.icons.ic_channel_pdf";
|
||||
}
|
||||
return "$vuetify.icons.ic_pdf";
|
||||
} else if (util.isFileTypeZip(this.item.event)) {
|
||||
return "$vuetify.icons.ic_zip";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue