Replaced messaging with search in the mobile view
ci/woodpecker/tag/ociImageTag Pipeline was successful
Details
ci/woodpecker/tag/ociImageTag Pipeline was successful
Details
This commit is contained in:
parent
ddf7e07481
commit
fa602801f2
GPG Key ID:
BF6CB659ADEE60EC
|
|
@ -1,200 +0,0 @@
|
|||
<template>
|
||||
<MkA
|
||||
class="rivslvers"
|
||||
tabindex="-1"
|
||||
:class="{
|
||||
isMe: isMe(message),
|
||||
isRead: message.groupId
|
||||
? message.reads.includes($i?.id)
|
||||
: message.isRead,
|
||||
}"
|
||||
:to="
|
||||
message.groupId
|
||||
? `/my/messaging/group/${message.groupId}`
|
||||
: `/my/messaging/${getAcct(
|
||||
isMe(message) ? message.recipient : message.user
|
||||
)}`
|
||||
"
|
||||
>
|
||||
<div class="message _block">
|
||||
<MkAvatar
|
||||
class="avatar"
|
||||
:user="
|
||||
message.groupId
|
||||
? message.user
|
||||
: isMe(message)
|
||||
? message.recipient
|
||||
: message.user
|
||||
"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<header v-if="message.groupId">
|
||||
<span class="name">{{ message.group.name }}</span>
|
||||
<MkTime :time="message.createdAt" class="time" />
|
||||
</header>
|
||||
<header v-else>
|
||||
<span class="name"
|
||||
><MkUserName
|
||||
:user="
|
||||
isMe(message) ? message.recipient : message.user
|
||||
"
|
||||
/></span>
|
||||
<span class="username"
|
||||
>@{{
|
||||
acct(isMe(message) ? message.recipient : message.user)
|
||||
}}</span
|
||||
>
|
||||
<MkTime :time="message.createdAt" class="time" />
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="text">
|
||||
<span v-if="isMe(message)" class="me"
|
||||
>{{ i18n.ts.you }}:
|
||||
</span>
|
||||
<Mfm
|
||||
v-if="message.text != null && message.text.length > 0"
|
||||
:text="message.text"
|
||||
/>
|
||||
<span v-else> 📎</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as Acct from "calckey-js/built/acct";
|
||||
import { i18n } from "@/i18n";
|
||||
import { acct } from "@/filters/user";
|
||||
import { $i } from "@/account";
|
||||
|
||||
const getAcct = Acct.toString;
|
||||
|
||||
const props = defineProps<{
|
||||
message: Record<string, any>;
|
||||
}>();
|
||||
|
||||
function isMe(message): boolean {
|
||||
return message.userId === $i?.id;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rivslvers {
|
||||
> .message {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-bottom: var(--margin);
|
||||
|
||||
* {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.avatar {
|
||||
filter: saturate(200%);
|
||||
}
|
||||
}
|
||||
|
||||
&.isRead,
|
||||
&.isMe {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:not(.isMe):not(.isRead) {
|
||||
> div {
|
||||
background-image: url("/client-assets/unread.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
padding: 20px 30px;
|
||||
|
||||
> header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
> .name {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
> .username {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
> .time {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
float: left;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 0 16px 0 0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
> .body {
|
||||
> .text {
|
||||
display: block;
|
||||
margin: 0 0 0 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
color: var(--faceText);
|
||||
|
||||
.me {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> .image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 512px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_400px {
|
||||
> .message {
|
||||
&:not(.isMe):not(.isRead) {
|
||||
> div {
|
||||
background-image: none;
|
||||
border-left: solid 4px #3aa2dc;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 16px;
|
||||
font-size: 0.9em;
|
||||
|
||||
> .avatar {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -59,6 +59,14 @@
|
|||
<i class="ph-house ph-bold ph-lg"></i>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="button widget _button"
|
||||
@click="search"
|
||||
>
|
||||
<div class="button-wrapper">
|
||||
<i class="ph-magnifying-glass ph-bold ph-lg"></i>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="button notifications _button"
|
||||
@click="
|
||||
|
|
@ -68,7 +76,7 @@
|
|||
>
|
||||
<div
|
||||
class="button-wrapper"
|
||||
:class="buttonAnimIndex === 1 ? 'on' : ''"
|
||||
:class="buttonAnimIndex === 2 ? 'on' : ''"
|
||||
>
|
||||
<i class="ph-bell ph-bold ph-lg"></i
|
||||
><span v-if="$i?.hasUnreadNotification" class="indicator"
|
||||
|
|
@ -76,25 +84,6 @@
|
|||
></span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="button messaging _button"
|
||||
@click="
|
||||
mainRouter.push('/my/messaging');
|
||||
updateButtonState();
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="button-wrapper"
|
||||
:class="buttonAnimIndex === 2 ? 'on' : ''"
|
||||
>
|
||||
<i class="ph-chats-teardrop ph-bold ph-lg"></i
|
||||
><span
|
||||
v-if="$i?.hasUnreadMessagingMessage"
|
||||
class="indicator"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="button widget _button"
|
||||
@click="widgetsShowing = true"
|
||||
|
|
@ -174,6 +163,7 @@ import {
|
|||
setPageMetadata,
|
||||
} from "@/scripts/page-metadata";
|
||||
import { deviceKind } from "@/scripts/device-kind";
|
||||
import {search} from "@/scripts/search";
|
||||
|
||||
const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
|
||||
const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue"));
|
||||
|
|
@ -225,10 +215,6 @@ function updateButtonState(): void {
|
|||
return;
|
||||
}
|
||||
if (routerState.includes("/my/notifications")) {
|
||||
buttonAnimIndex.value = 1;
|
||||
return;
|
||||
}
|
||||
if (routerState.includes("/my/messaging")) {
|
||||
buttonAnimIndex.value = 2;
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue