This commit is contained in:
ThatOneCalculator
commit
db97dff0cb
|
|
@ -16,6 +16,7 @@ You should also include the user name that made the change.
|
|||
|
||||
### Bugfixes
|
||||
- Client: 一度作ったwebhookの設定画面を開こうとするとページがフリーズする @syuilo
|
||||
- Client: MiAuth認証ページが機能していない @syuilo
|
||||
|
||||
## 12.117.1 (2022/07/19)
|
||||
|
||||
|
|
|
|||
|
|
@ -140,6 +140,34 @@ Misskey uses Vue(v3) as its front-end framework.
|
|||
- **When creating a new component, please use the Composition API (with [setup sugar](https://v3.vuejs.org/api/sfc-script-setup.html) and [ref sugar](https://github.com/vuejs/rfcs/discussions/369)) instead of the Options API.**
|
||||
- Some of the existing components are implemented in the Options API, but it is an old implementation. Refactors that migrate those components to the Composition API are also welcome.
|
||||
|
||||
## nirax
|
||||
niraxは、Misskeyで使用しているオリジナルのフロントエンドルーティングシステムです。
|
||||
**vue-routerから影響を多大に受けているので、まずはvue-routerについて学ぶことをお勧めします。**
|
||||
|
||||
### ルート定義
|
||||
ルート定義は、以下の形式のオブジェクトの配列です。
|
||||
|
||||
``` ts
|
||||
{
|
||||
name?: string;
|
||||
path: string;
|
||||
component: Component;
|
||||
query?: Record<string, string>;
|
||||
loginRequired?: boolean;
|
||||
hash?: string;
|
||||
globalCacheKey?: string;
|
||||
children?: RouteDef[];
|
||||
}
|
||||
```
|
||||
|
||||
> **Warning**
|
||||
> 現状、ルートは定義された順に評価されます。
|
||||
> たとえば、`/foo/:id`ルート定義の次に`/foo/bar`ルート定義がされていた場合、後者がマッチすることはありません。
|
||||
|
||||
### 複数のルーター
|
||||
vue-routerとの最大の違いは、niraxは複数のルーターが存在することを許可している点です。
|
||||
これにより、アプリ内ウィンドウでブラウザとは個別にルーティングすることなどが可能になります。
|
||||
|
||||
## Notes
|
||||
### How to resolve conflictions occurred at yarn.lock?
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "misskey",
|
||||
"version": "12.118.0.b2-calc",
|
||||
"version": "12.118.0.b3-calc",
|
||||
"codename": "indigo",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -138,6 +138,8 @@
|
|||
</button>
|
||||
<p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
|
||||
<p>If the problem persists after refreshing, please contact your instance's administrator.<br>You may also try the following options:</p>
|
||||
<p>Update your os and browser.</p>
|
||||
<p>Disable an adblocker.</p>
|
||||
<a href="/flush">
|
||||
<button class="button-small">
|
||||
<span class="button-label-small">Clear preferences and cache</span>
|
||||
|
|
|
|||
|
|
@ -337,6 +337,9 @@ onBeforeUnmount(() => {
|
|||
&.asDrawer {
|
||||
padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
> .item {
|
||||
font-size: 1em;
|
||||
|
|
|
|||
|
|
@ -1,85 +1,88 @@
|
|||
<template>
|
||||
<div v-if="$i">
|
||||
<div v-if="state == 'waiting'" class="waiting _section">
|
||||
<div class="_content">
|
||||
<MkLoading/>
|
||||
<MkSpacer :content-max="800">
|
||||
<div v-if="$i">
|
||||
<div v-if="state == 'waiting'" class="waiting _section">
|
||||
<div class="_content">
|
||||
<MkLoading/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="state == 'denied'" class="denied _section">
|
||||
<div class="_content">
|
||||
<p>{{ i18n.ts._auth.denied }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="state == 'accepted'" class="accepted _section">
|
||||
<div class="_content">
|
||||
<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
|
||||
<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="_section">
|
||||
<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
|
||||
<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
|
||||
<div class="_content">
|
||||
<p>{{ i18n.ts._auth.permissionAsk }}</p>
|
||||
<ul>
|
||||
<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="_footer">
|
||||
<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
|
||||
<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="state == 'denied'" class="denied _section">
|
||||
<div class="_content">
|
||||
<p>{{ $ts._auth.denied }}</p>
|
||||
</div>
|
||||
<div v-else class="signin">
|
||||
<MkSignin @login="onLogin"/>
|
||||
</div>
|
||||
<div v-else-if="state == 'accepted'" class="accepted _section">
|
||||
<div class="_content">
|
||||
<p v-if="callback">{{ $ts._auth.callback }}<MkEllipsis/></p>
|
||||
<p v-else>{{ $ts._auth.pleaseGoBack }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="_section">
|
||||
<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
|
||||
<div v-else class="_title">{{ $ts._auth.shareAccessAsk }}</div>
|
||||
<div class="_content">
|
||||
<p>{{ $ts._auth.permissionAsk }}</p>
|
||||
<ul>
|
||||
<li v-for="p in permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="_footer">
|
||||
<MkButton inline @click="deny">{{ $ts.cancel }}</MkButton>
|
||||
<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="signin">
|
||||
<MkSignin @login="onLogin"/>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkSignin from '@/components/signin.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import * as os from '@/os';
|
||||
import { login } from '@/account';
|
||||
import { $i, login } from '@/account';
|
||||
import { appendQuery, query } from '@/scripts/url';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkSignin,
|
||||
MkButton,
|
||||
},
|
||||
props: ['session', 'callback', 'name', 'icon', 'permission'],
|
||||
data() {
|
||||
return {
|
||||
state: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async accept() {
|
||||
this.state = 'waiting';
|
||||
await os.api('miauth/gen-token', {
|
||||
session: this.session,
|
||||
name: this.name,
|
||||
iconUrl: this.icon,
|
||||
permission: this.permission,
|
||||
});
|
||||
const props = defineProps<{
|
||||
session: string;
|
||||
callback?: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
permission: string; // コンマ区切り
|
||||
}>();
|
||||
|
||||
this.state = 'accepted';
|
||||
if (this.callback) {
|
||||
location.href = appendQuery(this.callback, query({
|
||||
session: this.session,
|
||||
}));
|
||||
}
|
||||
},
|
||||
deny() {
|
||||
this.state = 'denied';
|
||||
},
|
||||
onLogin(res) {
|
||||
login(res.i);
|
||||
},
|
||||
},
|
||||
});
|
||||
const _permissions = props.permission.split(',');
|
||||
|
||||
let state = $ref<string | null>(null);
|
||||
|
||||
async function accept(): Promise<void> {
|
||||
state = 'waiting';
|
||||
await os.api('miauth/gen-token', {
|
||||
session: props.session,
|
||||
name: props.name,
|
||||
iconUrl: props.icon,
|
||||
permission: _permissions,
|
||||
});
|
||||
|
||||
state = 'accepted';
|
||||
if (props.callback) {
|
||||
location.href = appendQuery(props.callback, query({
|
||||
session: props.session,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function deny(): void {
|
||||
state = 'denied';
|
||||
}
|
||||
|
||||
function onLogin(res): void {
|
||||
login(res.i);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export const getBuiltinThemes = () => Promise.all(
|
|||
'l-vivid',
|
||||
'l-cherry',
|
||||
'l-sushi',
|
||||
'l-u0',
|
||||
|
||||
'd-rosepine',
|
||||
'd-rosepinemoon',
|
||||
|
|
@ -38,6 +39,7 @@ export const getBuiltinThemes = () => Promise.all(
|
|||
'd-green-orange',
|
||||
'd-cherry',
|
||||
'd-ice',
|
||||
'd-u0',
|
||||
].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
id: '7a5bc13b-df8f-4d44-8e94-4452f0c634bb',
|
||||
base: 'dark',
|
||||
name: 'Mi U0 Dark',
|
||||
props: {
|
||||
X2: ':darken<2<@panel',
|
||||
X3: 'rgba(255, 255, 255, 0.05)',
|
||||
X4: 'rgba(255, 255, 255, 0.1)',
|
||||
X5: 'rgba(255, 255, 255, 0.05)',
|
||||
X6: 'rgba(255, 255, 255, 0.15)',
|
||||
X7: 'rgba(255, 255, 255, 0.05)',
|
||||
X8: ':lighten<5<@accent',
|
||||
X9: ':darken<5<@accent',
|
||||
bg: '#172426',
|
||||
fg: '#dadada',
|
||||
X10: ':alpha<0.4<@accent',
|
||||
X11: 'rgba(0, 0, 0, 0.3)',
|
||||
X12: 'rgba(255, 255, 255, 0.1)',
|
||||
X13: 'rgba(255, 255, 255, 0.15)',
|
||||
X14: ':alpha<0.5<@navBg',
|
||||
X15: ':alpha<0<@panel',
|
||||
X16: ':alpha<0.7<@panel',
|
||||
X17: ':alpha<0.8<@bg',
|
||||
cwBg: '#687390',
|
||||
cwFg: '#393f4f',
|
||||
link: '@accent',
|
||||
warn: '#ecb637',
|
||||
badge: '#31b1ce',
|
||||
error: '#ec4137',
|
||||
focus: ':alpha<0.3<@accent',
|
||||
navBg: '@panel',
|
||||
navFg: '@fg',
|
||||
panel: ':lighten<3<@bg',
|
||||
popup: ':lighten<3<@panel',
|
||||
accent: '#00a497',
|
||||
header: ':alpha<0.7<@panel',
|
||||
infoBg: '#253142',
|
||||
infoFg: '#fff',
|
||||
renote: '@accent',
|
||||
shadow: 'rgba(0, 0, 0, 0.3)',
|
||||
divider: 'rgba(255, 255, 255, 0.1)',
|
||||
hashtag: '#e6b422',
|
||||
mention: '@accent',
|
||||
modalBg: 'rgba(0, 0, 0, 0.5)',
|
||||
success: '#86b300',
|
||||
buttonBg: 'rgba(255, 255, 255, 0.05)',
|
||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||
acrylicBg: ':alpha<0.5<@bg',
|
||||
cwHoverBg: '#707b97',
|
||||
indicator: '@accent',
|
||||
mentionMe: '@mention',
|
||||
messageBg: '@bg',
|
||||
navActive: '@accent',
|
||||
accentedBg: ':alpha<0.15<@accent',
|
||||
codeNumber: '#cfff9e',
|
||||
codeString: '#ffb675',
|
||||
fgOnAccent: '#fff',
|
||||
infoWarnBg: '#42321c',
|
||||
infoWarnFg: '#ffbd3e',
|
||||
navHoverFg: ':lighten<17<@fg',
|
||||
codeBoolean: '#c59eff',
|
||||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
navIndicator: '@indicator',
|
||||
accentLighten: ':lighten<10<@accent',
|
||||
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
buttonGradateA: '@accent',
|
||||
buttonGradateB: ':hue<20<@accent',
|
||||
htmlThemeColor: '@bg',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
|
||||
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||
deckDivider: '#142022',
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
{
|
||||
id: 'e2c940b5-6e9a-4c03-b738-261c720c426d',
|
||||
base: 'light',
|
||||
name: 'Mi U0 Light',
|
||||
props: {
|
||||
X2: ':darken<2<@panel',
|
||||
X3: 'rgba(255, 255, 255, 0.05)',
|
||||
X4: 'rgba(255, 255, 255, 0.1)',
|
||||
X5: 'rgba(255, 255, 255, 0.05)',
|
||||
X6: 'rgba(255, 255, 255, 0.15)',
|
||||
X7: 'rgba(255, 255, 255, 0.05)',
|
||||
X8: ':lighten<5<@accent',
|
||||
X9: ':darken<5<@accent',
|
||||
bg: '#e7e7eb',
|
||||
fg: '#5f5f5f',
|
||||
X10: ':alpha<0.4<@accent',
|
||||
X11: 'rgba(0, 0, 0, 0.3)',
|
||||
X12: 'rgba(255, 255, 255, 0.1)',
|
||||
X13: 'rgba(255, 255, 255, 0.15)',
|
||||
X14: ':alpha<0.5<@navBg',
|
||||
X15: ':alpha<0<@panel',
|
||||
X16: ':alpha<0.7<@panel',
|
||||
X17: ':alpha<0.8<@bg',
|
||||
cwBg: '#687390',
|
||||
cwFg: '#393f4f',
|
||||
link: '@accent',
|
||||
warn: '#ecb637',
|
||||
badge: '#31b1ce',
|
||||
error: '#ec4137',
|
||||
focus: ':alpha<0.3<@accent',
|
||||
navBg: '@panel',
|
||||
navFg: '@fg',
|
||||
panel: ':lighten<3<@bg',
|
||||
popup: ':lighten<3<@panel',
|
||||
accent: '#478384',
|
||||
header: ':alpha<0.7<@panel',
|
||||
infoBg: '#253142',
|
||||
infoFg: '#fff',
|
||||
renote: '@accent',
|
||||
shadow: 'rgba(0, 0, 0, 0.3)',
|
||||
divider: '#4646461a',
|
||||
hashtag: '#1f3134',
|
||||
mention: '@accent',
|
||||
modalBg: 'rgba(0, 0, 0, 0.5)',
|
||||
success: '#86b300',
|
||||
buttonBg: '#0000000d',
|
||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||
acrylicBg: ':alpha<0.5<@bg',
|
||||
cwHoverBg: '#707b97',
|
||||
indicator: '@accent',
|
||||
mentionMe: '@mention',
|
||||
messageBg: '@bg',
|
||||
navActive: '@accent',
|
||||
accentedBg: ':alpha<0.15<@accent',
|
||||
codeNumber: '#cfff9e',
|
||||
codeString: '#ffb675',
|
||||
fgOnAccent: '#fff',
|
||||
infoWarnBg: '#42321c',
|
||||
infoWarnFg: '#ffbd3e',
|
||||
navHoverFg: ':lighten<17<@fg',
|
||||
codeBoolean: '#c59eff',
|
||||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
navIndicator: '@indicator',
|
||||
accentLighten: ':lighten<10<@accent',
|
||||
buttonHoverBg: '#0000001a',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
buttonGradateA: '@accent',
|
||||
buttonGradateB: ':hue<20<@accent',
|
||||
htmlThemeColor: '@bg',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
|
||||
scrollbarHandle: '#74747433',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue