mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-22 18:07:31 -07:00
chat button in mobile bar
This commit is contained in:
parent
35eaf74bd6
commit
d9fc088e21
4 changed files with 41 additions and 27 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "calckey",
|
||||
"version": "12.119.0-calc.9.1",
|
||||
"version": "12.119.0-calc.9.2",
|
||||
"codename": "aqua",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -3,43 +3,30 @@
|
|||
<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
|
||||
<div class="content">
|
||||
<div class="balloon" :class="{ noText: message.text == null }">
|
||||
<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
|
||||
<button v-if="isMe" class="delete-button" :title="i18n.ts.delete" @click="del">
|
||||
<img src="/client-assets/remove.png" alt="Delete"/>
|
||||
</button>
|
||||
<div v-if="!message.isDeleted" class="content">
|
||||
<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
|
||||
<div v-if="message.file" class="file">
|
||||
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name" max-width="400px" style="border-radius: 5px"/>
|
||||
<VuePlyr v-else-if="message.file.type.split('/')[0] == 'video'">
|
||||
<video
|
||||
:alt="message.file.name"
|
||||
:download="message.file.url"
|
||||
preload="none"
|
||||
controls
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source
|
||||
:src="message.file.url"
|
||||
>
|
||||
</video>
|
||||
</VuePlyr>
|
||||
<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
|
||||
<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
|
||||
<p>{{ message.file.name }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="content">
|
||||
<p class="is-deleted">{{ $ts.deleted }}</p>
|
||||
<p class="is-deleted">{{ i18n.ts.deleted }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
|
||||
<footer>
|
||||
<template v-if="isGroup">
|
||||
<span v-if="message.reads.length > 0" class="read">{{ $ts.messageRead }} {{ message.reads.length }}</span>
|
||||
<span v-if="message.reads.length > 0" class="read">{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
|
||||
<span v-if="isMe && message.isRead" class="read">{{ i18n.ts.messageRead }}</span>
|
||||
</template>
|
||||
<MkTime :time="message.createdAt"/>
|
||||
<template v-if="message.is_edited"><i class="ph-pencil-bold ph-lg"></i></template>
|
||||
|
@ -53,11 +40,12 @@ import { } from 'vue';
|
|||
import * as mfm from 'mfm-js';
|
||||
import VuePlyr from 'vue-plyr';
|
||||
import type * as Misskey from 'misskey-js';
|
||||
import XImage from '@/components/MkMediaImage.vue';
|
||||
import XMediaList from '@/components/MkMediaList.vue';
|
||||
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
|
||||
import MkUrlPreview from '@/components/MkUrlPreview.vue';
|
||||
import * as os from '@/os';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
message: Misskey.entities.MessagingMessage;
|
||||
|
|
|
@ -45,7 +45,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
|
||||
import { host } from '@/config';
|
||||
import { search } from '@/scripts/search';
|
||||
import * as os from '@/os';
|
||||
import { navbarItemDef } from '@/navbar';
|
||||
import { openAccountMenu as openAccountMenu_ } from '@/account';
|
||||
|
|
|
@ -19,10 +19,31 @@
|
|||
<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ph-stack-bold ph-lg"></i></button>
|
||||
|
||||
<div v-if="isMobile" class="buttons">
|
||||
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span></button>
|
||||
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ph-house-bold ph-lg"></i></button>
|
||||
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span></button>
|
||||
<button class="button widget _button" @click="widgetsShowing = true"><i class="ph-stack-bold ph-lg"></i></button>
|
||||
<button class="button nav _button" @click="drawerMenuShowing = true">
|
||||
<div class="button-wrapper">
|
||||
<i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
|
||||
<div class="button-wrapper">
|
||||
<i class="ph-house-bold ph-lg"></i>
|
||||
</div>
|
||||
</button>
|
||||
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')">
|
||||
<div class="button-wrapper">
|
||||
<i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="button widget _button" @click="mainRouter.push('/my/messaging')">
|
||||
<div class="button-wrapper">
|
||||
<i class="ph-chats-teardrop-bold ph-lg"></i>
|
||||
</div>
|
||||
</button>
|
||||
<button class="button widget _button" @click="widgetsShowing = true">
|
||||
<div class="button-wrapper">
|
||||
<i class="ph-stack-bold ph-lg"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button v-if="isMobile && mainRouter.currentRoute.value.name === 'index'" ref="postButton" class="postButton button post _button" @click="os.post()"><i class="ph-pencil-bold ph-lg"></i></button>
|
||||
|
@ -68,7 +89,6 @@ import { defaultStore } from '@/store';
|
|||
import { navbarItemDef } from '@/navbar';
|
||||
import { i18n } from '@/i18n';
|
||||
import { $i } from '@/account';
|
||||
import { Router } from '@/nirax';
|
||||
import { mainRouter } from '@/router';
|
||||
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
|
||||
import { deviceKind } from '@/scripts/device-kind';
|
||||
|
@ -340,7 +360,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
|
|||
margin: auto;
|
||||
height: 3.5rem;
|
||||
border-radius: 8px;
|
||||
/* background: var(--panel); */
|
||||
background-position: center;
|
||||
transition: background 0.6s;
|
||||
color: var(--fg);
|
||||
|
@ -351,6 +370,14 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
|
|||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
> .button-wrapper:active {
|
||||
background-color: var(--accentedBg);
|
||||
width: 60%;
|
||||
border-radius: 10px;
|
||||
transform: translateY(-0.5em);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue