b3
This commit is contained in:
ThatOneCalculator
commit
db97dff0cb
9 changed files with 285 additions and 71 deletions
|
|
@ -16,6 +16,7 @@ You should also include the user name that made the change.
|
||||||
|
|
||||||
### Bugfixes
|
### Bugfixes
|
||||||
- Client: 一度作ったwebhookの設定画面を開こうとするとページがフリーズする @syuilo
|
- Client: 一度作ったwebhookの設定画面を開こうとするとページがフリーズする @syuilo
|
||||||
|
- Client: MiAuth認証ページが機能していない @syuilo
|
||||||
|
|
||||||
## 12.117.1 (2022/07/19)
|
## 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.**
|
- **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.
|
- 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
|
## Notes
|
||||||
### How to resolve conflictions occurred at yarn.lock?
|
### How to resolve conflictions occurred at yarn.lock?
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "misskey",
|
"name": "misskey",
|
||||||
"version": "12.118.0.b2-calc",
|
"version": "12.118.0.b3-calc",
|
||||||
"codename": "indigo",
|
"codename": "indigo",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
||||||
|
|
@ -138,6 +138,8 @@
|
||||||
</button>
|
</button>
|
||||||
<p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
|
<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>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">
|
<a href="/flush">
|
||||||
<button class="button-small">
|
<button class="button-small">
|
||||||
<span class="button-label-small">Clear preferences and cache</span>
|
<span class="button-label-small">Clear preferences and cache</span>
|
||||||
|
|
|
||||||
|
|
@ -337,6 +337,9 @@ onBeforeUnmount(() => {
|
||||||
&.asDrawer {
|
&.asDrawer {
|
||||||
padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
|
padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-radius: 24px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
|
||||||
> .item {
|
> .item {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,88 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="$i">
|
<MkSpacer :content-max="800">
|
||||||
<div v-if="state == 'waiting'" class="waiting _section">
|
<div v-if="$i">
|
||||||
<div class="_content">
|
<div v-if="state == 'waiting'" class="waiting _section">
|
||||||
<MkLoading/>
|
<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>
|
</div>
|
||||||
<div v-if="state == 'denied'" class="denied _section">
|
<div v-else class="signin">
|
||||||
<div class="_content">
|
<MkSignin @login="onLogin"/>
|
||||||
<p>{{ $ts._auth.denied }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="state == 'accepted'" class="accepted _section">
|
</MkSpacer>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { } from 'vue';
|
||||||
import MkSignin from '@/components/signin.vue';
|
import MkSignin from '@/components/signin.vue';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { login } from '@/account';
|
import { $i, login } from '@/account';
|
||||||
import { appendQuery, query } from '@/scripts/url';
|
import { appendQuery, query } from '@/scripts/url';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps<{
|
||||||
components: {
|
session: string;
|
||||||
MkSignin,
|
callback?: string;
|
||||||
MkButton,
|
name: string;
|
||||||
},
|
icon: string;
|
||||||
props: ['session', 'callback', 'name', 'icon', 'permission'],
|
permission: string; // コンマ区切り
|
||||||
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,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.state = 'accepted';
|
const _permissions = props.permission.split(',');
|
||||||
if (this.callback) {
|
|
||||||
location.href = appendQuery(this.callback, query({
|
let state = $ref<string | null>(null);
|
||||||
session: this.session,
|
|
||||||
}));
|
async function accept(): Promise<void> {
|
||||||
}
|
state = 'waiting';
|
||||||
},
|
await os.api('miauth/gen-token', {
|
||||||
deny() {
|
session: props.session,
|
||||||
this.state = 'denied';
|
name: props.name,
|
||||||
},
|
iconUrl: props.icon,
|
||||||
onLogin(res) {
|
permission: _permissions,
|
||||||
login(res.i);
|
});
|
||||||
},
|
|
||||||
},
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ export const getBuiltinThemes = () => Promise.all(
|
||||||
'l-vivid',
|
'l-vivid',
|
||||||
'l-cherry',
|
'l-cherry',
|
||||||
'l-sushi',
|
'l-sushi',
|
||||||
|
'l-u0',
|
||||||
|
|
||||||
'd-rosepine',
|
'd-rosepine',
|
||||||
'd-rosepinemoon',
|
'd-rosepinemoon',
|
||||||
|
|
@ -38,6 +39,7 @@ export const getBuiltinThemes = () => Promise.all(
|
||||||
'd-green-orange',
|
'd-green-orange',
|
||||||
'd-cherry',
|
'd-cherry',
|
||||||
'd-ice',
|
'd-ice',
|
||||||
|
'd-u0',
|
||||||
].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
|
].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
88
packages/client/src/themes/d-u0.json5
Normal file
88
packages/client/src/themes/d-u0.json5
Normal file
|
|
@ -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',
|
||||||
|
},
|
||||||
|
}
|
||||||
87
packages/client/src/themes/l-u0.json5
Normal file
87
packages/client/src/themes/l-u0.json5
Normal file
|
|
@ -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 a new issue