タイムラインのノートを話して表示するオプション

6 files changed, 25 insertions, 6 deletions

diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index df9424d8ed..011f22ee17 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<XNotes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes :class="{ _noGap_: !$store.state.device.showGapBetweenNotesInTimeline }" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index d7acc9ad4f..c8d1022ad1 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -33,6 +33,7 @@
 		<FormSwitch v-model:value="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</FormSwitch>
 		<FormSwitch v-model:value="reduceAnimation">{{ $t('reduceUiAnimation') }}</FormSwitch>
 		<FormSwitch v-model:value="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</FormSwitch>
+		<FormSwitch v-model:value="showGapBetweenNotesInTimeline">{{ $t('showGapBetweenNotesInTimeline') }}</FormSwitch>
 		<FormSwitch v-model:value="loadRawImages">{{ $t('loadRawImages') }}</FormSwitch>
 		<FormSwitch v-model:value="disableShowingAnimatedImages">{{ $t('disableShowingAnimatedImages') }}</FormSwitch>
 		<FormSwitch v-model:value="useSystemFont">{{ $t('useSystemFont') }}</FormSwitch>
@@ -140,6 +141,11 @@ export default defineComponent({
 			set(value) { this.$store.commit('device/set', { key: 'useBlurEffectForModal', value: value }); }
 		},
 
+		showGapBetweenNotesInTimeline: {
+			get() { return this.$store.state.device.showGapBetweenNotesInTimeline; },
+			set(value) { this.$store.commit('device/set', { key: 'showGapBetweenNotesInTimeline', value: value }); }
+		},
+
 		disableAnimatedMfm: {
 			get() { return !this.$store.state.device.animatedMfm; },
 			set(value) { this.$store.commit('device/set', { key: 'animatedMfm', value: !value }); }
diff --git a/src/client/store.ts b/src/client/store.ts
index 23d06664a2..0776c94796 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -80,6 +80,7 @@ export const defaultDeviceSettings = {
 	useFullReactionPicker: false,
 	reactionPickerWidth: 1,
 	reactionPickerHeight: 1,
+	showGapBetweenNotesInTimeline: true,
 	sidebarDisplay: 'full', // full, icon, hide
 	instanceTicker: 'remote', // none, remote, always
 	roomGraphicsQuality: 'medium',
diff --git a/src/client/style.scss b/src/client/style.scss
index 5026ffb145..004c7b5c57 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -287,12 +287,24 @@ hr {
 	}
 }
 
-._close_ ._list_ > * {
+._noGap_ ._list_ {
+	@extend ._panel;
+
+	> * {
+		margin: 0 !important;
+		border: none;
+		border-bottom: solid 1px var(--divider);
+		border-radius: 0;
+		box-shadow: none;
+	}
+}
+
+._inContainer_ ._list_ > * {
+	margin: 0 !important;
 	border: none;
 	border-bottom: solid 1px var(--divider);
 	border-radius: 0;
 	box-shadow: none;
-	margin: 0 !important;
 }
 
 ._loadMore {
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 8137cbfd45..f708da8846 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _inContainer_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index deedc912af..7f6fdbc102 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -15,7 +15,7 @@
 						<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + element.name) }}<button class="remove _button" @click="removeWidget(element)"><Fa :icon="faTimes"/></button>
 					</header>
 					<div @click="widgetFunc(element.id)">
-						<component class="_close_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting"/>
+						<component class="_inContainer_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting"/>
 					</div>
 				</div>
 			</template>
@@ -23,7 +23,7 @@
 		<button @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $t('editWidgetsExit') }}</button>
 	</template>
 	<template v-else>
-		<component v-for="widget in widgets" class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget"/>
+		<component v-for="widget in widgets" class="_inContainer_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget"/>
 		<button @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $t('editWidgets') }}</button>
 	</template>
 </div>