36964d6b79
User feedback: 'i like the odoo enterprise style reports, I hate our style.'
Replaces our custom 'o_fusion_reports' visual with a faithful adaptation
of Enterprise account_reports. Same .account_report root class, same
table semantics (line_name + line_cell + line_level_N), same border
treatment (1px gray-300 borders, 0.25rem radius, sticky thead), same
button hover behavior (gray-300 -> enterprise-action-color), same dense
0.8rem font-size + padded cells.
SCSS layout:
- reports.scss in web.assets_backend bundle (eager light)
- reports.dark.scss in web.assets_web_dark bundle (lazy dark mode)
- _variables.scss reduced to spacing/typography only -- colors use
Odoo's \$o-* SCSS vars so dark mode flips automatically via the
separate dark bundle
- old dark_mode.scss removed (was using non-Odoo [data-color-scheme]
selector that never matched anything)
QWeb templates rewritten to mirror Enterprise's structure:
- report_viewer.xml roots at .account_report with scroll container
- report_table.xml uses Enterprise's td.line_name + td.line_cell with
.wrapper > .content nesting; partner-grouped reports now actually
render their aging buckets (previously showed nothing)
- period_filter.xml is now a clean Bootstrap-styled inline filter bar
Kept Fusion-only components but restyled to fit:
- anomaly_strip uses Bootstrap alert-{danger,warning,info} colors
- ai_commentary_panel is a plain bordered panel, no gradients/emojis
- drill_down_dialog unchanged (already a Bootstrap modal)
Made-with: Cursor
345 lines
10 KiB
SCSS
345 lines
10 KiB
SCSS
// Faithful adaptation of Enterprise account_reports' look.
|
|
// Source reference:
|
|
// account_reports/static/src/components/account_report/account_report.scss
|
|
// We mirror the same root selector (.account_report), the same table
|
|
// semantics (.line_name + .line_cell + .line_level_N), the same border
|
|
// treatment (1px gray-300, 0.25rem radius, sticky thead) and the same
|
|
// button hover behavior (gray-300 -> enterprise action color).
|
|
//
|
|
// Trimmed: chatter, annotations, audit-balance and journal-line debug
|
|
// popovers are Enterprise-only features we do not ship.
|
|
|
|
.account_report {
|
|
//--------------------------------------------------------------------
|
|
// Header (Fusion-only -- Enterprise uses Odoo ControlPanel; we keep
|
|
// a lightweight header to host the report title + AI commentary
|
|
// trigger but style it to feel native).
|
|
//--------------------------------------------------------------------
|
|
.o_fusion_report_header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.5rem 1.5rem;
|
|
background-color: $o-view-background-color;
|
|
border-bottom: 1px solid $o-gray-300;
|
|
|
|
h1 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: $o-gray-800;
|
|
}
|
|
|
|
.o_fusion_report_period {
|
|
font-size: 0.8rem;
|
|
color: $o-gray-600;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Scroll container (mirrors Enterprise)
|
|
//--------------------------------------------------------------------
|
|
.o_account_report_scroll_container {
|
|
margin-inline: 0 !important;
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Table (verbatim from Enterprise, minus chatter/annotation/audit)
|
|
//--------------------------------------------------------------------
|
|
.table {
|
|
background-color: $o-view-background-color;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 0.8rem;
|
|
margin: 24px 24px;
|
|
padding: 24px;
|
|
width: auto;
|
|
min-width: 800px;
|
|
border: 1px solid $o-gray-300;
|
|
border-radius: 0.25rem;
|
|
|
|
> :not(caption) > * > * { padding: 0.25rem 0.75rem }
|
|
|
|
> thead {
|
|
> tr {
|
|
th:first-child {
|
|
color: lightgrey;
|
|
}
|
|
th:not(:first-child) {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
> tr:not(:last-child) > th:not(:first-child) { border: 1px solid $o-gray-300 }
|
|
}
|
|
|
|
> tbody {
|
|
> tr {
|
|
&.unfolded { font-weight: bold }
|
|
> td {
|
|
a { cursor: pointer }
|
|
.clickable { color: $o-enterprise-action-color }
|
|
&.muted { color: $o-gray-300 }
|
|
&:empty::after{ content: "\00a0" }
|
|
&:empty { line-height: 1 }
|
|
}
|
|
|
|
&:not(.empty) > td { border-bottom: 1px solid $o-gray-200 }
|
|
&.total { font-weight: bold }
|
|
&.o_bold_tr { font-weight: bold }
|
|
|
|
&.unfolded {
|
|
> td { border-bottom: 1px solid $o-gray-300 }
|
|
.btn_action { opacity: 1 }
|
|
.btn_more { opacity: 1 }
|
|
}
|
|
|
|
&:hover {
|
|
&.empty > * { --table-accent-bg: transparent }
|
|
.muted { color: $o-gray-800 }
|
|
.btn_action, .btn_more {
|
|
opacity: 1;
|
|
color: $o-enterprise-action-color;
|
|
}
|
|
.btn_dropdown { color: $o-enterprise-action-color }
|
|
.btn_foldable { color: $o-enterprise-action-color }
|
|
}
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
table.striped {
|
|
> thead > tr:not(:first-child) > th:nth-child(2n+3) { background: $o-gray-100 }
|
|
> tbody {
|
|
> tr:not(.line_level_0):not(.empty) > td:nth-child(2n+3) { background: $o-gray-100 }
|
|
> tr.line_level_0 > td:nth-child(2n+3) { background: $o-gray-300 }
|
|
}
|
|
}
|
|
|
|
thead.sticky {
|
|
background-color: $o-view-background-color;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Line cells
|
|
//--------------------------------------------------------------------
|
|
.line_name {
|
|
vertical-align: middle;
|
|
> .wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> .content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.name { white-space: nowrap }
|
|
&.draft { color: $o-info; }
|
|
&.unfoldable:hover { cursor: pointer }
|
|
}
|
|
|
|
.line_cell {
|
|
vertical-align: middle;
|
|
> .wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> .content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&.date > .wrapper { justify-content: center }
|
|
&.numeric > .wrapper { justify-content: flex-end }
|
|
.name { white-space: nowrap }
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Indentation per level
|
|
//--------------------------------------------------------------------
|
|
.line_level_0 {
|
|
color: $o-gray-700;
|
|
font-weight: bold;
|
|
|
|
> td {
|
|
border-bottom: 0 !important;
|
|
background-color: $o-gray-300;
|
|
}
|
|
.muted { color: $o-gray-400 !important }
|
|
}
|
|
|
|
@for $i from 2 through 16 {
|
|
.line_level_#{$i} {
|
|
$indentation: (($i + 1) * 8px) - 20px;
|
|
|
|
> td {
|
|
color: $o-gray-700;
|
|
|
|
&.line_name.unfoldable .wrapper { column-gap: calc(#{ $indentation }) }
|
|
&.line_name:not(.unfoldable) .wrapper { padding-left: $indentation }
|
|
}
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Variance helpers (Fusion-only -- comparison reports surface signed
|
|
// deltas right-aligned in their own column).
|
|
//--------------------------------------------------------------------
|
|
.variance_pos { color: $o-success }
|
|
.variance_neg { color: $o-danger }
|
|
|
|
//--------------------------------------------------------------------
|
|
// Link
|
|
//--------------------------------------------------------------------
|
|
.link { color: $o-enterprise-action-color }
|
|
|
|
//--------------------------------------------------------------------
|
|
// Buttons (foldable / dropdown / action / more)
|
|
//--------------------------------------------------------------------
|
|
.btn_dropdown, .btn_foldable, .btn_foldable_empty,
|
|
.btn_more, .btn_action {
|
|
border: none;
|
|
color: $o-gray-300;
|
|
font-size: inherit;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
text-align: center;
|
|
width: 20px;
|
|
white-space: nowrap;
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
color: $o-enterprise-action-color !important;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.btn_foldable { color: $o-gray-500 }
|
|
.btn_foldable_empty:hover { cursor: default }
|
|
.btn_more { opacity: 1 }
|
|
.btn_action {
|
|
opacity: 0;
|
|
background-color: $o-view-background-color;
|
|
color: $o-gray-600;
|
|
width: auto;
|
|
padding: 0 0.25rem;
|
|
margin: 0 0.25rem;
|
|
border: 1px solid $o-gray-300;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Dropdown
|
|
//--------------------------------------------------------------------
|
|
.dropdown { display: inline }
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Period filter bar (Fusion-only -- Enterprise has a much richer
|
|
// filter component; we keep our minimal date+comparison+report-type
|
|
// bar but style it to feel native to .account_report).
|
|
//--------------------------------------------------------------------
|
|
.account_report .o_fusion_report_filters {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 1.5rem;
|
|
background-color: $o-view-background-color;
|
|
border-bottom: 1px solid $o-gray-200;
|
|
font-size: 0.8rem;
|
|
|
|
label {
|
|
color: $o-gray-700;
|
|
margin-bottom: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.form-select, .form-control {
|
|
font-size: 0.8rem;
|
|
padding: 0.25rem 0.5rem;
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// AI commentary panel (Fusion-only addition)
|
|
//--------------------------------------------------------------------
|
|
.account_report .o_fusion_commentary_panel {
|
|
background-color: $o-view-background-color;
|
|
border: 1px solid $o-gray-300;
|
|
border-radius: 0.25rem;
|
|
margin: 0 24px 24px;
|
|
padding: 1rem 1.25rem;
|
|
font-size: 0.85rem;
|
|
|
|
h4 {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem;
|
|
color: $o-gray-800;
|
|
}
|
|
|
|
.commentary-section {
|
|
margin-bottom: 0.75rem;
|
|
|
|
h5 {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: $o-gray-600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 0.25rem;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
li { margin: 0.15rem 0 }
|
|
}
|
|
|
|
p { margin: 0 }
|
|
}
|
|
|
|
.commentary-meta {
|
|
font-size: 0.7rem;
|
|
color: $o-gray-500;
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------
|
|
// Anomaly strip (Fusion-only) -- now a plain Bootstrap-style alert,
|
|
// inset to align with the report table padding.
|
|
//--------------------------------------------------------------------
|
|
.account_report .o_fusion_anomaly_strip {
|
|
margin: 0.5rem 24px 0;
|
|
padding: 0.4rem 0.75rem;
|
|
border: 1px solid;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.8rem;
|
|
|
|
.anomaly_label { font-weight: 600 }
|
|
.anomaly_delta { margin-left: 0.5rem }
|
|
.anomaly_severity {
|
|
margin-left: 0.75rem;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.8;
|
|
}
|
|
}
|