diff options
| -rw-r--r-- | locales/ja-JP.yml | 4 | ||||
| -rw-r--r-- | packages/frontend/src/ui/deck/tl-column.vue | 16 | ||||
| -rw-r--r-- | packages/frontend/src/widgets/WidgetTimeline.vue | 27 |
3 files changed, 41 insertions, 6 deletions
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index eae02d3f6d..1ecd35ff04 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1907,3 +1907,7 @@ _deck: _dialog: charactersExceeded: "最大文字数を超えています！ 現在 {current} / 制限 {max}" charactersBelow: "最小文字数を下回っています！ 現在 {current} / 制限 {min}" + +_disabledTimeline: + title: "無効化されたタイムライン" + description: "現在のロールでは、このタイムラインを使用することはできません。" diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue index a947e27e57..c23943d4db 100644 --- a/packages/frontend/src/ui/deck/tl-column.vue +++ b/packages/frontend/src/ui/deck/tl-column.vue @@ -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))); } }); diff --git a/packages/frontend/src/widgets/WidgetTimeline.vue b/packages/frontend/src/widgets/WidgetTimeline.vue index f8e1af5e66..0f6f25b0a9 100644 --- a/packages/frontend/src/widgets/WidgetTimeline.vue +++ b/packages/frontend/src/widgets/WidgetTimeline.vue @@ -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> |