Skip to content

Commit bb16a24

Browse files
hokolomopohokolomopo
committed
[FIX] cf: conditional formatting preview is truncated for nothing
In the side panel, the preview of a conditional formatting rule is truncated at 142px, even if there is enough space to display it fully. Task: 5344000 X-original-commit: 5d0df51
1 parent 7ed20c4 commit bb16a24

File tree

3 files changed

+540
-0
lines changed

3 files changed

+540
-0
lines changed

‎src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.ts‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,124 @@ import { useDragAndDropListItems } from "../../../helpers/drag_and_drop_hook";
66
import { ICONS } from "../../../icons/icons";
77
import { ConditionalFormatPreview } from "../cf_preview/cf_preview";
88

9+
<<<<<<< 7ed20c4cf11c264476cf597a313c82d45ef3e64a
10+
||||||| 60a66b6807132b8b1498059652eb156ce9d66854
11+
css/* scss */ `
12+
.o-cf-preview-list {
13+
.o-cf-preview {
14+
&.o-cf-cursor-ptr {
15+
cursor: pointer;
16+
}
17+
18+
border-bottom: 1px solid #ccc;
19+
height: 60px;
20+
padding: 10px;
21+
position: relative;
22+
cursor: pointer;
23+
&:hover,
24+
&.o-cf-dragging {
25+
background-color: #ebebeb;
26+
}
27+
28+
&:not(:hover) .o-cf-delete-button {
29+
display: none;
30+
}
31+
.o-cf-preview-icon {
32+
border: 1px solid lightgrey;
33+
position: absolute;
34+
height: 50px;
35+
width: 50px;
36+
}
37+
.o-cf-preview-description {
38+
left: 65px;
39+
margin-bottom: auto;
40+
margin-right: 8px;
41+
margin-top: auto;
42+
position: relative;
43+
width: 142px;
44+
.o-cf-preview-description-rule {
45+
margin-bottom: 4px;
46+
font-weight: 600;
47+
color: #303030;
48+
max-height: 2.8em;
49+
line-height: 1.4em;
50+
}
51+
.o-cf-preview-range {
52+
font-size: 12px;
53+
}
54+
}
55+
.o-cf-delete {
56+
left: 90%;
57+
top: 39%;
58+
position: absolute;
59+
}
60+
&:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
61+
display: none !important;
62+
}
63+
.o-cf-drag-handle {
64+
left: -8px;
65+
cursor: move;
66+
.o-icon {
67+
width: 6px;
68+
height: 30px;
69+
}
70+
}
71+
}
72+
}
73+
`;
74+
=======
75+
css/* scss */ `
76+
.o-cf-preview-list {
77+
.o-cf-preview {
78+
&.o-cf-cursor-ptr {
79+
cursor: pointer;
80+
}
81+
82+
border-bottom: 1px solid #ccc;
83+
height: 60px;
84+
padding: 10px;
85+
position: relative;
86+
cursor: pointer;
87+
&:hover,
88+
&.o-cf-dragging {
89+
background-color: #ebebeb;
90+
}
91+
92+
&:not(:hover) .o-cf-delete-button {
93+
display: none;
94+
}
95+
.o-cf-preview-icon {
96+
border: 1px solid lightgrey;
97+
height: 50px;
98+
width: 50px;
99+
}
100+
.o-cf-preview-description {
101+
.o-cf-preview-description-rule {
102+
margin-bottom: 4px;
103+
font-weight: 600;
104+
color: #303030;
105+
max-height: 2.8em;
106+
line-height: 1.4em;
107+
}
108+
.o-cf-preview-range {
109+
font-size: 12px;
110+
}
111+
}
112+
&:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
113+
display: none !important;
114+
}
115+
.o-cf-drag-handle {
116+
left: 2px;
117+
cursor: move;
118+
.o-icon {
119+
width: 6px;
120+
height: 30px;
121+
}
122+
}
123+
}
124+
}
125+
`;
126+
>>>>>>> 8879ca80b4a87feee971293b478ea51fed01fa35
9127
interface Props {
10128
conditionalFormats: ConditionalFormat[];
11129
onPreviewClick: (cf: ConditionalFormat) => void;

‎src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.xml‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,98 @@
2020
</div>
2121
</div>
2222
</t>
23+
<<<<<<< 7ed20c4cf11c264476cf597a313c82d45ef3e64a
24+
||||||| 60a66b6807132b8b1498059652eb156ce9d66854
25+
26+
<t t-name="o-spreadsheet-ConditionalFormattingPanelPreview">
27+
<div
28+
class="o-cf-preview d-flex position-relative"
29+
t-att-class="{ 'o-cf-dragging': dragAndDrop.draggedItemId === cf.id }"
30+
t-att-style="getPreviewDivStyle(cf)"
31+
t-att-data-id="cf.id"
32+
t-on-click="(ev) => props.onPreviewClick(cf)"
33+
t-on-mousedown="(ev) => this.onMouseDown(cf, ev)">
34+
<div class="position-relative h-100 w-100 d-flex align-items-center">
35+
<div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
36+
<t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
37+
</div>
38+
<t t-if="cf.rule.type==='IconSetRule'">
39+
<div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
40+
<t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
41+
<t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
42+
<t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
43+
</div>
44+
</t>
45+
<t t-else="">
46+
<div
47+
t-att-style="getPreviewImageStyle(cf.rule)"
48+
class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
49+
123
50+
</div>
51+
</t>
52+
<div class="o-cf-preview-description">
53+
<div class="o-cf-preview-ruletype">
54+
<div class="o-cf-preview-description-rule text-truncate">
55+
<t t-esc="getDescription(cf)"/>
56+
</div>
57+
</div>
58+
<div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
59+
</div>
60+
<div class="o-cf-delete">
61+
<div
62+
class="o-cf-delete-button text-muted"
63+
t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
64+
title="Remove rule">
65+
<t t-call="o-spreadsheet-Icon.TRASH"/>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</t>
71+
=======
72+
73+
<t t-name="o-spreadsheet-ConditionalFormattingPanelPreview">
74+
<div
75+
class="o-cf-preview d-flex position-relative align-items-center"
76+
t-att-class="{ 'o-cf-dragging': dragAndDrop.draggedItemId === cf.id }"
77+
t-att-style="getPreviewDivStyle(cf)"
78+
t-att-data-id="cf.id"
79+
t-on-click="(ev) => props.onPreviewClick(cf)"
80+
t-on-mousedown="(ev) => this.onMouseDown(cf, ev)">
81+
<div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
82+
<t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
83+
</div>
84+
<t t-if="cf.rule.type==='IconSetRule'">
85+
<div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3">
86+
<t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
87+
<t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
88+
<t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
89+
</div>
90+
</t>
91+
<t t-else="">
92+
<div
93+
t-att-style="getPreviewImageStyle(cf.rule)"
94+
class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0">
95+
123
96+
</div>
97+
</t>
98+
<div class="o-cf-preview-description me-3 overflow-auto">
99+
<div class="o-cf-preview-ruletype">
100+
<div class="o-cf-preview-description-rule text-truncate">
101+
<t t-esc="getDescription(cf)"/>
102+
</div>
103+
</div>
104+
<div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
105+
</div>
106+
<div class="o-cf-delete ms-auto">
107+
<div
108+
class="o-cf-delete-button text-muted"
109+
t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
110+
title="Remove rule">
111+
<t t-call="o-spreadsheet-Icon.TRASH"/>
112+
</div>
113+
</div>
114+
</div>
115+
</t>
116+
>>>>>>> 8879ca80b4a87feee971293b478ea51fed01fa35
23117
</templates>

0 commit comments

Comments
 (0)