タイムラインを正常に無効化できるように (#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:
parent
1ea4469bec
commit
31488da40c
|
@ -1907,3 +1907,7 @@ _deck:
|
|||
_dialog:
|
||||
charactersExceeded: "最大文字数を超えています! 現在 {current} / 制限 {max}"
|
||||
charactersBelow: "最小文字数を下回っています! 現在 {current} / 制限 {min}"
|
||||
|
||||
_disabledTimeline:
|
||||
title: "無効化されたタイムライン"
|
||||
description: "現在のロールでは、このタイムラインを使用することはできません。"
|
||||
|
|
|
@ -8,12 +8,12 @@
|
|||
<span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</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">
|
||||
<i class="ti ti-minus-circle"></i>
|
||||
{{ $t('disabled-timeline.title') }}
|
||||
<i class="ti ti-circle-minus"></i>
|
||||
{{ i18n.ts._disabledTimeline.title }}
|
||||
</p>
|
||||
<p :class="$style.disabledDescription">{{ $t('disabled-timeline.description') }}</p>
|
||||
<p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
|
||||
</div>
|
||||
<MkTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/>
|
||||
</XColumn>
|
||||
|
@ -27,6 +27,7 @@ import MkTimeline from '@/components/MkTimeline.vue';
|
|||
import * as os from '@/os';
|
||||
import { $i } from '@/account';
|
||||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
|
||||
const props = defineProps<{
|
||||
column: Column;
|
||||
|
@ -40,11 +41,16 @@ const emit = defineEmits<{
|
|||
|
||||
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(() => {
|
||||
if (props.column.tl == null) {
|
||||
setType();
|
||||
} 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)));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -15,7 +15,14 @@
|
|||
</button>
|
||||
</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"/>
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
@ -29,8 +36,12 @@ import * as os from '@/os';
|
|||
import MkContainer from '@/components/MkContainer.vue';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { $i } from '@/account';
|
||||
import { instance } from '@/instance';
|
||||
|
||||
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 = {
|
||||
showHeader: {
|
||||
|
@ -128,3 +139,17 @@ defineExpose<WidgetComponentExpose>({
|
|||
id: props.widget ? props.widget.id : null,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.disabled {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabledTitle {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.disabledDescription {
|
||||
font-size: 90%;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue