Merge pull request #4 from NativeScript/zbranzov/vue-app-styling

chore: split vue examples
NativeScript · Mar 1, 2019 · 74cbb23 · 74cbb23
2 parents 3141e90 + 00413b7
commit 74cbb23
Show file tree

Hide file tree

Showing 4 changed files with 258 additions and 126 deletions.
diff --git a/demo-vue/app/components/GettingStarted.vue b/demo-vue/app/components/GettingStarted.vue
@@ -0,0 +1,39 @@
+<template>
+  <Page class="page">
+    <ActionBar :title="title">
+      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
+    </ActionBar>
+    <GridLayout rows="50, *">
+      <PickerField hint="Getting Started" padding="10" :items="pickerItems"></PickerField>
+    </GridLayout>>
+  </Page>
+</template>
+
+<script>
+import { PickerField } from "nativescript-picker";
+import * as frameModule from "tns-core-modules/ui/frame";
+export default {
+  name: "Getting Started",
+  computed: {
+  },
+  created() {
+    for(let i = 0; i < 100; i++) {
+      this.pickerItems.push("Item " + i);
+    }
+  },
+  data() {
+    return {
+      pickerItems: [],
+      title: "Getting Started"
+    };
+  },
+  methods: {
+    onNavigationButtonTap() {
+      frameModule.topmost().goBack();
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/demo-vue/app/components/Home.vue b/demo-vue/app/components/Home.vue
@@ -1,140 +1,54 @@
 <template>
-  <Page class="page">
-    <ActionBar title="PickerField Demo Vue">
-    </ActionBar>
-    <GridLayout rows="50, 50, 50, 50, *">
-      <PickerField hint="Getting Started" padding="10" :items="pickerItems"></PickerField>
-
-      <PickerField hint="Styling" 
-                  row="1"
-                  padding="10"
-                  :pickerTitle="pickerTitle"
-                  for="item in pickerObjects"
-                  class="picker-field" 
-                  textField="name"
-                  iOSCloseButtonIcon="14" 
-                  iOSCloseButtonPosition="left"
-                  androidCloseButtonPosition="actionBar"
-                  androidCloseButtonIcon="ic_media_previous">
-        <v-template>
-          <GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
-            <Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
-            <Label :text="item.name" col="0" row="1" class="item-template-label red-label"
-                marginBottom="20"></Label>
-            <Image :src="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
-          </GridLayout>
-        </v-template>
-      </PickerField>
-
-      <PickerField hint="Value APIs" 
-                  ref="apiPicker"
-                  row="2"
-                  padding="10"
-                  for="item in pickerObjects"
-                  textField="description"
-                  valueField="name"
-                  pickerTitle="Select item from list">
-        <v-template>
-          <GridLayout rows="auto, auto, auto" backgroundColor="lightBlue">
-            <Label :text="item.id" class="item-template-label red-label" margin="20"></Label>
-            <Label :text="item.name" row="1" class="item-template-label green-label"></Label>
-            <Label :text="item.description" row="2" class="item-template-label green-label" marginBottom="20"></Label>
-            </GridLayout>
-        </v-template>
-      </PickerField>
-      <Button row="3" @tap="checkTap" text="Check picker value APIs"></Button>
-    </GridLayout>>
-  </Page>
+    <Page>
+      <ActionBar title="PickerField Vue">
+      </ActionBar>
+      <ListView ref="listView"
+                  for="example in examples"
+                  @itemTap="goToExample">
+          <v-template>
+            <StackLayout class="item" orientation="vertical">
+                <Label :text="example.name" class="titleLabel"></Label>
+                <StackLayout height="1" backgroundColor="#EEEEEE"></StackLayout>
+            </StackLayout>
+          </v-template>
+      </ListView>
+    </Page>
 </template>
 
 <script>
-import { PickerField } from "nativescript-picker";
-import { EventData } from "tns-core-modules/data/observable";
-import { Button } from "tns-core-modules/ui/button";
+import GettingStarted from './GettingStarted';
+import Styling from './Styling';
+import ValueApis from './ValueApis';
 export default {
-  computed: {
-    message() {
-      return "test";
-    }
-  },
-  created() {
-    for(let i = 0; i < 100; i++) {
-      this.pickerItems.push("Item " + i);
-    }
-
-    for(let i = 0; i < 20; i++) {
-      this.pickerObjects.push({ id: i, name: "Item " + i, description: "Description " + i , imageUrl: "https://picsum.photos/150/70/?random" });
-    }
-  },
-  data() {
-    return {
-      pickerItems: [],
-      pickerObjects: [],
-      pickerTitle: "Select item from list"
-    };
-  },
-  methods: {
-    checkTap: function(args) {
-      let picker = this.$refs.apiPicker.nativeView;
-      console.log("text: ", picker.text);
-        console.log("selectedValue: ", picker.selectedValue);
-        console.log("selectedIndex:", picker.selectedIndex);
-        alert({
-            title: "PickerField available APIs:",
-            message: `text: ${picker.text}\n` + `selectedValue: ${picker.selectedValue}\n` + `selectedIndex: ${picker.selectedIndex}`,
-            okButtonText: "OK"
-        });
+    name: 'Home',
+    data() {
+      return {
+        examples: [
+            GettingStarted,
+            Styling,
+            ValueApis
+          ],
+      };
+    },
+    methods: {
+      goToExample({ item }) {
+        this.$navigateTo(item);
+      }
     }
-  }
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import "../app-variables";
 
-.item-template-label {
-    margin-left: 20;
+.itemStackLayout {
+  text-align: left;
+  vertical-align: center;
+  font-size: 16;
 }
 
-.item-template-top-label {
-    margin: 20;
-    font-weight: bold;    
+.titleLabel {
+  margin: 16;
+  vertical-align: center;
 }
-
-.green-label {
-    color: green;
-}
-
-.red-label {
-    color: red;
-}
-
-/* Styling css start */
-
-.picker-field {
-    background-color: lightblue;
-    color: blue;
-}
-
-ListView.picker-field {
-    background-color: green;
-    margin-left: 20;
-    margin-right: 20;
-    margin-bottom: 20;
-    separator-color: red;
-}
-
-ActionBar.picker-field {
-    background-color:yellow;
-    color:black;
-}
-
-.item-template-picture {
-    height: 70;
-    width: 150;
-    margin: 20;
-    margin-left: 100;
-}
-
-/* Styling css end */
 </style>
+
diff --git a/demo-vue/app/components/Styling.vue b/demo-vue/app/components/Styling.vue
@@ -0,0 +1,98 @@
+<template>
+  <Page class="page">
+    <ActionBar :title="title">
+      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
+    </ActionBar>
+    <GridLayout rows="50, *">
+      <PickerField hint="Styling" 
+                  row="0"
+                  padding="10"
+                  :pickerTitle="pickerTitle"
+                  for="item in pickerObjects"
+                  class="picker-field" 
+                  textField="name"
+                  iOSCloseButtonIcon="14" 
+                  iOSCloseButtonPosition="left"
+                  androidCloseButtonPosition="actionBar"
+                  androidCloseButtonIcon="ic_media_previous">
+        <v-template>
+          <GridLayout columns="auto, *" rows="auto, *" backgroundColor="lightBlue">
+            <Label text="Static text: " colSpan="2" class="item-template-top-label"></Label>
+            <Label :text="item.name" col="0" row="1" class="item-template-label red-label"
+                marginBottom="20"></Label>
+            <Image :src="item.imageUrl" col="1" row="0" rowSpan="2" class="item-template-picture"></Image>
+          </GridLayout>
+        </v-template>
+      </PickerField>
+    </GridLayout>
+  </Page>
+</template>
+
+<script>
+import { PickerField } from "nativescript-picker";
+import * as frameModule from "tns-core-modules/ui/frame";
+export default {
+  name: "Styling",
+  computed: {
+  },
+  created() {
+    for(let i = 0; i < 20; i++) {
+      this.pickerObjects.push({ id: i, name: "Item " + i, description: "Description " + i , imageUrl: "https://picsum.photos/150/70/?random" });
+    }
+  },
+  data() {
+    return {
+      pickerObjects: [],
+      pickerTitle: "Select item from list",
+      title: "Styling"
+    };
+  },
+  methods: {
+    onNavigationButtonTap() {
+      frameModule.topmost().goBack();
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../app-variables";
+
+.item-template-label {
+    margin-left: 20;
+}
+
+.item-template-top-label {
+    margin: 20;
+    font-weight: bold;    
+}
+
+.red-label {
+    color: red;
+}
+
+.picker-field {
+    background-color: lightblue;
+    color: blue;
+}
+
+ListView.picker-field {
+    background-color: green;
+    margin-left: 20;
+    margin-right: 20;
+    margin-bottom: 20;
+    separator-color: red;
+}
+
+ActionBar.picker-field {
+    background-color:yellow;
+    color:black;
+}
+
+.item-template-picture {
+    height: 70;
+    width: 150;
+    margin: 20;
+    margin-left: 100;
+}
+</style>