#317 dropdown menu with library

This commit is contained in:
cutls 2020-09-07 16:36:25 +09:00
parent ec1481aed0
commit 9623b79197
5 changed files with 33 additions and 86 deletions

View File

@ -451,48 +451,12 @@ iframe,
.action .fa-quote-right { .action .fa-quote-right {
margin-top: 0.15rem; margin-top: 0.15rem;
} }
.actct { .contextMenu.dropdown-content {
color: var(--beforehover); padding-top: 5px;
overflow-y: hidden;
left: calc(100% - 200px) !important;
width: 200px !important;
} }
.actct:hover {
color: var(--color);
transition: 0.5s;
}
#contextWrap {
position: fixed;
width: 199vw;
height: 100vh;
z-index: 100;
}
.contextMenu {
position: fixed;
background-color: var(--box);
z-index: 9999;
border-radius: 0.4rem;
padding: 0.4rem;
}
.contextMenu.bottom:before {
content: '';
position: absolute;
top: 100%;
right: 2rem;
border: 1.2rem solid transparent;
border-top: 1.2rem solid var(--box);
}
.contextMenu.top:before {
content: '';
position: absolute;
top: -2.3rem;
right: 2rem;
border: 1.5rem solid transparent;
border-bottom: 1.5rem solid var(--box);
}
.contextMenu .btn-flat {
text-transform: none !important;
width: 100%;
text-align: left;
}
.gray { .gray {
color: var(--gray); color: var(--gray);
} }

View File

@ -680,7 +680,11 @@ function staEx(mode) {
}) })
return return
} }
function toggleAction(elem, ct) { function toggleAction(id) {
console.log(document.getElementById(id))
var instance = M.Dropdown.init(document.getElementById(id));
instance.open()
return
var height = ct * 39 + 6 var height = ct * 39 + 6
var cont = elem.parents('.cvo').find('.contextMenu') var cont = elem.parents('.cvo').find('.contextMenu')
if (cont.hasClass('hide')) { if (cont.hasClass('hide')) {

View File

@ -901,12 +901,10 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
} }
//日本語じゃない //日本語じゃない
if (toot.language != lang.language && toot.language) { if (toot.language != lang.language && toot.language) {
var trans = `<div class=""> var trans = `<li onclick="trans('${toot.language}','${lang.language}', $(this))"
<a onclick="trans('${toot.language}','${lang.language}', $(this))"
class="waves-effect waves-dark btn-flat actct" style="padding:0"> class="waves-effect waves-dark btn-flat actct" style="padding:0">
<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}
</a> </li>`
</div>`
} else { } else {
var trans = '' var trans = ''
} }
@ -1132,8 +1130,8 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
</div> </div>
<div class="area-side"> <div class="area-side">
<div class="action ${noauth}"> <div class="action ${noauth}">
<a onclick="toggleAction($(this), ${menuct})" <a onclick="toggleAction('trigger_${tlid}_${uniqueid}')" data-target="dropdown_${tlid}_${uniqueid}"
class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0"> class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0" id="trigger_${tlid}_${uniqueid}">
<i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i> <i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i>
<span class="voice">Other actions</span> <span class="voice">Other actions</span>
</a> </a>
@ -1146,45 +1144,33 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
<span class="voice">${lang.lang_parse_detail}</span> <span class="voice">${lang.lang_parse_detail}</span>
</div> </div>
</div> </div>
<div class="contextMenu hide z-depth-4"> <ul class="dropdown-content contextMenu" id="dropdown_${tlid}_${uniqueid}">
<div class="${viashow}"> <li class="${viashow}">
via ${escapeHTML(via)}<br> via ${escapeHTML(via)}<br>
<a onclick="client('${$.strip_tags(via)}')" class="pointer">${lang.lang_parse_clientop}</a> <a onclick="client('${$.strip_tags(via)}')" class="pointer">${lang.lang_parse_clientop}</a>
</div> </li>
<div> <div>
<button onclick="bkm('${uniqueid}','${acct_id}','${tlid}')" <li onclick="bkm('${uniqueid}','${acct_id}','${tlid}')"
class="waves-effect waves-dark btn-flat actct bkm-btn" style="padding:0"> class="bkm-btn bkmStr_${uniqueid}" style="padding:0">
<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i> <i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>${bkmStr}
<span class="bkmStr_${uniqueid}">${bkmStr}</span> </li>
</button> <li class="${if_mine}" onclick="del('${uniqueid}','${acct_id}')"
</div>
<div class="${if_mine}">
<button onclick="del('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
style="padding:0"> style="padding:0">
<i class="fas fa-trash"></i>${lang.lang_parse_del} <i class="fas fa-trash"></i>${lang.lang_parse_del}
</button> </li>
</div> <li class="${if_mine}" onclick="pin('${uniqueid}','${acct_id}')" style="padding:0" class="pinStr_${uniqueid}">
<div class="${if_mine}"> <i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>${pinStr}
<button onclick="pin('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct" style="padding:0"> </li>
<i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i> <li class="${if_mine}" onclick="redraft('${uniqueid}','${acct_id}')"
<span class="pinStr_${uniqueid}">${pinStr}</span>
</button>
</div>
<div class="${if_mine}">
<button onclick="redraft('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
style="padding:0"> style="padding:0">
<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}
</button> </li>
</div>
${trans} ${trans}
<div> <li onclick="postMessage(['openUrl', '${toot.url}'], '*')"
<button onclick="postMessage(['openUrl', '${toot.url}'], '*')" style="padding:0">
class="waves-effect waves-dark btn-flat actct" style="padding:0"> <i class="fas text-darken-3 fa-globe"></i>${lang.lang_parse_link}
<i class="fas text-darken-3 fa-globe"></i> </li>
${lang.lang_parse_link} </ul>
</button>
</div>
</div>
</div> </div>
` `
} }
@ -1371,7 +1357,6 @@ function userparse(obj, auth, acct_id, tlid, popup) {
} }
//クライアントダイアログ //クライアントダイアログ
function client(name) { function client(name) {
$('#contextWrap').addClass('hide')
if (name != 'Unknown') { if (name != 'Unknown') {
//聞く //聞く
Swal.fire({ Swal.fire({

View File

@ -126,11 +126,6 @@ function initPostbox() {
localStorage.removeItem('nohide') localStorage.removeItem('nohide')
srcBox('close') srcBox('close')
}) })
$('#contextWrap').click(function (e) {
$('#contextWrap').addClass('hide')
$('.contextMenu').addClass('hide')
$('.act-icon').text('expand_more')
})
$('#textarea,#cw-text').focusout(function (e) { $('#textarea,#cw-text').focusout(function (e) {
localStorage.setItem('nohide', true) localStorage.setItem('nohide', true)
var countup = function () { var countup = function () {

View File

@ -123,7 +123,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="contextWrap" class="hide"></div>
<div id="post-box" class="z-depth-5"> <div id="post-box" class="z-depth-5">
<div id="post-bar" class="drag-bar"> <div id="post-bar" class="drag-bar">
<span id="unreact">@@post-new@@</span><span id="addreact" class="hide">Reaction</span> <span id="unreact">@@post-new@@</span><span id="addreact" class="hide">Reaction</span>