From 31488da40c537b7181ea81bc9e04052fdda7b3a0 Mon Sep 17 00:00:00 2001
From: atsuchan <83960488+atsu1125@users.noreply.github.com>
Date: Sun, 12 Mar 2023 10:20:33 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4?=
=?UTF-8?q?=E3=83=B3=E3=82=92=E6=AD=A3=E5=B8=B8=E3=81=AB=E7=84=A1=E5=8A=B9?=
=?UTF-8?q?=E5=8C=96=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
=?UTF-8?q?=20(#10299)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* タイムラインを正常に無効化できるように
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>
---
locales/ja-JP.yml | 4 +++
packages/frontend/src/ui/deck/tl-column.vue | 16 +++++++----
.../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>