docs: revamp Progress article

app/ng-ui-widgets-category/progress/end.md

@@ -1,8 +1,19 @@
+## Properties
 
-**API Reference for** [Progress Class](http://docs.nativescript.org/api-reference/modules/_ui_progress_.html)
+| Name     | Type    | Description    |
+|----------|---------|----------------|
+| `value`   | `number` | Gets or sets a progress current value. |
+| `maxValue`   | `number` | Gets or sets a progress max value. |
 
-**Native Component**
+## API References
 
-| Android                | iOS      |
-|:-----------------------|:---------|
-| [android.widget.ProgressBar](http://developer.android.com/reference/android/widget/ProgressBar.html) (indeterminate = false) | [UIProgressView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIProgressView_Class/) |
+| Name     | Type    | 
+|----------|---------|
+| [tns-core-modules/ui/progress](http://docs.nativescript.org/api-reference/modules/_ui_progress_.html) | `Module` | 
+| [Progress](https://docs.nativescript.org/api-reference/classes/_ui_progress_.progress) | `Class` | 
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [android.widget.ProgressBar](http://developer.android.com/reference/android/widget/ProgressBar.html) | [UIProgressView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIProgressView_Class/) |

app/ng-ui-widgets-category/progress/metadata.md

@@ -4,3 +4,4 @@ description: The Progress class provides an abstraction over the iOS's UIProgres
 position: 34
 slug: progress-ng
 ---
+example-order: usage, styling, tips-and-tricks

app/ng-ui-widgets-category/progress/overview.md

@@ -1,2 +1,2 @@
-The Progress widget is a visual bar indicator of a progress in a operation. 
+The `Progress` widget is a visual bar indicator of a progress in a operation. 
 It shows a bar representing the current progress of the operation.

app/ng-ui-widgets-category/progress/progress-examples.component.ts

@@ -2,9 +2,9 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Create Progress", "/progress/creating-progress"),
-    new Link("Set up Progress", "/progress/setting-progress"),
-    new Link("Style Progress", "/progress/style-progress")
+    new Link("Usage", "/progress/usage"),
+    new Link("Style Progress", "/progress/styling"),
+    new Link("Set up Progress", "/progress/tips-and-tricks")
 ];
 
 @Component({

app/ng-ui-widgets-category/progress/progress-examples.module.ts

@@ -2,9 +2,9 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { ProgressExamplesComponent } from "./progress-examples.component";
-import { CreatingProgressComponent } from "./creating-progress/creating-progress.component";
-import { SettingProgressComponent } from "./setting-progress/setting-progress.component";
-import { StyleProgressComponent } from "./style-progress/style-progress.component";
+import { UsageComponent } from "./usage/usage.component";
+import { TipsAndTricksComponent } from "./tips-and-tricks/tips-and-tricks.component";
+import { StylingComponent } from "./styling/styling.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -13,19 +13,19 @@ export const routerConfig = [
         component: ProgressExamplesComponent
     },
     {
-        path: "creating-progress",
-        component: CreatingProgressComponent,
-        data: { title: "Create Progress" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     },
     {
-        path: "setting-progress",
-        component: SettingProgressComponent,
-        data: { title: "Set up Progress" }
+        path: "tips-and-tricks",
+        component: TipsAndTricksComponent,
+        data: { title: "Tips and Tricks" }
     },
     {
-        path: "style-progress",
-        component: StyleProgressComponent,
-        data: { title: "Style Progress" }
+        path: "styling",
+        component: StylingComponent,
+        data: { title: "Styling" }
     }
 ];
 
@@ -39,9 +39,9 @@ export const routerConfig = [
     ],
     declarations: [
         ProgressExamplesComponent,
-        CreatingProgressComponent,
-        SettingProgressComponent,
-        StyleProgressComponent
+        UsageComponent,
+        TipsAndTricksComponent,
+        StylingComponent
     ]
 })
 

app/ng-ui-widgets-category/progress/style-progress/article.md → app/ng-ui-widgets-category/progress/styling/article.md

@@ -1,4 +1,2 @@
-The example shows how to style progress component.
-
 <snippet id='progress-style-html'/>
 <snippet id='progress-style-css-ng'/>

app/ng-ui-widgets-category/progress/styling/styling.component.html

@@ -0,0 +1,15 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <GridLayout rows="*">
+        <StackLayout verticalAlign="center" height="100" class="p-20">
+            <!-- >> progress-style-html -->
+            <!-- 
+                Using backgroundColor (CSS: background-color) & color to change the Progress style 
+                Note; backgroundColor will work only on iOS; onAndroid the background will be the color with applied opacity
+            -->
+            <Progress value="50" maxValue="100" backgroundColor="red" color="green"></Progress>
+            <!-- Using the nativescript-theme-core CSS class to change the Progress style -->
+            <Progress value="25" maxValue="100" class="progress"></Progress>
+            <!-- << progress-style-html -->
+        </StackLayout>
+    </GridLayout>
+</StackLayout>

app/ng-ui-widgets-category/progress/styling/styling.component.ts

@@ -0,0 +1,16 @@
+// >> progress-create-code
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./styling.component.html",
+    styleUrls: ["./styling.component.css"]
+})
+export class StylingComponent implements OnInit {
+    public progressValue: number;
+
+    ngOnInit() {
+        this.progressValue = 25;
+    }
+}
+// << progress-create-code

app/ng-ui-widgets-category/progress/setting-progress/article.md → app/ng-ui-widgets-category/progress/tips-and-tricks/article.md

@@ -1,5 +1,2 @@
-HTML
 <snippet id='progress-setting-html'/>
-
-Typescript
 <snippet id='progress-setting-code'/>

app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.html → app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.html

@@ -4,7 +4,7 @@
         <!-- >> progress-setting-html -->
         <Progress (loaded)="onProgressBarLoaded($event)" 
                   (valueChange)="onValueChanged($event)" 
-                  color="#8C489F" backgroundColor="#FFFF66" class="m-20">
+                  class="progress">
         </Progress>
          <!-- << progress-setting-html -->
     </StackLayout>

app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.ts

@@ -0,0 +1,30 @@
+// >> progress-setting-code
+import { Component } from "@angular/core";
+import { Progress } from "tns-core-modules/ui/progress";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./tips-and-tricks.component.html",
+})
+export class TipsAndTricksComponent  {
+    onProgressBarLoaded(args) {
+        let myProgressBar = args.object as Progress;
+
+        myProgressBar.value = 10; // Initial value
+        myProgressBar.maxValue = 100; // Maximum value
+
+        // Forcing progress value change (for demonstration)
+        setInterval(() => {
+            myProgressBar.value += 2;
+        }, 1000);
+    }
+
+    onValueChanged(args) {
+        let myProgressBar = args.object as Progress;
+
+        // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
+        console.log("Old Value: " + args.oldValue);
+        console.log("New Value: " + args.value);
+    }
+}
+// << progress-setting-code

