structure to generate SideDrawer screenshots

Author: sombriks

app/app.js

@@ -2,8 +2,7 @@ const Vue = require('nativescript-vue');
 
 new Vue({
     data: {
-        elements: [
-            {
+        elements: [{
                 name: 'ActivityIndicator',
                 component: () => require('./elements/components/ActivityIndicator')
             },
@@ -99,6 +98,10 @@ new Vue({
                 name: 'PromptDialog',
                 component: () => require('./elements/dialogs/Prompt')
             },
+            {
+                name: 'SideDrawer',
+                component: () => require('./elements/components/SideDrawer')
+            }
         ]
     },
 

app/elements/components/SideDrawer.js

@@ -0,0 +1,20 @@
+module.exports = {
+  template: `
+    <RadSideDrawer ref="drawer">
+      <StackLayout ~drawerContent>
+        <StackLayout height="56" style="text-align: center; vertical-align: center;">
+          <label text="Navigation Menu" />
+        </StackLayout>
+        <StackLayout>
+          <button text="Friends" /> <button text="Posts"/>
+        </StackLayout>
+      </StackLayout>
+      <StackLayout ~mainContent>
+        <label text="This is the main content for the current Page!" textWrap="true" fontSize="13" padding="10" />
+      </StackLayout>
+    </RadSideDrawer>
+  `,
+  mounted() {
+    this.$refs.drawer.showDrawer()
+  }
+}

generate-screenshots.js

@@ -27,6 +27,7 @@ const components = [
     'ConfirmDialog',
     'LoginDialog',
     'PromptDialog',
+    'SideDrawer',
 ];
 
 const makeDir = (path) => {
@@ -40,12 +41,12 @@ const makeDir = (path) => {
     makeDir(`screenshots/${argv.runType}`);
 
     AppiumDriver.createAppiumDriver(4723, {
-        isSauceLab: argv.sauceLab || false,
-        runType: argv.runType,
-        appPath: argv.appPath, //'nativescriptvueuitests-debug.apk',
-        appiumCaps: require('./appium.capabilities.json')[argv.runType],
-        verbose: argv.verbose || false,
-    })
+            isSauceLab: argv.sauceLab || false,
+            runType: argv.runType,
+            appPath: argv.appPath, //'nativescriptvueuitests-debug.apk',
+            appiumCaps: require('./appium.capabilities.json')[argv.runType],
+            verbose: argv.verbose || false,
+        })
         .then(driver => run(driver))
         .then(() => console.log('Buh-Bye...'))
         .catch((err) => console.log(err));

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "appium": "^1.7.1",
     "nativescript-dev-appium": "^3.1.0-2017-10-6-1",
+    "nativescript-ui-sidedrawer": "^5.1.0",
     "nativescript-vue": "^1.0.0",
     "tns-core-modules": "~3.4.0",
     "yargs": "^9.0.1"