usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak button style

This commit is contained in:
kakkokari-gtyih 2024-09-06 18:28:34 +09:00
parent a7a5adaf5d
commit 788d4ede6f
8 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend-embed/src/components/EmError.vue
View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
<button class="_button" :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</button>
<button class="_buttonGray _buttonRounded" :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</button>
</div>
</template>

18
packages/frontend-embed/src/components/EmNote.vue
View File

@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="container-type: inline-size;">
<p v-if="appearNote.cw != null" :class="$style.cw">
<EmMfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
<button class="_button" style="margin: 4px 0;" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
<button style="display: block; width: 100%; margin: 4px 0;" class="_buttonGray _buttonRounded" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
</p>
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
<div :class="$style.text">
@ -63,13 +63,6 @@ SPDX-License-Identifier: AGPL-3.0-only
:enableEmojiMenu="!true"
:enableEmojiMenuReaction="true"
/>
<div v-if="translating || translation" :class="$style.translation">
<EmLoading v-if="translating" mini/>
<div v-else-if="translation">
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
<EmMfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
</div>
</div>
</div>
<div v-if="appearNote.files && appearNote.files.length > 0">
<EmMediaList :mediaList="appearNote.files" :originalEntityUrl="`${url}/notes/${appearNote.id}`"/>
@ -125,7 +118,6 @@ import EmA from '@/components/EmA.vue';
import EmAvatar from '@/components/EmAvatar.vue';
import EmUserName from '@/components/EmUserName.vue';
import EmTime from '@/components/EmTime.vue';
import EmLoading from '@/components/EmLoading.vue';
import { userPage } from '@/utils.js';
import { i18n } from '@/i18n.js';
import { shouldCollapsed } from '@/to-be-shared/collapsed.js';
@ -146,28 +138,20 @@ const emit = defineEmits<{
(ev: 'removeReaction', emoji: string): void;
}>();
const inTimeline = inject<boolean>('inTimeline', false);
const inChannel = inject('inChannel', null);
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
const note = ref((props.note));
const isRenote = Misskey.note.isPureRenote(note.value);
const rootEl = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>();
const renoteButton = shallowRef<HTMLElement>();
const renoteTime = shallowRef<HTMLElement>();
const reactButton = shallowRef<HTMLElement>();
const clipButton = shallowRef<HTMLElement>();
const appearNote = computed(() => getAppearNote(note.value));
const showContent = ref(false);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
const isLong = shouldCollapsed(appearNote.value, []);
const collapsed = ref(appearNote.value.cw == null && isLong);
const isDeleted = ref(false);
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
const translating = ref(false);
</script>
<style lang="scss" module>

2
packages/frontend-embed/src/components/EmNoteDetailed.vue
View File

@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="[$style.noteContent, { [$style.contentCollapsed]: collapsed }]">
<p v-if="appearNote.cw != null" :class="$style.cw">
<EmMfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
<button class="_button" style="margin: 4px 0;" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
<button style="display: block; width: 100%; margin: 4px 0;" class="_buttonGray _buttonRounded" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
</p>
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>

3
packages/frontend-embed/src/components/EmNoteSimple.vue
View File

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<p v-if="note.cw != null" :class="$style.cw">
<EmMfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
<button class="_button" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
<button style="display: block; width: 100%;" class="_buttonGray _buttonRounded" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
</p>
<div v-show="note.cw == null || showContent">
<EmSubNoteContent :class="$style.text" :note="note"/>
@ -24,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import { i18n } from '@/i18n.js';
import EmNoteHeader from '@/components/EmNoteHeader.vue';
import EmSubNoteContent from '@/components/EmSubNoteContent.vue';
import EmMfm from '@/components/EmMfm.js';

2
packages/frontend-embed/src/components/EmNoteSub.vue
View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<p v-if="note.cw != null" :class="$style.cw">
<EmMfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'"/>
<button class="_button" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
<button style="display: block; width: 100%;" class="_buttonGray _buttonRounded" @click="showContent = !showContent">{{ showContent ? i18n.ts._cw.hide : i18n.ts._cw.show }}</button>
</p>
<div v-show="note.cw == null || showContent">
<EmSubNoteContent :class="$style.text" :note="note"/>

10
packages/frontend-embed/src/components/EmPagination.vue
View File

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
<div v-show="!pagination.reversed && more" key="_more_" class="_margin">
<button v-if="!moreFetching" class="_buttonPrimary" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<button v-if="!moreFetching" class="_buttonRounded _buttonPrimary" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
{{ i18n.ts.loadMore }}
</button>
<EmLoading v-else class="loading"/>
@ -66,6 +66,13 @@ export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints>
pageEl?: HTMLElement;
};
type MisskeyEntity = {
id: string;
createdAt: string;
_shouldInsertAd_?: boolean;
[x: string]: any;
};
type MisskeyEntityMap = Map<string, MisskeyEntity>;
function arrayToEntries(entities: MisskeyEntity[]): [string, MisskeyEntity][] {
@ -490,6 +497,7 @@ defineExpose({
}
.more {
display: block;
margin-left: auto;
margin-right: auto;
}

3
packages/frontend-embed/src/components/EmSubNoteContent.vue
View File

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<details v-if="note.files && note.files.length > 0">
<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
<EmMediaList :mediaList="note.files"/>
<EmMediaList :mediaList="note.files" :originalEntityUrl="`${url}/notes/${note.id}`"/>
</details>
<details v-if="note.poll">
<summary>{{ i18n.ts.poll }}</summary>
@ -35,6 +35,7 @@ import * as Misskey from 'misskey-js';
import EmMediaList from '@/components/EmMediaList.vue';
import EmPoll from '@/components/EmPoll.vue';
import { i18n } from '@/i18n.js';
import { url } from '@/config.js';
import { shouldCollapsed } from '@/to-be-shared/collapsed.js';
import EmMfm from '@/components/EmMfm.js';

27
packages/frontend-embed/src/style.scss
View File

@ -8,14 +8,10 @@
:root {
--radius: 12px;
--marginFull: 16px;
--marginFull: 14px;
--marginHalf: 10px;
--margin: var(--marginFull);
@media (max-width: 500px) {
--margin: var(--marginHalf);
}
}
html {
@ -153,6 +149,15 @@ rt {
}
}
._buttonGray {
@extend ._button;
background: var(--buttonBg);
&:not(:disabled):hover {
background: var(--buttonHoverBg);
}
}
._buttonPrimary {
@extend ._button;
color: var(--fgOnAccent);
@ -181,6 +186,18 @@ rt {
}
}
._buttonRounded {
font-size: 0.95em;
padding: 0.5em 1em;
min-width: 100px;
border-radius: 99rem;
&._buttonPrimary,
&._buttonGradate {
font-weight: 700;
}
}
._help {
color: var(--accent);
cursor: help;