Merge branch 'style-channels' into 'dev'
Style channels See merge request keanuapp/keanuapp-weblite!319
This commit is contained in:
N Pex
commit
ecd7bd8090
25 changed files with 821 additions and 88 deletions
200
src/assets/css/channel.scss
Normal file
200
src/assets/css/channel.scss
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
.chat-root.channel {
|
||||
background-color: #f2f2f2;
|
||||
.chat-content {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
align-self: center;
|
||||
background-color: white;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.messageOut,
|
||||
.messageIn,
|
||||
.messageOut.from-admin,
|
||||
.messageIn.from-admin {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin: 0 0 8px 0;
|
||||
padding: 16px 0 0 0;
|
||||
text-align: start;
|
||||
.senderAndTime {
|
||||
order: 2;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 2px 12px 0 12px;
|
||||
.sender {
|
||||
font-size: 12 * $chat-text-size;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #1c1c31;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.time {
|
||||
font-size: 12 * $chat-text-size;
|
||||
margin: 0;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
.status {
|
||||
font-size: 12 * $chat-text-size;
|
||||
margin: 0 0 0 10px;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
order: 1;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
min-width: 40px !important;
|
||||
min-height: 40px !important;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.pin-icon {
|
||||
order: 3;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.op-button {
|
||||
order: 4;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.content {
|
||||
order: 5;
|
||||
flex: 0 0 100%;
|
||||
margin-top: 24px;
|
||||
.message {
|
||||
color: black !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.bubble {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: black !important;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 15px 0 15px;
|
||||
}
|
||||
.bubble.image-bubble {
|
||||
/* full bleed */
|
||||
padding: 0 0 0 0;
|
||||
border-radius: 0 !important;
|
||||
.v-image {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
.quick-reaction-container {
|
||||
order: 6;
|
||||
flex: 0 0 100%;
|
||||
margin: 24px 7px 0 7px;
|
||||
padding: 0 8px 16px 8px;
|
||||
.emoji {
|
||||
font-size: 12 * $chat-text-size;
|
||||
font-weight: 500;
|
||||
color: #1c1c31;
|
||||
.v-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Make all images 'cover' */
|
||||
.v-image__image {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
color: #1c1c31 !important;
|
||||
.currentColor {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
.v-icon {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-answer {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.messageOut.pinned,
|
||||
.messageIn.pinned,
|
||||
.messageOut.from-admin.pinned,
|
||||
.messageIn.from-admin.pinned {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
.message-operations {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
background-color: white;
|
||||
height: fit-content;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Style file items (i.e. PDF files) */
|
||||
.thumbnail-item.file-item {
|
||||
border: 1px solid black;
|
||||
border-radius: 8px;
|
||||
padding: 15px 40px 15px 60px;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&::after {
|
||||
content: " ";
|
||||
background: url("~@/assets/icons/ic_export.svg") no-repeat;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.swipeable-thumbnails-view {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
order: 2;
|
||||
.thumbnail-item.file-item {
|
||||
margin: 15px;
|
||||
width: auto;
|
||||
}
|
||||
.indicator-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 12px;
|
||||
.indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
margin: 0 2.5px;
|
||||
background: #D9D9D9;
|
||||
&.current {
|
||||
background: #1C1C31;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import "@/assets/css/main.scss";
|
||||
@import "@/assets/css/vendors/v-emoji-picker";
|
||||
@import "@/assets/css/filedrop.scss";
|
||||
@import "@/assets/css/channel.scss";
|
||||
|
||||
$admin-bg: black;
|
||||
$admin-fg: white;
|
||||
|
|
@ -341,8 +342,12 @@ body {
|
|||
|
||||
.scroll-to-end {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
bottom: 20px;
|
||||
right: 16px;
|
||||
&.reversed {
|
||||
top: 120px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.op-button {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.poll-answer:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.poll-percent-indicator {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
|
|
|
|||
9
src/assets/icons/ic_edit.vue
Normal file
9
src/assets/icons/ic_edit.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 6L18 11" stroke="black" stroke-width="1.2" />
|
||||
<path d="M5 14L10 19" stroke="black" stroke-width="1.2" />
|
||||
<path
|
||||
d="M14.4692 4.98995L5.19822 14.2609C5.18642 14.2727 5.17463 14.2845 5.16288 14.2962C5.00326 14.4554 4.84981 14.6084 4.74141 14.7999C4.63302 14.9913 4.58076 15.2016 4.52639 15.4204C4.52239 15.4365 4.51838 15.4526 4.51433 15.4688L3.62003 19.046C3.61762 19.0557 3.61518 19.0654 3.61272 19.0752C3.57411 19.2293 3.53044 19.4035 3.51593 19.5518C3.49978 19.7169 3.50127 20.0162 3.74255 20.2575C3.98384 20.4987 4.28307 20.5002 4.4482 20.4841C4.59644 20.4696 4.77068 20.4259 4.92474 20.3873C4.93457 20.3848 4.94432 20.3824 4.95397 20.38L4.80845 19.7979L4.95397 20.38L8.53117 19.4857C8.54736 19.4816 8.56352 19.4776 8.57962 19.4736C8.79839 19.4192 9.0087 19.367 9.20015 19.2586L8.90453 18.7365L9.20015 19.2586C9.39159 19.1502 9.5446 18.9967 9.70378 18.8371C9.7155 18.8254 9.72725 18.8136 9.73906 18.8018L19.0101 9.53079L19.0369 9.50395C19.3472 9.19367 19.6215 8.91946 19.8128 8.66869C20.0202 8.39688 20.1858 8.08335 20.1858 7.69231C20.1858 7.30127 20.0202 6.98774 19.8128 6.71592C19.6215 6.46516 19.3472 6.19095 19.0369 5.88066L19.0101 5.85383L18.1462 4.98995L18.1193 4.96311C17.8091 4.65278 17.5348 4.37853 17.2841 4.1872C17.0123 3.97981 16.6987 3.81421 16.3077 3.81421C15.9167 3.81421 15.6031 3.97981 15.3313 4.1872C15.0805 4.37853 14.8063 4.6528 14.496 4.96314L14.4692 4.98995Z"
|
||||
stroke="black" stroke-width="1.2" />
|
||||
</svg>
|
||||
</template>
|
||||
4
src/assets/icons/ic_export.svg
Normal file
4
src/assets/icons/ic_export.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.55 3H7.25C7.71944 3 8.1 3.38056 8.1 3.85C8.1 4.28591 7.77187 4.64518 7.34913 4.69428L7.25 4.7H5.55C5.11409 4.7 4.75482 5.02813 4.70572 5.45087L4.7 5.55V17.45C4.7 17.8859 5.02813 18.2452 5.45087 18.2943L5.55 18.3H17.45C17.8859 18.3 18.2452 17.9719 18.2943 17.5491L18.3 17.45V15.75C18.3 15.2806 18.6806 14.9 19.15 14.9C19.5859 14.9 19.9452 15.2281 19.9943 15.6509L20 15.75V17.45C20 18.808 18.9384 19.9181 17.5998 19.9957L17.45 20H5.55C4.19197 20 3.08189 18.9384 3.00433 17.5998L3 17.45V5.55C3 4.19197 4.06158 3.08189 5.40017 3.00433L5.55 3ZM19.15 3L19.2188 3.00255L19.3206 3.0172L19.4153 3.04228L19.5097 3.07962L19.5926 3.1241L19.6742 3.18087L19.751 3.24896L19.8331 3.34399L19.894 3.43855L19.9204 3.49037L19.9491 3.5596L19.9695 3.62391L19.9941 3.74962L20 3.85V8.95C20 9.41944 19.6194 9.8 19.15 9.8C18.6806 9.8 18.3 9.41944 18.3 8.95V5.9019L12.951 11.251C12.6446 11.5575 12.1625 11.581 11.829 11.3218L11.749 11.251C11.4425 10.9446 11.419 10.4625 11.6782 10.129L11.749 10.049L17.0964 4.7H14.05C13.5806 4.7 13.2 4.31944 13.2 3.85C13.2 3.38056 13.5806 3 14.05 3H19.15Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
7
src/assets/icons/ic_like.vue
Normal file
7
src/assets/icons/ic_like.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M0.937496 8.11875C0.937496 12.4078 4.59281 16.6369 10.3003 20.2444C10.6172 20.4347 10.9941 20.625 11.25 20.625C11.5153 20.625 11.8931 20.4347 12.1997 20.2444C17.9062 16.6369 21.5625 12.4069 21.5625 8.11875C21.5625 4.44 18.9797 1.875 15.63 1.875C13.6903 1.875 12.1687 2.75625 11.25 4.08C10.3519 2.7675 8.82 1.875 6.87 1.875C3.53062 1.875 0.937496 4.44 0.937496 8.11875Z"
|
||||
stroke="#1C1C31" stroke-width="1.875" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/assets/icons/ic_like_filled.vue
Normal file
7
src/assets/icons/ic_like_filled.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M0.937496 8.11875C0.937496 12.4078 4.59281 16.6369 10.3003 20.2444C10.6172 20.4347 10.9941 20.625 11.25 20.625C11.5153 20.625 11.8931 20.4347 12.1997 20.2444C17.9062 16.6369 21.5625 12.4069 21.5625 8.11875C21.5625 4.44 18.9797 1.875 15.63 1.875C13.6903 1.875 12.1687 2.75625 11.25 4.08C10.3519 2.7675 8.82 1.875 6.87 1.875C3.53062 1.875 0.937496 4.44 0.937496 8.11875Z"
|
||||
stroke="#1C1C31" stroke-width="1.875" fill="#1C1C31" />
|
||||
</svg>
|
||||
</template>
|
||||
8
src/assets/icons/ic_pin.vue
Normal file
8
src/assets/icons/ic_pin.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.7073 13.6872L17.6164 10.9004C17.7545 10.6988 17.9912 10.588 18.2345 10.6111C18.4308 10.6297 18.6254 10.5611 18.7668 10.4236L19.0964 10.1028C19.5543 9.6572 19.7832 9.43441 19.855 9.17105C19.9019 8.9989 19.9019 8.81733 19.855 8.64518C19.7832 8.38182 19.5543 8.15903 19.0964 7.71343L16.4271 5.11574C16.0064 4.7064 15.7961 4.50174 15.5519 4.43288C15.3745 4.38285 15.1866 4.38285 15.0092 4.43288C14.765 4.50174 14.5547 4.7064 14.134 5.11574L13.7465 5.4929C13.5929 5.64236 13.5245 5.85893 13.5645 6.06947C13.613 6.32422 13.5024 6.58294 13.2849 6.72408L10.4028 8.59391L10.4027 8.59393C9.91388 8.91108 9.66945 9.06966 9.41623 9.20907C8.85769 9.51658 8.2644 9.75622 7.64897 9.92288C7.36996 9.99843 7.08396 10.0541 6.51198 10.1654L6.51195 10.1654L5.66826 10.3296C5.08079 10.444 4.80785 11.1271 5.15478 11.6148C7.16198 14.4362 9.66135 16.8728 12.533 18.8075L12.6081 18.858C13.1023 19.191 13.7762 18.9158 13.8962 18.3321L14.0479 17.5941C14.1585 17.0557 14.2138 16.7865 14.2867 16.524C14.4737 15.8504 14.7481 15.2043 15.103 14.6021C15.2414 14.3674 15.3967 14.1406 15.7073 13.6872Z"
|
||||
stroke="#222222" stroke-width="1.2" />
|
||||
<path d="M8.30331 15.668L3.00001 20.9713" stroke="black" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</template>
|
||||
8
src/assets/icons/ic_pin_filled.vue
Normal file
8
src/assets/icons/ic_pin_filled.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.2072 13.6872L18.1163 10.9004C18.2545 10.6988 18.4911 10.588 18.7344 10.6111C18.9307 10.6297 19.1254 10.5611 19.2667 10.4236L19.5963 10.1028C20.0542 9.6572 20.2832 9.43441 20.3549 9.17105C20.4018 8.9989 20.4018 8.81733 20.3549 8.64518C20.2832 8.38182 20.0542 8.15903 19.5963 7.71343L16.927 5.11574L16.927 5.11573C16.5063 4.7064 16.296 4.50174 16.0518 4.43288C15.8744 4.38285 15.6865 4.38285 15.5091 4.43288C15.2649 4.50174 15.0546 4.7064 14.6339 5.11574L14.2464 5.4929C14.0928 5.64236 14.0245 5.85893 14.0645 6.06947C14.1129 6.32422 14.0023 6.58294 13.7848 6.72408L10.9027 8.59391C10.4138 8.91107 10.1694 9.06965 9.91614 9.20907C9.3576 9.51658 8.7643 9.75622 8.14887 9.92288C7.86986 9.99843 7.58386 10.0541 7.01186 10.1654L6.16816 10.3296C5.5807 10.444 5.30775 11.1271 5.65469 11.6148C7.66189 14.4362 10.1613 16.8728 13.0329 18.8075L13.108 18.858C13.6022 19.191 14.2761 18.9158 14.3961 18.3321L14.5478 17.5941L14.5478 17.5941C14.6584 17.0557 14.7137 16.7865 14.7866 16.524C14.9736 15.8504 15.248 15.2043 15.603 14.6021C15.7413 14.3674 15.8966 14.1406 16.2072 13.6872L16.2072 13.6872Z"
|
||||
fill="black" stroke="#222222" stroke-width="1.2" />
|
||||
<path d="M8.80322 15.668L3.49992 20.9713" stroke="black" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -46,7 +46,9 @@
|
|||
"user_kick_and_ban": "Kick out",
|
||||
"user_make_admin": "Make admin",
|
||||
"user_make_moderator": "Make moderator",
|
||||
"user_revoke_moderator": "Revoke moderator"
|
||||
"user_revoke_moderator": "Revoke moderator",
|
||||
"pin": "Pin post",
|
||||
"unpin": "Unpin post"
|
||||
},
|
||||
"message": {
|
||||
"you": "You",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue