Skip to content

Commit f3deaef

Browse files
hokolomopohokolomopo
committed
[IMP] scrollbar: take whole available size with frozen panes
When there are frozen panes, the scrollbars are offset to start at the start of the main viewport. But there is no element on the side of the frozen panes, so components like Autofill and Table Resizer can overflow from the grid with nothing to cover them. Task: 5891719
1 parent ef4d944 commit f3deaef

6 files changed

Lines changed: 104 additions & 37 deletions

File tree

‎src/components/scrollbar/scrollbar.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
.o-spreadsheet {
2+
.o-scrollbar-container {
3+
background-color: var(--os-background-gray-color);
4+
}
25
.o-scrollbar {
36
position: absolute;
47
overflow: auto;

‎src/components/scrollbar/scrollbar_horizontal.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, xml } from "@odoo/owl";
22
import { SpreadsheetChildEnv } from "../../types/spreadsheet_env";
3+
import { cssPropertiesToCss } from "../helpers";
34
import { isBrowserFirefox } from "../helpers/dom_helpers";
45
import { ScrollBar } from "./scrollbar";
56

@@ -13,14 +14,16 @@ export class HorizontalScrollBar extends Component<Props, SpreadsheetChildEnv> {
1314
};
1415
static components = { ScrollBar };
1516
static template = xml/*xml*/ `
17+
<div class="o-scrollbar-container position-absolute" t-att-style="containerStyle">
1618
<ScrollBar
1719
t-if="isDisplayed"
1820
width="width"
1921
position="position"
2022
offset="offset"
2123
direction="'horizontal'"
2224
onScroll.bind="onScroll"
23-
/>`;
25+
/>
26+
</div>`;
2427
static defaultProps = {
2528
leftOffset: 0,
2629
};
@@ -40,12 +43,21 @@ export class HorizontalScrollBar extends Component<Props, SpreadsheetChildEnv> {
4043
return xRatio < 1;
4144
}
4245

46+
get containerStyle() {
47+
const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
48+
return cssPropertiesToCss({
49+
left: `${this.props.leftOffset}px`,
50+
bottom: "0px",
51+
height: `${scrollbarWidth}px`,
52+
right: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
53+
});
54+
}
55+
4356
get position() {
4457
const { x } = this.env.model.getters.getMainViewportRect();
4558
const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
4659
return {
47-
left: `${this.props.leftOffset + x}px`,
48-
bottom: "0px",
60+
left: `${x}px`,
4961
height: `${scrollbarWidth}px`,
5062
right: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
5163
};

‎src/components/scrollbar/scrollbar_vertical.ts‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, xml } from "@odoo/owl";
22
import { SpreadsheetChildEnv } from "../../types/spreadsheet_env";
3+
import { cssPropertiesToCss } from "../helpers";
34
import { isBrowserFirefox } from "../helpers/dom_helpers";
45
import { ScrollBar } from "./scrollbar";
56

@@ -13,14 +14,16 @@ export class VerticalScrollBar extends Component<Props, SpreadsheetChildEnv> {
1314
};
1415
static components = { ScrollBar };
1516
static template = xml/*xml*/ `
16-
<ScrollBar
17-
t-if="isDisplayed"
18-
height="height"
19-
position="position"
20-
offset="offset"
21-
direction="'vertical'"
22-
onScroll.bind="onScroll"
23-
/>`;
17+
<div class="o-scrollbar-container position-absolute" t-att-style="containerStyle">
18+
<ScrollBar
19+
t-if="isDisplayed"
20+
height="height"
21+
position="position"
22+
offset="offset"
23+
direction="'vertical'"
24+
onScroll.bind="onScroll"
25+
/>
26+
</div>`;
2427
static defaultProps = {
2528
topOffset: 0,
2629
};
@@ -40,12 +43,21 @@ export class VerticalScrollBar extends Component<Props, SpreadsheetChildEnv> {
4043
return yRatio < 1;
4144
}
4245

46+
get containerStyle() {
47+
const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
48+
return cssPropertiesToCss({
49+
top: `${this.props.topOffset}px`,
50+
right: "0px",
51+
width: `${scrollbarWidth}px`,
52+
bottom: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
53+
});
54+
}
55+
4356
get position() {
4457
const { y } = this.env.model.getters.getMainViewportRect();
4558
const scrollbarWidth = this.env.model.getters.getScrollBarWidth();
4659
return {
47-
top: `${this.props.topOffset + y}px`,
48-
right: "0px",
60+
top: `${y}px`,
4961
width: `${scrollbarWidth}px`,
5062
bottom: isBrowserFirefox() ? `${scrollbarWidth}px` : "0",
5163
};

‎tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,21 +41,31 @@ exports[`Grid component in dashboard mode simple dashboard rendering snapshot 1`
4141
4242
</div>
4343
<div
44-
class="o-scrollbar vertical"
44+
class="o-scrollbar-container position-absolute"
4545
style="top:0px; right:0px; width:15px; bottom:0; "
4646
>
4747
<div
48-
style="width:1px; height:2300px; "
49-
/>
48+
class="o-scrollbar vertical"
49+
style="top:0px; width:15px; bottom:0; "
50+
>
51+
<div
52+
style="width:1px; height:2300px; "
53+
/>
54+
</div>
5055
</div>
5156
5257
<div
53-
class="o-scrollbar horizontal"
58+
class="o-scrollbar-container position-absolute"
5459
style="left:0px; bottom:0px; height:15px; right:0; "
5560
>
5661
<div
57-
style="width:2496px; height:1px; "
58-
/>
62+
class="o-scrollbar horizontal"
63+
style="left:0px; height:15px; right:0; "
64+
>
65+
<div
66+
style="width:2496px; height:1px; "
67+
/>
68+
</div>
5969
</div>
6070
6171
<div

‎tests/grid/__snapshots__/grid_component.test.ts.snap‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,21 +127,31 @@ exports[`Grid component simple rendering snapshot 1`] = `
127127
128128
129129
<div
130-
class="o-scrollbar vertical"
130+
class="o-scrollbar-container position-absolute"
131131
style="top:26px; right:0px; width:15px; bottom:0; "
132132
>
133133
<div
134-
style="width:1px; height:2346px; "
135-
/>
134+
class="o-scrollbar vertical"
135+
style="top:0px; width:15px; bottom:0; "
136+
>
137+
<div
138+
style="width:1px; height:2346px; "
139+
/>
140+
</div>
136141
</div>
137142
138143
<div
139-
class="o-scrollbar horizontal"
144+
class="o-scrollbar-container position-absolute"
140145
style="left:48px; bottom:0px; height:15px; right:0; "
141146
>
142147
<div
143-
style="width:2496px; height:1px; "
144-
/>
148+
class="o-scrollbar horizontal"
149+
style="left:0px; height:15px; right:0; "
150+
>
151+
<div
152+
style="width:2496px; height:1px; "
153+
/>
154+
</div>
145155
</div>
146156
147157
<div

‎tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -969,21 +969,31 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = `
969969
970970
971971
<div
972-
class="o-scrollbar vertical"
972+
class="o-scrollbar-container position-absolute"
973973
style="top:26px; right:0px; width:15px; bottom:0; "
974974
>
975975
<div
976-
style="width:1px; height:2346px; "
977-
/>
976+
class="o-scrollbar vertical"
977+
style="top:0px; width:15px; bottom:0; "
978+
>
979+
<div
980+
style="width:1px; height:2346px; "
981+
/>
982+
</div>
978983
</div>
979984
980985
<div
981-
class="o-scrollbar horizontal"
986+
class="o-scrollbar-container position-absolute"
982987
style="left:48px; bottom:0px; height:15px; right:0; "
983988
>
984989
<div
985-
style="width:2496px; height:1px; "
986-
/>
990+
class="o-scrollbar horizontal"
991+
style="left:0px; height:15px; right:0; "
992+
>
993+
<div
994+
style="width:2496px; height:1px; "
995+
/>
996+
</div>
987997
</div>
988998
989999
<div
@@ -2015,21 +2025,31 @@ exports[`components take the small screen into account 1`] = `
20152025
20162026
20172027
<div
2018-
class="o-scrollbar vertical"
2028+
class="o-scrollbar-container position-absolute"
20192029
style="top:26px; right:0px; width:15px; bottom:0; "
20202030
>
20212031
<div
2022-
style="width:1px; height:2346px; "
2023-
/>
2032+
class="o-scrollbar vertical"
2033+
style="top:0px; width:15px; bottom:0; "
2034+
>
2035+
<div
2036+
style="width:1px; height:2346px; "
2037+
/>
2038+
</div>
20242039
</div>
20252040
20262041
<div
2027-
class="o-scrollbar horizontal"
2042+
class="o-scrollbar-container position-absolute"
20282043
style="left:48px; bottom:0px; height:15px; right:0; "
20292044
>
20302045
<div
2031-
style="width:2496px; height:1px; "
2032-
/>
2046+
class="o-scrollbar horizontal"
2047+
style="left:0px; height:15px; right:0; "
2048+
>
2049+
<div
2050+
style="width:2496px; height:1px; "
2051+
/>
2052+
</div>
20332053
</div>
20342054
20352055
<div

0 commit comments

Comments
 (0)