feat: optimize select delete button style

This commit is contained in:
Emil Zhai 2022-12-05 09:33:51 +00:00
parent 921b054163
commit 0058c4e46e
No known key found for this signature in database
GPG Key ID: 780B385DB72F1EBD
3 changed files with 64 additions and 11 deletions

View File

@ -6,6 +6,55 @@ a[data-action="search-anchor"] {
position: relative;
}
.typecho-access-logs-dropdown-btn {
display: flex;
align-items: center;
}
.typecho-access-logs-dropdown-btn__icon {
transition: all ease-in-out .3s;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
height: 100%;
margin-left: 5px;
}
.typecho-access-logs-dropdown-btn__icon > i {
transform: translateY(20%);
}
button.active > .typecho-access-logs-dropdown-btn__icon {
transform: rotateZ(180deg);
}
.typecho-access-logs-dropdown {
margin-top: 1px;
min-width: 73px;
border: none;
display: block;
opacity: 0;
pointer-events: none;
transition: opacity ease-out .3s;
}
.typecho-access-logs-dropdown > li {
background: #e9e9e6;
position: relative;
}
.typecho-access-logs-dropdown > li > button {
padding: 5px 10px;
border-radius: 0;
width: 100%;
}
button.active + .typecho-access-logs-dropdown {
opacity: 1;
pointer-events: all;
}
.typecho-access-logs-filter {
position: absolute;
top: 100%;

View File

@ -352,7 +352,11 @@ $(document).ready(function () {
action(false);
}
$('.dropdown-menu a[data-action="delete"]').click(function () {
$('.typecho-access-logs-dropdown-btn').click(function() {
$(this).next().css({ display: '' });
})
$('[data-action="select-delete"]').click(function () {
var ids = [];
$('.typecho-list-table input[type="checkbox"]').each(function (index, elem) {
if (elem.checked) {

View File

@ -11,9 +11,12 @@
<div class="operate">
<label><i class="sr-only"><?php _e('全选'); ?></i><input type="checkbox" class="typecho-table-select-all" /></label>
<div class="btn-group btn-drop">
<button class="btn dropdown-toggle btn-s" type="button"><i class="sr-only"><?php _e('操作'); ?></i><?php _e('选中项'); ?> <i class="i-caret-down"></i></button>
<ul class="dropdown-menu">
<li><a data-action="delete" href="javascript:;"><?php _e('删除'); ?></a></li>
<button class="btn dropdown-toggle btn-s typecho-access-logs-dropdown-btn" type="button">
<span><?php _e('选中项'); ?></span>
<div class="typecho-access-logs-dropdown-btn__icon"><i class="i-caret-down"></i></div>
</button>
<ul class="dropdown-menu typecho-access-logs-dropdown">
<li><button class="btn-warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
</ul>
</div>
</div>
@ -105,15 +108,12 @@
<input type="checkbox" class="typecho-table-select-all" />
</label>
<div class="btn-group btn-drop">
<button class="btn dropdown-toggle btn-s" type="button">
<i class="sr-only"><?php _e('操作'); ?></i>
<button class="btn dropdown-toggle btn-s typecho-access-logs-dropdown-btn" type="button">
<span><?php _e('选中项'); ?></span>
<i class="i-caret-down"></i>
<div class="typecho-access-logs-dropdown-btn__icon"><i class="i-caret-down"></i></div>
</button>
<ul class="dropdown-menu">
<li>
<a data-action="delete" href="javascript:;"><?php _e('删除'); ?></a>
</li>
<ul class="dropdown-menu typecho-access-logs-dropdown">
<li><button class="btn-warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
</ul>
</div>
</div>