app/ng-ui-widgets-category/progress/creating-progress/article.md → app/ng-ui-widgets-category/progress/usage/article.md

@@ -1,5 +1,2 @@
-HTML
 <snippet id='progress-create-html'/>
-
-Typescript
 <snippet id='progress-create-code'/>

app/ng-ui-widgets-category/progress/usage/usage.component.html

@@ -0,0 +1,9 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <GridLayout rows="*">
+        <StackLayout verticalAlign="center" height="100" class="p-20">
+            <!-- >> progress-create-html -->
+            <Progress value="25" maxValue="100" (valueChanged)="onValueChanged($event)"></Progress>
+            <!-- << progress-create-html -->
+        </StackLayout>
+    </GridLayout>
+</StackLayout>

app/ng-ui-widgets-category/progress/usage/usage.component.ts

@@ -0,0 +1,17 @@
+// >> progress-create-code
+import { Component } from "@angular/core";
+import { EventData } from "tns-core-modules/data/observable";
+import { Progress } from "tns-core-modules/ui/progress";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html",
+})
+export class UsageComponent {
+
+    onValueChanged(args: EventData) {
+        let progressBar = args.object as Progress;
+        console.log("New value: " + progressBar.value);
+    }
+}
+// << progress-create-code

app/ng-ui-widgets-category/scroll-view/end.md

@@ -1,2 +1,26 @@
+## Properties
 
-**API Reference for the** [ScrollView Class](http://docs.nativescript.org/api-reference/modules/_ui_scroll_view_.html)
+| Name     | Type    | Description    |
+|----------|---------|----------------|
+| `orientation`   | [`Orientation`](https://docs.nativescript.org/api-reference/modules/_ui_scroll_view_#orientation) | Gets or sets direction in which the content can be scrolled. Supported values are _"vertical"_ (default) and _"horizontal"_. |
+
+## Events
+
+| Name     | Description    |
+|----------|----------------|
+| `scroll`    | Emitted when the component is scrolled. |
+
+## API References
+
+| Name     | Type    | 
+|----------|---------|
+| [tns-core-modules/ui/scroll-view](http://docs.nativescript.org/api-reference/modules/_ui_scroll_view_.html) | `Module` | 
+| [ScrollView](https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview) | `Class` | 
+| [orientation](https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview#orientation) |`Property`|
+| [ScrollEventData](https://docs.nativescript.org/api-reference/interfaces/_ui_scroll_view_.scrolleventdata) | `Interface` |
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| _NativeScript specific implementation_ | _NativeScript specific implementation_ |