Skip to content

Allow toggling of visible scrollbar indicators #4523

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
vakrilov merged 8 commits into from
Jul 11, 2017
Merged

Allow toggling of visible scrollbar indicators #4523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c5a14ee
Allow toggling of visible scrollbar indicators
sitefinitysteve Jul 6, 2017
086fba9
Add unit test
sitefinitysteve Jul 10, 2017
2e384b5
Make what the prop does more clear
sitefinitysteve Jul 10, 2017
b60066b
Fix tslint
sitefinitysteve Jul 10, 2017
eb41ae6
Rename property per @vakrilov
sitefinitysteve Jul 10, 2017
67c5ad1
Missed string property rename
sitefinitysteve Jul 11, 2017
2071417
Move property from method
sitefinitysteve Jul 11, 2017
e614064
Update orientationChanged to use new property name
sitefinitysteve Jul 11, 2017
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
42 changes: 42 additions & 0 deletions tests/app/ui/scroll-view/scroll-view-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,48 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
TKUnit.assertEqual(scrollX, this.testView.horizontalOffset);
TKUnit.assertEqual(scrollX, layoutHelper.dp(100));
}

public test_scrollView_horizontal_can_set_indicator_state() {
this.testView.orientation = "horizontal";
this.testView.scrollBarIndicatorVisible = true;
this.waitUntilTestElementLayoutIsValid();

if (app.ios) {
TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, true);
Copy link
Copy Markdown
Contributor

@vakrilov vakrilov Jul 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use nativeView instead of ios/android

} else {
TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), true);
}

this.testView.scrollBarIndicatorVisible = false;
this.waitUntilTestElementLayoutIsValid();

if (app.ios) {
TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, false);
} else {
TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), false);
}
}

public test_scrollView_vertical_can_set_indicator_state() {
this.testView.orientation = "vertical";
this.testView.scrollBarIndicatorVisible = true;
this.waitUntilTestElementLayoutIsValid();

if (app.ios) {
TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, true);
} else {
TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), true);
}

this.testView.scrollBarIndicatorVisible = false;
this.waitUntilTestElementLayoutIsValid();

if (app.ios) {
TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, false);
} else {
TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), false);
}
}
}

export function createTestCase(): ScrollLayoutTest {
Expand Down
11 changes: 9 additions & 2 deletions tns-core-modules/ui/scroll-view/scroll-view-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ScrollView as ScrollViewDefinition, Orientation, ScrollEventData } from ".";
import { ContentView, Property, makeParser, makeValidator, EventData } from "../content-view";
import { ContentView, Property, makeParser, makeValidator, EventData, booleanConverter } from "../content-view";
import { profile } from "../../profiling";

export * from "../content-view";
Expand All @@ -9,6 +9,7 @@ export abstract class ScrollViewBase extends ContentView implements ScrollViewDe
public static scrollEvent = "scroll";

public orientation: Orientation;
public scrollBarIndicatorVisible: boolean;

public addEventListener(arg: string, callback: any, thisArg?: any) {
super.addEventListener(arg, callback, thisArg);
Expand Down Expand Up @@ -94,4 +95,10 @@ export const orientationProperty = new Property<ScrollViewBase, Orientation>({
},
valueConverter: converter
});
orientationProperty.register(ScrollViewBase);
orientationProperty.register(ScrollViewBase);

export const scrollBarIndicatorVisibleProperty = new Property<ScrollViewBase, boolean>({
name: "scrollBarIndicatorVisible", defaultValue: true,
valueConverter: booleanConverter
});
scrollBarIndicatorVisibleProperty.register(ScrollViewBase);
13 changes: 12 additions & 1 deletion tns-core-modules/ui/scroll-view/scroll-view.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ScrollEventData } from ".";
import { ScrollViewBase, layout } from "./scroll-view-common";
import { ScrollViewBase, layout, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";

export * from "./scroll-view-common";

Expand Down Expand Up @@ -44,6 +44,17 @@ export class ScrollView extends ScrollViewBase {
return nativeView.getScrollableLength() / layout.getDisplayDensity();
}

[scrollBarIndicatorVisibleProperty.getDefault](): boolean {
return true;
}
[scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
if (this.orientation === "horizontal") {
this.nativeView.setHorizontalScrollBarEnabled(value);
} else {
this.nativeView.setVerticalScrollBarEnabled(value);
}
}

public scrollToVerticalOffset(value: number, animated: boolean) {
const nativeView = this.nativeView;
if (nativeView && this.orientation === "vertical") {
Expand Down
5 changes: 5 additions & 0 deletions tns-core-modules/ui/scroll-view/scroll-view.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ export class ScrollView extends ContentView {
*/
scrollableWidth: number;

/**
* Toggles scrollbar indicator visibility
*/
scrollBarIndicatorVisible: boolean;

/**
* Scrolls the content the specified vertical offset position.
* @param value The offset value
Expand Down
19 changes: 17 additions & 2 deletions tns-core-modules/ui/scroll-view/scroll-view.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ScrollEventData } from ".";
import { View, layout, ScrollViewBase } from "./scroll-view-common";
import { View, layout, ScrollViewBase, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";

export * from "./scroll-view-common";

Expand Down Expand Up @@ -53,6 +53,14 @@ export class ScrollView extends ScrollViewBase {
this.nativeView.delegate = null;
}

protected updateScrollBarVisibility(value) {
if (this.orientation === "horizontal") {
this.nativeView.showsHorizontalScrollIndicator = value;
} else {
this.nativeView.showsVerticalScrollIndicator = value;
}
}

get horizontalOffset(): number {
return this.nativeView.contentOffset.x;
}
Expand All @@ -77,6 +85,13 @@ export class ScrollView extends ScrollViewBase {
return Math.max(0, this.nativeView.contentSize.height - this.nativeView.bounds.size.height);
}

[scrollBarIndicatorVisibleProperty.getDefault](): boolean {
return true;
}
[scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
this.updateScrollBarVisibility(value);
}

get ios(): UIView {
return this.nativeView;
}
Expand Down Expand Up @@ -146,7 +161,7 @@ export class ScrollView extends ScrollViewBase {
}

public _onOrientationChanged() {
// NOOP
this.updateScrollBarVisibility(this.scrollBarIndicatorVisible);
}
}

Expand Down