summaryrefslogtreecommitdiff
path: root/packages/frontend/src/ui
diff options
context:
space:
mode:
authordakkar <dakkar@thenautilus.net>2024-11-22 12:29:04 +0000
committerdakkar <dakkar@thenautilus.net>2024-11-22 12:29:04 +0000
commitbc816cb166d907d38eb096a02c5f4f57d9a2f1a0 (patch)
treea0e6b1dfeed8aa2b0543846eb65b8aae0ce631ad /packages/frontend/src/ui
parentbetter wording for moderator inactivity messages (diff)
parentRelease: 2024.11.0 (diff)
downloadsharkey-bc816cb166d907d38eb096a02c5f4f57d9a2f1a0.tar.gz
sharkey-bc816cb166d907d38eb096a02c5f4f57d9a2f1a0.tar.bz2
sharkey-bc816cb166d907d38eb096a02c5f4f57d9a2f1a0.zip
Merge tag '2024.11.0' into feature/2024.10
Diffstat (limited to 'packages/frontend/src/ui')
-rw-r--r--packages/frontend/src/ui/_common_/navbar.vue67
-rw-r--r--packages/frontend/src/ui/_common_/statusbar-rss.vue2
-rw-r--r--packages/frontend/src/ui/deck/deck-store.ts1
-rw-r--r--packages/frontend/src/ui/deck/tl-column.vue12
4 files changed, 78 insertions, 4 deletions
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index a5e6a238ae..5cc0e52f77 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -56,6 +56,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
</div>
+ <button v-if="!forceIconOnly" class="_button" :class="$style.toggleButton" @click="toggleIconOnly">
+ <!--
+ <svg viewBox="0 0 16 48" :class="$style.toggleButtonShape">
+ <g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
+ <path d="M23.935,-24C37.223,-24 47.995,-7.842 47.995,12.09C47.995,34.077 47.995,62.07 47.995,84.034C47.995,93.573 45.469,102.721 40.972,109.466C36.475,116.211 30.377,120 24.018,120L23.997,120C10.743,120 -0.003,136.118 -0.003,156C-0.003,156 -0.003,156 -0.003,156L-0.003,-60L-0.003,-59.901C-0.003,-50.379 2.519,-41.248 7.007,-34.515C11.496,-27.782 17.584,-24 23.931,-24C23.932,-24 23.934,-24 23.935,-24Z" style="fill:var(--MI_THEME-navBg);"/>
+ </g>
+ </svg>
+ -->
+ <svg viewBox="0 0 16 64" :class="$style.toggleButtonShape">
+ <g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
+ <path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
+ </g>
+ </svg>
+ <i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`" style="font-size: 12px; margin-left: -8px;"></i>
+ </button>
</div>
</template>
@@ -80,9 +95,11 @@ const otherMenuItemIndicated = computed(() => {
return false;
});
-const calcViewState = () => {
- iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
-};
+const forceIconOnly = window.innerWidth <= 1279;
+
+function calcViewState() {
+ iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon');
+}
calcViewState();
@@ -92,6 +109,10 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
calcViewState();
});
+function toggleIconOnly() {
+ defaultStore.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
+}
+
function openAccountMenu(ev: MouseEvent) {
openAccountMenu_({
withExtraOperation: true,
@@ -133,6 +154,38 @@ function more(ev: MouseEvent) {
contain: strict;
display: flex;
flex-direction: column;
+ direction: rtl; // スクロールバーを左に表示したいため
+}
+
+.top {
+ direction: ltr;
+}
+
+.middle {
+ direction: ltr;
+}
+
+.bottom {
+ direction: ltr;
+}
+
+.toggleButton {
+ position: fixed;
+ bottom: 20px;
+ left: var(--nav-width);
+ z-index: 1001;
+ width: 16px;
+ height: 64px;
+ box-sizing: border-box;
+}
+
+.toggleButtonShape {
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ width: 16px;
+ height: 64px;
}
.root:not(.iconOnly) {
@@ -370,6 +423,10 @@ function more(ev: MouseEvent) {
position: relative;
font-size: 0.9em;
}
+
+ .toggleButton {
+ left: var(--nav-width);
+ }
}
.root.iconOnly {
@@ -570,5 +627,9 @@ function more(ev: MouseEvent) {
font-size: 10px;
}
}
+
+ .toggleButton {
+ left: var(--nav-icon-only-width);
+ }
}
</style>
diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.vue b/packages/frontend/src/ui/_common_/statusbar-rss.vue
index 550fc39b00..da8fa8bb21 100644
--- a/packages/frontend/src/ui/_common_/statusbar-rss.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-rss.vue
@@ -48,7 +48,7 @@ const fetching = ref(true);
const key = ref(0);
const tick = () => {
- window.fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
+ window.fetch(`/api/fetch-rss?url=${encodeURIComponent(props.url)}`, {}).then(res => {
res.json().then((feed: Misskey.entities.FetchRssResponse) => {
if (props.shuffle) {
shuffle(feed.items);
diff --git a/packages/frontend/src/ui/deck/deck-store.ts b/packages/frontend/src/ui/deck/deck-store.ts
index eb587554b9..3186982349 100644
--- a/packages/frontend/src/ui/deck/deck-store.ts
+++ b/packages/frontend/src/ui/deck/deck-store.ts
@@ -49,6 +49,7 @@ export type Column = {
tl?: BasicTimelineType;
withRenotes?: boolean;
withReplies?: boolean;
+ withSensitive?: boolean;
onlyFiles?: boolean;
soundSetting: SoundStore;
};
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
index 8315f7fca5..8f5553ccae 100644
--- a/packages/frontend/src/ui/deck/tl-column.vue
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -24,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:src="column.tl"
:withRenotes="withRenotes"
:withReplies="withReplies"
+ :withSensitive="withSensitive"
:onlyFiles="onlyFiles"
@note="onNote"
/>
@@ -54,6 +55,7 @@ const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
const withRenotes = ref(props.column.withRenotes ?? true);
const withReplies = ref(props.column.withReplies ?? false);
+const withSensitive = ref(props.column.withSensitive ?? true);
const onlyFiles = ref(props.column.onlyFiles ?? false);
watch(withRenotes, v => {
@@ -68,6 +70,12 @@ watch(withReplies, v => {
});
});
+watch(withSensitive, v => {
+ updateColumn(props.column.id, {
+ withSensitive: v,
+ });
+});
+
watch(onlyFiles, v => {
updateColumn(props.column.id, {
onlyFiles: v,
@@ -146,6 +154,10 @@ const menu = computed<MenuItem[]>(() => {
text: i18n.ts.fileAttachedOnly,
ref: onlyFiles,
disabled: hasWithReplies(props.column.tl) ? withReplies : false,
+ }, {
+ type: 'switch',
+ text: i18n.ts.withSensitive,
+ ref: withSensitive,
});
return menuItems;