Redesign of column setting

This commit is contained in:
cutls 2020-09-08 18:50:05 +09:00
parent 62df4e2fac
commit 40a884b4f5
5 changed files with 81 additions and 61 deletions

View File

@ -634,6 +634,21 @@ p:not(:last-child) {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.3), 0px -10px 10px 0px rgba(0, 0, 0, 0.3) inset;
}
.notf-indv-box label span {
padding-left: 23px !important;
margin-right: 5px;
}
.notf-indv-box .setting {
font-size: 1rem;
width: calc(25% - 3px);
text-align: left;
padding: 5px;
height: 70px;
}
.notf-exclude-btn:hover {
background-color: inherit !important;
border: 1px solid;
}
.type-b {
display: none;
}

View File

@ -228,65 +228,63 @@ function parseColumn(target, dontclose) {
var animecss = ''
}
var unread = `<a id="unread_${key}" onclick="showUnread('${key}','${acct.type}','${acct.domain}')"
class="setting nex" title="${lang.lang_layout_unread}">
<i class="material-icons waves-effect nex">more</i>
</a>${lang.lang_layout_unread}<br>`
class="setting nex waves-effect" title="${lang.lang_layout_unread}">
<i class="material-icons waves-effect nex">more</i><br />${lang.lang_layout_unread}
</a>`
var notfDomain = acct.domain
var notfKey = key
var if_tag = ''
var if_tag_btn = ''
if (acct.type == 'notf') {
var exclude =
lang.lang_excluded +
`:<br>
`<div style="border: 1px solid; padding: 5px; margin-top: 5px; margin-bottom: 5px;">${lang.lang_layout_excluded}:<br>
<label>
<input type="checkbox" class="filled-in" id="exc-reply-${key}" ${excludeCk(key, 'mention')} />
<span>
<i class="fas fa-share exc-icons"></i>
${lang.lang_layout_mention}
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-fav-${key}" ${excludeCk(key, 'favourite')} />
<span>
<i class="fas fa-star exc-icons"></i>
${lang.lang_layout_fav}
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-bt-${key}" ${excludeCk(key, 'reblog')} />
<span>
<i class="fas fa-retweet exc-icons"></i>
${lang.lang_layout_bt}
</span>
</label>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-follow-${key}" ${excludeCk(key, 'follow')} />
<span>
<i class="fas fa-users exc-icons"></i>
${lang.lang_status_follow}
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-poll-${key}" ${excludeCk(key, 'poll')} />
<span>
<i class="fas fa-tasks exc-icons"></i>
${lang.lang_layout_poll}
</span>
</label>
<button class="btn waves-effect" style="width:60px; padding:0;" onclick="exclude('${key}')">Filter</button>`
</label> <br />
<button class="btn btn-flat waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); padding:0;" onclick="exclude('${key}')">Filter</button>`
if (checkNotfFilter(key)) {
exclude =
exclude +
`<button class="btn red waves-effect" style="width:60px; padding:0;" onclick="resetNotfFilter('${key}')">
`<button class="btn btn-flat red-text waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); padding:0;" onclick="resetNotfFilter('${key}')">
Clear all
</button>`
}
exclude = exclude + '<br>'
exclude = exclude + '</div>'
notfDomain = 'dummy'
notfKey = 'dummy'
} else if (acct.type == 'home') {
var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex">
<i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:24px"></i>
<span id="sta-bt-${key}">Off</span>
</a>
var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex waves-effect">
<i class="fas fa-retweet nex" title="${lang.lang_layout_excludingbt}" style="font-size: 24px"></i>
<span id="sta-bt-${key}">Off</span><br />
${lang.lang_layout_excludingbt}
<br>`
</a>`
} else if (acct.type == 'tag') {
if (acct.data.name) {
var name = acct.data.name
@ -335,15 +333,13 @@ function parseColumn(target, dontclose) {
var basehtml = `<div style="${css}" class="box ${animecss}" id="timeline_box_${basekey}_parentBox"></div>`
$('#timeline-container').append(basehtml)
}
var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i>
</a>
${lang.lang_layout_leftFold}<br>`
var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex waves-effect">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i><br />
${lang.lang_layout_leftFold}</a>`
} else {
var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i>
</a>
${lang.lang_layout_leftUnfold}<br>`
var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex waves-effect">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i><br />
${lang.lang_layout_leftUnfold}</a>`
}
if (key === 0) {
left_hold = ''
@ -362,15 +358,15 @@ function parseColumn(target, dontclose) {
var addHeight = ''
}
if (acct.type != 'pub' && acct.type != 'pub-media') {
var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_mediafil}">perm_media</i>
<span id="sta-media-${key}">On</span>
</a>${lang.lang_layout_mediafil}`
var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_mediafil}">perm_media</i>
<span id="sta-media-${key}">On</span><br />
${lang.lang_layout_mediafil}</a>`
} else {
var mediaFil = `<a onclick="remoteOnly('${key}','${acct.type}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_remoteOnly}">perm_media</i>
var mediaFil = `<a onclick="remoteOnly('${key}','${acct.type}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_remoteOnly}">perm_media</i><br />
<span id="sta-remote-${key}">Off</span>
</a>${lang.lang_layout_remoteOnly}`
${lang.lang_layout_remoteOnly}</a>`
}
var html = `
<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}" data-acct="${acct.domain}" style="${addHeight}">
@ -424,28 +420,25 @@ function parseColumn(target, dontclose) {
</div>
</div>
<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
${exclude}
${unread}
${exclude}${left_hold}
${mediaFil}<br>
<a onclick="cardToggle('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_linkanades}">link</i>
<span id="sta-card-${key}">On</span>
</a>
${left_hold}
${mediaFil}
<a onclick="cardToggle('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_linkanades}">link</i>
<span id="sta-card-${key}">On</span><br />
${lang.lang_layout_linkana}
<br>
<a onclick="voiceToggle('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_tts}">hearing</i>
<span id="sta-voice-${key}">On</span>
</a>
<a onclick="voiceToggle('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_tts}">hearing</i>
<span id="sta-voice-${key}">On</span><br />
${lang.lang_layout_tts}
TL<br>
<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide}">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_reconnect}">refresh</i>
</a>
<span>
TL</a>
<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide} waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_reconnect}">refresh</i>
<br />
${lang.lang_layout_reconnect}
</span>
<br>
</a><br />
${lang.lang_layout_headercolor}
<br>
<div id="picker_${key}" class="color-picker"></div>

View File

@ -131,13 +131,17 @@
"lang_layout_linkana": "Auto Link Analyzer",
"lang_layout_linkanades": "Auto link analyzer",
"lang_layout_tts": "Text to speech ",
"lang_layout_reconnect": "Reload this column",
"lang_layout_reconnect": "Reload",
"lang_layout_headercolor": "Header color of this column",
"lang_layout_nodata": "[No data]<br>F5/⌘+R to reload",
"lang_layout_dm": "Direct Message",
"lang_layout_webviewmode": "Prefer WebView",
"lang_excluded": "Excluded type of notification",
"lang_layout_excludingbt": "Show BT mode(OFF/Exclude BT/Only BT)",
"lang_layout_excluded": "Excluded type of notification",
"lang_layout_mention": "Mentions",
"lang_layout_fav": "Favourites",
"lang_layout_bt": "Boosts",
"lang_layout_poll": "Polls",
"lang_layout_excludingbt": "Show BT mode",
"lang_layout_leftFold": "Stack to the left",
"lang_layout_leftUnfold": "Dock on the right",
"lang_layout_deleteColumn": "Delete this column",

View File

@ -130,13 +130,17 @@
"lang_layout_linkanades": "リンクの解析を切り替え",
"lang_layout_remoteOnly": "リモートのみ",
"lang_layout_tts": "読み上げ",
"lang_layout_reconnect": "カラム再読込",
"lang_layout_reconnect": "再読込",
"lang_layout_headercolor": "TLヘッダーカラー",
"lang_layout_nodata": "[トゥートあらへん]<br>F5/⌘+Rで再読込してみて。",
"lang_layout_dm": "ダイレクトメッセージ",
"lang_layout_webviewmode": "WebView優先",
"lang_excluded": "見せへん通知",
"lang_layout_excludingbt": "BT表示(OFF/BT除外/BTだけ)",
"lang_layout_excluded": "見せへん通知",
"lang_layout_mention": "メンション",
"lang_layout_fav": "お気に入り",
"lang_layout_bt": "ブースト",
"lang_layout_poll": "投票",
"lang_layout_excludingbt": "BT表示",
"lang_layout_leftFold": "左へ重ねる",
"lang_layout_leftUnfold": "右へ出す",
"lang_layout_deleteColumn": "カラム削除",

View File

@ -132,13 +132,17 @@
"lang_layout_linkana": "リンク解析",
"lang_layout_linkanades": "リンクの解析を切り替え",
"lang_layout_tts": "読み上げ",
"lang_layout_reconnect": "カラム再読込",
"lang_layout_reconnect": "再読込",
"lang_layout_headercolor": "TLヘッダーカラー",
"lang_layout_nodata": "[ここにトゥートはありません。]<br>F5/⌘+Rで再読込できます。",
"lang_layout_dm": "ダイレクトメッセージ",
"lang_layout_webviewmode": "WebView優先",
"lang_excluded": "除外する通知",
"lang_layout_excludingbt": "BT表示(OFF/BT除外/BTのみ)",
"lang_layout_excluded": "除外する通知",
"lang_layout_mention": "メンション",
"lang_layout_fav": "お気に入り",
"lang_layout_bt": "ブースト",
"lang_layout_poll": "投票",
"lang_layout_excludingbt": "BT表示",
"lang_layout_leftFold": "左へ重ねる",
"lang_layout_leftUnfold": "右へ出す",
"lang_layout_deleteColumn": "カラム削除",