いいかんじ

2023-09-29 13:33:22 +09:00 · 2023-09-29 13:33:22 +09:00 · afc6b5b655
parent b2df78ffcd 9771f1c435
commit afc6b5b655
4 changed files with 937 additions and 850 deletions
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div
+  <div
      :class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
      @dragover.stop="onDragover"
      @dragenter="onDragenter"
      @dragleave="onDragleave"
      @drop.stop="onDrop"
->
+  >
    <header :class="$style.header">
      <div :class="$style.headerLeft">
        <button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
          <span v-else><i class="ti ti-icons"></i></span>
        </button>
        <button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div :class="$style.submitInner">
+          <div :class="[$style.submitInner ,{  [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
            <template v-if="posted"></template>
            <template v-else-if="posting"><MkEllipsis/></template>
            <template v-else>{{ submitText }}</template>
@ -85,6 +85,7 @@ SPDX-License-Identifier: AGPL-3.0-only
        <button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
        <button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
        <button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+        <button v-tooltip="i18n.ts.mfm" :class="['_button', $style.footerButton]" @click="insertMfm"><i class="ti ti-wand"></i></button>
      </div>
      <div :class="$style.footerRight">
        <button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
@ -94,11 +95,11 @@ SPDX-License-Identifier: AGPL-3.0-only
    <datalist id="hashtags">
      <option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
    </datalist>
-</div>
+  </div>
 </template>

 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
+import {inject, watch, nextTick, onMounted, defineAsyncComponent, computed, ref} from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@ -114,7 +115,15 @@ import { formatTimeString } from '@/scripts/format-time-string.js';
 import { Autocomplete } from '@/scripts/autocomplete.js';
 import * as os from '@/os.js';
 import { selectFiles } from '@/scripts/select-file.js';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store.js';
+import {
+  bannerDark,
+  bannerLight,
+  defaultStore,
+  iconDark,
+  iconLight,
+  notePostInterruptors,
+  postFormActions
+} from '@/store.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
@ -124,8 +133,30 @@ import { deepClone } from '@/scripts/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-
 const modal = inject('modal');
+let gaming = ref('');
+
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})

 const props = withDefaults(defineProps<{
  reply?: Misskey.entities.Note;
@ -154,34 +185,7 @@ const emit = defineEmits<{
  (ev: 'cancel'): void;
  (ev: 'esc'): void;
 }>();
-if (darkMode.value && gamingMode.value == true) {
-  gaming.value = 'dark';
-} else if (!darkMode.value && gamingMode.value == true) {
-  gaming.value = 'light';
-} else {
-  gaming.value = '';
-}

-watch(darkMode, () => {
-  console.log(gaming)
-  if (darkMode.value && gamingMode.value == true) {
-    gaming.value = 'dark';
-  } else if (!darkMode.value && gamingMode.value == true) {
-    gaming.value = 'light';
-  } else {
-    gaming.value = '';
-  }
-})
-
-watch(gamingMode, () => {
-  if (darkMode.value && gamingMode.value == true) {
-    gaming.value = 'dark';
-  } else if (!darkMode.value && gamingMode.value == true) {
-    gaming.value = 'light';
-  } else {
-    gaming.value = '';
-  }
-})
 const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
 const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
 const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
@ -841,7 +845,9 @@ function insertMention() {
 async function insertEmoji(ev: MouseEvent) {
  os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
 }
-
+function insertMfm(){
+  insertTextAtCursor(textareaEl, '$');
+}
 function showActions(ev) {
  os.popupMenu(postFormActions.map(action => ({
    text: action.title,
@ -1025,6 +1031,21 @@ defineExpose({
  box-sizing: border-box;
  color: var(--fgOnAccent);
  background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+  &.gamingLight{
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -moz-animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    animation: AnimationDark var(--gamingspeed) cubic-bezier(0, 0.25, 0.25, 1) infinite;
+  }
+  &.gamingDark{
+    color: white;
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800% !important;
+    -webkit-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    -moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+  }
 }

 .headerRightItem {
@ -1273,4 +1294,70 @@ defineExpose({
    gap: 0;
  }
 }
+@-webkit-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-moz-keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@keyframes AnimationLight {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-webkit-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@-moz-keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
+@keyframes AnimationDark {
+  0% {
+    background-position: 0% 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0% 50%
+  }
+}
 </style>
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@ -308,11 +308,11 @@ function more(ev: MouseEvent) {
    }

    &.gamingLight {
-			color: black;
+			color: white !important;
    }

    &.gamingDark {
-			color: white;
+			color: black !important;
    }

    &.gamingLight:before {
--- a/packages/frontend/src/ui/deck/deck-store.ts
+++ b/packages/frontend/src/ui/deck/deck-store.ts
@ -28,7 +28,7 @@ export type Column = {
 	listId?: string;
 	channelId?: string;
 	roleId?: string;
-	includingTypes?: typeof notificationTypes[number][];
+	excludeTypes?: typeof notificationTypes[number][];
 	tl?: 'home' | 'local' |'media' | 'social' | 'global';
 	withRenotes?: boolean;
 	withReplies?: boolean;
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form';
 import { host } from '@/config';
 import { instance } from '@/instance';