逆張りモードの実装

locales/index.d.ts

@@ -14,6 +14,8 @@ export interface Locale {
     "forgotPassword": string;
     "fetchingAsApObject": string;
     "ok": string;
+    "hanntenn": string;
+    "hanntennInfo": string;
     "ruby": string;
     "gotIt": string;
     "cancel": string;
@@ -1972,6 +1974,7 @@ export interface Locale {
         "memo": string;
         "notifications": string;
         "gamingMode": string;
+        "gyakubariMode": string;
         "timeline": string;
         "calendar": string;
         "trends": string;

locales/ja-JP.yml

@@ -11,6 +11,8 @@ password: "パスワード"
 forgotPassword: "パスワードを忘れた"
 fetchingAsApObject: "連合に照会中"
 ok: "OK"
+hanntenn: "アイコンとバナーを反転させる"
+hanntennInfo: "ダークだったらライトのアイコンに、ライトだったらダークのアイコンに。"
 ruby: "ルビ"
 gotIt: "わかった"
 cancel: "キャンセル"
@@ -1889,6 +1891,7 @@ _widgets:
   memo: "付箋"
   notifications: "通知"
   gamingMode: "ゲーミングモード"
+  gyakubariMode: "反転モード"
   timeline: "タイムライン"
   calendar: "カレンダー"
   trends: "トレンド"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2023.10.1-prismisskey.1",
+	"version": "2023.10.1-prismisskey.2",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

packages/frontend/src/pages/settings/general.vue

@@ -134,14 +134,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
 				<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
 				<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
-				<MkSwitch v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch>
 				<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch>
 				<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableUltimateDataSaverMode">{{ i18n.ts.UltimateDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableCellularWithUltimateDataSaver">{{ i18n.ts.cellularWithUltimateDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }} <template #caption>{{ i18n.ts.gamingModeInfo }} </template></MkSwitch>
-        <MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave}}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
+                <MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave}}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
-			</div>
+                <MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }}<template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
+            </div>
 			<div>
 				<MkRadios v-model="emojiStyle">
 					<template #label>{{ i18n.ts.emojiStyle }}</template>
@@ -285,6 +285,7 @@ const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificati
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const enableonlyAndWithSave = computed(defaultStore.makeGetterSetter('onlyAndWithSave'));
+const enablehanntenn = computed(defaultStore.makeGetterSetter('enablehanntenn'));
 const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
 const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'))
 const FeaturedOrNote = computed(defaultStore.makeGetterSetter('FeaturedOrNote'))

packages/frontend/src/store.ts

@@ -304,6 +304,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: [] as string[],
 	},
+	enablehanntenn:{
+		where:'device',
+		default: false
+	},
 	recentlyUsedUsers: {
 		where: 'device',
 		default: [] as string[],

packages/frontend/src/ui/_common_/navbar.vue

@@ -94,6 +94,7 @@ import {$i, openAccountMenu as openAccountMenu_} from '@/account';
 import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
 import {i18n} from '@/i18n';
 import {instance} from '@/instance';
+
 function hexToRgb(hex) {
   // 16進数のカラーコードから "#" を除去
   hex = hex.replace(/^#/, '');
@@ -105,6 +106,7 @@ function hexToRgb(hex) {
 
   return `${r},${g},${b}`;
 }
+
 document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
 document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor));
 document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor))
@@ -118,6 +120,7 @@ let gaming = ref('');
 
 const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+let gamingType = computed(defaultStore.state.gamingType);
 
 if (darkMode.value) {
   bannerUrl.value = bannerDark;
@@ -137,7 +140,6 @@ watch(darkMode, () => {
   }
 })
 
-// gaming.valueに新しい値を代入する
 if (darkMode.value && gamingMode.value == true) {
   gaming.value = 'dark';
 } else if (!darkMode.value && gamingMode.value == true) {
@@ -167,17 +169,18 @@ watch(gamingMode, () => {
   }
 })
 
+
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {
-  for (const def in navbarItemDef) {
+    for (const def in navbarItemDef) {
-    if (menu.value.includes(def)) continue;
+        if (menu.value.includes(def)) continue;
-    if (navbarItemDef[def].indicated) return true;
+        if (navbarItemDef[def].indicated) return true;
-  }
+    }
-  return false;
+    return false;
 });
 
 const calcViewState = () => {
-  iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+    iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
 };
 
 calcViewState();
@@ -185,19 +188,19 @@ calcViewState();
 window.addEventListener('resize', calcViewState);
 
 watch(defaultStore.reactiveState.menuDisplay, () => {
-  calcViewState();
+    calcViewState();
 });
 
 function openAccountMenu(ev: MouseEvent) {
-  openAccountMenu_({
+    openAccountMenu_({
-    withExtraOperation: true,
+        withExtraOperation: true,
-  }, ev);
+    }, ev);
 }
 
 function more(ev: MouseEvent) {
-  os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+    os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-    src: ev.currentTarget ?? ev.target,
+        src: ev.currentTarget ?? ev.target,
-  }, {}, 'closed');
+    }, {}, 'closed');
 }
 </script>
 
@@ -308,11 +311,11 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight {
-			color: white !important;
+      color: white !important;
     }
 
     &.gamingDark {
-			color: black !important;
+      color: black !important;
     }
 
     &.gamingLight:before {
@@ -442,11 +445,11 @@ function more(ev: MouseEvent) {
     color: var(--navFg);
 
     &.gamingDark {
-			color: var(--navFg);
+      color: var(--navFg);
     }
 
     &.gamingLight {
-			color: var(--navFg);
+      color: var(--navFg);
     }
 
     &:hover {
@@ -775,7 +778,7 @@ function more(ev: MouseEvent) {
     text-align: center;
 
     &.gamingLight {
-			color: var(--fg);
+      color: var(--fg);
     }
 
     &:hover, &.active {

packages/frontend/src/widgets/WidgetGamingMode.vue

@@ -10,10 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { Interpreter, Parser } from '@syuilo/aiscript';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form.js';
-import MkButton from '@/components/MkButton.vue';
 import {i18n} from "@/i18n.js";
 import MkSwitch from "@/components/MkSwitch.vue";
 import {computed} from "vue";

packages/frontend/src/widgets/WidgetGyakubariMode.vue

@@ -0,0 +1,41 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div>
+  <MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }} <template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form.js';
+import {i18n} from "@/i18n.js";
+import MkSwitch from "@/components/MkSwitch.vue";
+import {computed} from "vue";
+import {defaultStore} from "@/store.js";
+const enablehanntenn = computed(defaultStore.makeGetterSetter('enablehanntenn'));
+const name = 'gyakubariMode';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>

packages/frontend/src/widgets/index.ts

@@ -11,6 +11,7 @@ export default function(app: App) {
 	app.component('WidgetMemo', defineAsyncComponent(() => import('./WidgetMemo.vue')));
 	app.component('WidgetNotifications', defineAsyncComponent(() => import('./WidgetNotifications.vue')));
 	app.component('WidgetGamingMode', defineAsyncComponent(() => import('./WidgetGamingMode.vue')));
+	app.component('WidgetGyakubariMode', defineAsyncComponent(() => import('./WidgetGyakubariMode.vue')));
 	app.component('WidgetTimeline', defineAsyncComponent(() => import('./WidgetTimeline.vue')));
 	app.component('WidgetCalendar', defineAsyncComponent(() => import('./WidgetCalendar.vue')));
 	app.component('WidgetRss', defineAsyncComponent(() => import('./WidgetRss.vue')));
@@ -42,6 +43,7 @@ export const widgets = [
 	'memo',
 	'notifications',
 	'gamingMode',
+	'gyakubariMode',
 	'timeline',
 	'calendar',
 	'rss',