fix: align header structure with list row

In order to avoid inconsistencies in the layout.
This commit is contained in:
barredterra 2024-04-02 16:28:45 +02:00
parent 30f8f24866
commit 166422fb6e
2 changed files with 15 additions and 21 deletions

View file

@ -654,8 +654,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
const subject_field = this.columns[0].df;
let subject_html = `
<input class="level-item list-check-all" type="checkbox"
title="${__("Select All")}">
<span class="level-item select-like">
<input class="list-header-checkbox list-check-all" type="checkbox" title="${__("Select All")}">
</span>
<span class="level-item" data-sort-by="${subject_field.fieldname}"
title="${__("Click to sort by {0}", [subject_field.label])}">
${__(subject_field.label)}
@ -700,14 +701,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
get_header_html_skeleton(left = "", right = "") {
return `
<div class="list-row-container">
<header class="level list-row-head text-muted">
<div class="level-left list-header-subject">
${left}
</div>
<div class="level-left checkbox-actions">
<div class="level list-subject">
<input class="level-item list-check-all" type="checkbox"
title="${__("Select All")}">
<span class="level-item select-like">
<input class="list-header-checkbox list-check-all" type="checkbox" title="${__("Select All")}">
</span>
<span class="level-item list-header-meta"></span>
</div>
</div>
@ -715,6 +718,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
${right}
</div>
</header>
</div>
`;
}

View file

@ -160,11 +160,11 @@
.file-select {
padding-left: 11px;
}
}
.select-like {
padding: var(--list-checkbox-padding);
cursor: default;
}
.select-like {
padding: var(--list-checkbox-padding);
cursor: default;
}
.list-row-head {
@ -172,12 +172,9 @@
cursor: default;
background-color: var(--subtle-fg);
height: 30px;
margin: 0.5rem var(--padding-xs);
margin: 0.5rem 0;
border-radius: var(--border-radius-md);
.list-check-all {
margin-left: 11px;
}
.list-subject {
font-weight: normal;
}
@ -252,21 +249,14 @@ $level-margin-right: 8px;
margin-bottom: 1px;
}
input.list-row-checkbox {
input.list-row-checkbox,
input.list-header-checkbox {
margin-top: 0;
margin-bottom: 0;
--checkbox-right-margin: 0;
background-color: var(--card-bg);
}
input.list-check-all {
margin-left: 15px;
margin-top: 0;
margin-bottom: 0;
--checkbox-right-margin: var(--list-checkbox-padding);
background-color: var(--card-bg);
}
.render-list-checkbox {
margin-left: 15px;
}