Unfloyded/misskey-tools
0
0
Fork 0
Code Activity

wip

Browse source
This commit is contained in:
xeltica 2021-09-07 20:50:09 +09:00
parent d94f2c91fb
commit 17a12d127c
5 changed files with 78 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/components/SessionDataPage.tsx
View file

@ -14,7 +14,7 @@ export const SessionDataPage: React.VFC = () => {
<Skeleton width="100%" height="160px" />
</div>
) : (
<>
<div className="fade">
{session.data && (
<section>
<p>
@ -39,7 +39,7 @@ export const SessionDataPage: React.VFC = () => {
{score.data && (
<section>
<h2>みす廃データ</h2>
<table className="table fluid">
<table className="table fluid shadow-2" style={{border: 'none'}}>
<thead>
<tr>
<th>内容</th>
@ -67,6 +67,6 @@ export const SessionDataPage: React.VFC = () => {
</table>
</section>
)}
</>
</div>
);
};

93
src/frontend/components/SettingPage.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useReducer } from 'react';
import React, { useEffect, useMemo, useReducer } from 'react';
import { AlertMode } from '../../common/types/alert-mode';
import { IUser } from '../../common/types/user';
import { Visibility } from '../../common/types/visibility';
@ -42,52 +42,63 @@ export const SettingPage: React.VFC = () => {
}
}, [session.data]);
const saveButton = useMemo(() => (
<button className="btn primary" style={{alignSelf: 'flex-end'}}>
保存
</button>
), []);
return session.isLoading || !data ? (
<div className="skeleton" style={{width: '100%', height: '128px'}}></div>
) : (
<div className="vstack">
<div>
<label htmlFor="alertMode" className="input-field">スコア通知方法</label>
<select name="alertMode" className="input-field" value={draft.alertMode} onChange={(e) => {
dispatchDraft({ alertMode: e.target.value as AlertMode });
}}>
<option value="note">自動的にノートを投稿</option>
<option value="notification">Misskeyに通知(標準)</option>
<option value="nothing">通知しない</option>
</select>
{draft.alertMode === 'notification' && (
<div className="alert bg-danger mt-2">
<i className="icon bi bi-exclamation-circle"></i>
「Misskey に通知」オプションは古いMisskeyでは動作しません。
<div className="vstack fade">
<div className="card">
<div className="body vstack">
<h1>スコア通知方法</h1>
<div>
<select name="alertMode" className="input-field" value={draft.alertMode} onChange={(e) => {
dispatchDraft({ alertMode: e.target.value as AlertMode });
}}>
<option value="note">自動的にノートを投稿</option>
<option value="notification">Misskeyに通知(標準)</option>
<option value="nothing">通知しない</option>
</select>
{draft.alertMode === 'notification' && (
<div className="alert bg-danger mt-2">
<i className="icon bi bi-exclamation-circle"></i>
「Misskey に通知」オプションは古いMisskeyでは動作しません。
</div>
)}
</div>
)}
</div>
{ draft.alertMode === 'note' && (
<div>
<label htmlFor="visibility" className="input-field">公開範囲</label>
<select name="visibility" className="input-field" value={draft.visibility} onChange={(e) => {
dispatchDraft({ visibility: e.target.value as Visibility });
}}>
<option value="public">パブリック</option>
<option value="home">ホーム</option>
<option value="followers">フォロワー</option>
</select>
<label className="input-switch mt-2">
<input type="checkbox" />
<div className="switch"></div>
<span>ローカル限定</span>
</label>
{ draft.alertMode === 'note' && (
<div>
<label htmlFor="visibility" className="input-field">公開範囲</label>
<select name="visibility" className="input-field" value={draft.visibility} onChange={(e) => {
dispatchDraft({ visibility: e.target.value as Visibility });
}}>
<option value="public">パブリック</option>
<option value="home">ホーム</option>
<option value="followers">フォロワー</option>
</select>
<label className="input-switch mt-2">
<input type="checkbox" />
<div className="switch"></div>
<span>ローカル限定</span>
</label>
</div>
)}
{saveButton}
</div>
</div>
<div className="card">
<div className="body vstack">
<h1>テンプレート</h1>
<textarea className="input-field" value={draft.template ?? defaultTemplate} style={{height: 228}} onChange={(e) => {
dispatchDraft({ template: e.target.value });
}} />
{saveButton}
</div>
)}
<div>
<label htmlFor="template" className="input-field">テンプレート</label>
<textarea className="input-field" value={draft.template ?? defaultTemplate} style={{height: 256}} onChange={(e) => {
dispatchDraft({ template: e.target.value });
}} />
</div>
<button className="btn primary">
設定を保存する
</button>
</div>
);
};

2
src/frontend/init.tsx
View file

@ -2,6 +2,8 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './App';
document.body.classList.add('dark');
// cookieにトークンが入ってたらlocalStorageに移し替える
const token = document.cookie
.split('; ')

6
src/frontend/pages/index.session.tsx
View file

@ -29,10 +29,10 @@ export const IndexSessionPage: React.VFC = () => {
<Header />
<div className="xarticle card" style={{borderRadius: 'var(--radius)'}}>
<Tab items={items} selected={selectedTab} onSelect={setSelectedTab}/>
<article className="container">
{component}
</article>
</div>
<article className="xarticle mt-4">
{component}
</article>
</>
);
};

21
src/frontend/style.scss
View file

@ -6,25 +6,29 @@ body {
.xarticle {
margin: auto;
max-width: 720px;
overflow: hidden;
}
.skeleton {
border-radius: var(--radius);
background: var(--tone-1);
background: var(--tone-2);
position: relative;
overflow: hidden;
&::after {
content: "";
inset: 0;
position: absolute;
background: linear-gradient(90deg, transparent, var(--tone-2) 50%, transparent 100%);
background: linear-gradient(90deg, transparent, var(--tone-3) 50%, transparent 100%);
animation: 1.2s ease-out 0s infinite skeleton;
}
}
.fade {
animation: 0.3s ease-out 0s fadeIn;
}
.tab {
display: flex;
flex-wrap: wrap;
background: var(--panel);
.item {
position: relative;
@ -67,3 +71,14 @@ body {
transform: translateX(300%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
}