some design improve

This commit is contained in:
cutls 2021-04-18 04:28:10 +09:00
parent d224e597fd
commit b047c80768
4 changed files with 73 additions and 63 deletions

View File

@ -568,7 +568,9 @@ p:not(:last-child) {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
.rotate-90 {
transform: rotate(90deg);
}
.area-notice { .area-notice {
grid-area: notice; grid-area: notice;
} }

View File

@ -278,7 +278,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type, onlyContent) {
</span> </span>
<span class="voice">${date(toot.created_at, 'absolute')}(${lang.lang_parse_notftime})</span> <span class="voice">${date(toot.created_at, 'absolute')}(${lang.lang_parse_notftime})</span>
<i class="big-text fas ${icon}"></i> <i class="big-text fas ${icon}"></i>
<a onclick="udg('${toot.account.id}','${acct_id}')" class="pointer grey-text"> <a onclick="udg('${toot.account.id}','${acct_id}')" class="pointer grey-text notf-udg-text">
${dis_name}(@${toot.account.acct}) ${dis_name}(@${toot.account.acct})
</a>` </a>`
var notice = noticetext var notice = noticetext
@ -904,7 +904,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type, onlyContent) {
//日本語じゃない //日本語じゃない
if (toot.language != lang.language && toot.language) { if (toot.language != lang.language && toot.language) {
var trans = `<li onclick="trans('${toot.language}','${lang.language}', $(this))" var trans = `<li onclick="trans('${toot.language}','${lang.language}', $(this))"
style="padding:0"> style="padding:0; padding-top: 5px;">
<i class="material-icons" aria-hidden="true">g_translate</i>${lang.lang_parse_trans} <i class="material-icons" aria-hidden="true">g_translate</i>${lang.lang_parse_trans}
</li>` </li>`
} else { } else {
@ -1157,23 +1157,23 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type, onlyContent) {
</li> </li>
<div> <div>
<li onclick="bkm('${uniqueid}','${acct_id}','${tlid}')" <li onclick="bkm('${uniqueid}','${acct_id}','${tlid}')"
class="bkm-btn bkmStr_${uniqueid}" style="padding:0"> class="bkm-btn bkmStr_${uniqueid}" style="padding:0; padding-top: 5px;">
<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>${bkmStr} <i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>${bkmStr}
</li> </li>
<li class="${if_mine}" onclick="del('${uniqueid}','${acct_id}')" <li class="${if_mine}" onclick="del('${uniqueid}','${acct_id}')"
style="padding:0"> style="padding:0; padding-top: 5px;">
<i class="fas fa-trash"></i>${lang.lang_parse_del} <i class="fas fa-trash"></i>${lang.lang_parse_del}
</li> </li>
<li class="${if_mine}" onclick="pin('${uniqueid}','${acct_id}')" style="padding:0" class="pinStr_${uniqueid}"> <li class="${if_mine}" onclick="pin('${uniqueid}','${acct_id}')" style="padding:0; padding-top: 5px;" class="pinStr_${uniqueid}">
<i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>${pinStr} <i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>${pinStr}
</li> </li>
<li class="${if_mine}" onclick="redraft('${uniqueid}','${acct_id}')" <li class="${if_mine}" onclick="redraft('${uniqueid}','${acct_id}')"
style="padding:0"> style="padding:0; padding-top: 5px;">
<i class="material-icons" aria-hidden="true">redo</i>${lang.lang_parse_redraft} <i class="material-icons" aria-hidden="true">redo</i>${lang.lang_parse_redraft}
</li> </li>
${trans} ${trans}
<li onclick="postMessage(['openUrl', '${toot.url}'], '*')" <li onclick="postMessage(['openUrl', '${toot.url}'], '*')"
style="padding:0"> style="padding:0; padding-top: 5px;">
<i class="fas text-darken-3 fa-globe"></i>${lang.lang_parse_link} <i class="fas text-darken-3 fa-globe"></i>${lang.lang_parse_link}
</li> </li>
${pluginHtml} ${pluginHtml}

View File

@ -231,14 +231,14 @@ function parseColumn(target, dontclose) {
} }
var unread = `<a id="unread_${key}" onclick="showUnread('${key}','${acct.type}','${acct.domain}')" var unread = `<a id="unread_${key}" onclick="showUnread('${key}','${acct.type}','${acct.domain}')"
class="setting nex waves-effect" title="${lang.lang_layout_unread}"> class="setting nex waves-effect" title="${lang.lang_layout_unread}">
<i class="material-icons waves-effect nex">more</i><br />${lang.lang_layout_unread} <i class="material-icons waves-effect nex">more</i><span>${lang.lang_layout_unread}</span>
</a>` </a>`
var notfDomain = acct.domain var notfDomain = acct.domain
var notfKey = key var notfKey = key
var if_tag = '' var if_tag = ''
var if_tag_btn = '' var if_tag_btn = ''
if (acct.type == 'notf') { if (acct.type == 'notf') {
var exclude = var excludeNotf =
`<div style="border: 1px solid; padding: 5px; margin-top: 5px; margin-bottom: 5px;">${lang.lang_layout_excluded}:<br> `<div style="border: 1px solid; padding: 5px; margin-top: 5px; margin-bottom: 5px;">${lang.lang_layout_excluded}:<br>
<label> <label>
<input type="checkbox" class="filled-in" id="exc-reply-${key}" ${excludeCk(key, 'mention')} /> <input type="checkbox" class="filled-in" id="exc-reply-${key}" ${excludeCk(key, 'mention')} />
@ -272,20 +272,21 @@ function parseColumn(target, dontclose) {
</label> <br /> </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>` <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)) { if (checkNotfFilter(key)) {
exclude = excludeNotf =
exclude + excludeNotf +
`<button class="btn btn-flat red-text waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); 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 Clear all
</button>` </button>`
} }
exclude = exclude + '</div>' excludeNotf = excludeNotf + '</div>'
notfDomain = 'dummy' notfDomain = 'dummy'
notfKey = 'dummy' notfKey = 'dummy'
var excludeHome =''
} else if (acct.type == 'home') { } else if (acct.type == 'home') {
var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex waves-effect"> var excludeNotf = ''
var excludeHome = `<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> <i class="fas fa-retweet nex" title="${lang.lang_layout_excludingbt}" style="font-size: 24px"></i>
<span id="sta-bt-${key}">Off</span><br /> <span>${lang.lang_layout_excludingbt}</span><span id="sta-bt-${key}">Off</span>
${lang.lang_layout_excludingbt}
</a>` </a>`
} else if (acct.type == 'tag') { } else if (acct.type == 'tag') {
if (acct.data.name) { if (acct.data.name) {
@ -313,10 +314,12 @@ function parseColumn(target, dontclose) {
<i class="material-icons waves-effect nex">note_add</i> <i class="material-icons waves-effect nex">note_add</i>
</a>` </a>`
unread = '' unread = ''
var exclude = '' var excludeNotf = ''
var excludeHome = ''
var if_notf = 'hide' var if_notf = 'hide'
} else { } else {
var exclude = '' var excludeNotf = ''
var excludeHome = ''
unread = '' unread = ''
} }
@ -337,12 +340,12 @@ function parseColumn(target, dontclose) {
$('#timeline-container').append(basehtml) $('#timeline-container').append(basehtml)
} }
var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex waves-effect"> 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 /> <i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i>
${lang.lang_layout_leftFold}</a>` <span>${lang.lang_layout_leftFold}</span></a>`
} else { } else {
var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex waves-effect"> 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 /> <i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i>
${lang.lang_layout_leftUnfold}</a>` <span>${lang.lang_layout_leftUnfold}</span></a>`
} }
if (key === 0) { if (key === 0) {
left_hold = '' left_hold = ''
@ -363,8 +366,7 @@ function parseColumn(target, dontclose) {
if (acct.type != 'pub' && acct.type != 'pub-media') { if (acct.type != 'pub' && acct.type != 'pub-media') {
var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex waves-effect"> var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_mediafil}">perm_media</i> <i class="material-icons nex" title="${lang.lang_layout_mediafil}">perm_media</i>
<span id="sta-media-${key}">On</span><br /> <span>${lang.lang_layout_mediafil}</span/><span id="sta-media-${key}">On</span></a>`
${lang.lang_layout_mediafil}</a>`
} else { } else {
var mediaFil = `<a onclick="remoteOnly('${key}','${acct.type}')" class="setting nex waves-effect"> 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 /> <i class="material-icons nex" title="${lang.lang_layout_remoteOnly}">perm_media</i><br />
@ -422,32 +424,29 @@ function parseColumn(target, dontclose) {
</div> </div>
</div> </div>
<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;"> <div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
${exclude} ${excludeNotf}
<div class="columnSettings">
${excludeHome}
${unread} ${unread}
${left_hold} ${left_hold}
${mediaFil} ${mediaFil}
<a onclick="cardToggle('${key}')" class="setting nex waves-effect"> <a onclick="cardToggle('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_linkanades}">link</i> <i class="material-icons nex" title="${lang.lang_layout_linkanades}">link</i>
<span id="sta-card-${key}">On</span><br /> <span>${lang.lang_layout_linkana}</span><span id="sta-card-${key}">On</span>
${lang.lang_layout_linkana}
</a> </a>
<a onclick="voiceToggle('${key}')" class="setting nex waves-effect"> <a onclick="voiceToggle('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_tts}">hearing</i> <i class="material-icons nex" title="${lang.lang_layout_tts}">hearing</i>
<span id="sta-voice-${key}">On</span><br /> <span>${lang.lang_layout_tts}TL</span/><span id="sta-voice-${key}">On</span>
${lang.lang_layout_tts} </a>
TL</a>
<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide} waves-effect"> <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> <i class="material-icons nex" title="${lang.lang_layout_reconnect}">refresh</i>
<br /> <span>${lang.lang_layout_reconnect}</span>
${lang.lang_layout_reconnect}
</a> </a>
<a onclick="resetWidth('${key}')" class="setting nex waves-effect"> <a onclick="resetWidth('${key}')" class="setting nex waves-effect">
<i class="material-icons nex" title="${lang.lang_layout_resetWidth}">refresh</i> <i class="material-icons nex rotate-90" title="${lang.lang_layout_resetWidth}">height</i>
<br /> <span>${lang.lang_layout_resetWidth}</span>
${lang.lang_layout_resetWidth} </a></div>
</a><br /> <p>${lang.lang_layout_headercolor}</p>
${lang.lang_layout_headercolor}
<br>
<div id="picker_${key}" class="color-picker"></div> <div id="picker_${key}" class="color-picker"></div>
</div>${if_tag} </div>${if_tag}
<div class="tl-box" tlid="${key}"> <div class="tl-box" tlid="${key}">

View File

@ -147,6 +147,11 @@ function udg(user, acct_id) {
$("#his-acct").text(json.acct) $("#his-acct").text(json.acct)
$("#his-acct").attr("fullname", fullname) $("#his-acct").attr("fullname", fullname)
$("#his-prof").attr("src", json.avatar) $("#his-prof").attr("src", json.avatar)
$("#util-add").removeClass("hide")
const title = $('.column-first').html()
$("#my-data-nav .anc-link").removeClass("active-back")
$('.column-first').addClass("active-back")
$('#his-data-title').html(title)
$("#his-data").css("background-image", "url(" + json.header + ")") $("#his-data").css("background-image", "url(" + json.header + ")")
$("#his-sta").text(json.statuses_count) $("#his-sta").text(json.statuses_count)
$("#his-follow").text(json.following_count) $("#his-follow").text(json.following_count)
@ -186,6 +191,7 @@ function udg(user, acct_id) {
$("#his-des").html(twemoji.parse(note)) $("#his-des").html(twemoji.parse(note))
if (json.bot) { if (json.bot) {
$("#his-bot").html(lang.lang_showontl_botacct) $("#his-bot").html(lang.lang_showontl_botacct)
$("#his-bot").removeClass("hide")
} }
$("#his-des").attr("data-acct", acct_id) $("#his-des").attr("data-acct", acct_id)
$("#his-data").css("background-size", "cover") $("#his-data").css("background-size", "cover")
@ -516,6 +522,7 @@ function reset() {
$("#his-end-btn").removeClass("endorsed") $("#his-end-btn").removeClass("endorsed")
$("#his-des").css("max-height", "250px") $("#his-des").css("max-height", "250px")
$("#his-bot").html("") $("#his-bot").html("")
$("#his-bot").addClass("hide")
$("#his-follow-btn").show() $("#his-follow-btn").show()
$("#his-block-btn").show() $("#his-block-btn").show()
$("#his-mute-btn").show() $("#his-mute-btn").show()
@ -554,7 +561,9 @@ function reset() {
$("#my-data-nav .anc-link").on("click", function () { $("#my-data-nav .anc-link").on("click", function () {
var target = $(this).attr("go") var target = $(this).attr("go")
if (target) { if (target) {
const title = $(this).html() let title = $(this).html()
if (target === '#his-tl') $("#util-add").removeClass("hide")
if (target != '#his-tl') $("#util-add").addClass("hide")
$('#his-data-title').html(title) $('#his-data-title').html(title)
$("#my-data-nav .anc-link").removeClass("active-back") $("#my-data-nav .anc-link").removeClass("active-back")
$(this).addClass("active-back") $(this).addClass("active-back")