Skip to content

Added Switch to show/hide scrollBar #1080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Sep 17, 2024
Merged

Added Switch to show/hide scrollBar #1080

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
bcbc6c1
syntax corrected
MenamAfzal Jul 30, 2024
8fd052a
scrollbar added
MenamAfzal Jul 30, 2024
ec73757
vertical and horizontal scrollbar
MenamAfzal Jul 31, 2024
69ddd0a
translation added
MenamAfzal Jul 31, 2024
9f8d867
scrollbar added to container
MenamAfzal Jul 31, 2024
1acf904
tabbed container scrollbar
MenamAfzal Jul 31, 2024
1c4812b
horizontal row
MenamAfzal Aug 1, 2024
4d3fd58
condition changed
MenamAfzal Aug 1, 2024
abc37df
translation changed
MenamAfzal Aug 1, 2024
a5f5919
pull from origin
MenamAfzal Aug 1, 2024
b6e32d6
vertical scrollbar in shapes
MenamAfzal Aug 1, 2024
7a52366
consoles removed
MenamAfzal Sep 9, 2024
55f5546
latest changes
MenamAfzal Sep 9, 2024
e1dca91
pull from origin dev
MenamAfzal Sep 9, 2024
bccd088
removed duplicate code
MenamAfzal Sep 9, 2024
b7c6e8e
tabbed container issue resolved
MenamAfzal Sep 14, 2024
e88c25e
minor tweaks
MenamAfzal Sep 16, 2024
853ac34
final tweaks
MenamAfzal Sep 17, 2024
1170d69
pull from dev
MenamAfzal Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
vertical and horizontal scrollbar
  • Loading branch information
@MenamAfzal
MenamAfzal committed Jul 31, 2024
commit ec73757787a814fbc4e33dbe47bcc579392a5e56
5 changes: 3 additions & 2 deletions client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@ export function ListView(props: Props) {
[children.noOfRows]
);
const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]);
const scrollbars = useMemo(() => children.scrollbars.getView(), [children.scrollbars]);
const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]);
const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar]);
const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]);
const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]);
const noOfColumns = useMemo(
Expand Down Expand Up @@ -286,7 +287,7 @@ export function ListView(props: Props) {
<BackgroundColorContext.Provider value={style.background}>
<ListViewWrapper $style={style} $paddingWidth={paddingWidth} $animationStyle={animationStyle}>
<BodyWrapper ref={ref} $autoHeight={autoHeight}>
<ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars} overflow={autoHeight?'hidden':'scroll'}>
<ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={horizontal?!showHorizontalScrollbar:!showVerticalScrollbar} overflow={autoHeight?horizontal?'scroll':'hidden':'scroll'}>
<ReactResizeDetector
onResize={(width?: number, height?: number) => {
if (height) setListHeight(height);
Expand Down
3 changes: 2 additions & 1 deletion client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ const childrenMap = {
heightUnitOfRow: withDefault(NumberControl, 1),
container: ContextContainerComp,
autoHeight: AutoHeightControl,
scrollbars: withDefault(BoolControl, false),
showVerticalScrollbar: withDefault(BoolControl, false),
showHorizontalScrollbar: withDefault(BoolControl, false),
showBorder: BoolControl,
pagination: withDefault(PaginationControl, { pageSize: "6" }),
style: styleControl(ListViewStyle, 'style'),
Expand Down
9 changes: 7 additions & 2 deletions client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,14 @@ export function listPropertyView(compType: ListCompType) {
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.layout}>
{children.autoHeight.getPropertyView()}
{(!children.autoHeight.getView()) &&
children.showVerticalScrollbar.propertyView({
label: trans("prop.showVerticalScrollbar"),
}
)}
{(!children.autoHeight.getView() || children.horizontal.getView()) &&
children.scrollbars.propertyView({
label: trans("prop.scrollbar"),
children.showHorizontalScrollbar.propertyView({
label: trans("prop.showHorizontalScrollbar"),
}
)}
{children.horizontal.propertyView({
Expand Down