HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

chat button in mobile bar

Browse source
This commit is contained in:
ThatOneCalculator 2022-11-06 23:15:47 -08:00
parent 1ce3ef31ac
commit 83751f8d64
4 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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",

26
packages/client/src/pages/messaging/messaging-room.message.vue
View file

@ -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;

1
packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

@ -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';

39
packages/client/src/ui/universal.vue
View file

@ -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;
}