changes
This commit is contained in:
gsinghpal
@@ -0,0 +1,30 @@
|
||||
// Fusion reports design tokens.
|
||||
//
|
||||
// COLORS now come from Odoo's own SCSS palette ($o-view-background-color,
|
||||
// $o-gray-100..900, $o-enterprise-action-color). Dark-mode adjustments live
|
||||
// in the separate `reports.dark.scss` bundle (web.assets_web_dark) so they
|
||||
// load automatically when Odoo enters dark mode -- no [data-bs-theme] hack
|
||||
// is needed.
|
||||
//
|
||||
// This file therefore only carries spacing/typography tokens used by the
|
||||
// Fusion-only components (AI commentary panel, anomaly strip).
|
||||
|
||||
// Spacing scale (4px increments)
|
||||
$report-space-1: 0.25rem;
|
||||
$report-space-2: 0.5rem;
|
||||
$report-space-3: 0.75rem;
|
||||
$report-space-4: 1rem;
|
||||
$report-space-5: 1.25rem;
|
||||
$report-space-6: 1.5rem;
|
||||
$report-space-8: 2rem;
|
||||
|
||||
// Typography
|
||||
$report-font-size-xs: 0.75rem;
|
||||
$report-font-size-sm: 0.875rem;
|
||||
$report-font-size-base: 1rem;
|
||||
$report-font-size-lg: 1.125rem;
|
||||
$report-font-size-xl: 1.25rem;
|
||||
|
||||
// Border radius
|
||||
$report-border-radius: 0.25rem;
|
||||
$report-border-radius-md: 0.5rem;
|
||||
@@ -0,0 +1,80 @@
|
||||
// Dark-mode overrides for the Fusion reports viewer.
|
||||
// Loaded only via web.assets_web_dark, mirroring the strategy used by
|
||||
// Enterprise account_reports.dark.scss. The light styles in reports.scss
|
||||
// reference Odoo's $o-* palette so most surfaces flip automatically when
|
||||
// the dark bundle re-derives those palette vars; this file just smooths
|
||||
// over the few spots where Enterprise applies a manual touch-up.
|
||||
|
||||
.account_report {
|
||||
.o_fusion_report_header {
|
||||
background-color: $o-view-background-color;
|
||||
border-bottom-color: $o-gray-700;
|
||||
|
||||
h1 { color: $o-gray-200 }
|
||||
.o_fusion_report_period { color: $o-gray-400 }
|
||||
}
|
||||
|
||||
.o_fusion_report_filters {
|
||||
background-color: $o-view-background-color;
|
||||
border-bottom-color: $o-gray-700;
|
||||
|
||||
label { color: $o-gray-300 }
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: $o-view-background-color;
|
||||
border-color: $o-gray-700;
|
||||
|
||||
> thead > tr:not(:last-child) > th:not(:first-child) {
|
||||
border-color: $o-gray-700;
|
||||
}
|
||||
|
||||
> tbody > tr {
|
||||
&:not(.empty) > td { border-bottom-color: $o-gray-800 }
|
||||
&.unfolded > td { border-bottom-color: $o-gray-700 }
|
||||
> td.muted { color: $o-gray-600 }
|
||||
&:hover .muted { color: $o-gray-300 }
|
||||
}
|
||||
}
|
||||
|
||||
table.striped {
|
||||
> thead > tr:not(:first-child) > th:nth-child(2n+3) { background: $o-gray-800 }
|
||||
> tbody {
|
||||
> tr:not(.line_level_0):not(.empty) > td:nth-child(2n+3) { background: $o-gray-800 }
|
||||
> tr.line_level_0 > td:nth-child(2n+3) { background: $o-gray-700 }
|
||||
}
|
||||
}
|
||||
|
||||
thead.sticky { background-color: $o-view-background-color }
|
||||
|
||||
.line_level_0 {
|
||||
color: $o-gray-200;
|
||||
|
||||
> td { background-color: $o-gray-700 }
|
||||
.muted { color: $o-gray-500 !important }
|
||||
}
|
||||
|
||||
@for $i from 2 through 16 {
|
||||
.line_level_#{$i} > td { color: $o-gray-300 }
|
||||
}
|
||||
|
||||
.btn_dropdown, .btn_foldable, .btn_foldable_empty,
|
||||
.btn_more, .btn_action {
|
||||
color: $o-gray-600;
|
||||
}
|
||||
.btn_foldable { color: $o-gray-500 }
|
||||
.btn_action {
|
||||
background-color: $o-view-background-color;
|
||||
color: $o-gray-300;
|
||||
border-color: $o-gray-600;
|
||||
}
|
||||
|
||||
.o_fusion_commentary_panel {
|
||||
background-color: $o-view-background-color;
|
||||
border-color: $o-gray-700;
|
||||
|
||||
h4 { color: $o-gray-200 }
|
||||
.commentary-section h5 { color: $o-gray-400 }
|
||||
.commentary-meta { color: $o-gray-500 }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user