pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] hr_org_chart: add opacity when one of siblings is unfolded

Browse Source 
Before this commit, when the user unfolds a node to display its child
nodes, if that node unfolded has some child nodes then it could be
difficult for the user to clearly see the hierarchy.

This commit adds an opacity to 50% for the sibling nodes when the user
unfold a node in the same row.

task-3376776
This commit is contained in:
Xavier Bol (xbo)
2023-10-16 08:17:31 +02:00
parent 3489a0d28f
commit 879e4e3412
3 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+8
View File
@@ -34,6 +34,14 @@ export class HierarchyCard extends Component {
this.templates = useViewCompiler(this.constructor.Compiler, templates);
}
get classNames() {
const classNames = [this.props.classNames];
if (this.props.node.nodes.length) {
classNames.push("o_hierarchy_node_unfolded");
}
return classNames.join(" ");
}
getRenderingContext(data) {
const record = getFormattedRecord(data.record);
return {
addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates>
<t t-name="hr_org_chart.HierarchyCard">
<div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames" t-att-data-node-id="props.node.id">
<div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="classNames" t-att-data-node-id="props.node.id">
<div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
<button t-if="props.node.parentResId !== false and !props.node.parentNode"
name="hierarchy_search_parent_node"
addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
+10 -4
View File
@@ -4,10 +4,16 @@ $o-chart-line-color: #ababb1;
.o_hierarchy_container {
gap: 25px;
.o_hierarchy_row.o_hierarchy_hover {
background-color: $hierarchy_element_hover-background;
box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
1px 1px 0px 0px $hierarchy_element_hover-border inset;
.o_hierarchy_row {
&.o_hierarchy_hover {
background-color: $hierarchy_element_hover-background;
box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
1px 1px 0px 0px $hierarchy_element_hover-border inset;
}
&:has(.o_hierarchy_node_unfolded) .o_hierarchy_node_container:not(.o_hierarchy_node_unfolded) {
opacity: 50%;
}
}
.o_hierarchy_separator {