From 5144c6d06c67833027aee33e954dbce49966018a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 11 Dec 2020 22:36:57 +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=81=AE=E3=83=8E=E3=83=BC=E3=83=88=E3=82=92=E8=A9=B1?=
=?UTF-8?q?=E3=81=97=E3=81=A6=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=AA?=
=?UTF-8?q?=E3=83=97=E3=82=B7=E3=83=A7=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
locales/ja-JP.yml | 1 +
src/client/components/timeline.vue | 2 +-
src/client/pages/settings/general.vue | 6 ++++++
src/client/store.ts | 1 +
src/client/style.scss | 16 ++++++++++++++--
src/client/ui/deck/column.vue | 2 +-
src/client/ui/default.widgets.vue | 4 ++--
7 files changed, 26 insertions(+), 6 deletions(-)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5af946298..6cf33c5e2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -663,6 +663,7 @@ experimentalFeatures: "実験的機能"
developer: "開発者"
makeExplorable: "アカウントを見つけやすくする"
makeExplorableDescription: "オフにすると、「みつける」にアカウントが載らなくなります。"
+showGapBetweenNotesInTimeline: "タイムラインのノートを離して表示"
_aboutMisskey:
about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index df9424d8e..011f22ee1 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 d7acc9ad4..c8d1022ad 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 23d06664a..0776c9479 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 5026ffb14..004c7b5c5 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 8137cbfd4..f708da884 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 deedc912a..7f6fdbc10 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>