template: allow using menu-opener class outside #appbar div (#86001)
gitea/gadjo/pipeline/head This commit looks good
Details
gitea/gadjo/pipeline/head This commit looks good
Details
This commit is contained in:
parent
04c0f88623
commit
a015a1bcf9
|
@ -1142,17 +1142,7 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories,
|
|||
}
|
||||
}
|
||||
|
||||
#appbar {
|
||||
position: relative;
|
||||
border-radius: 3px 3px 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@mixin menu-opener {
|
||||
span.actions {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
|
@ -1231,6 +1221,22 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories,
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#appbar {
|
||||
position: relative;
|
||||
border-radius: 3px 3px 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include menu-opener;
|
||||
|
||||
&.highlight {
|
||||
background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
|
||||
border-radius: $cell-border-radius;
|
||||
|
@ -1252,6 +1258,10 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories,
|
|||
}
|
||||
}
|
||||
|
||||
div.menu-opener {
|
||||
@include menu-opener;
|
||||
}
|
||||
|
||||
div.section {
|
||||
margin: 1em 0;
|
||||
&:first-child {
|
||||
|
|
|
@ -510,26 +510,40 @@ var gadjo_js = gadjo_js || {};
|
|||
});
|
||||
function prepare_kebab_menu() {
|
||||
$(document.querySelectorAll('.extra-actions-menu')).each(function(i, el) {
|
||||
this.setAttribute('id', 'extra-actions-menu');
|
||||
this.setAttribute('id', 'extra-actions-menu'+i);
|
||||
});
|
||||
$(document.querySelectorAll('.extra-actions-menu-opener')).each(function(i, el) {
|
||||
if (this.__initialized === true) return;
|
||||
|
||||
// closes all kebab menus which are not the one with lst_id id
|
||||
function close_others(lst_id) {
|
||||
$(document.querySelectorAll('.extra-actions-menu')).each(function(i, el) {
|
||||
if(el.id == lst_id) { return ; }
|
||||
$(this).removeClass('open')
|
||||
$('[aria-controls='+el.id+']').attr('aria-expanded', 'false')
|
||||
$('[aria-controls='+el.id+']').removeClass('open')
|
||||
})
|
||||
}
|
||||
|
||||
const ctrl_id = 'extra-actions-menu'+i;
|
||||
this.__initialized = true;
|
||||
this.setAttribute('tabindex', 0);
|
||||
this.setAttribute('aria-label', 'Menu'); // XXX: translation
|
||||
this.setAttribute('aria-controls', 'extra-actions-menu');
|
||||
this.setAttribute('aria-controls', ctrl_id);
|
||||
this.setAttribute('aria-expanded', 'false');
|
||||
this.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
close_others(ctrl_id);
|
||||
$(this).toggleClass('open');
|
||||
$('.extra-actions-menu').toggleClass('open');
|
||||
$('#'+ctrl_id).toggleClass('open');
|
||||
this.setAttribute('aria-expanded', $(this).is('.open'));
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
this.addEventListener('click', function() {
|
||||
close_others(ctrl_id);
|
||||
$(this).toggleClass('open');
|
||||
$('.extra-actions-menu').toggleClass('open');
|
||||
$('#'+ctrl_id).toggleClass('open');
|
||||
this.setAttribute('aria-expanded', $(this).is('.open'));
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue