tweak button style

2024-11-27 22:38:39 +09:00 · 2024-09-06 18:28:34 +09:00 · 2024-09-06 18:28:34 +09:00 · 788d4ede6f
commit 788d4ede6f
parent a7a5adaf5d
8 changed files with 39 additions and 28 deletions
--- a/packages/frontend-embed/src/components/EmError.vue
+++ b/packages/frontend-embed/src/components/EmError.vue
@ -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>

--- a/packages/frontend-embed/src/components/EmNote.vue
+++ b/packages/frontend-embed/src/components/EmNote.vue
@ -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>
--- a/packages/frontend-embed/src/components/EmNoteDetailed.vue
+++ b/packages/frontend-embed/src/components/EmNoteDetailed.vue
@ -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>
--- a/packages/frontend-embed/src/components/EmNoteSimple.vue
+++ b/packages/frontend-embed/src/components/EmNoteSimple.vue
@ -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';
--- a/packages/frontend-embed/src/components/EmNoteSub.vue
+++ b/packages/frontend-embed/src/components/EmNoteSub.vue
@ -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"/>
--- a/packages/frontend-embed/src/components/EmPagination.vue
+++ b/packages/frontend-embed/src/components/EmPagination.vue
@ -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;
 }
--- a/packages/frontend-embed/src/components/EmSubNoteContent.vue
+++ b/packages/frontend-embed/src/components/EmSubNoteContent.vue
@ -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';

--- a/packages/frontend-embed/src/style.scss
+++ b/packages/frontend-embed/src/style.scss
@ -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;