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

2
src/frontend/init.tsx
View file

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

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

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

21
src/frontend/style.scss
View file

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