enhance(client): ファイルと投票のdetailsデザインの改善
This commit is contained in:
parent
f5c13d2055
commit
e19fef0853
|
@ -76,6 +76,7 @@
|
||||||
- 노트 액션 버튼 추가 및 편의성 향상
|
- 노트 액션 버튼 추가 및 편의성 향상
|
||||||
- 데이터 세이버를 활성화하면 설정을 반영하기 위해 페이지를 새로 고치도록
|
- 데이터 세이버를 활성화하면 설정을 반영하기 위해 페이지를 새로 고치도록
|
||||||
- 그룹 페이지의 전반적인 디자인 개선
|
- 그룹 페이지의 전반적인 디자인 개선
|
||||||
|
- 파일 및 투표의 details 디자인 개선
|
||||||
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
|
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
|
||||||
- Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
|
- Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
|
||||||
- Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
|
- Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
|
||||||
|
|
63
packages/frontend/src/components/MkDetailsButton.vue
Normal file
63
packages/frontend/src/components/MkDetailsButton.vue
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<button class="_button" :class="$style.root" @mousedown="toggle">
|
||||||
|
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
|
||||||
|
<span v-if="!modelValue" :class="$style.label">{{ label }}</span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import * as misskey from 'cherrypick-js';
|
||||||
|
import { concat } from '@/scripts/array';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: boolean;
|
||||||
|
note: misskey.entities.Note;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(ev: 'update:modelValue', v: boolean): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const label = computed(() => {
|
||||||
|
return concat([
|
||||||
|
props.note.files && props.note.files.length !== 0 ? [i18n.t('withNFiles', { n: props.note.files.length })] : [],
|
||||||
|
props.note.poll != null ? [i18n.ts.poll] : [],
|
||||||
|
] as string[][]).join(' / ');
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
emit('update:modelValue', !props.modelValue);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" module>
|
||||||
|
.root {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px 0;
|
||||||
|
padding: 6px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
color: var(--cwFg);
|
||||||
|
background: var(--cwBg);
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color .25s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--cwBg);
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
margin-left: 4px;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '(';
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
|
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
|
||||||
<div>
|
<div style="display: grid;">
|
||||||
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||||
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
|
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
|
||||||
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||||
|
@ -18,16 +18,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<MkDetailsButton v-if="note.files.length > 0 || note.poll" v-model="showContent" :note="note"/>
|
||||||
<details v-if="note.files.length > 0">
|
<div v-show="showContent">
|
||||||
<summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary>
|
<div v-if="note.files.length > 0">
|
||||||
<MkMediaList v-if="note.disableRightClick" :mediaList="note.files" @contextmenu.prevent/>
|
<MkMediaList v-if="note.disableRightClick" :mediaList="note.files" @contextmenu.prevent/>
|
||||||
<MkMediaList v-else :mediaList="note.files"/>
|
<MkMediaList v-else :mediaList="note.files"/>
|
||||||
</details>
|
</div>
|
||||||
<details v-if="note.poll">
|
<div v-if="note.poll">
|
||||||
<summary>{{ i18n.ts.poll }}</summary>
|
|
||||||
<MkPoll :note="note"/>
|
<MkPoll :note="note"/>
|
||||||
</details>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
|
<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
|
||||||
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -40,11 +41,13 @@ import * as misskey from 'cherrypick-js';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import MkMediaList from '@/components/MkMediaList.vue';
|
import MkMediaList from '@/components/MkMediaList.vue';
|
||||||
import MkPoll from '@/components/MkPoll.vue';
|
import MkPoll from '@/components/MkPoll.vue';
|
||||||
|
import MkDetailsButton from '@/components/MkDetailsButton.vue';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { $i } from '@/account';
|
import { $i } from '@/account';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { miLocalStorage } from '@/local-storage';
|
import { miLocalStorage } from '@/local-storage';
|
||||||
|
|
||||||
|
const showContent = ref(false);
|
||||||
const translation = ref<any>(null);
|
const translation = ref<any>(null);
|
||||||
const translating = ref(false);
|
const translating = ref(false);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue