sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge tag '13.8.1' into io

Browse Source
This commit is contained in:
Cookie Ramen
2023-03-01 02:33:14 +09:00
parent 74a2b92154 647ce174b3
commit 4f81478d2f
665 changed files with 6860 additions and 9757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/.eslintrc.js
View File

@@ -55,6 +55,7 @@ module.exports = {
'vue/multi-word-component-names': 'warn',
'vue/require-v-for-key': 'warn',
'vue/no-unused-components': 'warn',
'vue/no-unused-vars': 'warn',
'vue/valid-v-for': 'warn',
'vue/return-in-computed-property': 'warn',
'vue/no-setup-props-destructure': 'warn',

BIN
packages/frontend/assets/about-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 26 KiB

12
packages/frontend/assets/label-red.svg
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<polygon fill="#ea2412" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<polygon fill="#ea2412" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 435 B

12
packages/frontend/assets/label.svg
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<polygon fill="#0B8AEA" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<polygon fill="#0B8AEA" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 435 B

14
packages/frontend/assets/unread.svg
View File

@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<circle fill="#3AA2DC" cx="16.5" cy="16.5" r="6"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<circle fill="#3AA2DC" cx="16.5" cy="16.5" r="6"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 536 B

After

Width:  |  Height:  |  Size: 529 B

46
packages/frontend/package.json
View File

@@ -4,7 +4,9 @@
"scripts": {
"watch": "vite",
"build": "vite build",
"lint": "vue-tsc --noEmit && eslint --quiet \"src/**/*.{ts,vue}\""
"typecheck": "vue-tsc --noEmit",
"eslint": "eslint --quiet \"src/**/*.{ts,vue}\"",
"lint": "pnpm typecheck && pnpm eslint"
},
"dependencies": {
"@discordapp/twemoji": "14.0.2",
@@ -17,11 +19,11 @@
"@vue/compiler-sfc": "3.2.47",
"autobind-decorator": "2.4.0",
"autosize": "5.0.2",
"blurhash": "2.0.4",
"blurhash": "2.0.5",
"broadcast-channel": "4.20.2",
"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
"canvas-confetti": "1.6.0",
"chart.js": "4.2.0",
"chart.js": "4.2.1",
"chartjs-adapter-date-fns": "3.0.0",
"chartjs-chart-matrix": "2.0.1",
"chartjs-plugin-gradient": "0.6.1",
@@ -36,24 +38,23 @@
"insert-text-at-cursor": "0.3.0",
"is-file-animated": "1.0.2",
"json5": "2.2.3",
"matter-js": "0.18.0",
"matter-js": "0.19.0",
"mfm-js": "0.23.3",
"misskey-js": "0.0.15",
"photoswipe": "5.3.5",
"photoswipe": "5.3.6",
"prismjs": "1.29.0",
"punycode": "2.3.0",
"querystring": "0.2.1",
"rndstr": "1.0.0",
"rollup": "3.14.0",
"rollup": "3.17.3",
"s-age": "1.1.2",
"sanitize-html": "2.9.0",
"sass": "1.58.0",
"sanitize-html": "2.10.0",
"sass": "1.58.3",
"seedrandom": "3.0.5",
"strict-event-emitter-types": "2.0.0",
"stringz": "2.1.0",
"syuilo-password-strength": "0.0.1",
"textarea-caret": "3.1.0",
"three": "0.149.0",
"three": "0.150.0",
"throttle-debounce": "5.0.0",
"tinycolor2": "1.6.0",
"tsc-alias": "1.8.2",
@@ -62,37 +63,36 @@
"typescript": "4.9.5",
"uuid": "9.0.0",
"vanilla-tilt": "1.8.0",
"vue-plyr": "7.0.0",
"vite": "4.1.1",
"vite": "4.1.4",
"vue": "3.2.47",
"vue-plyr": "7.0.0",
"vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "next"
},
"devDependencies": {
"@types/escape-regexp": "0.0.1",
"@types/glob": "8.0.1",
"@types/gulp": "4.0.10",
"@types/gulp-rename": "2.0.1",
"@types/matter-js": "0.18.2",
"@types/node": "18.13.0",
"@types/node": "18.14.1",
"@types/punycode": "2.1.0",
"@types/sanitize-html": "2.8.0",
"@types/seedrandom": "3.0.4",
"@types/seedrandom": "3.0.5",
"@types/throttle-debounce": "5.0.0",
"@types/tinycolor2": "1.4.3",
"@types/uuid": "9.0.0",
"@types/uuid": "9.0.1",
"@types/websocket": "1.0.5",
"@types/ws": "8.5.4",
"@typescript-eslint/eslint-plugin": "5.51.0",
"@typescript-eslint/parser": "5.51.0",
"@typescript-eslint/eslint-plugin": "5.53.0",
"@typescript-eslint/parser": "5.53.0",
"@vue/runtime-core": "3.2.47",
"cross-env": "7.0.3",
"cypress": "12.5.1",
"eslint": "8.33.0",
"cypress": "12.7.0",
"eslint": "8.35.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-vue": "9.9.0",
"start-server-and-test": "1.15.3",
"start-server-and-test": "1.15.4",
"vue-eslint-parser": "9.1.0",
"vue-tsc": "1.0.24"
"vue-tsc": "1.2.0"
}
}

1
packages/frontend/src/components/MkAbuseReport.vue
View File

@@ -39,7 +39,6 @@
import MkButton from '@/components/MkButton.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import { acct, userPage } from '@/filters/user';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { dateString } from '@/filters/date';

2
packages/frontend/src/components/MkAbuseReportWindow.vue
View File

@@ -43,7 +43,7 @@ const emit = defineEmits<{
}>();
const uiWindow = shallowRef<InstanceType<typeof MkWindow>>();
const comment = ref(props.initialComment || '');
const comment = ref(props.initialComment ?? '');
function send() {
os.apiWithDialog('users/report-abuse', {

2
packages/frontend/src/components/MkAnalogClock.vue
View File

@@ -73,7 +73,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
import { computed, onMounted, onBeforeUnmount } from 'vue';
import tinycolor from 'tinycolor2';
import { globalEvents } from '@/events.js';

2
packages/frontend/src/components/MkAsUi.vue
View File

@@ -48,7 +48,7 @@
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, onUnmounted, Ref } from 'vue';
import { Ref } from 'vue';
import * as os from '@/os';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';

3
packages/frontend/src/components/MkAutocomplete.vue
View File

@@ -43,7 +43,6 @@ import * as os from '@/os';
import { MFM_TAGS } from '@/scripts/mfm-tags';
import { defaultStore } from '@/store';
import { emojilist } from '@/scripts/emojilist';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
import { miLocalStorage } from '@/local-storage';
import { customEmojis } from '@/custom-emojis';
@@ -210,7 +209,7 @@ function exec() {
}
} else if (props.type === 'hashtag') {
if (!props.q || props.q === '') {
hashtags.value = JSON.parse(miLocalStorage.getItem('hashtags') || '[]');
hashtags.value = JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]');
fetching.value = false;
} else {
const cacheKey = `autocomplete:hashtag:${props.q}`;

2
packages/frontend/src/components/MkCaptcha.vue
View File

@@ -69,7 +69,7 @@ const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown
if (loaded) {
available.value = true;
} else {
(document.getElementById(scriptId.value) || document.head.appendChild(Object.assign(document.createElement('script'), {
(document.getElementById(scriptId.value) ?? document.head.appendChild(Object.assign(document.createElement('script'), {
async: true,
id: scriptId.value,
src: src.value,

2
packages/frontend/src/components/MkChart.vue
View File

@@ -14,7 +14,7 @@
id-denylist violation when setting it. This is causing about 60+ lint issues.
As this is part of Chart.js's API it makes sense to disable the check here.
*/
import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
import { onMounted, ref, shallowRef, watch, PropType } from 'vue';
import { Chart } from 'chart.js';
import gradient from 'chartjs-plugin-gradient';
import * as os from '@/os';

1
packages/frontend/src/components/MkChartLegend.vue
View File

@@ -8,7 +8,6 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
import { Chart, LegendItem } from 'chart.js';
const props = defineProps({

5
packages/frontend/src/components/MkClickerGame.vue
View File

@@ -14,7 +14,7 @@
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, onUnmounted } from 'vue';
import { computed, onMounted, onUnmounted } from 'vue';
import MkPlusOneEffect from '@/components/MkPlusOneEffect.vue';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
@@ -22,9 +22,6 @@ import * as game from '@/scripts/clicker-game';
import number from '@/filters/number';
import { claimAchievement } from '@/scripts/achievements';
defineProps<{
}>();
const saveData = game.saveData;
const cookies = computed(() => saveData.value?.cookies);
let cps = $ref(0);

10
packages/frontend/src/components/MkContextMenu.vue
View File

@@ -32,6 +32,8 @@ let rootEl = $shallowRef<HTMLDivElement>();
let zIndex = $ref<number>(os.claimZIndex('high'));
const SCROLLBAR_THICKNESS = 16;
onMounted(() => {
let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
@@ -39,12 +41,12 @@ onMounted(() => {
const width = rootEl.offsetWidth;
const height = rootEl.offsetHeight;
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset;
if (left + width - window.pageXOffset >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset;
}
if (top + height - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - height + window.pageYOffset;
if (top + height - window.pageYOffset >= (window.innerHeight - SCROLLBAR_THICKNESS)) {
top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.pageYOffset;
}
if (top < 0) {

2
packages/frontend/src/components/MkCropperDialog.vue
View File

@@ -26,7 +26,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted } from 'vue';
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import Cropper from 'cropperjs';
import tinycolor from 'tinycolor2';

3
packages/frontend/src/components/MkCwButton.vue
View File

@@ -7,7 +7,6 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { length } from 'stringz';
import * as misskey from 'misskey-js';
import { concat } from '@/scripts/array';
import { i18n } from '@/i18n';
@@ -23,7 +22,7 @@ const emit = defineEmits<{
const label = computed(() => {
return concat([
props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
props.note.text ? [i18n.t('_cw.chars', { count: props.note.text.length })] : [],
props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
props.note.poll != null ? [i18n.ts.poll] : [],
] as string[][]).join(' / ');

39
packages/frontend/src/components/MkDialog.vue
View File

@@ -14,8 +14,12 @@
</div>
<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
<template #caption>
<span v-if="okButtonDisabled && disabledReason === 'charactersExceeded'" v-text="i18n.t('_dialog.charactersExceeded', { current: (inputValue as string).length, max: input.maxLength ?? 'NaN' })" />
<span v-else-if="okButtonDisabled && disabledReason === 'charactersBelow'" v-text="i18n.t('_dialog.charactersBelow', { current: (inputValue as string).length, min: input.minLength ?? 'NaN' })" />
</template>
</MkInput>
<MkSelect v-if="select" v-model="selectedValue" autofocus>
<template v-if="select.items">
@@ -28,7 +32,7 @@
</template>
</MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" :disabled="okButtonDisabled" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
</div>
<div v-if="actions" :class="$style.buttons">
@@ -47,9 +51,12 @@ import MkSelect from '@/components/MkSelect.vue';
import { i18n } from '@/i18n';
type Input = {
type: HTMLInputElement['type'];
type: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local';
placeholder?: string | null;
default: any | null;
autocomplete?: string;
default: string | number | null;
minLength?: number;
maxLength?: number;
};
type Select = {
@@ -98,8 +105,28 @@ const emit = defineEmits<{
const modal = shallowRef<InstanceType<typeof MkModal>>();
const inputValue = ref(props.input?.default || null);
const selectedValue = ref(props.select?.default || null);
const inputValue = ref<string | number | null>(props.input?.default ?? null);
const selectedValue = ref(props.select?.default ?? null);
let disabledReason = $ref<null | 'charactersExceeded' | 'charactersBelow'>(null);
const okButtonDisabled = $computed<boolean>(() => {
if (props.input) {
if (props.input.minLength) {
if ((inputValue.value || inputValue.value === '') && (inputValue.value as string).length < props.input.minLength) {
disabledReason = 'charactersBelow';
return true;
}
}
if (props.input.maxLength) {
if (inputValue.value && (inputValue.value as string).length > props.input.maxLength) {
disabledReason = 'charactersExceeded';
return true;
}
}
}
return false;
});
function done(canceled: boolean, result?) {
emit('done', { canceled, result });

3
packages/frontend/src/components/MkDonation.vue
View File

@@ -31,7 +31,6 @@
</template>
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkLink from '@/components/MkLink.vue';
import { host } from '@/config';
@@ -51,7 +50,7 @@ function close() {
}
function neverShow() {
miLocalStorage.setItem('neverShowDonationInfo', 'true')
miLocalStorage.setItem('neverShowDonationInfo', 'true');
close();
}
</script>

2
packages/frontend/src/components/MkDrive.vue
View File

@@ -88,7 +88,7 @@
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import MkButton from './MkButton.vue';
import XNavFolder from '@/components/MkDrive.navFolder.vue';

1
packages/frontend/src/components/MkEmojiPicker.vue
View File

@@ -95,7 +95,6 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch';
import { deviceKind } from '@/scripts/device-kind';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
import { customEmojiCategories, customEmojis } from '@/custom-emojis';

2
packages/frontend/src/components/MkEmojiPickerWindow.vue
View File

@@ -7,7 +7,7 @@
:front="true"
@closed="emit('closed')"
>
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" as-window @chosen="chosen" :class="$style.picker"/>
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" as-window :class="$style.picker" @chosen="chosen"/>
</MkWindow>
</template>

2
packages/frontend/src/components/MkFileListForAdmin.vue
View File

@@ -32,12 +32,10 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import * as Acct from 'misskey-js/built/acct';
import MkPagination from '@/components/MkPagination.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import bytes from '@/filters/bytes';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { dateString } from '@/filters/date';

2
packages/frontend/src/components/MkFlashPreview.vue
View File

@@ -15,9 +15,7 @@
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import { userName } from '@/filters/user';
import * as os from '@/os';
const props = defineProps<{
//flash: misskey.entities.Flash;

35
packages/frontend/src/components/MkFolder.vue
View File

@@ -1,13 +1,20 @@
<template>
<div ref="rootEl" :class="[$style.root, { [$style.opened]: opened }]">
<div :class="$style.header" class="_button" @click="toggle">
<span :class="$style.headerIcon"><slot name="icon"></slot></span>
<span :class="$style.headerText"><slot name="label"></slot></span>
<span :class="$style.headerRight">
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
<div :class="$style.headerText">
<div :class="$style.headerTextMain">
<slot name="label"></slot>
</div>
<div :class="$style.headerTextSub">
<slot name="caption"></slot>
</div>
</div>
<div :class="$style.headerRight">
<span :class="$style.headerRightText"><slot name="suffix"></slot></span>
<i v-if="opened" class="ti ti-chevron-up icon"></i>
<i v-else class="ti ti-chevron-down icon"></i>
</span>
</div>
</div>
<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null }">
<Transition
@@ -139,6 +146,17 @@ onMounted(() => {
}
}
.headerUpper {
display: flex;
align-items: center;
}
.headerLower {
color: var(--fgTransparentWeak);
font-size: .85em;
padding-left: 4px;
}
.headerIcon {
margin-right: 0.75em;
flex-shrink: 0;
@@ -161,6 +179,15 @@ onMounted(() => {
padding-right: 12px;
}
.headerTextMain {
}
.headerTextSub {
color: var(--fgTransparentWeak);
font-size: .85em;
}
.headerRight {
margin-left: auto;
opacity: 0.7;

2
packages/frontend/src/components/MkGalleryPostPreview.vue
View File

@@ -16,9 +16,7 @@
<script lang="ts" setup>
import { } from 'vue';
import { userName } from '@/filters/user';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import * as os from '@/os';
const props = defineProps<{
post: any;

5
packages/frontend/src/components/MkHeatmap.vue
View File

@@ -8,14 +8,11 @@
</template>
<script lang="ts" setup>
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { onMounted, nextTick, watch } from 'vue';
import { Chart } from 'chart.js';
import tinycolor from 'tinycolor2';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
import * as os from '@/os';
import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
import { initChart } from '@/scripts/init-chart';

8
packages/frontend/src/components/MkInput.vue
View File

@@ -23,7 +23,7 @@
@input="onInput"
>
<datalist v-if="datalist" :id="id">
<option v-for="data in datalist" :value="data"/>
<option v-for="data in datalist" :key="data" :value="data"/>
</datalist>
<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
</div>
@@ -34,14 +34,14 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
import { onMounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
import { debounce } from 'throttle-debounce';
import MkButton from '@/components/MkButton.vue';
import { useInterval } from '@/scripts/use-interval';
import { i18n } from '@/i18n';
const props = defineProps<{
modelValue: string | number;
modelValue: string | number | null;
type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local';
required?: boolean;
readonly?: boolean;
@@ -49,7 +49,7 @@ const props = defineProps<{
pattern?: string;
placeholder?: string;
autofocus?: boolean;
autocomplete?: boolean;
autocomplete?: string;
spellcheck?: boolean;
step?: any;
datalist?: string[];

3
packages/frontend/src/components/MkLaunchPad.vue
View File

@@ -23,11 +23,8 @@
import { } from 'vue';
import MkModal from '@/components/MkModal.vue';
import { navbarItemDef } from '@/navbar';
import { instanceName } from '@/config';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { deviceKind } from '@/scripts/device-kind';
import * as os from '@/os';
const props = withDefaults(defineProps<{
src?: HTMLElement;

26
packages/frontend/src/components/MkMediaList.vue
View File

@@ -23,7 +23,6 @@ import XImage from '@/components/MkMediaImage.vue';
import XVideo from '@/components/MkMediaVideo.vue';
import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
@@ -46,8 +45,8 @@ onMounted(() => {
src: media.url,
w: media.properties.width,
h: media.properties.height,
alt: media.comment || media.name,
comment: media.comment || media.name,
alt: media.comment ?? media.name,
comment: media.comment ?? media.name,
};
if (media.properties.orientation != null && media.properties.orientation >= 5) {
[item.w, item.h] = [item.h, item.w];
@@ -91,8 +90,8 @@ onMounted(() => {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
itemData.alt = file.comment || file.name;
itemData.comment = file.comment || file.name;
itemData.alt = file.comment ?? file.name;
itemData.comment = file.comment ?? file.name;
itemData.thumbCropped = true;
});
@@ -114,6 +113,23 @@ onMounted(() => {
});
lightbox.init();
window.addEventListener('popstate', () => {
if (lightbox.pswp && lightbox.pswp.isOpen === true) {
lightbox.pswp.close();
return;
}
});
lightbox.on('beforeOpen', () => {
history.pushState(null, '', '#pswp');
});
lightbox.on('close', () => {
if (window.location.hash === '#pswp') {
history.back();
}
});
});
const previewable = (file: misskey.entities.DriveFile): boolean => {

37
packages/frontend/src/components/MkMenu.child.vue
View File

@@ -1,15 +1,13 @@
<template>
<div ref="el" class="sfhdhdhr">
<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
<div ref="el" :class="$style.root">
<MkMenu :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
</div>
</template>
<script lang="ts" setup>
import { on } from 'events';
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
import MkMenu from './MkMenu.vue';
import { MenuItem } from '@/types/menu';
import * as os from '@/os';
const props = defineProps<{
items: MenuItem[];
@@ -27,11 +25,21 @@ const emit = defineEmits<{
const el = shallowRef<HTMLElement>();
const align = 'left';
const SCROLLBAR_THICKNESS = 16;
function setPosition() {
const rootRect = props.rootElement.getBoundingClientRect();
const rect = props.targetElement.getBoundingClientRect();
const left = props.targetElement.offsetWidth;
const top = (rect.top - rootRect.top) - 8;
const parentRect = props.targetElement.getBoundingClientRect();
const myRect = el.value.getBoundingClientRect();
let left = props.targetElement.offsetWidth;
let top = (parentRect.top - rootRect.top) - 8;
if (rootRect.left + left + myRect.width >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = -myRect.width;
}
if (rootRect.top + top + myRect.height >= (window.innerHeight - SCROLLBAR_THICKNESS)) {
top = top - ((rootRect.top + top + myRect.height) - (window.innerHeight - SCROLLBAR_THICKNESS));
}
el.value.style.left = left + 'px';
el.value.style.top = top + 'px';
}
@@ -48,13 +56,22 @@ watch(() => props.targetElement, () => {
setPosition();
});
const ro = new ResizeObserver((entries, observer) => {
setPosition();
});
onMounted(() => {
ro.observe(el.value);
setPosition();
nextTick(() => {
setPosition();
});
});
onUnmounted(() => {
ro.disconnect();
});
defineExpose({
checkHit: (ev: MouseEvent) => {
return (ev.target === el.value || el.value.contains(ev.target));
@@ -62,8 +79,8 @@ defineExpose({
});
</script>
<style lang="scss" scoped>
.sfhdhdhr {
<style lang="scss" module>
.root {
position: absolute;
}
</style>

28
packages/frontend/src/components/MkMenu.vue
View File

@@ -56,7 +56,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { focusPrev, focusNext } from '@/scripts/focus';
import MkSwitch from '@/components/MkSwitch.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
@@ -111,11 +111,11 @@ watch(() => props.items, () => {
immediate: true,
});
let childMenu = $ref<MenuItem[] | null>();
let childMenu = ref<MenuItem[] | null>();
let childTarget = $shallowRef<HTMLElement | null>();
function closeChild() {
childMenu = null;
childMenu.value = null;
childShowingItem = null;
}
@@ -140,13 +140,31 @@ function onItemMouseLeave(item) {
if (childCloseTimer) window.clearTimeout(childCloseTimer);
}
let childrenCache = new WeakMap();
async function showChildren(item: MenuItem, ev: MouseEvent) {
const children = ref([]);
if (childrenCache.has(item)) {
children.value = childrenCache.get(item);
} else {
if (typeof item.children === 'function') {
children.value = [{
type: 'pending',
}];
item.children().then(x => {
children.value = x;
childrenCache.set(item, x);
});
} else {
children.value = item.children;
}
}
if (props.asDrawer) {
os.popupMenu(item.children, ev.currentTarget ?? ev.target);
os.popupMenu(children, ev.currentTarget ?? ev.target);
close();
} else {
childTarget = ev.currentTarget ?? ev.target;
childMenu = item.children;
childMenu = children;
childShowingItem = item;
}
}

2
packages/frontend/src/components/MkMiniChart.vue
View File

@@ -26,7 +26,7 @@
</template>
<script lang="ts" setup>
import { onUnmounted, watch } from 'vue';
import { watch } from 'vue';
import { v4 as uuid } from 'uuid';
import tinycolor from 'tinycolor2';
import { useInterval } from '@/scripts/use-interval';

21
packages/frontend/src/components/MkModal.vue
View File

@@ -133,6 +133,7 @@ const keymap = {
};
const MARGIN = 16;
const SCROLLBAR_THICKNESS = 16;
const align = () => {
if (props.src == null) return;
@@ -170,15 +171,15 @@ const align = () => {
if (fixed) {
// 画面から横にはみ出る場合
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
if (left + width > (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width;
}
const underSpace = (window.innerHeight - MARGIN) - top;
const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - top;
const upperSpace = (srcRect.top - MARGIN);
// 画面から縦にはみ出る場合
if (top + height > (window.innerHeight - MARGIN)) {
if (top + height > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
maxHeight = underSpace;
@@ -187,22 +188,22 @@ const align = () => {
top = (upperSpace + MARGIN) - height;
}
} else {
top = (window.innerHeight - MARGIN) - height;
top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height;
}
} else {
maxHeight = underSpace;
}
} else {
// 画面から横にはみ出る場合
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset - 1;
if (left + width - window.pageXOffset > (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset - 1;
}
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.pageYOffset);
const upperSpace = (srcRect.top - MARGIN);
// 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
if (top + height - window.pageYOffset > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
maxHeight = underSpace;
@@ -211,7 +212,7 @@ const align = () => {
top = window.pageYOffset + ((upperSpace + MARGIN) - height);
}
} else {
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.pageYOffset - 1;
}
} else {
maxHeight = underSpace;

2
packages/frontend/src/components/MkModalPageWindow.vue
View File

@@ -29,7 +29,7 @@ import { url } from '@/config';
import * as os from '@/os';
import { mainRouter, routes } from '@/router';
import { i18n } from '@/i18n';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { Router } from '@/nirax';
const props = defineProps<{

59
packages/frontend/src/components/MkNote.vue
View File

@@ -9,7 +9,7 @@
>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
<!--<div v-if="appearNote._prId_" class="tip"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
<!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
<div v-if="isRenote" :class="$style.renote">
<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
@@ -31,7 +31,7 @@
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
</div>
</div>
<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
@@ -126,7 +126,7 @@
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -155,7 +155,6 @@ import { deepClone } from '@/scripts/clone';
import { useTooltip } from '@/scripts/use-tooltip';
import { claimAchievement } from '@/scripts/achievements';
import { getNoteSummary } from '@/scripts/get-note-summary';
import { shownNoteIds } from '@/os';
import { MenuItem } from '@/types/menu';
const props = defineProps<{
@@ -195,6 +194,8 @@ const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false);
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
const isLong = (appearNote.cw == null && appearNote.text != null && (
(appearNote.text.includes('$[x3')) ||
(appearNote.text.includes('$[x4')) ||
(appearNote.text.split('\n').length > 9) ||
(appearNote.text.length > 500) ||
(appearNote.files.length >= 5) ||
@@ -207,9 +208,7 @@ const translation = ref<any>(null);
const translating = ref(false);
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
let renoteCollapsed = $ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.userId)) || shownNoteIds.has(appearNote.id)));
shownNoteIds.add(appearNote.id);
let renoteCollapsed = $ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.userId)) || (appearNote.myReaction != null)));
const keymap = {
'r': () => reply(true),
@@ -256,7 +255,7 @@ function renote(viaKeyboard = false) {
text: i18n.ts.inChannelRenote,
icon: 'ti ti-repeat',
action: () => {
os.api('notes/create', {
os.apiWithDialog('notes/create', {
renoteId: appearNote.id,
channelId: appearNote.channelId,
});
@@ -277,7 +276,7 @@ function renote(viaKeyboard = false) {
text: i18n.ts.renote,
icon: 'ti ti-repeat',
action: () => {
os.api('notes/create', {
os.apiWithDialog('notes/create', {
renoteId: appearNote.id,
});
},
@@ -674,9 +673,17 @@ function showReactions(): void {
opacity: 0.7;
}
@container (max-width: 500px) {
@container (max-width: 580px) {
.root {
font-size: 0.9em;
font-size: 0.95em;
}
.renote {
padding: 12px 26px 0 26px;
}
.article {
padding: 24px 26px 14px;
}
.avatar {
@@ -685,7 +692,21 @@ function showReactions(): void {
}
}
@container (max-width: 450px) {
@container (max-width: 500px) {
.root {
font-size: 0.9em;
}
.renote {
padding: 10px 22px 0 22px;
}
.article {
padding: 20px 22px 12px;
}
}
@container (max-width: 480px) {
.renote {
padding: 8px 16px 0 16px;
}
@@ -702,7 +723,9 @@ function showReactions(): void {
.article {
padding: 14px 16px 9px;
}
}
@container (max-width: 450px) {
.avatar {
margin: 0 10px 8px 0;
width: 46px;
@@ -711,7 +734,7 @@ function showReactions(): void {
}
}
@container (max-width: 350px) {
@container (max-width: 400px) {
.footerButton {
&:not(:last-child) {
margin-right: 18px;
@@ -719,6 +742,14 @@ function showReactions(): void {
}
}
@container (max-width: 350px) {
.footerButton {
&:not(:last-child) {
margin-right: 12px;
}
}
}
@container (max-width: 300px) {
.avatar {
width: 44px;
@@ -727,7 +758,7 @@ function showReactions(): void {
.footerButton {
&:not(:last-child) {
margin-right: 12px;
margin-right: 8px;
}
}
}

10
packages/frontend/src/components/MkNoteDetailed.vue
View File

@@ -30,7 +30,7 @@
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@@ -48,7 +48,7 @@
<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span>
<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
</div>
</div>
<div class="username"><MkAcct :user="appearNote.user"/></div>
@@ -133,7 +133,7 @@
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
import { computed, inject, onMounted, ref, shallowRef } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -250,7 +250,7 @@ function renote(viaKeyboard = false) {
text: i18n.ts.inChannelRenote,
icon: 'ti ti-repeat',
action: () => {
os.api('notes/create', {
os.apiWithDialog('notes/create', {
renoteId: appearNote.id,
channelId: appearNote.channelId,
});
@@ -271,7 +271,7 @@ function renote(viaKeyboard = false) {
text: i18n.ts.renote,
icon: 'ti ti-repeat',
action: () => {
os.api('notes/create', {
os.apiWithDialog('notes/create', {
renoteId: appearNote.id,
});
},

2
packages/frontend/src/components/MkNoteHeader.vue
View File

@@ -17,7 +17,7 @@
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
</span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
</div>
</header>
</template>

20
packages/frontend/src/components/MkNotification.vue
View File

@@ -9,7 +9,6 @@
<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
<i v-else-if="notification.type === 'groupInvited'" class="ti ti-certificate-2"></i>
<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
@@ -74,12 +73,6 @@
<button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button>
</div>
</template>
<template v-else-if="notification.type === 'groupInvited'">
<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b></span>
<div v-if="full && !groupInviteDone">
<button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button>
</div>
</template>
<span v-else-if="notification.type === 'app'" :class="$style.text">
<Mfm :text="notification.body" :nowrap="false"/>
</span>
@@ -145,7 +138,6 @@ onUnmounted(() => {
});
const followRequestDone = ref(false);
const groupInviteDone = ref(false);
const acceptFollowRequest = () => {
followRequestDone.value = true;
@@ -157,16 +149,6 @@ const rejectFollowRequest = () => {
os.api('following/requests/reject', { userId: props.notification.user.id });
};
const acceptGroupInvitation = () => {
groupInviteDone.value = true;
os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
};
const rejectGroupInvitation = () => {
groupInviteDone.value = true;
os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
};
useTooltip(reactionRef, (showing) => {
os.popup(XReactionTooltip, {
showing,
@@ -224,7 +206,7 @@ useTooltip(reactionRef, (showing) => {
}
}
.t_follow, .t_followRequestAccepted, .t_receiveFollowRequest, .t_groupInvited {
.t_follow, .t_followRequestAccepted, .t_receiveFollowRequest {
padding: 3px;
background: #36aed2;
pointer-events: none;

30
packages/frontend/src/components/MkNotificationSettingWindow.vue
View File

@@ -6,7 +6,7 @@
:with-ok-button="true"
:ok-button-disabled="false"
@ok="ok()"
@close="dialog.close()"
@close="dialog?.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.notificationSetting }}</template>
@@ -25,7 +25,7 @@
<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
</div>
<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype].value">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
</template>
</div>
</MkSpacer>
@@ -33,14 +33,16 @@
</template>
<script lang="ts" setup>
import { } from 'vue';
import { notificationTypes } from 'misskey-js';
import { ref, Ref } from 'vue';
import MkSwitch from './MkSwitch.vue';
import MkInfo from './MkInfo.vue';
import MkButton from './MkButton.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import { notificationTypes } from '@/const';
import { i18n } from '@/i18n';
type TypesMap = Record<typeof notificationTypes[number], Ref<boolean>>
const emit = defineEmits<{
(ev: 'done', v: { includingTypes: string[] | null }): void,
(ev: 'closed'): void,
@@ -54,39 +56,35 @@ const props = withDefaults(defineProps<{
showGlobalToggle: true,
});
let includingTypes = $computed(() => props.includingTypes || []);
let includingTypes = $computed(() => props.includingTypes?.filter(x => notificationTypes.includes(x)) ?? []);
const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
const typesMap: TypesMap = notificationTypes.reduce((p, t) => ({ ...p, [t]: ref<boolean>(includingTypes.includes(t)) }), {} as any);
let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
for (const ntype of notificationTypes) {
typesMap[ntype] = includingTypes.includes(ntype);
}
function ok() {
if (useGlobalSetting) {
emit('done', { includingTypes: null });
} else {
emit('done', {
includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
.filter(type => typesMap[type]),
.filter(type => typesMap[type].value),
});
}
dialog.close();
if (dialog) dialog.close();
}
function disableAll() {
for (const type in typesMap) {
typesMap[type as typeof notificationTypes[number]] = false;
for (const type of notificationTypes) {
typesMap[type].value = false;
}
}
function enableAll() {
for (const type in typesMap) {
typesMap[type as typeof notificationTypes[number]] = true;
for (const type of notificationTypes) {
typesMap[type].value = true;
}
}
</script>

5
packages/frontend/src/components/MkNotifications.vue
View File

@@ -17,16 +17,15 @@
</template>
<script lang="ts" setup>
import { defineComponent, markRaw, onUnmounted, onMounted, computed, shallowRef } from 'vue';
import { notificationTypes } from 'misskey-js';
import { onUnmounted, onMounted, computed, shallowRef } from 'vue';
import MkPagination, { Paging } from '@/components/MkPagination.vue';
import XNotification from '@/components/MkNotification.vue';
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
import XNote from '@/components/MkNote.vue';
import * as os from '@/os';
import { stream } from '@/stream';
import { $i } from '@/account';
import { i18n } from '@/i18n';
import { notificationTypes } from '@/const';
const props = defineProps<{
includeTypes?: typeof notificationTypes[number][];

2
packages/frontend/src/components/MkNumber.vue
View File

@@ -3,7 +3,7 @@
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { reactive, watch } from 'vue';
import gsap from 'gsap';
import number from '@/filters/number';

2
packages/frontend/src/components/MkObjectView.value.vue
View File

@@ -29,7 +29,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue';
import { defineComponent, reactive } from 'vue';
import number from '@/filters/number';
export default defineComponent({

2
packages/frontend/src/components/MkOmit.vue
View File

@@ -8,7 +8,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted } from 'vue';
import { onMounted } from 'vue';
const props = withDefaults(defineProps<{
maxHeight: number;

1
packages/frontend/src/components/MkPagePreview.vue
View File

@@ -18,7 +18,6 @@
import { } from 'vue';
import * as misskey from 'misskey-js';
import { userName } from '@/filters/user';
import * as os from '@/os';
const props = defineProps<{
page: misskey.entities.Page;

16
packages/frontend/src/components/MkPageWindow.vue
View File

@@ -18,23 +18,22 @@
</template>
<div :class="$style.root" :style="{ background: pageMetadata?.value?.bg }" style="container-type: inline-size;">
<RouterView :router="router"/>
<RouterView :key="reloadCount" :router="router"/>
</div>
</MkWindow>
</template>
<script lang="ts" setup>
import { ComputedRef, inject, onMounted, onUnmounted, provide } from 'vue';
import { ComputedRef, onMounted, onUnmounted, provide } from 'vue';
import RouterView from '@/components/global/RouterView.vue';
import MkWindow from '@/components/MkWindow.vue';
import { popout as _popout } from '@/scripts/popout';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import { url } from '@/config';
import * as os from '@/os';
import { mainRouter, routes } from '@/router';
import { Router } from '@/nirax';
import { i18n } from '@/i18n';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { openingWindowsCount } from '@/os';
import { claimAchievement } from '@/scripts/achievements';
@@ -68,6 +67,10 @@ const buttonsLeft = $computed(() => {
});
const buttonsRight = $computed(() => {
const buttons = [{
icon: 'ti ti-reload',
title: i18n.ts.reload,
onClick: reload,
}, {
icon: 'ti ti-player-eject',
title: i18n.ts.showInPage,
onClick: expand,
@@ -75,6 +78,7 @@ const buttonsRight = $computed(() => {
return buttons;
});
let reloadCount = $ref(0);
router.addListener('push', ctx => {
history.push({ path: ctx.path, key: ctx.key });
@@ -116,6 +120,10 @@ function back() {
router.replace(history[history.length - 1].path, history[history.length - 1].key);
}
function reload() {
reloadCount++;
}
function close() {
windowEl.close();
}

39
packages/frontend/src/components/MkPagination.vue
View File

@@ -42,6 +42,7 @@ import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, o
import * as misskey from 'misskey-js';
import * as os from '@/os';
import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';
import { useDocumentVisibility } from '@/scripts/use-document-visibility';
import MkButton from '@/components/MkButton.vue';
import { defaultStore } from '@/store';
import { MisskeyEntity } from '@/types/date-separated-list';
@@ -104,9 +105,15 @@ const {
enableInfiniteScroll,
} = defaultStore.reactiveState;
const contentEl = $computed(() => props.pagination.pageEl || rootEl);
const contentEl = $computed(() => props.pagination.pageEl ?? rootEl);
const scrollableElement = $computed(() => getScrollContainer(contentEl));
const visibility = useDocumentVisibility();
let isPausingUpdate = false;
let timerForSetPause: number | null = null;
const BACKGROUND_PAUSE_WAIT_SEC = 10;
// 先頭が表示されているかどうかを検出
// https://qiita.com/mkataigi/items/0154aefd2223ce23398e
let scrollObserver = $ref<IntersectionObserver>();
@@ -279,6 +286,28 @@ const fetchMoreAhead = async (): Promise<void> => {
});
};
const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl, TOLERANCE);
watch(visibility, () => {
if (visibility.value === 'hidden') {
timerForSetPause = window.setTimeout(() => {
isPausingUpdate = true;
timerForSetPause = null;
},
BACKGROUND_PAUSE_WAIT_SEC * 1000);
} else { // 'visible'
if (timerForSetPause) {
clearTimeout(timerForSetPause);
timerForSetPause = null;
} else {
isPausingUpdate = false;
if (isTop()) {
executeQueue();
}
}
}
});
const prepend = (item: MisskeyEntity): void => {
// 初回表示時はunshiftだけでOK
if (!rootEl) {
@@ -286,9 +315,7 @@ const prepend = (item: MisskeyEntity): void => {
return;
}
const isTop = isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl, TOLERANCE);
if (isTop) unshiftItems([item]);
if (isTop() && !isPausingUpdate) unshiftItems([item]);
else prependQueue(item);
};
@@ -357,6 +384,10 @@ onMounted(() => {
});
onBeforeUnmount(() => {
if (timerForSetPause) {
clearTimeout(timerForSetPause);
timerForSetPause = null;
}
scrollObserver.disconnect();
});

2
packages/frontend/src/components/MkPoll.vue
View File

@@ -22,7 +22,7 @@
</template>
<script lang="ts" setup>
import { computed, onUnmounted, ref, toRef } from 'vue';
import { computed, ref } from 'vue';
import * as misskey from 'misskey-js';
import { sum } from '@/scripts/array';
import { pleaseLogin } from '@/scripts/please-login';

28
packages/frontend/src/components/MkPostForm.vue
View File

@@ -45,6 +45,7 @@
<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
</div>
</div>
<MkInfo v-if="localOnly && channel == null" warn :class="$style.disableFederationWarn">{{ i18n.ts.disableFederationWarn }}</MkInfo>
<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
<textarea ref="textareaEl" v-model="text" :class="[$style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
@@ -73,10 +74,8 @@ import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import insertTextAtCursor from 'insert-text-at-cursor';
import { length } from 'stringz';
import { toASCII } from 'punycode/';
import * as Acct from 'misskey-js/built/acct';
import { throttle } from 'throttle-debounce';
import MkNoteSimple from '@/components/MkNoteSimple.vue';
import XNotePreview from '@/components/MkNotePreview.vue';
import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
@@ -87,7 +86,6 @@ import { extractMentions } from '@/scripts/extract-mentions';
import { formatTimeString } from '@/scripts/format-time-string';
import { Autocomplete } from '@/scripts/autocomplete';
import * as os from '@/os';
import { stream } from '@/stream';
import { selectFiles } from '@/scripts/select-file';
import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
import MkInfo from '@/components/MkInfo.vue';
@@ -157,15 +155,9 @@ let autocomplete = $ref(null);
let draghover = $ref(false);
let quoteId = $ref(null);
let hasNotSpecifiedMentions = $ref(false);
let recentHashtags = $ref(JSON.parse(miLocalStorage.getItem('hashtags') || '[]'));
let recentHashtags = $ref(JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]'));
let imeText = $ref('');
const typing = throttle(3000, () => {
if (props.channel) {
stream.send('typingOnChannel', { channel: props.channel.id });
}
});
const draftKey = $computed((): string => {
let key = props.channel ? `channel:${props.channel.id}` : '';
@@ -209,7 +201,7 @@ const submitText = $computed((): string => {
});
const textLength = $computed((): number => {
return length((text + imeText).trim());
return (text + imeText).trim().length;
});
const maxTextLength = $computed((): number => {
@@ -228,7 +220,7 @@ const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
watch($$(text), () => {
checkMissingMention();
});
}, { immediate: true });
watch($$(visibleUsers), () => {
checkMissingMention();
@@ -447,12 +439,10 @@ function clear() {
function onKeydown(ev: KeyboardEvent) {
if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
if (ev.which === 27) emit('esc');
typing();
}
function onCompositionUpdate(ev: CompositionEvent) {
imeText = ev.data;
typing();
}
function onCompositionEnd(ev: CompositionEvent) {
@@ -544,7 +534,7 @@ function onDrop(ev): void {
}
function saveDraft() {
const draftData = JSON.parse(miLocalStorage.getItem('drafts') || '{}');
const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
draftData[draftKey] = {
updatedAt: new Date(),
@@ -653,7 +643,7 @@ async function post(ev?: MouseEvent) {
emit('posted');
if (postData.text && postData.text !== '') {
const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
const history = JSON.parse(miLocalStorage.getItem('hashtags') || '[]') as string[];
const history = JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]') as string[];
miLocalStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
}
posting = false;
@@ -757,7 +747,7 @@ onMounted(() => {
nextTick(() => {
// 書きかけの投稿を復元
if (!props.instant && !props.mention && !props.specified) {
const draft = JSON.parse(miLocalStorage.getItem('drafts') || '{}')[draftKey];
const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
if (draft) {
text = draft.data.text;
useCw = draft.data.useCw;
@@ -952,6 +942,10 @@ defineExpose({
background: var(--X4);
}
.disableFederationWarn {
margin: 0 20px 16px 20px;
}
.hasNotSpecifiedMentions {
margin: 0 20px 16px 20px;
}

3
packages/frontend/src/components/MkPostFormAttaches.vue
View File

@@ -15,10 +15,9 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, watch } from 'vue';
import { defineAsyncComponent } from 'vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os';
import { deepClone } from '@/scripts/clone';
import { i18n } from '@/i18n';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));

22
packages/frontend/src/components/MkReactedUsersDialog.vue
View File

@@ -10,15 +10,21 @@
<MkSpacer :margin-min="20" :margin-max="28">
<div v-if="note" class="_gaps">
<div :class="$style.tabs">
<button v-for="reaction in reactions" :key="reaction" :class="[$style.tab, { [$style.tabActive]: tab === reaction }]" class="_button" @click="tab = reaction">
<MkReactionIcon :reaction="reaction"/>
<span style="margin-left: 4px;">{{ note.reactions[reaction] }}</span>
</button>
<div v-if="reactions.length === 0" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
<MkA v-for="user in users" :key="user.id" :to="userPage(user)">
<MkUserCardMini :user="user" :with-chart="false"/>
</MkA>
<template v-else>
<div :class="$style.tabs">
<button v-for="reaction in reactions" :key="reaction" :class="[$style.tab, { [$style.tabActive]: tab === reaction }]" class="_button" @click="tab = reaction">
<MkReactionIcon :reaction="reaction"/>
<span style="margin-left: 4px;">{{ note.reactions[reaction] }}</span>
</button>
</div>
<MkA v-for="user in users" :key="user.id" :to="userPage(user)">
<MkUserCardMini :user="user" :with-chart="false"/>
</MkA>
</template>
</div>
<div v-else>
<MkLoading/>

2
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View File

@@ -12,7 +12,7 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, shallowRef, watch } from 'vue';
import { computed, onMounted, shallowRef, watch } from 'vue';
import * as misskey from 'misskey-js';
import XDetails from '@/components/MkReactionsViewer.details.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';

2
packages/frontend/src/components/MkReactionsViewer.vue
View File

@@ -51,7 +51,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
...Object.entries(newSource)
.sort(([, a], [, b]) => b - a)
.filter(([y], i) => i < maxNumber && !newReactionsNames.includes(y)),
]
];
newReactions = newReactions.slice(0, props.maxNumber);

5
packages/frontend/src/components/MkRetentionHeatmap.vue
View File

@@ -8,14 +8,11 @@
</template>
<script lang="ts" setup>
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { onMounted, nextTick } from 'vue';
import { Chart } from 'chart.js';
import tinycolor from 'tinycolor2';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
import * as os from '@/os';
import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
import { initChart } from '@/scripts/init-chart';

21
packages/frontend/src/components/MkRolePreview.vue
View File

@@ -1,10 +1,15 @@
<template>
<MkA v-adaptive-bg :to="`/admin/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
<MkA v-adaptive-bg :to="forModeration ? `/admin/roles/${role.id}` : `/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
<div :class="$style.title">
<span :class="$style.icon">
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
<template v-if="role.iconUrl">
<img :class="$style.badge" :src="role.iconUrl"/>
</template>
<template v-else>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
</template>
</span>
<span :class="$style.name">{{ role.name }}</span>
<span v-if="role.target === 'manual'" :class="$style.users">{{ role.usersCount }} users</span>
@@ -16,12 +21,11 @@
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import * as os from '@/os';
import { i18n } from '@/i18n';
const props = defineProps<{
role: any;
forModeration: boolean;
}>();
</script>
@@ -40,6 +44,11 @@ const props = defineProps<{
margin-right: 8px;
}
.badge {
height: 1.3em;
vertical-align: -20%;
}
.name {
font-weight: bold;
}

6
packages/frontend/src/components/MkSelect.vue
View File

@@ -27,14 +27,14 @@
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
import { onMounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
import { i18n } from '@/i18n';
const props = defineProps<{
modelValue: string;
modelValue: string | null;
required?: boolean;
readonly?: boolean;
disabled?: boolean;
@@ -48,7 +48,7 @@ const props = defineProps<{
const emit = defineEmits<{
(ev: 'change', _ev: KeyboardEvent): void;
(ev: 'update:modelValue', value: string): void;
(ev: 'update:modelValue', value: string | null): void;
}>();
const slots = useSlots();

8
packages/frontend/src/components/MkSignin.vue
View File

@@ -10,7 +10,7 @@
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password" :with-password-toggle="true" required data-cy-signin-password>
<template #prefix><i class="ti ti-lock"></i></template>
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
</MkInput>
@@ -28,11 +28,11 @@
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :with-password-toggle="true" required>
<template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template>
</MkInput>
<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="one-time-code" :spellcheck="false" required>
<template #label>{{ i18n.ts.token }}</template>
<template #prefix><i class="ti ti-123"></i></template>
</MkInput>
@@ -50,7 +50,7 @@ import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkInfo from '@/components/MkInfo.vue';
import { apiUrl, host as configHost } from '@/config';
import { host as configHost } from '@/config';
import { byteify, hexify } from '@/scripts/2fa';
import * as os from '@/os';
import { login } from '@/account';

2
packages/frontend/src/components/MkSuperMenu.vue
View File

@@ -24,7 +24,7 @@
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { defineComponent } from 'vue';
export default defineComponent({
props: {

1
packages/frontend/src/components/MkSwitch.vue
View File

@@ -22,7 +22,6 @@
<script lang="ts" setup>
import { toRefs, Ref } from 'vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
const props = defineProps<{

2
packages/frontend/src/components/MkTagCloud.vue
View File

@@ -10,7 +10,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, PropType, onBeforeUnmount } from 'vue';
import { onMounted, watch, onBeforeUnmount } from 'vue';
import tinycolor from 'tinycolor2';
const loaded = !!window.TagCanvas;

2
packages/frontend/src/components/MkTextarea.vue
View File

@@ -27,7 +27,7 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import { defineComponent, onMounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import { debounce } from 'throttle-debounce';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n';

9
packages/frontend/src/components/MkTimeline.vue
View File

@@ -1,11 +1,10 @@
<template>
<XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
<MkNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
</template>
<script lang="ts" setup>
import { ref, computed, provide, onUnmounted } from 'vue';
import XNotes from '@/components/MkNotes.vue';
import * as os from '@/os';
import { computed, provide, onUnmounted } from 'vue';
import MkNotes from '@/components/MkNotes.vue';
import { stream } from '@/stream';
import * as sound from '@/scripts/sound';
import { $i } from '@/account';
@@ -25,7 +24,7 @@ const emit = defineEmits<{
provide('inChannel', computed(() => props.src === 'channel'));
const tlComponent: InstanceType<typeof XNotes> = $ref();
const tlComponent: InstanceType<typeof MkNotes> = $ref();
const prepend = note => {
tlComponent.pagingComponent?.prepend(note);

2
packages/frontend/src/components/MkToast.vue
View File

@@ -17,7 +17,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { onMounted } from 'vue';
import * as os from '@/os';
defineProps<{

2
packages/frontend/src/components/MkTooltip.vue
View File

@@ -16,7 +16,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { nextTick, onMounted, onUnmounted, shallowRef } from 'vue';
import * as os from '@/os';
import { calcPopupPosition } from '@/scripts/popup-position';

31
packages/frontend/src/components/MkUrlPreview.vue
View File

@@ -1,12 +1,25 @@
<template>
<div v-if="playerEnabled" :class="$style.player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
<button :class="$style.disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
<iframe v-if="player.url.startsWith('http://') || player.url.startsWith('https://')" :class="$style.playerIframe" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
<span v-else>invalid url</span>
</div>
<div v-else-if="tweetId && tweetExpanded" ref="twitter" :class="$style.twitter">
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
</div>
<template v-if="playerEnabled">
<div :class="$style.player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
<iframe v-if="player.url.startsWith('http://') || player.url.startsWith('https://')" :class="$style.playerIframe" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
<span v-else>invalid url</span>
</div>
<div :class="$style.action">
<MkButton :small="true" inline @click="playerEnabled = false">
<i class="ti ti-x"></i> {{ i18n.ts.disablePlayer }}
</MkButton>
</div>
</template>
<template v-else-if="tweetId && tweetExpanded">
<div ref="twitter" :class="$style.twitter">
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
</div>
<div :class="$style.action">
<MkButton :small="true" inline @click="tweetExpanded = false">
<i class="ti ti-x"></i> {{ i18n.ts.close }}
</MkButton>
</div>
</template>
<div v-else :class="$style.urlPreview">
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" :class="$style.thumbnail" :style="`background-image: url('${thumbnail}')`">
@@ -45,7 +58,7 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
import { defineAsyncComponent, onUnmounted } from 'vue';
import { url as local } from '@/config';
import { i18n } from '@/i18n';
import * as os from '@/os';

13
packages/frontend/src/components/MkUserList.vue
View File

@@ -7,25 +7,26 @@
</div>
</template>
<template #default="{ items: users }">
<template #default="{ items }">
<div class="efvhhmdq">
<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
<MkUserInfo v-for="item in items" :key="item.id" class="user" :user="extractor(item)"/>
</div>
</template>
</MkPagination>
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
import MkUserInfo from '@/components/MkUserInfo.vue';
import MkPagination, { Paging } from '@/components/MkPagination.vue';
import { userPage } from '@/filters/user';
import { i18n } from '@/i18n';
const props = defineProps<{
const props = withDefaults(defineProps<{
pagination: Paging;
noGap?: boolean;
}>();
extractor?: (item: any) => any;
}>(), {
extractor: (item) => item,
});
</script>
<style lang="scss" scoped>

8
packages/frontend/src/components/MkUserPreview.vue
View File

@@ -89,7 +89,7 @@ onMounted(() => {
<style lang="scss" scoped>
.popup-enter-active, .popup-leave-active {
transition: opacity 0.3s, transform 0.3s !important;
transition: opacity 0.15s, transform 0.15s !important;
}
.popup-enter-from, .popup-leave-to {
opacity: 0;
@@ -183,8 +183,10 @@ onMounted(() => {
> .menu {
position: absolute;
top: 8px;
right: 42px;
padding: 8px;
right: 44px;
padding: 6px;
background: var(--panel);
border-radius: 999px;
}
> .koudoku-button {

7
packages/frontend/src/components/MkUserSelectDialog.vue
View File

@@ -16,7 +16,7 @@
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<MkInput v-model="host" @update:model-value="search">
<MkInput v-model="host" :datalist="[hostname]" @update:model-value="search">
<template #label>{{ i18n.ts.host }}</template>
<template #prefix>@</template>
</MkInput>
@@ -52,7 +52,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted } from 'vue';
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import MkInput from '@/components/MkInput.vue';
import FormSplit from '@/components/form/split.vue';
@@ -61,6 +61,7 @@ import * as os from '@/os';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { $i } from '@/account';
import { hostname } from '@/config';
const emit = defineEmits<{
(ev: 'ok', selected: misskey.entities.UserDetailed): void;
@@ -115,7 +116,7 @@ onMounted(() => {
os.api('users/show', {
userIds: defaultStore.state.recentlyUsedUsers,
}).then(users => {
if (props.includeSelf) {
if (props.includeSelf && users.find(x => $i ? x.id === $i.id : true) == null) {
recentUsers = [$i, ...users];
} else {
recentUsers = users;

4
packages/frontend/src/components/MkVisibilityPicker.vue
View File

@@ -33,8 +33,8 @@
<button key="localOnly" class="_button" :class="[$style.item, $style.localOnly, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
<div :class="$style.icon"><i class="ti ti-world-off"></i></div>
<div :class="$style.body">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.localOnly }}</span>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.localOnlyDescription }}</span>
<span :class="$style.itemTitle">{{ i18n.ts._visibility.disableFederation }}</span>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.disableFederationDescription }}</span>
</div>
<div :class="$style.toggle"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
</button>

3
packages/frontend/src/components/MkWidgets.vue
View File

@@ -43,14 +43,13 @@ export type DefaultStoredWidget = {
} & Widget;
</script>
<script lang="ts" setup>
import { defineAsyncComponent, reactive, ref, computed } from 'vue';
import { defineAsyncComponent, ref } from 'vue';
import { v4 as uuid } from 'uuid';
import MkSelect from '@/components/MkSelect.vue';
import MkButton from '@/components/MkButton.vue';
import { widgets as widgetDefs } from '@/widgets';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { deepClone } from '@/scripts/clone';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));

1
packages/frontend/src/components/global/MkA.vue
View File

@@ -5,7 +5,6 @@
</template>
<script lang="ts" setup>
import { inject } from 'vue';
import * as os from '@/os';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import { url } from '@/config';

2
packages/frontend/src/components/global/MkAvatar.vue
View File

@@ -18,7 +18,7 @@
</template>
<script lang="ts" setup>
import { onMounted, watch } from 'vue';
import { watch } from 'vue';
import * as misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/media-proxy';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';

6
packages/frontend/src/components/global/MkCustomEmoji.vue
View File

@@ -24,7 +24,7 @@ const rawUrl = computed(() => {
return props.url;
}
if (props.host == null && !customEmojiName.value.includes('@')) {
return customEmojis.value.find(x => x.name === customEmojiName.value)?.url || null;
return customEmojis.value.find(x => x.name === customEmojiName.value)?.url ?? null;
}
return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
});
@@ -32,7 +32,7 @@ const rawUrl = computed(() => {
const url = computed(() =>
defaultStore.reactiveState.disableShowingAnimatedImages.value && rawUrl.value
? getStaticImageUrl(rawUrl.value)
: rawUrl.value
: rawUrl.value,
);
const alt = computed(() => `:${customEmojiName.value}:`);
@@ -41,7 +41,7 @@ let errored = $ref(url.value == null);
<style lang="scss" module>
.root {
height: 2.5em;
height: 2em;
vertical-align: middle;
transition: transform 0.2s ease;

6
packages/frontend/src/components/global/MkError.vue
View File

@@ -3,7 +3,7 @@
<div :class="$style.root">
<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
<MkButton :class="$style.button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
<MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
</div>
</Transition>
</template>
@@ -11,6 +11,10 @@
<script lang="ts" setup>
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n';
const emit = defineEmits<{
(ev: 'retry'): void;
}>();
</script>
<style lang="scss" module>

52
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View File

@@ -1,23 +1,33 @@
<template>
<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
<div :class="$style.tabsInner">
<button v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)">
<div :class="$style.tabInner">
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
<div v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
:class="$style.tabTitle">{{ t.title }}</div>
<Transition v-else @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave"
mode="in-out">
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
</Transition>
<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
<div :class="$style.tabsInner">
<button
v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
>
<div :class="$style.tabInner">
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
<div
v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
:class="$style.tabTitle"
>
{{ t.title }}
</div>
</button>
</div>
<div ref="tabHighlightEl"
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"></div>
<Transition
v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave"
@after-leave="afterLeave"
>
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
</Transition>
</div>
</button>
</div>
<div
ref="tabHighlightEl"
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
></div>
</div>
</template>
<script lang="ts">
@@ -34,7 +44,7 @@ export type Tab = {
</script>
<script lang="ts" setup>
import { onMounted, onUnmounted, watch, nextTick, Transition, shallowRef } from 'vue';
import { onMounted, onUnmounted, watch, nextTick, shallowRef } from 'vue';
import { defaultStore } from '@/store';
const props = withDefaults(defineProps<{
@@ -93,7 +103,7 @@ function onTabWheel(ev: WheelEvent) {
ev.stopPropagation();
(ev.currentTarget as HTMLElement).scrollBy({
left: ev.deltaY,
behavior: 'smooth',
behavior: 'instant',
});
}
return false;
@@ -206,8 +216,8 @@ onUnmounted(() => {
align-items: center;
}
.tabIcon+.tabTitle {
padding-left: 8px;
.tabIcon + .tabTitle {
padding-left: 4px;
}
.tabTitle {

17
packages/frontend/src/components/global/MkPageHeader.vue
View File

@@ -2,9 +2,9 @@
<div v-if="show" ref="el" :class="[$style.root]" :style="{ background: bg }">
<div :class="[$style.upper, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
<MkAvatar :class="$style.avatar" :user="$i" />
<MkAvatar :class="$style.avatar" :user="$i"/>
</div>
<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft" />
<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>
<template v-if="metadata">
<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
@@ -19,7 +19,7 @@
</div>
</div>
</div>
<XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" @update:tab="key => emit('update:tab', key)" :tabs="tabs" :root-el="el" @tab-click="onTabClick"/>
<XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" :tabs="tabs" :root-el="el" @update:tab="key => emit('update:tab', key)" @tab-click="onTabClick"/>
</template>
<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
<template v-for="action in actions">
@@ -28,7 +28,7 @@
</div>
</div>
<div v-if="(narrow && !hideTitle) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<XTabs :class="$style.tabs" :tab="tab" @update:tab="key => emit('update:tab', key)" :tabs="tabs" :root-el="el" @tab-click="onTabClick"/>
<XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :root-el="el" @update:tab="key => emit('update:tab', key)" @tab-click="onTabClick"/>
</div>
</div>
</template>
@@ -36,11 +36,11 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, inject } from 'vue';
import tinycolor from 'tinycolor2';
import XTabs, { Tab } from './MkPageHeader.tabs.vue';
import { scrollToTop } from '@/scripts/scroll';
import { globalEvents } from '@/events';
import { injectPageMetadata } from '@/scripts/page-metadata';
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
import XTabs, { Tab } from './MkPageHeader.tabs.vue'
const props = withDefaults(defineProps<{
tabs?: Tab[];
@@ -96,7 +96,7 @@ function onTabClick(): void {
}
const calcBg = () => {
const rawBg = metadata?.bg || 'var(--bg)';
const rawBg = metadata?.bg ?? 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString();
@@ -147,10 +147,7 @@ onUnmounted(() => {
.tabs:first-child {
margin-left: auto;
}
.tabs:not(:first-child) {
padding-left: 16px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgb(0,0,0) 16px, rgb(0,0,0) 100%);
padding: 0 12px;
}
.tabs {
margin-right: auto;

2
packages/frontend/src/components/global/MkSpacer.vue
View File

@@ -7,7 +7,7 @@
</template>
<script lang="ts" setup>
import { inject, onMounted, onUnmounted, ref } from 'vue';
import { inject } from 'vue';
import { deviceKind } from '@/scripts/device-kind';
const props = withDefaults(defineProps<{

25
packages/frontend/src/components/global/MkTime.vue
View File

@@ -1,6 +1,7 @@
<template>
<time :title="absolute">
<template v-if="mode === 'relative'">{{ relative }}</template>
<template v-if="invalid">{{ i18n.ts._ago.invalid }}</template>
<template v-else-if="mode === 'relative'">{{ relative }}</template>
<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
</time>
@@ -12,18 +13,24 @@ import { i18n } from '@/i18n';
import { dateTimeFormat } from '@/scripts/intl-const';
const props = withDefaults(defineProps<{
time: Date | string;
time: Date | string | number | null;
mode?: 'relative' | 'absolute' | 'detail';
}>(), {
mode: 'relative',
});
const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
const absolute = dateTimeFormat.format(_time);
const _time = props.time == null ? NaN :
typeof props.time === 'number' ? props.time :
(props.time instanceof Date ? props.time : new Date(props.time)).getTime();
const invalid = Number.isNaN(_time);
const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
let now = $shallowRef(new Date());
const relative = $computed(() => {
const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
let now = $ref((new Date()).getTime());
const relative = $computed<string>(() => {
if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
if (invalid) return i18n.ts._ago.invalid;
const ago = (now - _time) / 1000/*ms*/;
return (
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
@@ -39,8 +46,8 @@ const relative = $computed(() => {
let tickId: number;
function tick() {
now = new Date();
const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
now = (new Date()).getTime();
const ago = (now - _time) / 1000/*ms*/;
const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
tickId = window.setTimeout(tick, next);

2
packages/frontend/src/components/global/RouterView.vue
View File

@@ -11,7 +11,7 @@
</template>
<script lang="ts" setup>
import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
import { inject, onBeforeUnmount, provide } from 'vue';
import { Resolved, Router } from '@/nirax';
import { defaultStore } from '@/store';

4
packages/frontend/src/components/mfm.ts
View File

@@ -5,13 +5,11 @@ import MkLink from '@/components/MkLink.vue';
import MkMention from '@/components/MkMention.vue';
import MkEmoji from '@/components/global/MkEmoji.vue';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
import { concat } from '@/scripts/array';
import MkCode from '@/components/MkCode.vue';
import MkGoogle from '@/components/MkGoogle.vue';
import MkSparkle from '@/components/MkSparkle.vue';
import MkA from '@/components/global/MkA.vue';
import { host } from '@/config';
import { MFM_TAGS } from '@/scripts/mfm-tags';
import { defaultStore } from '@/store';
const QUOTE_STYLE = `
@@ -280,7 +278,7 @@ export default defineComponent({
case 'hashtag': {
return [h(MkA, {
key: Math.random(),
to: this.isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.props.hashtag)}`,
to: this.isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`,
style: 'color:var(--hashtag);',
}, `#${token.props.hashtag}`)];
}

1
packages/frontend/src/components/page/page.canvas.vue
View File

@@ -6,7 +6,6 @@
<script lang="ts">
import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
import * as os from '@/os';
import { CanvasBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';

1
packages/frontend/src/components/page/page.counter.vue
View File

@@ -7,7 +7,6 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkButton from '../MkButton.vue';
import * as os from '@/os';
import { CounterVarBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';

3
packages/frontend/src/components/page/page.image.vue
View File

@@ -5,9 +5,8 @@
</template>
<script lang="ts" setup>
import { defineComponent, PropType } from 'vue';
import { PropType } from 'vue';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import * as os from '@/os';
import { ImageBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';

1
packages/frontend/src/components/page/page.number-input.vue
View File

@@ -9,7 +9,6 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkInput from '../MkInput.vue';
import * as os from '@/os';
import { Hpml } from '@/scripts/hpml/evaluator';
import { NumberInputVarBlock } from '@/scripts/hpml/block';

1
packages/frontend/src/components/page/page.radio-button.vue
View File

@@ -8,7 +8,6 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkRadio from '../MkRadio.vue';
import * as os from '@/os';
import { Hpml } from '@/scripts/hpml/evaluator';
import { RadioButtonVarBlock } from '@/scripts/hpml/block';

1
packages/frontend/src/components/page/page.section.vue
View File

@@ -10,7 +10,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent, PropType } from 'vue';
import * as os from '@/os';
import { SectionBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';

1
packages/frontend/src/components/page/page.switch.vue
View File

@@ -7,7 +7,6 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkSwitch from '../MkSwitch.vue';
import * as os from '@/os';
import { Hpml } from '@/scripts/hpml/evaluator';
import { SwitchVarBlock } from '@/scripts/hpml/block';

1
packages/frontend/src/components/page/page.text-input.vue
View File

@@ -9,7 +9,6 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkInput from '../MkInput.vue';
import * as os from '@/os';
import { Hpml } from '@/scripts/hpml/evaluator';
import { TextInputVarBlock } from '@/scripts/hpml/block';

2
packages/frontend/src/components/page/page.textarea-input.vue
View File

@@ -9,9 +9,7 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import MkTextarea from '../MkTextarea.vue';
import * as os from '@/os';
import { Hpml } from '@/scripts/hpml/evaluator';
import { HpmlTextInput } from '@/scripts/hpml';
import { TextInputVarBlock } from '@/scripts/hpml/block';
export default defineComponent({

3
packages/frontend/src/components/page/page.vue
View File

@@ -5,12 +5,11 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
import { defineComponent, onMounted, nextTick, PropType } from 'vue';
import XBlock from './page.block.vue';
import { Hpml } from '@/scripts/hpml/evaluator';
import { url } from '@/config';
import { $i } from '@/account';
import { defaultStore } from '@/store';
export default defineComponent({
components: {

3
packages/frontend/src/const.ts
View File

@@ -43,3 +43,6 @@ https://github.com/sindresorhus/file-type/blob/main/supported.js
https://github.com/sindresorhus/file-type/blob/main/core.js
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
*/
export const notificationTypes = ['follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollEnded', 'receiveFollowRequest', 'followRequestAccepted', 'achievementEarned', 'app'] as const;
export const obsoleteNotificationTypes = ['pollVote', 'groupInvited'] as const;

17
packages/frontend/src/init.ts
View File

@@ -25,7 +25,7 @@ import JSON5 from 'json5';
import widgets from '@/widgets';
import directives from '@/directives';
import components from '@/components';
import { version, ui, lang, host, updateLocale } from '@/config';
import { version, ui, lang, updateLocale } from '@/config';
import { applyTheme } from '@/scripts/theme';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
import { i18n, updateI18n } from '@/i18n';
@@ -36,7 +36,6 @@ import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
import { defaultStore, ColdDeviceStorage } from '@/store';
import { fetchInstance, instance } from '@/instance';
import { makeHotkey } from '@/scripts/hotkey';
import { search } from '@/scripts/search';
import { deviceKind } from '@/scripts/device-kind';
import { initializeSw } from '@/scripts/initialize-sw';
import { reloadChannel } from '@/scripts/unison-reload';
@@ -47,6 +46,7 @@ import { deckStore } from './ui/deck/deck-store';
import { miLocalStorage } from './local-storage';
import { claimAchievement, claimedAchievements } from './scripts/achievements';
import { fetchCustomEmojis } from './custom-emojis';
import { mainRouter } from './router';
console.info(`Misskey v${version}`);
@@ -352,7 +352,9 @@ const hotkeys = {
'd': (): void => {
defaultStore.set('darkMode', !defaultStore.state.darkMode);
},
's': search,
's': (): void => {
mainRouter.push('/search');
}
};
if ($i) {
@@ -505,15 +507,6 @@ if ($i) {
updateAccount({ hasUnreadSpecifiedNotes: false });
});
main.on('readAllMessagingMessages', () => {
updateAccount({ hasUnreadMessagingMessage: false });
});
main.on('unreadMessagingMessage', () => {
updateAccount({ hasUnreadMessagingMessage: true });
sound.play('chatBg');
});
main.on('readAllAntennas', () => {
updateAccount({ hasUnreadAntenna: false });
});

2
packages/frontend/src/instance.ts
View File

@@ -1,4 +1,4 @@
import { computed, reactive } from 'vue';
import { reactive } from 'vue';
import * as Misskey from 'misskey-js';
import { api } from './os';
import { miLocalStorage } from './local-storage';

28
packages/frontend/src/navbar.ts
View File

@@ -1,7 +1,7 @@
import { computed, ref, reactive } from 'vue';
import { computed, reactive } from 'vue';
import { $i } from './account';
import { miLocalStorage } from './local-storage';
import { search } from '@/scripts/search';
import { openInstanceMenu } from './ui/_common_/common';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { ui } from '@/config';
@@ -15,13 +15,6 @@ export const navbarItemDef = reactive({
indicated: computed(() => $i != null && $i.hasUnreadNotification),
to: '/my/notifications',
},
messaging: {
title: i18n.ts.messaging,
icon: 'ti ti-messages',
show: computed(() => $i != null),
indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
to: '/my/messaging',
},
drive: {
title: i18n.ts.drive,
icon: 'ti ti-cloud',
@@ -49,7 +42,7 @@ export const navbarItemDef = reactive({
search: {
title: i18n.ts.search,
icon: 'ti ti-search',
action: () => search(),
to: '/search',
},
lists: {
title: i18n.ts.lists,
@@ -57,14 +50,6 @@ export const navbarItemDef = reactive({
show: computed(() => $i != null),
to: '/my/lists',
},
/*
groups: {
title: i18n.ts.groups,
icon: 'ti ti-users',
show: computed(() => $i != null),
to: '/my/groups',
},
*/
antennas: {
title: i18n.ts.antennas,
icon: 'ti ti-antenna',
@@ -137,6 +122,13 @@ export const navbarItemDef = reactive({
}], ev.currentTarget ?? ev.target);
},
},
about: {
title: i18n.ts.about,
icon: 'ti ti-info-circle',
action: (ev) => {
openInstanceMenu(ev);
},
},
reload: {
title: i18n.ts.reload,
icon: 'ti ti-refresh',

2
packages/frontend/src/nirax.ts
View File

@@ -1,7 +1,7 @@
// NIRAX --- A lightweight router
import { EventEmitter } from 'eventemitter3';
import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
import { Component, shallowRef, ShallowRef } from 'vue';
import { pleaseLogin } from '@/scripts/please-login';
import { safeURIDecode } from '@/scripts/safe-uri-decode';

14
packages/frontend/src/os.ts
View File

@@ -246,7 +246,10 @@ export function inputText(props: {
title?: string | null;
text?: string | null;
placeholder?: string | null;
autocomplete?: string;
default?: string | null;
minLength?: number;
maxLength?: number;
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: string;
}> {
@@ -257,7 +260,10 @@ export function inputText(props: {
input: {
type: props.type,
placeholder: props.placeholder,
autocomplete: props.autocomplete,
default: props.default,
minLength: props.minLength,
maxLength: props.maxLength,
},
}, {
done: result => {
@@ -271,6 +277,7 @@ export function inputNumber(props: {
title?: string | null;
text?: string | null;
placeholder?: string | null;
autocomplete?: string;
default?: number | null;
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: number;
@@ -282,6 +289,7 @@ export function inputNumber(props: {
input: {
type: 'number',
placeholder: props.placeholder,
autocomplete: props.autocomplete,
default: props.default,
},
}, {
@@ -595,9 +603,3 @@ export function checkExistence(fileData: ArrayBuffer): Promise<any> {
});
});
}*/
export const shownNoteIds = new Set();
window.setInterval(() => {
shownNoteIds.clear();
}, 1000 * 60 * 5);

11
packages/frontend/src/pages/about-misskey.vue
View File

@@ -84,6 +84,10 @@
</div>
<p>{{ i18n.ts._aboutMisskey.morePatrons }}</p>
</FormSection>
<FormSection>
<template #label>Credits</template>
<p>Misskeyで使われる画像の一部は、許可を得て「あの子がこっちを見てるメーカー」で作成したものが含まれます。</p>
</FormSection>
</div>
</MkSpacer>
</div>
@@ -111,6 +115,12 @@ const patronsWithIcon = [{
}, {
name: 'だれかさん',
icon: 'https://misskey-hub.net/patrons/f7409b5e5a88477a9b9d740c408de125.jpg',
}, {
name: 'narazaka',
icon: 'https://misskey-hub.net/patrons/e3affff31ffb4877b1196c7360abc3e5.jpg',
}, {
name: 'ひとぅ',
icon: 'https://misskey-hub.net/patrons/8cc0d0a0a6d84c88bca1aedabf6ed5ab.jpg',
}];
const patrons = [
@@ -193,6 +203,7 @@ const patrons = [
'ThatOneCalculator',
'pixeldesu',
'あめ玉',
'氷月氷華里',
];
let thereIsTreasure = $ref($i && !claimedAchievements.includes('foundTreasure'));

5
packages/frontend/src/pages/about.emojis.vue
View File

@@ -31,14 +31,11 @@
</template>
<script lang="ts" setup>
import { defineComponent, computed, watch } from 'vue';
import { watch } from 'vue';
import XEmoji from './emojis.emoji.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkFoldableSection from '@/components/MkFoldableSection.vue';
import MkTab from '@/components/MkTab.vue';
import * as os from '@/os';
import { customEmojis, customEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
import { i18n } from '@/i18n';
import * as Misskey from 'misskey-js';

3
packages/frontend/src/pages/about.federation.vue
View File

@@ -46,15 +46,12 @@
<script lang="ts" setup>
import { computed } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkPagination from '@/components/MkPagination.vue';
import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
import FormSplit from '@/components/form/split.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { dateString } from '@/filters/date';
let host = $ref('');
let state = $ref('federating');

Some files were not shown because too many files have changed in this diff Show More