Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

style: filtered direct message spoiler

Browse source
This commit is contained in:
Ayo 2023-01-21 21:49:29 +01:00
parent 255c950dff
commit 501d422931
2 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/status/StatusContent.vue
View file

@ -27,7 +27,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
}" }"
> >
<StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" /> <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered"> <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered" :is-d-m="isDM">
<template v-if="filterPhrase" #spoiler> <template v-if="filterPhrase" #spoiler>
<p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p> <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
</template> </template>
@ -51,7 +51,6 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
:status="status.reblog" border="~ rounded" :status="status.reblog" border="~ rounded"
:actions="false" :actions="false"
/> />
<div v-if="isDM" />
</StatusSpoiler> </StatusSpoiler>
</div> </div>
</template> </template>

6
components/status/StatusSpoiler.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ enabled?: boolean; filter?: boolean }>() const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean }>()
const showContent = ref(!props.enabled) const showContent = ref(!props.enabled)
const toggleContent = useToggle(showContent) const toggleContent = useToggle(showContent)
@ -14,8 +14,8 @@ watchEffect(() => {
<div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2> <div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
<slot name="spoiler" /> <slot name="spoiler" />
</div> </div>
<div flex="~ gap-1 center" w-full mt="-4.5"> <div flex="~ gap-1 center" w-full :mb="isDM && !showContent ? '4' : ''" mt="-4.5">
<button btn-text px-2 py-1 bg-base flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()"> <button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
<div v-if="showContent" i-ri:eye-line /> <div v-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-line /> <div v-else i-ri:eye-close-line />
{{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }} {{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}