vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: allow custom separators in query report summary

Browse source
This commit is contained in:
Shivam Mishra 2020-07-08 19:53:19 +05:30
parent 6e50ca3c4a
commit 67d8ebde45
2 changed files with 65 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frappe/public/js/frappe/widgets/utils.js
View file

@ -100,6 +100,11 @@ function generate_grid(data) {
}
const build_summary_item = (summary) => {
if (summary.type == "separator") {
return $(`<div class="summary-separator">
<div class="summary-value ${summary.color ? summary.color.toLowerCase() : 'text-muted' }">${ summary.value }</div>
</div>`);
}
let df = {fieldtype: summary.datatype};
let doc = null;
@ -116,7 +121,7 @@ const build_summary_item = (summary) => {
: '';
return $(`<div class="summary-item">
<span class="summary-label small text-muted">${summary.label}</span>
<span class="summary-label">${summary.label}</span>
<div class="summary-value ${color}">${ value }</div>
</div>`);
};

77
frappe/public/scss/report.scss
View file

@ -127,43 +127,60 @@
}
.report-summary {
// FORM
background-color: var(--gray-100, #F4F5F6);
border-radius: var(--border-radius-md, 8px);
margin-top: 1rem;
margin-bottom: 1rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(62px, 1fr);
column-gap: 15px;
row-gap: 15px;
align-items: center;
text-align: center;
padding: 15px 15px;
border-bottom: 1px solid $border-color;
margin-right: 0px;
margin-left: 0px;
// SIZE & SPACING
margin: 1rem 0px;
padding: 20px 15px;
// LAYOUT
display: flex;
flex-wrap: wrap;
align-items: center;
.summary-item {
// SIZE & SPACING
margin: 0px 30px;
width: 180px;
height: 62px;
// LAYOUT
display: flex;
flex-direction: column;
place-content: center;
}
.summary-label {
font-size: var(--text-base);
font-weight: normal !important;
text-align: center;
}
.summary-value {
margin-top: 8px;
margin-bottom: 5px;
// FORM
font-size: var(--text-2xl, 20px);
font-weight: 600;
line-height: 16px;
color: $gray-900;
overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap;
font-feature-settings: "tnum";
&.green { color: var(--green-500); }
&.red { color: var(--red-500); }
&.blue { color: var(--blue-500); }
// SIZE & SPACING
margin-top: 12px;
margin-bottom: 5px;
// LAYOUT
text-align: center;
overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap;
div {
text-align: center;
overflow: hidden;
@ -171,6 +188,30 @@
white-space: nowrap;
}
}
.summary-separator {
margin: 5px 12px;
.summary-value {
// FORM
background-color: white;
border-radius: var(--border-radius, 6px);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
&.green { color: var(--green-500); }
&.red { color: var(--red-500); }
&.blue { color: var(--blue-500); }
// SIZE & SPACING
min-width: 30px;
margin: 0px 30px;
padding: 2px 8px;
// LAYOUT
display: flex;
place-content: center;
}
}
}
// for sm and above