タイムラインを正常に無効化できるように (#10299)

* タイムラインを正常に無効化できるように

Timeline can be disabled successfully

* Tune: disabled timeline to update disabled state immediately

カラムの判定の場所をこっちにしないとリアルタイムで更新が反映されないので変更(タイムラインを正常に無効化できるように)

* modify disabled timeline icon to ti-circle-minus

無効化されたタイムラインのアイコンをTabler iconのti-circle-minusに修正

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
This commit is contained in:
atsuchan 2023-03-12 10:20:33 +09:00 committed by GitHub
parent 1ea4469bec
commit 31488da40c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 6 deletions

View File

@ -1907,3 +1907,7 @@ _deck:
_dialog: _dialog:
charactersExceeded: "最大文字数を超えています! 現在 {current} / 制限 {max}" charactersExceeded: "最大文字数を超えています! 現在 {current} / 制限 {max}"
charactersBelow: "最小文字数を下回っています! 現在 {current} / 制限 {min}" charactersBelow: "最小文字数を下回っています! 現在 {current} / 制限 {min}"
_disabledTimeline:
title: "無効化されたタイムライン"
description: "現在のロールでは、このタイムラインを使用することはできません。"

View File

@ -8,12 +8,12 @@
<span style="margin-left: 8px;">{{ column.name }}</span> <span style="margin-left: 8px;">{{ column.name }}</span>
</template> </template>
<div v-if="disabled" :class="$style.disabled"> <div v-if="(((column.tl === 'local' || column.tl === 'social') && !isLocalTimelineAvailable) || (column.tl === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled">
<p :class="$style.disabledTitle"> <p :class="$style.disabledTitle">
<i class="ti ti-minus-circle"></i> <i class="ti ti-circle-minus"></i>
{{ $t('disabled-timeline.title') }} {{ i18n.ts._disabledTimeline.title }}
</p> </p>
<p :class="$style.disabledDescription">{{ $t('disabled-timeline.description') }}</p> <p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
</div> </div>
<MkTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/> <MkTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/>
</XColumn> </XColumn>
@ -27,6 +27,7 @@ import MkTimeline from '@/components/MkTimeline.vue';
import * as os from '@/os'; import * as os from '@/os';
import { $i } from '@/account'; import { $i } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { instance } from '@/instance';
const props = defineProps<{ const props = defineProps<{
column: Column; column: Column;
@ -40,11 +41,16 @@ const emit = defineEmits<{
let disabled = $ref(false); let disabled = $ref(false);
const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
onMounted(() => { onMounted(() => {
if (props.column.tl == null) { if (props.column.tl == null) {
setType(); setType();
} else if ($i) { } else if ($i) {
disabled = false; // TODO disabled = (
(!((instance.policies.ltlAvailable) || ($i.policies.ltlAvailable)) && ['local', 'social'].includes(props.column.tl)) ||
(!((instance.policies.gtlAvailable) || ($i.policies.gtlAvailable)) && ['global'].includes(props.column.tl)));
} }
}); });

View File

@ -15,7 +15,14 @@
</button> </button>
</template> </template>
<div> <div v-if="(((widgetProps.src === 'local' || widgetProps.src === 'social') && !isLocalTimelineAvailable) || (widgetProps.src === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled">
<p :class="$style.disabledTitle">
<i class="ti ti-minus"></i>
{{ i18n.ts._disabledTimeline.title }}
</p>
<p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
</div>
<div v-else>
<MkTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/> <MkTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
</div> </div>
</MkContainer> </MkContainer>
@ -29,8 +36,12 @@ import * as os from '@/os';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkTimeline from '@/components/MkTimeline.vue'; import MkTimeline from '@/components/MkTimeline.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { $i } from '@/account';
import { instance } from '@/instance';
const name = 'timeline'; const name = 'timeline';
const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
const widgetPropsDef = { const widgetPropsDef = {
showHeader: { showHeader: {
@ -128,3 +139,17 @@ defineExpose<WidgetComponentExpose>({
id: props.widget ? props.widget.id : null, id: props.widget ? props.widget.id : null,
}); });
</script> </script>
<style lang="scss" module>
.disabled {
text-align: center;
}
.disabledTitle {
margin: 16px;
}
.disabledDescription {
font-size: 90%;
}
</style>