thedesk/app/setting.html
2018-08-17 02:21:40 +09:00

373 lines
20 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<title>Settings - TheDesk</title>
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="./css/materialize.css" type="text/css" rel="stylesheet">
<link href="./css/themes.css" type="text/css" rel="stylesheet">
<link href="./css/master.css" type="text/css" rel="stylesheet">
<link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
<meta charset="utf-8">
</head>
<body id="mainView" style="overflow-y:scroll">
<script type="text/javascript" src="./js/common/jquery.js"></script>
<script type="text/javascript" src="./js/platform/first.js"></script>
<script type="text/javascript" src="./js/common/materialize.js"></script>
<script type="text/javascript" src="./js/lang/setting.lang.js"></script>
<script>var lang="en";</script>
<h4>Preferences</h4>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">desktop_windows</i>System Preferences
</div>
<div class="collapsible-body">
<h5>Languages</h5>
<a href="language.html" class="btn waves-effect indigo nex" style="width:100%; max-width:200px;">Change</a><br>
<h5>Import and export of preferences</h5>
<button onclick="exportSettings()" class="btn waves-effect lime darken-3" style="width:100%; max-width:200px;">Export</button>
<button onclick="importSettings()" class="btn waves-effect cyan darken-3" style="width:100%; max-width:200px;">Import</button>
<h5>Themes</h5>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
<label for="black">Black</label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
<label for="white">White</label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
<br>
<h5>Popup notification(on window)</h5>Hide to set "0"
<br>
<input type="text" style="width:50px" id="popup">sec
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
<br>
<h5>Native notification</h5>
This does not work on Windows 10.<br><a onclick="notftest()" class="pointer">Notification test</a>
<br>
<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_yes" value="yes" />
<label for="ntf_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_no" value="no" />
<label for="ntf_no">No</label>
<br>
<h5>Minimam width of columns</h5>Scroll bar will be shown when your window size is more than ammounts of columns.
<br>
<input type="text" style="width:50px" id="width">pxabove
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
<br>
<h5>Font</h5>
Set local font<br>
<input type="text" style="width:150px" id="font">
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
<br>
<h5>Font size</h5>
<span style="font-size:15px">15px(absolute value)</span>
<br>
<input type="text" style="width:50px" id="size">px
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">reorder</i>Timeline Preferences
</div>
<div class="collapsible-body">
<h5>Time format</h5>Relative format:"1 minutes ago","3 days ago"
<br>Absolute format:"23:25:21","2017/12/30 23:59:00"
<br>Mixed format:toots posted today are relative-format, others are absolute-format.
<br>
<input class="with-gap" onchange="settings()" onchange="settings()" name="time" type="radio" id="relative" value="relative" />
<label for="relative">Relative</label>
<input class="with-gap" onchange="settings()" name="time" type="radio" id="absolute" value="absolute" />
<label for="absolute">Absoltue</label>
<input class="with-gap" onchange="settings()" name="time" type="radio" id="double" value="double" />
<label for="double">Both relative and absolute</label>
<input class="with-gap" onchange="settings()" name="time" type="radio" id="medium" value="medium" />
<label for="medium">Mixed</label>
<h5>Instance unique locale</h5>This value is available on some Japanese instances
<br>
<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_yes" value="yes" />
<label for="ul_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_no" value="no" />
<label for="ul_no">No</label>
<br>
<h5>Hide NSFW pictures</h5>Strong blur effect
<br>
<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_yes" value="yes" />
<label for="n_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_no" value="no" />
<label for="n_no">No</label>
<br>
<h5>Hide CW contents</h5>
<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_yes" value="yes" />
<label for="c_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_no" value="no" />
<label for="c_no">No</label>
<br>
<h5>Animated GIF images animation</h5>
<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_yes" value="yes" />
<label for="g_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_no" value="no" />
<label for="g_no">No</label>
<br>
<h5>Tag TL Search</h5>
<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_all" value="all" />
<label for="t_all">Use federated network</label>
<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_local" value="local" />
<label for="t_local">Use local network</label>
<br>
<h5>Show via</h5>
<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_yes" value="yes" />
<label for="via_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_hide" value="hide" />
<label for="via_hide">No</label>
<br>
<h5>Hide action buttons without mouseover</h5>
You may feel 'mouseover' is unconfortable:(<br>
<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
<label for="mov_yes">Mouseover to show</label>
<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
<label for="mov_click">Click to show</label>
<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
<label for="mov_no">No</label>
<br>
<h5>Show Notification marker, red colored bell and counter(if you show a notification column.)</h5>
<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
<label for="notfm_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
<label for="notfm_no">No</label>
<br>
<h5>Auto folding</h5>
TheDesk does not collapse totes of 5 characters or less. Also, when collapsing, newlines are not shown. TheDesk count only newlines as the number of lines.
<br>
<input type="text" style="width:50px" id="sentence">linesaboveor
<input type="text" style="width:50px" id="letters">lettersabove
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
<br>
<h5>Height of images
</h5>
<input type="text" style="width:50px" id="img-height">px
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
<br>
<br>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">send</i>Posting Preferences
</div>
<div class="collapsible-body">
<h5>Default warining text</h5>
<input type="text" style="width:150px" id="cw-text">
<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
<br>
<h5>Always CW set</h5>
<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_yes" value="yes" />
<label for="cws_yes">Yes</label>
<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_no" value="no" />
<label for="cws_no">No
</label>
<br>
<h5>Default visibility</h5>
<input class="with-gap" onchange="settings()" name="vis" type="radio" id="public" value="public" />
<label for="public">Public</label>
<input class="with-gap" onchange="settings()" name="vis" type="radio" id="unlisted" value="unlisted" />
<label for="unlisted">Unlisted</label>
<input class="with-gap" onchange="settings()" name="vis" type="radio" id="private" value="private" />
<label for="private">Private</label>
<input class="with-gap" onchange="settings()" name="vis" type="radio" id="direct" value="direct" />
<label for="direct">Direct</label>
<input class="with-gap" onchange="settings()" name="vis" type="radio" id="memory" value="memory" />
<label for="memory">Memory(memorized as each instance)</label>
<input class="with-gap" onchange="settings()" name="vis" type="radio" id="server" value="server" />
<label for="server">Default of your visibility(Set on preferences of Mastodon instance)</label>
<br>
<h5>Posting images preferences</h5>
<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_url" value="url" />
<label for="i_url">Insert media URL</label>
<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_no-act" value="no-act" />
<label for="i_no-act">Insert nothig</label>
<br>
<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_inline" value="inline" disabled />
<label for="i_inline">Disabled
<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
</label>
<br>
<h5>Action of posting-box</h5>
<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_yes" value="yes" />
<label for="bx_yes">Folding</label>
<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_no" value="no" />
<label for="bx_no">Open after posting
</label>
<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_abs" value="absolute" />
<label for="bx_abs">Absolutely open</label>
<br>
<h5>Quote format</h5>
<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
<label for="q_simple">Only URL</label>
<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
<label for="q_mention">URL and acct(mention to the user)</label>
<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
<label for="q_full">URL, text and acct(mention to the user)
</label>
<br>
<h5>Default accounts of actions</h5>
Main account can be set on Account Manager.<br>
<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_remain" value="remain" />
<label for="mn_remain">Account you used recently</label>
<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_main" value="main" />
<label for="mn_main">Main account</label>
</label>
<br>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">keyboard</i>Keyboard shortcut Preferences
</div>
<div class="collapsible-body">
<h5>Easy inserter</h5>
You can insert any letters and emojis with only 3 keys<br>
Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">bookmark</i>Mute & Emphasis Preferences
</div>
<div class="collapsible-body">
<h5>Client Mute</h5>
<div id="mute-cli"></div>
<h5>Client Emphasis</h5>
Click client name on toots to toggle mute and emphasis.
<h5>Words Mute</h5>
Enter to set<br>
<div class="chips" id="wordmute" style="background-color:gray;"></div>
<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">Save</button>
<h5>Words Emphasis</h5>
Enter to set<br>
<div class="chips" id="wordemp" style="background-color:gray;"></div>
<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">Save</button>
<h5>Users Emphasis</h5>
Set on users data modals.
<span class="emphasized"> Use this color to emphasis </span>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="fa fa-spotify"></i>Spotify and NowPlaying Preferences
</div>
<div class="collapsible-body">
Click <i class="material-icons" style="font-size:24px;">music_note</i>icon to NowPlaying<br>
<h5>Account Connection</h5>
TheDesk save your data on thedesk.top server.<br>
<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">Save</button></div>
<a onclick="spotifyConnect()" class="btn waves-effect nex" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i class="fa fa-spotify left"></i>Connect</a>
<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i class="fa fa-spotify left"></i>Disconnect</a>
<h5>Edit a template</h5>
<br>
<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
{url}</textarea><br>
Refer:{song}:Song name/{album}:Album name/{artist}:Artist name/{url}:URL to Spotify<br>
iTunes NowPlaying:{url} is disabled, but composer:{composer}/spampling rate:{hz}/bit rate:{bitRate}/genre:{genre} are available.<br>
<span class="imas hide">CINDERELLA NowPlaying(imastodon.net限定)では作曲家{composer}/作詞家{lyricist}/BPM{bpm}が有効です。<br>
CINDERELLA NowPlayingはimastodon.netにログインしているとき、トゥート欄に「//」を入力し、その後に曲名を入れることで可能です。</span><br>
<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">Save</button>
<h5>Attach an Artwork of Spotify</h5>
<span class="imas hide">この設定はCINDERELLA NowPlaying(imastodon.net限定)にも適用されます。</span><br>
<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
<label for="awk_yes">Yes</label>
<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
<label for="awk_no">No</label>
<br>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">hearing</i>TTS(text to speech) Preferences
</div>
<div class="collapsible-body">
<h5>Speed</h5>
1-100(default:10)<br>
<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10" style="width:500px; max-width:100%"/></p>
<h5>Pitch</h5>
0-100(default:50)<br>
<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50" style="width:500px; max-width:100%"/></p>
<h5>Volume</h5>
0-100(default:100)<br>
<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100" style="width:500px; max-width:100%"/></p>
<h5>Test</h5>
<input type="text" style="width:350px" id="voicetxt" value="TheDesk is an open-source Mastodon client for PC.">
<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()" id="testplay">Play/Stop</button><br>
<br>
<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">Save</button>
</div>
</li>
</ul>
<br>
<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i class="material-icons left">undo</i>Back</a>
<br>
<br>Keyboard shortcuts
<li>Ctrl+1-9:Jump to n(1-9)th column</li>
<li>N:Open toot box</li>
<li>X:Toggle toot box</li>
<li>Ctrl+Enter:Post</li>
<li>Ctrl+E:Make all notifications read</li>
<li>Esc:Hide toot box</li>
<li>F5:Super Reload</li>
<li>Ctrl+Shift+C:Clear toot box</li>
<li>Ctrl+Shift+S:Preferences</li>
<li>Ctrl+Shift+M:Account Manager</li>
<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
<li>Ctrl+Shift+P:Show profile of selecting</li>
<li>←/→:Show next or previous image</li>
<li>Mousewheel:Zoom a image</li>
<div class="hide kirishima">
以下Markdownに対応したインスタンスのみ。
<br>
<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
<li>Shift+Enter:全角スペースを入れて改行</li>
<li>Shift+Space:ゼロ幅スペース</li>
以下アスタルテにログインしている場合のみ
<br>
<li>Ctrl+R:
<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
</li><br>
</div>
<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('Delete all data. You cannot undo. Continue?')){ localStorage.clear(); location.href='index.html'; }"><i class="material-icons left">delete</i>Reset(Danger)</button><br><br>
<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i class="material-icons left">info</i>About TheDesk</button>
<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">web</i>Website</a>
<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>Support(Enty)</a>
<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i class="material-icons left">list</i>Help/Docs(Constructing)</a>
<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2" style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2" style="width:100%; max-width:500px;"><img src="./img/desk_full.svg" class="left" width="25" style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
<a class="btn waves-effect red lighten-2" href="https://osushi.love/Cutls_P" target="_blank" style="width:100%; max-width:500px;"><img src="./img/sushi.svg" class="left" width="25" style="padding-top:5px;">Give me a sushi!</a>
<br>
<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';" class="pointer">Check update</a><br>
<a href="oss.html">OSS License</a><br>
<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved.
<a href="https://github.com/cutls/TheDesk/blob/master/LICENSE.md">TheDesk LICENSE (Latest Ver.)</a>
<br>Developer: Cutls P(
<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
<br>
</span><br>
TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
<script type="text/javascript" src="./js/common/about.js"></script>
<script type="text/javascript" src="./js/platform/end.js"></script>
<script type="text/javascript" src="./js/login/logout.js"></script>
<script type="text/javascript" src="./js/lang/lang.js"></script>
<script type="text/javascript" src="./js/ui/spotify.js"></script>
<script type="text/javascript" src="./js/tl/speech.js"></script>
<script type="text/javascript" src="./js/ui/settings.js"></script>
<script type="text/javascript" src="./js/ui/theme.js"></script>
<script type="text/javascript" src="./js/tl/date.js"></script>