├── .gitignore ├── LICENSE ├── README.md ├── config.xml ├── gulpfile.js ├── package.json ├── resources ├── icons │ ├── Icon-60@2x.png │ ├── Icon-60@3x.png │ ├── Icon-76.png │ ├── Icon-76@2x.png │ ├── Icon-Small-40.png │ ├── Icon-Small-40@2x.png │ ├── Icon-Small-40@3x.png │ ├── Icon-Small.png │ ├── Icon-Small@2x.png │ ├── Icon-Small@3x.png │ └── iTunesArtwork@2x.png └── splash │ ├── 1242x2208.png │ ├── 640x1136.png │ ├── 640x960.png │ └── 750x1334.png └── src ├── css ├── app.less ├── components.less ├── demo.less ├── ionicons │ ├── _ionicons-font.less │ ├── _ionicons-icons.less │ ├── _ionicons-variables.less │ └── ionicons.less ├── variables.less └── views │ ├── passcode.less │ └── person.less ├── data └── months.js ├── fonts ├── ionicons.eot ├── ionicons.svg ├── ionicons.ttf └── ionicons.woff ├── img ├── favicon.ico ├── icon-qr-inverted.svg ├── icon-qr.svg ├── ios-icon.png ├── logo-mark.svg ├── mock │ └── qr_code.png ├── organisers │ ├── cramon.jpg │ ├── katy.jpg │ └── pat.jpg └── speakers │ ├── SebastianProfile.jpg │ ├── aria-buckles.jpg │ ├── ben-alpert.jpeg │ ├── ben-gotow.jpg │ ├── cheng-lou.jpg │ ├── christopher-chedeau.jpg │ ├── dan-abramov.jpg │ ├── dlschafer.jpg │ ├── elie-rotenberg.jpg │ ├── evan-morikawa.jpg │ ├── jed-watson.jpg │ ├── joseph-savona.jpg │ ├── kevin-robinson.png │ ├── lee-byron.jpg │ ├── michael-chan.jpg │ ├── michael-jackson.jpg │ ├── michael-ridgway.jpg │ ├── mikhail-davydov.jpg │ ├── ryan-florence.jpg │ ├── schrockn.jpg │ ├── sebastian-mcKenzie.png │ └── spencer-ahrens.jpg ├── index.html └── js ├── app.js ├── components └── svg │ └── icon-qr.js ├── config.js ├── stores └── people.js └── views ├── controls.js ├── form.js ├── list-complex.js ├── list-details.js ├── list-simple.js ├── lists.js ├── transitions-target-over.js ├── transitions-target.js └── transitions.js /.gitignore: -------------------------------------------------------------------------------- 1 | www 2 | 3 | # Logs 4 | logs 5 | *.log 6 | 7 | # Runtime data 8 | pids 9 | *.pid 10 | *.seed 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # Common 19 | .DS_Store 20 | build 21 | 22 | # Node.js 23 | node_modules 24 | 25 | # Xcode 26 | *.mode1v3 27 | *.mode2v3 28 | *.perspectivev3 29 | *.pbxuser 30 | *.hmap 31 | *.ipa 32 | *.xcuserstate 33 | *.xccheckout 34 | *.moved-aside 35 | *.perspectivev3 36 | xcuserdata 37 | DerivedData 38 | 39 | # Android 40 | build.xml 41 | local.properties 42 | gradlew 43 | gradlew.bat 44 | gradle 45 | ant-build 46 | ant-gen 47 | gen 48 | out 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Thinkmill Pty Ltd. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | TouchstoneJS Starter 2 | ==================== 3 | 4 | Reference TouchstoneJS App with examples of all UI components. 5 | 6 | **See the demo [live here](https://touchstonejs.github.io/touchstonejs-starter/)**. 7 | 8 | To build and preview locally, run `npm start`. It will build the app with browserify, and start a preview server at [localhost:8000](http://localhost:8000). 9 | 10 | The source for the app is in the `/src` folder; the app will be built to `/www`. 11 | 12 | ## Use with Cordova 13 | 14 | Here's how to get the Starter project running in a Cordova app, in the iOS Simulator. You'll need a Mac and XCode to follow this process. Check the [Cordova Docs](https://cordova.apache.org) for more information, and instructions on how to work with other platforms like Android. 15 | 16 | ### Getting set up 17 | 18 | First, Install Cordova: 19 | 20 | ``` 21 | npm install -g cordova 22 | ``` 23 | 24 | Create a new Project: 25 | 26 | ``` 27 | cordova create Starter 28 | ``` 29 | 30 | Add your target platform: 31 | 32 | ``` 33 | cordova platform add ios 34 | ``` 35 | 36 | ### Building and running the project 37 | 38 | Build the `www` folder using the build script: 39 | 40 | ``` 41 | npm run build 42 | ``` 43 | 44 | Then prepare the cordova project: 45 | 46 | ``` 47 | cordova prepare 48 | ``` 49 | 50 | You can then open the XCode Project here: `platforms/ios/Starter.xcodeproj` and run it in the simulator or on a device. 51 | 52 | To continuously build the source as you make changes, run: 53 | 54 | ``` 55 | npm run watch 56 | ``` 57 | 58 | For production use, you can strip debug code and minify the build: 59 | 60 | ``` 61 | npm run build:production 62 | ``` 63 | 64 | 65 | # Feedback / Questions? 66 | 67 | Let us know! Contact us at [thinkmill.com.au](http://www.thinkmill.com.au/) or open an issue. 68 | 69 | We welcome all ideas, contributions and PRs. 70 | 71 | 72 | # License 73 | 74 | MIT. Copyright (c) 2015 Thinkmill Pty Ltd. 75 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Starter 4 | 5 | 6 | Touchstone Starter App 7 | 8 | 9 | 10 | Thinkmill Team 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require('touchstonejs-tasks')(require('gulp')); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "touchstonejs-starter", 3 | "version": "1.0.0", 4 | "description": "Touchstone Starter", 5 | "main": "src/js/app.js", 6 | "author": "Jed Watson", 7 | "license": "MIT", 8 | "private": true, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/touchstonejs/touchstonejs-starter.git" 12 | }, 13 | "dependencies": { 14 | "async": "^1.5.0", 15 | "classnames": "^2.2.1", 16 | "cordova-dialogs": "^1.0.2", 17 | "httpify": "^3.0.0", 18 | "react": "^0.14.3", 19 | "react-addons-css-transition-group": "^0.14.3", 20 | "react-container": "^0.3.1", 21 | "react-dom": "^0.14.3", 22 | "react-sentry": "^1.0.2", 23 | "react-tappable": "^0.7.2", 24 | "react-timers": "^5.0.0", 25 | "touchstonejs": "^0.7.3" 26 | }, 27 | "devDependencies": { 28 | "gulp": "^3.9.0", 29 | "happiness": "*", 30 | "touchstonejs-tasks": "*" 31 | }, 32 | "scripts": { 33 | "build": "gulp clean && gulp build", 34 | "build:production": "gulp clean && NODE_ENV=production gulp build", 35 | "lint": "happiness", 36 | "test": "npm run lint", 37 | "start": "gulp clean && gulp dev", 38 | "watch": "gulp clean && gulp watch" 39 | }, 40 | "happiness": { 41 | "ignore": [ 42 | "platforms", 43 | "plugins", 44 | "src/data", 45 | "www" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /resources/icons/Icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-60@2x.png -------------------------------------------------------------------------------- /resources/icons/Icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-60@3x.png -------------------------------------------------------------------------------- /resources/icons/Icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-76.png -------------------------------------------------------------------------------- /resources/icons/Icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-76@2x.png -------------------------------------------------------------------------------- /resources/icons/Icon-Small-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-Small-40.png -------------------------------------------------------------------------------- /resources/icons/Icon-Small-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-Small-40@2x.png -------------------------------------------------------------------------------- /resources/icons/Icon-Small-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-Small-40@3x.png -------------------------------------------------------------------------------- /resources/icons/Icon-Small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-Small.png -------------------------------------------------------------------------------- /resources/icons/Icon-Small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-Small@2x.png -------------------------------------------------------------------------------- /resources/icons/Icon-Small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/Icon-Small@3x.png -------------------------------------------------------------------------------- /resources/icons/iTunesArtwork@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/icons/iTunesArtwork@2x.png -------------------------------------------------------------------------------- /resources/splash/1242x2208.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/splash/1242x2208.png -------------------------------------------------------------------------------- /resources/splash/640x1136.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/splash/640x1136.png -------------------------------------------------------------------------------- /resources/splash/640x960.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/splash/640x960.png -------------------------------------------------------------------------------- /resources/splash/750x1334.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/resources/splash/750x1334.png -------------------------------------------------------------------------------- /src/css/app.less: -------------------------------------------------------------------------------- 1 | // 2 | // App 3 | // ============================== 4 | 5 | 6 | 7 | 8 | @import "ionicons/ionicons.less"; 9 | @import "../../node_modules/touchstonejs/less/touchstone.less"; 10 | @import "../../node_modules/react-container/less/component.less"; 11 | @import "views/passcode.less"; 12 | @import "views/person.less"; 13 | 14 | @import "components.less"; 15 | @import "demo.less"; 16 | 17 | 18 | 19 | 20 | // 21 | // Mixins 22 | // ============================== 23 | 24 | 25 | 26 | 27 | // Avatars 28 | // ------------------------------ 29 | 30 | .avatar(@size) { 31 | .square(@size); 32 | background: fade(@text-color, 10%); 33 | border-radius: 50%; 34 | border: 3px solid fade(@text-color, 20%); 35 | padding: 3px; 36 | } -------------------------------------------------------------------------------- /src/css/components.less: -------------------------------------------------------------------------------- 1 | // 2 | // Components 3 | // ============================== 4 | 5 | 6 | 7 | // Tab bar 8 | // ------------------------------ 9 | 10 | .Tabs-Icon--lists::before { 11 | content: @ionicon-var-ios-list-outline; 12 | 13 | .is-selected > & { 14 | content: @ionicon-var-ios-list; 15 | } 16 | } 17 | .Tabs-Icon--forms::before { 18 | content: @ionicon-var-ios-copy-outline; 19 | 20 | .is-selected > & { 21 | content: @ionicon-var-ios-copy; 22 | } 23 | } 24 | .Tabs-Icon--controls::before { 25 | content: @ionicon-var-ios-settings; 26 | 27 | .is-selected > & { 28 | content: @ionicon-var-ios-settings-strong; 29 | } 30 | } 31 | .Tabs-Icon--transitions::before { 32 | content: @ionicon-var-ios-browsers-outline; 33 | 34 | .is-selected > & { 35 | content: @ionicon-var-ios-browsers; 36 | } 37 | } -------------------------------------------------------------------------------- /src/css/demo.less: -------------------------------------------------------------------------------- 1 | // 2 | // Demo 3 | // ============================== 4 | 5 | 6 | 7 | // Variables 8 | // ------------------------------ 9 | 10 | 11 | @demo-bg: #c32964; // touchstone magenta 12 | 13 | @iphone4-width: 320px; 14 | @iphone4-height: 480px; 15 | 16 | @iphone5-width: 340px; 17 | @iphone5-height: 568px; 18 | 19 | @iphone6-width: 376px; 20 | @iphone6-height: 668px; 21 | 22 | @device-width: @iphone6-width; 23 | @device-height: @iphone6-height; 24 | 25 | @silhouette-chrome-vertical: 50px; 26 | @silhouette-chrome-horizontal: 10px; 27 | @silhouette-width: @device-width + (@silhouette-chrome-horizontal * 2); 28 | @silhouette-height: @device-height + (@silhouette-chrome-vertical * 2); 29 | 30 | 31 | 32 | #app { 33 | height: 100%; 34 | position: absolute; 35 | width: 100%; 36 | } 37 | .app-wrapper, 38 | .device-silhouette { 39 | height: 100%; 40 | width: 100%; 41 | } 42 | 43 | 44 | // desktop wrapper 45 | @media only screen and (min-width : 480px) { 46 | 47 | // make it pretty! 48 | 49 | #app { 50 | #gradient .directional( spin(@demo-bg,-22%), spin(@demo-bg,22%), 135deg ); 51 | background-color: @demo-bg; 52 | } 53 | 54 | // center the app inside the viewport 55 | 56 | .app-wrapper { 57 | .size(@device-width,@device-height); 58 | background: none; 59 | left: 50%; 60 | margin-left: -(@device-width / 2); 61 | margin-top: -(@device-height / 2); 62 | overflow: visible; 63 | position: absolute; 64 | top: 50%; 65 | } 66 | 67 | // nice for demonstrating on desktop 68 | 69 | .device-silhouette { 70 | .size(@silhouette-width, @silhouette-height); 71 | background-color: fade(black, 20%); 72 | border-radius: 20px; 73 | margin: -@silhouette-chrome-vertical -@silhouette-chrome-horizontal; 74 | padding: @silhouette-chrome-vertical @silhouette-chrome-horizontal; 75 | } 76 | } -------------------------------------------------------------------------------- /src/css/ionicons/_ionicons-font.less: -------------------------------------------------------------------------------- 1 | // Ionicons Font Path 2 | // -------------------------- 3 | 4 | @font-face { 5 | font-family: @ionicons-font-family; 6 | src:url("@{ionicons-font-path}/ionicons.eot?v=@{ionicons-version}"); 7 | src:url("@{ionicons-font-path}/ionicons.eot?v=@{ionicons-version}#iefix") format("embedded-opentype"), 8 | url("@{ionicons-font-path}/ionicons.ttf?v=@{ionicons-version}") format("truetype"), 9 | url("@{ionicons-font-path}/ionicons.woff?v=@{ionicons-version}") format("woff"), 10 | url("@{ionicons-font-path}/ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | .ion { 16 | display: inline-block; 17 | font-family: @ionicons-font-family; 18 | speak: none; 19 | font-style: normal; 20 | font-weight: normal; 21 | font-variant: normal; 22 | text-transform: none; 23 | text-rendering: auto; 24 | line-height: 1; 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } -------------------------------------------------------------------------------- /src/css/ionicons/_ionicons-variables.less: -------------------------------------------------------------------------------- 1 | /*! 2 | Ionicons, v2.0.0 3 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 4 | https://twitter.com/benjsperry https://twitter.com/ionicframework 5 | MIT License: https://github.com/driftyco/ionicons 6 | */ 7 | // Ionicons Variables 8 | // -------------------------- 9 | 10 | @ionicons-font-path: "../fonts"; 11 | @ionicons-font-family: "Ionicons"; 12 | @ionicons-version: "2.0.0"; 13 | @ionicons-prefix: ion-; 14 | 15 | @ionicon-var-alert: "\f101"; 16 | @ionicon-var-alert-circled: "\f100"; 17 | @ionicon-var-android-add: "\f2c7"; 18 | @ionicon-var-android-add-circle: "\f359"; 19 | @ionicon-var-android-alarm-clock: "\f35a"; 20 | @ionicon-var-android-alert: "\f35b"; 21 | @ionicon-var-android-apps: "\f35c"; 22 | @ionicon-var-android-archive: "\f2c9"; 23 | @ionicon-var-android-arrow-back: "\f2ca"; 24 | @ionicon-var-android-arrow-down: "\f35d"; 25 | @ionicon-var-android-arrow-dropdown: "\f35f"; 26 | @ionicon-var-android-arrow-dropdown-circle: "\f35e"; 27 | @ionicon-var-android-arrow-dropleft: "\f361"; 28 | @ionicon-var-android-arrow-dropleft-circle: "\f360"; 29 | @ionicon-var-android-arrow-dropright: "\f363"; 30 | @ionicon-var-android-arrow-dropright-circle: "\f362"; 31 | @ionicon-var-android-arrow-dropup: "\f365"; 32 | @ionicon-var-android-arrow-dropup-circle: "\f364"; 33 | @ionicon-var-android-arrow-forward: "\f30f"; 34 | @ionicon-var-android-arrow-up: "\f366"; 35 | @ionicon-var-android-attach: "\f367"; 36 | @ionicon-var-android-bar: "\f368"; 37 | @ionicon-var-android-bicycle: "\f369"; 38 | @ionicon-var-android-boat: "\f36a"; 39 | @ionicon-var-android-bookmark: "\f36b"; 40 | @ionicon-var-android-bulb: "\f36c"; 41 | @ionicon-var-android-bus: "\f36d"; 42 | @ionicon-var-android-calendar: "\f2d1"; 43 | @ionicon-var-android-call: "\f2d2"; 44 | @ionicon-var-android-camera: "\f2d3"; 45 | @ionicon-var-android-cancel: "\f36e"; 46 | @ionicon-var-android-car: "\f36f"; 47 | @ionicon-var-android-cart: "\f370"; 48 | @ionicon-var-android-chat: "\f2d4"; 49 | @ionicon-var-android-checkbox: "\f374"; 50 | @ionicon-var-android-checkbox-blank: "\f371"; 51 | @ionicon-var-android-checkbox-outline: "\f373"; 52 | @ionicon-var-android-checkbox-outline-blank: "\f372"; 53 | @ionicon-var-android-checkmark-circle: "\f375"; 54 | @ionicon-var-android-clipboard: "\f376"; 55 | @ionicon-var-android-close: "\f2d7"; 56 | @ionicon-var-android-cloud: "\f37a"; 57 | @ionicon-var-android-cloud-circle: "\f377"; 58 | @ionicon-var-android-cloud-done: "\f378"; 59 | @ionicon-var-android-cloud-outline: "\f379"; 60 | @ionicon-var-android-color-palette: "\f37b"; 61 | @ionicon-var-android-compass: "\f37c"; 62 | @ionicon-var-android-contact: "\f2d8"; 63 | @ionicon-var-android-contacts: "\f2d9"; 64 | @ionicon-var-android-contract: "\f37d"; 65 | @ionicon-var-android-create: "\f37e"; 66 | @ionicon-var-android-delete: "\f37f"; 67 | @ionicon-var-android-desktop: "\f380"; 68 | @ionicon-var-android-document: "\f381"; 69 | @ionicon-var-android-done: "\f383"; 70 | @ionicon-var-android-done-all: "\f382"; 71 | @ionicon-var-android-download: "\f2dd"; 72 | @ionicon-var-android-drafts: "\f384"; 73 | @ionicon-var-android-exit: "\f385"; 74 | @ionicon-var-android-expand: "\f386"; 75 | @ionicon-var-android-favorite: "\f388"; 76 | @ionicon-var-android-favorite-outline: "\f387"; 77 | @ionicon-var-android-film: "\f389"; 78 | @ionicon-var-android-folder: "\f2e0"; 79 | @ionicon-var-android-folder-open: "\f38a"; 80 | @ionicon-var-android-funnel: "\f38b"; 81 | @ionicon-var-android-globe: "\f38c"; 82 | @ionicon-var-android-hand: "\f2e3"; 83 | @ionicon-var-android-hangout: "\f38d"; 84 | @ionicon-var-android-happy: "\f38e"; 85 | @ionicon-var-android-home: "\f38f"; 86 | @ionicon-var-android-image: "\f2e4"; 87 | @ionicon-var-android-laptop: "\f390"; 88 | @ionicon-var-android-list: "\f391"; 89 | @ionicon-var-android-locate: "\f2e9"; 90 | @ionicon-var-android-lock: "\f392"; 91 | @ionicon-var-android-mail: "\f2eb"; 92 | @ionicon-var-android-map: "\f393"; 93 | @ionicon-var-android-menu: "\f394"; 94 | @ionicon-var-android-microphone: "\f2ec"; 95 | @ionicon-var-android-microphone-off: "\f395"; 96 | @ionicon-var-android-more-horizontal: "\f396"; 97 | @ionicon-var-android-more-vertical: "\f397"; 98 | @ionicon-var-android-navigate: "\f398"; 99 | @ionicon-var-android-notifications: "\f39b"; 100 | @ionicon-var-android-notifications-none: "\f399"; 101 | @ionicon-var-android-notifications-off: "\f39a"; 102 | @ionicon-var-android-open: "\f39c"; 103 | @ionicon-var-android-options: "\f39d"; 104 | @ionicon-var-android-people: "\f39e"; 105 | @ionicon-var-android-person: "\f3a0"; 106 | @ionicon-var-android-person-add: "\f39f"; 107 | @ionicon-var-android-phone-landscape: "\f3a1"; 108 | @ionicon-var-android-phone-portrait: "\f3a2"; 109 | @ionicon-var-android-pin: "\f3a3"; 110 | @ionicon-var-android-plane: "\f3a4"; 111 | @ionicon-var-android-playstore: "\f2f0"; 112 | @ionicon-var-android-print: "\f3a5"; 113 | @ionicon-var-android-radio-button-off: "\f3a6"; 114 | @ionicon-var-android-radio-button-on: "\f3a7"; 115 | @ionicon-var-android-refresh: "\f3a8"; 116 | @ionicon-var-android-remove: "\f2f4"; 117 | @ionicon-var-android-remove-circle: "\f3a9"; 118 | @ionicon-var-android-restaurant: "\f3aa"; 119 | @ionicon-var-android-sad: "\f3ab"; 120 | @ionicon-var-android-search: "\f2f5"; 121 | @ionicon-var-android-send: "\f2f6"; 122 | @ionicon-var-android-settings: "\f2f7"; 123 | @ionicon-var-android-share: "\f2f8"; 124 | @ionicon-var-android-share-alt: "\f3ac"; 125 | @ionicon-var-android-star: "\f2fc"; 126 | @ionicon-var-android-star-half: "\f3ad"; 127 | @ionicon-var-android-star-outline: "\f3ae"; 128 | @ionicon-var-android-stopwatch: "\f2fd"; 129 | @ionicon-var-android-subway: "\f3af"; 130 | @ionicon-var-android-sunny: "\f3b0"; 131 | @ionicon-var-android-sync: "\f3b1"; 132 | @ionicon-var-android-textsms: "\f3b2"; 133 | @ionicon-var-android-time: "\f3b3"; 134 | @ionicon-var-android-train: "\f3b4"; 135 | @ionicon-var-android-unlock: "\f3b5"; 136 | @ionicon-var-android-upload: "\f3b6"; 137 | @ionicon-var-android-volume-down: "\f3b7"; 138 | @ionicon-var-android-volume-mute: "\f3b8"; 139 | @ionicon-var-android-volume-off: "\f3b9"; 140 | @ionicon-var-android-volume-up: "\f3ba"; 141 | @ionicon-var-android-walk: "\f3bb"; 142 | @ionicon-var-android-warning: "\f3bc"; 143 | @ionicon-var-android-watch: "\f3bd"; 144 | @ionicon-var-android-wifi: "\f305"; 145 | @ionicon-var-aperture: "\f313"; 146 | @ionicon-var-archive: "\f102"; 147 | @ionicon-var-arrow-down-a: "\f103"; 148 | @ionicon-var-arrow-down-b: "\f104"; 149 | @ionicon-var-arrow-down-c: "\f105"; 150 | @ionicon-var-arrow-expand: "\f25e"; 151 | @ionicon-var-arrow-graph-down-left: "\f25f"; 152 | @ionicon-var-arrow-graph-down-right: "\f260"; 153 | @ionicon-var-arrow-graph-up-left: "\f261"; 154 | @ionicon-var-arrow-graph-up-right: "\f262"; 155 | @ionicon-var-arrow-left-a: "\f106"; 156 | @ionicon-var-arrow-left-b: "\f107"; 157 | @ionicon-var-arrow-left-c: "\f108"; 158 | @ionicon-var-arrow-move: "\f263"; 159 | @ionicon-var-arrow-resize: "\f264"; 160 | @ionicon-var-arrow-return-left: "\f265"; 161 | @ionicon-var-arrow-return-right: "\f266"; 162 | @ionicon-var-arrow-right-a: "\f109"; 163 | @ionicon-var-arrow-right-b: "\f10a"; 164 | @ionicon-var-arrow-right-c: "\f10b"; 165 | @ionicon-var-arrow-shrink: "\f267"; 166 | @ionicon-var-arrow-swap: "\f268"; 167 | @ionicon-var-arrow-up-a: "\f10c"; 168 | @ionicon-var-arrow-up-b: "\f10d"; 169 | @ionicon-var-arrow-up-c: "\f10e"; 170 | @ionicon-var-asterisk: "\f314"; 171 | @ionicon-var-at: "\f10f"; 172 | @ionicon-var-backspace: "\f3bf"; 173 | @ionicon-var-backspace-outline: "\f3be"; 174 | @ionicon-var-bag: "\f110"; 175 | @ionicon-var-battery-charging: "\f111"; 176 | @ionicon-var-battery-empty: "\f112"; 177 | @ionicon-var-battery-full: "\f113"; 178 | @ionicon-var-battery-half: "\f114"; 179 | @ionicon-var-battery-low: "\f115"; 180 | @ionicon-var-beaker: "\f269"; 181 | @ionicon-var-beer: "\f26a"; 182 | @ionicon-var-bluetooth: "\f116"; 183 | @ionicon-var-bonfire: "\f315"; 184 | @ionicon-var-bookmark: "\f26b"; 185 | @ionicon-var-bowtie: "\f3c0"; 186 | @ionicon-var-briefcase: "\f26c"; 187 | @ionicon-var-bug: "\f2be"; 188 | @ionicon-var-calculator: "\f26d"; 189 | @ionicon-var-calendar: "\f117"; 190 | @ionicon-var-camera: "\f118"; 191 | @ionicon-var-card: "\f119"; 192 | @ionicon-var-cash: "\f316"; 193 | @ionicon-var-chatbox: "\f11b"; 194 | @ionicon-var-chatbox-working: "\f11a"; 195 | @ionicon-var-chatboxes: "\f11c"; 196 | @ionicon-var-chatbubble: "\f11e"; 197 | @ionicon-var-chatbubble-working: "\f11d"; 198 | @ionicon-var-chatbubbles: "\f11f"; 199 | @ionicon-var-checkmark: "\f122"; 200 | @ionicon-var-checkmark-circled: "\f120"; 201 | @ionicon-var-checkmark-round: "\f121"; 202 | @ionicon-var-chevron-down: "\f123"; 203 | @ionicon-var-chevron-left: "\f124"; 204 | @ionicon-var-chevron-right: "\f125"; 205 | @ionicon-var-chevron-up: "\f126"; 206 | @ionicon-var-clipboard: "\f127"; 207 | @ionicon-var-clock: "\f26e"; 208 | @ionicon-var-close: "\f12a"; 209 | @ionicon-var-close-circled: "\f128"; 210 | @ionicon-var-close-round: "\f129"; 211 | @ionicon-var-closed-captioning: "\f317"; 212 | @ionicon-var-cloud: "\f12b"; 213 | @ionicon-var-code: "\f271"; 214 | @ionicon-var-code-download: "\f26f"; 215 | @ionicon-var-code-working: "\f270"; 216 | @ionicon-var-coffee: "\f272"; 217 | @ionicon-var-compass: "\f273"; 218 | @ionicon-var-compose: "\f12c"; 219 | @ionicon-var-connection-bars: "\f274"; 220 | @ionicon-var-contrast: "\f275"; 221 | @ionicon-var-crop: "\f3c1"; 222 | @ionicon-var-cube: "\f318"; 223 | @ionicon-var-disc: "\f12d"; 224 | @ionicon-var-document: "\f12f"; 225 | @ionicon-var-document-text: "\f12e"; 226 | @ionicon-var-drag: "\f130"; 227 | @ionicon-var-earth: "\f276"; 228 | @ionicon-var-easel: "\f3c2"; 229 | @ionicon-var-edit: "\f2bf"; 230 | @ionicon-var-egg: "\f277"; 231 | @ionicon-var-eject: "\f131"; 232 | @ionicon-var-email: "\f132"; 233 | @ionicon-var-email-unread: "\f3c3"; 234 | @ionicon-var-erlenmeyer-flask: "\f3c5"; 235 | @ionicon-var-erlenmeyer-flask-bubbles: "\f3c4"; 236 | @ionicon-var-eye: "\f133"; 237 | @ionicon-var-eye-disabled: "\f306"; 238 | @ionicon-var-female: "\f278"; 239 | @ionicon-var-filing: "\f134"; 240 | @ionicon-var-film-marker: "\f135"; 241 | @ionicon-var-fireball: "\f319"; 242 | @ionicon-var-flag: "\f279"; 243 | @ionicon-var-flame: "\f31a"; 244 | @ionicon-var-flash: "\f137"; 245 | @ionicon-var-flash-off: "\f136"; 246 | @ionicon-var-folder: "\f139"; 247 | @ionicon-var-fork: "\f27a"; 248 | @ionicon-var-fork-repo: "\f2c0"; 249 | @ionicon-var-forward: "\f13a"; 250 | @ionicon-var-funnel: "\f31b"; 251 | @ionicon-var-gear-a: "\f13d"; 252 | @ionicon-var-gear-b: "\f13e"; 253 | @ionicon-var-grid: "\f13f"; 254 | @ionicon-var-hammer: "\f27b"; 255 | @ionicon-var-happy: "\f31c"; 256 | @ionicon-var-happy-outline: "\f3c6"; 257 | @ionicon-var-headphone: "\f140"; 258 | @ionicon-var-heart: "\f141"; 259 | @ionicon-var-heart-broken: "\f31d"; 260 | @ionicon-var-help: "\f143"; 261 | @ionicon-var-help-buoy: "\f27c"; 262 | @ionicon-var-help-circled: "\f142"; 263 | @ionicon-var-home: "\f144"; 264 | @ionicon-var-icecream: "\f27d"; 265 | @ionicon-var-image: "\f147"; 266 | @ionicon-var-images: "\f148"; 267 | @ionicon-var-information: "\f14a"; 268 | @ionicon-var-information-circled: "\f149"; 269 | @ionicon-var-ionic: "\f14b"; 270 | @ionicon-var-ios-alarm: "\f3c8"; 271 | @ionicon-var-ios-alarm-outline: "\f3c7"; 272 | @ionicon-var-ios-albums: "\f3ca"; 273 | @ionicon-var-ios-albums-outline: "\f3c9"; 274 | @ionicon-var-ios-americanfootball: "\f3cc"; 275 | @ionicon-var-ios-americanfootball-outline: "\f3cb"; 276 | @ionicon-var-ios-analytics: "\f3ce"; 277 | @ionicon-var-ios-analytics-outline: "\f3cd"; 278 | @ionicon-var-ios-arrow-back: "\f3cf"; 279 | @ionicon-var-ios-arrow-down: "\f3d0"; 280 | @ionicon-var-ios-arrow-forward: "\f3d1"; 281 | @ionicon-var-ios-arrow-left: "\f3d2"; 282 | @ionicon-var-ios-arrow-right: "\f3d3"; 283 | @ionicon-var-ios-arrow-thin-down: "\f3d4"; 284 | @ionicon-var-ios-arrow-thin-left: "\f3d5"; 285 | @ionicon-var-ios-arrow-thin-right: "\f3d6"; 286 | @ionicon-var-ios-arrow-thin-up: "\f3d7"; 287 | @ionicon-var-ios-arrow-up: "\f3d8"; 288 | @ionicon-var-ios-at: "\f3da"; 289 | @ionicon-var-ios-at-outline: "\f3d9"; 290 | @ionicon-var-ios-barcode: "\f3dc"; 291 | @ionicon-var-ios-barcode-outline: "\f3db"; 292 | @ionicon-var-ios-baseball: "\f3de"; 293 | @ionicon-var-ios-baseball-outline: "\f3dd"; 294 | @ionicon-var-ios-basketball: "\f3e0"; 295 | @ionicon-var-ios-basketball-outline: "\f3df"; 296 | @ionicon-var-ios-bell: "\f3e2"; 297 | @ionicon-var-ios-bell-outline: "\f3e1"; 298 | @ionicon-var-ios-body: "\f3e4"; 299 | @ionicon-var-ios-body-outline: "\f3e3"; 300 | @ionicon-var-ios-bolt: "\f3e6"; 301 | @ionicon-var-ios-bolt-outline: "\f3e5"; 302 | @ionicon-var-ios-book: "\f3e8"; 303 | @ionicon-var-ios-book-outline: "\f3e7"; 304 | @ionicon-var-ios-bookmarks: "\f3ea"; 305 | @ionicon-var-ios-bookmarks-outline: "\f3e9"; 306 | @ionicon-var-ios-box: "\f3ec"; 307 | @ionicon-var-ios-box-outline: "\f3eb"; 308 | @ionicon-var-ios-briefcase: "\f3ee"; 309 | @ionicon-var-ios-briefcase-outline: "\f3ed"; 310 | @ionicon-var-ios-browsers: "\f3f0"; 311 | @ionicon-var-ios-browsers-outline: "\f3ef"; 312 | @ionicon-var-ios-calculator: "\f3f2"; 313 | @ionicon-var-ios-calculator-outline: "\f3f1"; 314 | @ionicon-var-ios-calendar: "\f3f4"; 315 | @ionicon-var-ios-calendar-outline: "\f3f3"; 316 | @ionicon-var-ios-camera: "\f3f6"; 317 | @ionicon-var-ios-camera-outline: "\f3f5"; 318 | @ionicon-var-ios-cart: "\f3f8"; 319 | @ionicon-var-ios-cart-outline: "\f3f7"; 320 | @ionicon-var-ios-chatboxes: "\f3fa"; 321 | @ionicon-var-ios-chatboxes-outline: "\f3f9"; 322 | @ionicon-var-ios-chatbubble: "\f3fc"; 323 | @ionicon-var-ios-chatbubble-outline: "\f3fb"; 324 | @ionicon-var-ios-checkmark: "\f3ff"; 325 | @ionicon-var-ios-checkmark-empty: "\f3fd"; 326 | @ionicon-var-ios-checkmark-outline: "\f3fe"; 327 | @ionicon-var-ios-circle-filled: "\f400"; 328 | @ionicon-var-ios-circle-outline: "\f401"; 329 | @ionicon-var-ios-clock: "\f403"; 330 | @ionicon-var-ios-clock-outline: "\f402"; 331 | @ionicon-var-ios-close: "\f406"; 332 | @ionicon-var-ios-close-empty: "\f404"; 333 | @ionicon-var-ios-close-outline: "\f405"; 334 | @ionicon-var-ios-cloud: "\f40c"; 335 | @ionicon-var-ios-cloud-download: "\f408"; 336 | @ionicon-var-ios-cloud-download-outline: "\f407"; 337 | @ionicon-var-ios-cloud-outline: "\f409"; 338 | @ionicon-var-ios-cloud-upload: "\f40b"; 339 | @ionicon-var-ios-cloud-upload-outline: "\f40a"; 340 | @ionicon-var-ios-cloudy: "\f410"; 341 | @ionicon-var-ios-cloudy-night: "\f40e"; 342 | @ionicon-var-ios-cloudy-night-outline: "\f40d"; 343 | @ionicon-var-ios-cloudy-outline: "\f40f"; 344 | @ionicon-var-ios-cog: "\f412"; 345 | @ionicon-var-ios-cog-outline: "\f411"; 346 | @ionicon-var-ios-color-filter: "\f414"; 347 | @ionicon-var-ios-color-filter-outline: "\f413"; 348 | @ionicon-var-ios-color-wand: "\f416"; 349 | @ionicon-var-ios-color-wand-outline: "\f415"; 350 | @ionicon-var-ios-compose: "\f418"; 351 | @ionicon-var-ios-compose-outline: "\f417"; 352 | @ionicon-var-ios-contact: "\f41a"; 353 | @ionicon-var-ios-contact-outline: "\f419"; 354 | @ionicon-var-ios-copy: "\f41c"; 355 | @ionicon-var-ios-copy-outline: "\f41b"; 356 | @ionicon-var-ios-crop: "\f41e"; 357 | @ionicon-var-ios-crop-strong: "\f41d"; 358 | @ionicon-var-ios-download: "\f420"; 359 | @ionicon-var-ios-download-outline: "\f41f"; 360 | @ionicon-var-ios-drag: "\f421"; 361 | @ionicon-var-ios-email: "\f423"; 362 | @ionicon-var-ios-email-outline: "\f422"; 363 | @ionicon-var-ios-eye: "\f425"; 364 | @ionicon-var-ios-eye-outline: "\f424"; 365 | @ionicon-var-ios-fastforward: "\f427"; 366 | @ionicon-var-ios-fastforward-outline: "\f426"; 367 | @ionicon-var-ios-filing: "\f429"; 368 | @ionicon-var-ios-filing-outline: "\f428"; 369 | @ionicon-var-ios-film: "\f42b"; 370 | @ionicon-var-ios-film-outline: "\f42a"; 371 | @ionicon-var-ios-flag: "\f42d"; 372 | @ionicon-var-ios-flag-outline: "\f42c"; 373 | @ionicon-var-ios-flame: "\f42f"; 374 | @ionicon-var-ios-flame-outline: "\f42e"; 375 | @ionicon-var-ios-flask: "\f431"; 376 | @ionicon-var-ios-flask-outline: "\f430"; 377 | @ionicon-var-ios-flower: "\f433"; 378 | @ionicon-var-ios-flower-outline: "\f432"; 379 | @ionicon-var-ios-folder: "\f435"; 380 | @ionicon-var-ios-folder-outline: "\f434"; 381 | @ionicon-var-ios-football: "\f437"; 382 | @ionicon-var-ios-football-outline: "\f436"; 383 | @ionicon-var-ios-game-controller-a: "\f439"; 384 | @ionicon-var-ios-game-controller-a-outline: "\f438"; 385 | @ionicon-var-ios-game-controller-b: "\f43b"; 386 | @ionicon-var-ios-game-controller-b-outline: "\f43a"; 387 | @ionicon-var-ios-gear: "\f43d"; 388 | @ionicon-var-ios-gear-outline: "\f43c"; 389 | @ionicon-var-ios-glasses: "\f43f"; 390 | @ionicon-var-ios-glasses-outline: "\f43e"; 391 | @ionicon-var-ios-grid-view: "\f441"; 392 | @ionicon-var-ios-grid-view-outline: "\f440"; 393 | @ionicon-var-ios-heart: "\f443"; 394 | @ionicon-var-ios-heart-outline: "\f442"; 395 | @ionicon-var-ios-help: "\f446"; 396 | @ionicon-var-ios-help-empty: "\f444"; 397 | @ionicon-var-ios-help-outline: "\f445"; 398 | @ionicon-var-ios-home: "\f448"; 399 | @ionicon-var-ios-home-outline: "\f447"; 400 | @ionicon-var-ios-infinite: "\f44a"; 401 | @ionicon-var-ios-infinite-outline: "\f449"; 402 | @ionicon-var-ios-information: "\f44d"; 403 | @ionicon-var-ios-information-empty: "\f44b"; 404 | @ionicon-var-ios-information-outline: "\f44c"; 405 | @ionicon-var-ios-ionic-outline: "\f44e"; 406 | @ionicon-var-ios-keypad: "\f450"; 407 | @ionicon-var-ios-keypad-outline: "\f44f"; 408 | @ionicon-var-ios-lightbulb: "\f452"; 409 | @ionicon-var-ios-lightbulb-outline: "\f451"; 410 | @ionicon-var-ios-list: "\f454"; 411 | @ionicon-var-ios-list-outline: "\f453"; 412 | @ionicon-var-ios-location: "\f456"; 413 | @ionicon-var-ios-location-outline: "\f455"; 414 | @ionicon-var-ios-locked: "\f458"; 415 | @ionicon-var-ios-locked-outline: "\f457"; 416 | @ionicon-var-ios-loop: "\f45a"; 417 | @ionicon-var-ios-loop-strong: "\f459"; 418 | @ionicon-var-ios-medical: "\f45c"; 419 | @ionicon-var-ios-medical-outline: "\f45b"; 420 | @ionicon-var-ios-medkit: "\f45e"; 421 | @ionicon-var-ios-medkit-outline: "\f45d"; 422 | @ionicon-var-ios-mic: "\f461"; 423 | @ionicon-var-ios-mic-off: "\f45f"; 424 | @ionicon-var-ios-mic-outline: "\f460"; 425 | @ionicon-var-ios-minus: "\f464"; 426 | @ionicon-var-ios-minus-empty: "\f462"; 427 | @ionicon-var-ios-minus-outline: "\f463"; 428 | @ionicon-var-ios-monitor: "\f466"; 429 | @ionicon-var-ios-monitor-outline: "\f465"; 430 | @ionicon-var-ios-moon: "\f468"; 431 | @ionicon-var-ios-moon-outline: "\f467"; 432 | @ionicon-var-ios-more: "\f46a"; 433 | @ionicon-var-ios-more-outline: "\f469"; 434 | @ionicon-var-ios-musical-note: "\f46b"; 435 | @ionicon-var-ios-musical-notes: "\f46c"; 436 | @ionicon-var-ios-navigate: "\f46e"; 437 | @ionicon-var-ios-navigate-outline: "\f46d"; 438 | @ionicon-var-ios-nutrition: "\f470"; 439 | @ionicon-var-ios-nutrition-outline: "\f46f"; 440 | @ionicon-var-ios-paper: "\f472"; 441 | @ionicon-var-ios-paper-outline: "\f471"; 442 | @ionicon-var-ios-paperplane: "\f474"; 443 | @ionicon-var-ios-paperplane-outline: "\f473"; 444 | @ionicon-var-ios-partlysunny: "\f476"; 445 | @ionicon-var-ios-partlysunny-outline: "\f475"; 446 | @ionicon-var-ios-pause: "\f478"; 447 | @ionicon-var-ios-pause-outline: "\f477"; 448 | @ionicon-var-ios-paw: "\f47a"; 449 | @ionicon-var-ios-paw-outline: "\f479"; 450 | @ionicon-var-ios-people: "\f47c"; 451 | @ionicon-var-ios-people-outline: "\f47b"; 452 | @ionicon-var-ios-person: "\f47e"; 453 | @ionicon-var-ios-person-outline: "\f47d"; 454 | @ionicon-var-ios-personadd: "\f480"; 455 | @ionicon-var-ios-personadd-outline: "\f47f"; 456 | @ionicon-var-ios-photos: "\f482"; 457 | @ionicon-var-ios-photos-outline: "\f481"; 458 | @ionicon-var-ios-pie: "\f484"; 459 | @ionicon-var-ios-pie-outline: "\f483"; 460 | @ionicon-var-ios-pint: "\f486"; 461 | @ionicon-var-ios-pint-outline: "\f485"; 462 | @ionicon-var-ios-play: "\f488"; 463 | @ionicon-var-ios-play-outline: "\f487"; 464 | @ionicon-var-ios-plus: "\f48b"; 465 | @ionicon-var-ios-plus-empty: "\f489"; 466 | @ionicon-var-ios-plus-outline: "\f48a"; 467 | @ionicon-var-ios-pricetag: "\f48d"; 468 | @ionicon-var-ios-pricetag-outline: "\f48c"; 469 | @ionicon-var-ios-pricetags: "\f48f"; 470 | @ionicon-var-ios-pricetags-outline: "\f48e"; 471 | @ionicon-var-ios-printer: "\f491"; 472 | @ionicon-var-ios-printer-outline: "\f490"; 473 | @ionicon-var-ios-pulse: "\f493"; 474 | @ionicon-var-ios-pulse-strong: "\f492"; 475 | @ionicon-var-ios-rainy: "\f495"; 476 | @ionicon-var-ios-rainy-outline: "\f494"; 477 | @ionicon-var-ios-recording: "\f497"; 478 | @ionicon-var-ios-recording-outline: "\f496"; 479 | @ionicon-var-ios-redo: "\f499"; 480 | @ionicon-var-ios-redo-outline: "\f498"; 481 | @ionicon-var-ios-refresh: "\f49c"; 482 | @ionicon-var-ios-refresh-empty: "\f49a"; 483 | @ionicon-var-ios-refresh-outline: "\f49b"; 484 | @ionicon-var-ios-reload: "\f49d"; 485 | @ionicon-var-ios-reverse-camera: "\f49f"; 486 | @ionicon-var-ios-reverse-camera-outline: "\f49e"; 487 | @ionicon-var-ios-rewind: "\f4a1"; 488 | @ionicon-var-ios-rewind-outline: "\f4a0"; 489 | @ionicon-var-ios-rose: "\f4a3"; 490 | @ionicon-var-ios-rose-outline: "\f4a2"; 491 | @ionicon-var-ios-search: "\f4a5"; 492 | @ionicon-var-ios-search-strong: "\f4a4"; 493 | @ionicon-var-ios-settings: "\f4a7"; 494 | @ionicon-var-ios-settings-strong: "\f4a6"; 495 | @ionicon-var-ios-shuffle: "\f4a9"; 496 | @ionicon-var-ios-shuffle-strong: "\f4a8"; 497 | @ionicon-var-ios-skipbackward: "\f4ab"; 498 | @ionicon-var-ios-skipbackward-outline: "\f4aa"; 499 | @ionicon-var-ios-skipforward: "\f4ad"; 500 | @ionicon-var-ios-skipforward-outline: "\f4ac"; 501 | @ionicon-var-ios-snowy: "\f4ae"; 502 | @ionicon-var-ios-speedometer: "\f4b0"; 503 | @ionicon-var-ios-speedometer-outline: "\f4af"; 504 | @ionicon-var-ios-star: "\f4b3"; 505 | @ionicon-var-ios-star-half: "\f4b1"; 506 | @ionicon-var-ios-star-outline: "\f4b2"; 507 | @ionicon-var-ios-stopwatch: "\f4b5"; 508 | @ionicon-var-ios-stopwatch-outline: "\f4b4"; 509 | @ionicon-var-ios-sunny: "\f4b7"; 510 | @ionicon-var-ios-sunny-outline: "\f4b6"; 511 | @ionicon-var-ios-telephone: "\f4b9"; 512 | @ionicon-var-ios-telephone-outline: "\f4b8"; 513 | @ionicon-var-ios-tennisball: "\f4bb"; 514 | @ionicon-var-ios-tennisball-outline: "\f4ba"; 515 | @ionicon-var-ios-thunderstorm: "\f4bd"; 516 | @ionicon-var-ios-thunderstorm-outline: "\f4bc"; 517 | @ionicon-var-ios-time: "\f4bf"; 518 | @ionicon-var-ios-time-outline: "\f4be"; 519 | @ionicon-var-ios-timer: "\f4c1"; 520 | @ionicon-var-ios-timer-outline: "\f4c0"; 521 | @ionicon-var-ios-toggle: "\f4c3"; 522 | @ionicon-var-ios-toggle-outline: "\f4c2"; 523 | @ionicon-var-ios-trash: "\f4c5"; 524 | @ionicon-var-ios-trash-outline: "\f4c4"; 525 | @ionicon-var-ios-undo: "\f4c7"; 526 | @ionicon-var-ios-undo-outline: "\f4c6"; 527 | @ionicon-var-ios-unlocked: "\f4c9"; 528 | @ionicon-var-ios-unlocked-outline: "\f4c8"; 529 | @ionicon-var-ios-upload: "\f4cb"; 530 | @ionicon-var-ios-upload-outline: "\f4ca"; 531 | @ionicon-var-ios-videocam: "\f4cd"; 532 | @ionicon-var-ios-videocam-outline: "\f4cc"; 533 | @ionicon-var-ios-volume-high: "\f4ce"; 534 | @ionicon-var-ios-volume-low: "\f4cf"; 535 | @ionicon-var-ios-wineglass: "\f4d1"; 536 | @ionicon-var-ios-wineglass-outline: "\f4d0"; 537 | @ionicon-var-ios-world: "\f4d3"; 538 | @ionicon-var-ios-world-outline: "\f4d2"; 539 | @ionicon-var-ipad: "\f1f9"; 540 | @ionicon-var-iphone: "\f1fa"; 541 | @ionicon-var-ipod: "\f1fb"; 542 | @ionicon-var-jet: "\f295"; 543 | @ionicon-var-key: "\f296"; 544 | @ionicon-var-knife: "\f297"; 545 | @ionicon-var-laptop: "\f1fc"; 546 | @ionicon-var-leaf: "\f1fd"; 547 | @ionicon-var-levels: "\f298"; 548 | @ionicon-var-lightbulb: "\f299"; 549 | @ionicon-var-link: "\f1fe"; 550 | @ionicon-var-load-a: "\f29a"; 551 | @ionicon-var-load-b: "\f29b"; 552 | @ionicon-var-load-c: "\f29c"; 553 | @ionicon-var-load-d: "\f29d"; 554 | @ionicon-var-location: "\f1ff"; 555 | @ionicon-var-lock-combination: "\f4d4"; 556 | @ionicon-var-locked: "\f200"; 557 | @ionicon-var-log-in: "\f29e"; 558 | @ionicon-var-log-out: "\f29f"; 559 | @ionicon-var-loop: "\f201"; 560 | @ionicon-var-magnet: "\f2a0"; 561 | @ionicon-var-male: "\f2a1"; 562 | @ionicon-var-man: "\f202"; 563 | @ionicon-var-map: "\f203"; 564 | @ionicon-var-medkit: "\f2a2"; 565 | @ionicon-var-merge: "\f33f"; 566 | @ionicon-var-mic-a: "\f204"; 567 | @ionicon-var-mic-b: "\f205"; 568 | @ionicon-var-mic-c: "\f206"; 569 | @ionicon-var-minus: "\f209"; 570 | @ionicon-var-minus-circled: "\f207"; 571 | @ionicon-var-minus-round: "\f208"; 572 | @ionicon-var-model-s: "\f2c1"; 573 | @ionicon-var-monitor: "\f20a"; 574 | @ionicon-var-more: "\f20b"; 575 | @ionicon-var-mouse: "\f340"; 576 | @ionicon-var-music-note: "\f20c"; 577 | @ionicon-var-navicon: "\f20e"; 578 | @ionicon-var-navicon-round: "\f20d"; 579 | @ionicon-var-navigate: "\f2a3"; 580 | @ionicon-var-network: "\f341"; 581 | @ionicon-var-no-smoking: "\f2c2"; 582 | @ionicon-var-nuclear: "\f2a4"; 583 | @ionicon-var-outlet: "\f342"; 584 | @ionicon-var-paintbrush: "\f4d5"; 585 | @ionicon-var-paintbucket: "\f4d6"; 586 | @ionicon-var-paper-airplane: "\f2c3"; 587 | @ionicon-var-paperclip: "\f20f"; 588 | @ionicon-var-pause: "\f210"; 589 | @ionicon-var-person: "\f213"; 590 | @ionicon-var-person-add: "\f211"; 591 | @ionicon-var-person-stalker: "\f212"; 592 | @ionicon-var-pie-graph: "\f2a5"; 593 | @ionicon-var-pin: "\f2a6"; 594 | @ionicon-var-pinpoint: "\f2a7"; 595 | @ionicon-var-pizza: "\f2a8"; 596 | @ionicon-var-plane: "\f214"; 597 | @ionicon-var-planet: "\f343"; 598 | @ionicon-var-play: "\f215"; 599 | @ionicon-var-playstation: "\f30a"; 600 | @ionicon-var-plus: "\f218"; 601 | @ionicon-var-plus-circled: "\f216"; 602 | @ionicon-var-plus-round: "\f217"; 603 | @ionicon-var-podium: "\f344"; 604 | @ionicon-var-pound: "\f219"; 605 | @ionicon-var-power: "\f2a9"; 606 | @ionicon-var-pricetag: "\f2aa"; 607 | @ionicon-var-pricetags: "\f2ab"; 608 | @ionicon-var-printer: "\f21a"; 609 | @ionicon-var-pull-request: "\f345"; 610 | @ionicon-var-qr-scanner: "\f346"; 611 | @ionicon-var-quote: "\f347"; 612 | @ionicon-var-radio-waves: "\f2ac"; 613 | @ionicon-var-record: "\f21b"; 614 | @ionicon-var-refresh: "\f21c"; 615 | @ionicon-var-reply: "\f21e"; 616 | @ionicon-var-reply-all: "\f21d"; 617 | @ionicon-var-ribbon-a: "\f348"; 618 | @ionicon-var-ribbon-b: "\f349"; 619 | @ionicon-var-sad: "\f34a"; 620 | @ionicon-var-sad-outline: "\f4d7"; 621 | @ionicon-var-scissors: "\f34b"; 622 | @ionicon-var-search: "\f21f"; 623 | @ionicon-var-settings: "\f2ad"; 624 | @ionicon-var-share: "\f220"; 625 | @ionicon-var-shuffle: "\f221"; 626 | @ionicon-var-skip-backward: "\f222"; 627 | @ionicon-var-skip-forward: "\f223"; 628 | @ionicon-var-social-android: "\f225"; 629 | @ionicon-var-social-android-outline: "\f224"; 630 | @ionicon-var-social-angular: "\f4d9"; 631 | @ionicon-var-social-angular-outline: "\f4d8"; 632 | @ionicon-var-social-apple: "\f227"; 633 | @ionicon-var-social-apple-outline: "\f226"; 634 | @ionicon-var-social-bitcoin: "\f2af"; 635 | @ionicon-var-social-bitcoin-outline: "\f2ae"; 636 | @ionicon-var-social-buffer: "\f229"; 637 | @ionicon-var-social-buffer-outline: "\f228"; 638 | @ionicon-var-social-chrome: "\f4db"; 639 | @ionicon-var-social-chrome-outline: "\f4da"; 640 | @ionicon-var-social-codepen: "\f4dd"; 641 | @ionicon-var-social-codepen-outline: "\f4dc"; 642 | @ionicon-var-social-css3: "\f4df"; 643 | @ionicon-var-social-css3-outline: "\f4de"; 644 | @ionicon-var-social-designernews: "\f22b"; 645 | @ionicon-var-social-designernews-outline: "\f22a"; 646 | @ionicon-var-social-dribbble: "\f22d"; 647 | @ionicon-var-social-dribbble-outline: "\f22c"; 648 | @ionicon-var-social-dropbox: "\f22f"; 649 | @ionicon-var-social-dropbox-outline: "\f22e"; 650 | @ionicon-var-social-euro: "\f4e1"; 651 | @ionicon-var-social-euro-outline: "\f4e0"; 652 | @ionicon-var-social-facebook: "\f231"; 653 | @ionicon-var-social-facebook-outline: "\f230"; 654 | @ionicon-var-social-foursquare: "\f34d"; 655 | @ionicon-var-social-foursquare-outline: "\f34c"; 656 | @ionicon-var-social-freebsd-devil: "\f2c4"; 657 | @ionicon-var-social-github: "\f233"; 658 | @ionicon-var-social-github-outline: "\f232"; 659 | @ionicon-var-social-google: "\f34f"; 660 | @ionicon-var-social-google-outline: "\f34e"; 661 | @ionicon-var-social-googleplus: "\f235"; 662 | @ionicon-var-social-googleplus-outline: "\f234"; 663 | @ionicon-var-social-hackernews: "\f237"; 664 | @ionicon-var-social-hackernews-outline: "\f236"; 665 | @ionicon-var-social-html5: "\f4e3"; 666 | @ionicon-var-social-html5-outline: "\f4e2"; 667 | @ionicon-var-social-instagram: "\f351"; 668 | @ionicon-var-social-instagram-outline: "\f350"; 669 | @ionicon-var-social-javascript: "\f4e5"; 670 | @ionicon-var-social-javascript-outline: "\f4e4"; 671 | @ionicon-var-social-linkedin: "\f239"; 672 | @ionicon-var-social-linkedin-outline: "\f238"; 673 | @ionicon-var-social-markdown: "\f4e6"; 674 | @ionicon-var-social-nodejs: "\f4e7"; 675 | @ionicon-var-social-octocat: "\f4e8"; 676 | @ionicon-var-social-pinterest: "\f2b1"; 677 | @ionicon-var-social-pinterest-outline: "\f2b0"; 678 | @ionicon-var-social-python: "\f4e9"; 679 | @ionicon-var-social-reddit: "\f23b"; 680 | @ionicon-var-social-reddit-outline: "\f23a"; 681 | @ionicon-var-social-rss: "\f23d"; 682 | @ionicon-var-social-rss-outline: "\f23c"; 683 | @ionicon-var-social-sass: "\f4ea"; 684 | @ionicon-var-social-skype: "\f23f"; 685 | @ionicon-var-social-skype-outline: "\f23e"; 686 | @ionicon-var-social-snapchat: "\f4ec"; 687 | @ionicon-var-social-snapchat-outline: "\f4eb"; 688 | @ionicon-var-social-tumblr: "\f241"; 689 | @ionicon-var-social-tumblr-outline: "\f240"; 690 | @ionicon-var-social-tux: "\f2c5"; 691 | @ionicon-var-social-twitch: "\f4ee"; 692 | @ionicon-var-social-twitch-outline: "\f4ed"; 693 | @ionicon-var-social-twitter: "\f243"; 694 | @ionicon-var-social-twitter-outline: "\f242"; 695 | @ionicon-var-social-usd: "\f353"; 696 | @ionicon-var-social-usd-outline: "\f352"; 697 | @ionicon-var-social-vimeo: "\f245"; 698 | @ionicon-var-social-vimeo-outline: "\f244"; 699 | @ionicon-var-social-whatsapp: "\f4f0"; 700 | @ionicon-var-social-whatsapp-outline: "\f4ef"; 701 | @ionicon-var-social-windows: "\f247"; 702 | @ionicon-var-social-windows-outline: "\f246"; 703 | @ionicon-var-social-wordpress: "\f249"; 704 | @ionicon-var-social-wordpress-outline: "\f248"; 705 | @ionicon-var-social-yahoo: "\f24b"; 706 | @ionicon-var-social-yahoo-outline: "\f24a"; 707 | @ionicon-var-social-yen: "\f4f2"; 708 | @ionicon-var-social-yen-outline: "\f4f1"; 709 | @ionicon-var-social-youtube: "\f24d"; 710 | @ionicon-var-social-youtube-outline: "\f24c"; 711 | @ionicon-var-soup-can: "\f4f4"; 712 | @ionicon-var-soup-can-outline: "\f4f3"; 713 | @ionicon-var-speakerphone: "\f2b2"; 714 | @ionicon-var-speedometer: "\f2b3"; 715 | @ionicon-var-spoon: "\f2b4"; 716 | @ionicon-var-star: "\f24e"; 717 | @ionicon-var-stats-bars: "\f2b5"; 718 | @ionicon-var-steam: "\f30b"; 719 | @ionicon-var-stop: "\f24f"; 720 | @ionicon-var-thermometer: "\f2b6"; 721 | @ionicon-var-thumbsdown: "\f250"; 722 | @ionicon-var-thumbsup: "\f251"; 723 | @ionicon-var-toggle: "\f355"; 724 | @ionicon-var-toggle-filled: "\f354"; 725 | @ionicon-var-transgender: "\f4f5"; 726 | @ionicon-var-trash-a: "\f252"; 727 | @ionicon-var-trash-b: "\f253"; 728 | @ionicon-var-trophy: "\f356"; 729 | @ionicon-var-tshirt: "\f4f7"; 730 | @ionicon-var-tshirt-outline: "\f4f6"; 731 | @ionicon-var-umbrella: "\f2b7"; 732 | @ionicon-var-university: "\f357"; 733 | @ionicon-var-unlocked: "\f254"; 734 | @ionicon-var-upload: "\f255"; 735 | @ionicon-var-usb: "\f2b8"; 736 | @ionicon-var-videocamera: "\f256"; 737 | @ionicon-var-volume-high: "\f257"; 738 | @ionicon-var-volume-low: "\f258"; 739 | @ionicon-var-volume-medium: "\f259"; 740 | @ionicon-var-volume-mute: "\f25a"; 741 | @ionicon-var-wand: "\f358"; 742 | @ionicon-var-waterdrop: "\f25b"; 743 | @ionicon-var-wifi: "\f25c"; 744 | @ionicon-var-wineglass: "\f2b9"; 745 | @ionicon-var-woman: "\f25d"; 746 | @ionicon-var-wrench: "\f2ba"; 747 | @ionicon-var-xbox: "\f30c"; -------------------------------------------------------------------------------- /src/css/ionicons/ionicons.less: -------------------------------------------------------------------------------- 1 | @import "_ionicons-variables"; 2 | @import "_ionicons-font"; 3 | @import "_ionicons-icons"; 4 | -------------------------------------------------------------------------------- /src/css/variables.less: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // ============================== 4 | 5 | 6 | 7 | 8 | // Headerbar 9 | // ------------------------------ 10 | 11 | @statusbar-height: 20px; 12 | 13 | @headerbar-bg: #f6faf8; 14 | @headerbar-color: @gray-darker; 15 | @headerbar-height: 44px; 16 | @headerbar-button-color: @app-primary; 17 | @headerbar-button-color-disabled: #ccc; 18 | 19 | @headerbar-inverted-color: white; 20 | @headerbar-inverted-button-color: white; 21 | @headerbar-inverted-button-color-disabled: fade(white, 40%); 22 | 23 | @headerbar-field-gutter: 8px; 24 | @headerbar-field-height: 28px; 25 | 26 | 27 | 28 | 29 | // Footerbar 30 | // ------------------------------ 31 | 32 | @footerbar-bg: @headerbar-bg; 33 | @footerbar-color: @headerbar-color; 34 | @footerbar-height: @headerbar-height; 35 | @footerbar-button-color: @gray; 36 | @footerbar-button-color-disabled: #ccc; 37 | @footerbar-button-color-selected: @app-primary; 38 | 39 | 40 | 41 | 42 | // Forms 43 | // ------------------------------ 44 | 45 | @field-color: @text-color; 46 | @field-border: #ddd; 47 | @field-border-focus: darken(@field-border, 10%); 48 | @field-placeholder: #c7c7cd; 49 | @field-label-color: @gray; 50 | 51 | @field-height: 44px; 52 | @field-padding-vertical: @padding-base-vertical; 53 | @field-padding-horizontal: @padding-base-horizontal; -------------------------------------------------------------------------------- /src/css/views/passcode.less: -------------------------------------------------------------------------------- 1 | // 2 | // Passcode 3 | // ============================== 4 | 5 | .Passcode { 6 | padding-bottom: 10vh; 7 | padding-top: 10vh; 8 | } 9 | .Keypad { 10 | bottom: 0; 11 | position: absolute; 12 | width: 100%; 13 | } -------------------------------------------------------------------------------- /src/css/views/person.less: -------------------------------------------------------------------------------- 1 | // 2 | // Person 3 | // ============================== 4 | 5 | 6 | 7 | 8 | // Body 9 | // ------------------------------ 10 | 11 | .PersonDetails { 12 | padding: 2em; 13 | text-align: center; 14 | } 15 | .PersonDetails__avatar { 16 | .avatar(120px); 17 | background-color: rgba(255, 255, 255, 0.5); 18 | margin-bottom: 1em; 19 | } 20 | .PersonDetails__heading { 21 | font-size: @font-size-lg; 22 | font-weight: 500; 23 | } 24 | .PersonDetails__text { 25 | color: @gray-dark; 26 | font-size: @font-size-sm; 27 | line-height: 1.3; 28 | margin-top: 1em; 29 | } 30 | 31 | 32 | // profile 33 | 34 | .PersonDetails__profiles { 35 | font-size: @font-size-lg; 36 | margin-top: 1em; 37 | } 38 | .PersonDetails__profile { 39 | display: block; 40 | padding-bottom: .5em; 41 | padding-top: .5em; 42 | } 43 | // 1. fix vertical alignment 44 | .PersonDetails__profile__icon { 45 | display: inline-block; 46 | font-size: 1.25em; 47 | line-height: 1; // 1 48 | margin-right: .5em; 49 | margin-top: -.15em; // 1 50 | vertical-align: middle; 51 | } 52 | 53 | .PersonDetails__public-indicator { 54 | background-color: rgba(255, 255, 255, 0.125); 55 | border-radius: 2em; 56 | display: inline-block; 57 | line-height: 2.4; 58 | font-size: @font-size-xxs; 59 | font-weight: 500; 60 | margin-bottom: 1.8em; 61 | margin-top: 1.8em; 62 | padding-left: 1.25em; 63 | padding-right: 1.25em; 64 | text-transform: uppercase; 65 | } -------------------------------------------------------------------------------- /src/data/months.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { name: 'December', number: '12', season: 'Summer' }, 3 | { name: 'January', number: '1', season: 'Summer' }, 4 | { name: 'February', number: '2', season: 'Summer' }, 5 | { name: 'March', number: '3', season: 'Autumn' }, 6 | { name: 'April', number: '4', season: 'Autumn' }, 7 | { name: 'May', number: '5', season: 'Autumn' }, 8 | { name: 'June', number: '6', season: 'Winter' }, 9 | { name: 'July', number: '7', season: 'Winter' }, 10 | { name: 'August', number: '8', season: 'Winter' }, 11 | { name: 'September', number: '9', season: 'Spring' }, 12 | { name: 'October', number: '10', season: 'Spring' }, 13 | { name: 'November', number: '11', season: 'Spring' } 14 | ]; -------------------------------------------------------------------------------- /src/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/fonts/ionicons.eot -------------------------------------------------------------------------------- /src/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/fonts/ionicons.ttf -------------------------------------------------------------------------------- /src/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/fonts/ionicons.woff -------------------------------------------------------------------------------- /src/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/favicon.ico -------------------------------------------------------------------------------- /src/img/icon-qr-inverted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | Fl 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 46 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 58 | 59 | 60 | 61 | 62 | 70 | 71 | 72 | 79 | 80 | 81 | 88 | 89 | 90 | 96 | 97 | 98 | 108 | 109 | 110 | 114 | 115 | 116 | 121 | 122 | 123 | 130 | 131 | 132 | 147 | 148 | 149 | 220 | 221 | 222 | -------------------------------------------------------------------------------- /src/img/icon-qr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | Fl 11 | 12 | 13 | 14 | 15 | 16 | 24 | 25 | 26 | 39 | 40 | 41 | 44 | 45 | 46 | 47 | 49 | 50 | 51 | 55 | 56 | 57 | 58 | 59 | 62 | 63 | 64 | 65 | 66 | 76 | 77 | 78 | 87 | 88 | 89 | 98 | 99 | 100 | 107 | 108 | 109 | 121 | 122 | 123 | 127 | 128 | 129 | 135 | 136 | 137 | 145 | 146 | 147 | 162 | 163 | 164 | 231 | 232 | 233 | -------------------------------------------------------------------------------- /src/img/ios-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/ios-icon.png -------------------------------------------------------------------------------- /src/img/logo-mark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 19 | 21 | 23 | 25 | 28 | 30 | 32 | 34 | 37 | 39 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/img/mock/qr_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/mock/qr_code.png -------------------------------------------------------------------------------- /src/img/organisers/cramon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/organisers/cramon.jpg -------------------------------------------------------------------------------- /src/img/organisers/katy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/organisers/katy.jpg -------------------------------------------------------------------------------- /src/img/organisers/pat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/organisers/pat.jpg -------------------------------------------------------------------------------- /src/img/speakers/SebastianProfile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/SebastianProfile.jpg -------------------------------------------------------------------------------- /src/img/speakers/aria-buckles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/aria-buckles.jpg -------------------------------------------------------------------------------- /src/img/speakers/ben-alpert.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/ben-alpert.jpeg -------------------------------------------------------------------------------- /src/img/speakers/ben-gotow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/ben-gotow.jpg -------------------------------------------------------------------------------- /src/img/speakers/cheng-lou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/cheng-lou.jpg -------------------------------------------------------------------------------- /src/img/speakers/christopher-chedeau.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/christopher-chedeau.jpg -------------------------------------------------------------------------------- /src/img/speakers/dan-abramov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/dan-abramov.jpg -------------------------------------------------------------------------------- /src/img/speakers/dlschafer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/dlschafer.jpg -------------------------------------------------------------------------------- /src/img/speakers/elie-rotenberg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/elie-rotenberg.jpg -------------------------------------------------------------------------------- /src/img/speakers/evan-morikawa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/evan-morikawa.jpg -------------------------------------------------------------------------------- /src/img/speakers/jed-watson.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/jed-watson.jpg -------------------------------------------------------------------------------- /src/img/speakers/joseph-savona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/joseph-savona.jpg -------------------------------------------------------------------------------- /src/img/speakers/kevin-robinson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/kevin-robinson.png -------------------------------------------------------------------------------- /src/img/speakers/lee-byron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/lee-byron.jpg -------------------------------------------------------------------------------- /src/img/speakers/michael-chan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/michael-chan.jpg -------------------------------------------------------------------------------- /src/img/speakers/michael-jackson.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/michael-jackson.jpg -------------------------------------------------------------------------------- /src/img/speakers/michael-ridgway.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/michael-ridgway.jpg -------------------------------------------------------------------------------- /src/img/speakers/mikhail-davydov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/mikhail-davydov.jpg -------------------------------------------------------------------------------- /src/img/speakers/ryan-florence.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/ryan-florence.jpg -------------------------------------------------------------------------------- /src/img/speakers/schrockn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/schrockn.jpg -------------------------------------------------------------------------------- /src/img/speakers/sebastian-mcKenzie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/sebastian-mcKenzie.png -------------------------------------------------------------------------------- /src/img/speakers/spencer-ahrens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchstonejs/touchstonejs-starter/141db40dec29f3c28a01717c386a081bc0e78d4d/src/img/speakers/spencer-ahrens.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 | 16 | 17 | 18 | 19 | Touchstonejs Demo 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 3 | import ReactDOM from 'react-dom'; 4 | import { 5 | Container, 6 | createApp, 7 | UI, 8 | View, 9 | ViewManager 10 | } from 'touchstonejs'; 11 | 12 | // App Config 13 | // ------------------------------ 14 | 15 | const PeopleStore = require('./stores/people') 16 | const peopleStore = new PeopleStore() 17 | 18 | var App = React.createClass({ 19 | mixins: [createApp()], 20 | 21 | childContextTypes: { 22 | peopleStore: React.PropTypes.object 23 | }, 24 | 25 | getChildContext () { 26 | return { 27 | peopleStore: peopleStore 28 | }; 29 | }, 30 | 31 | componentDidMount () { 32 | // Hide the splash screen when the app is mounted 33 | if (navigator.splashscreen) { 34 | navigator.splashscreen.hide(); 35 | } 36 | }, 37 | 38 | render () { 39 | let appWrapperClassName = 'app-wrapper device--' + (window.device || {}).platform 40 | 41 | return ( 42 |
43 |
44 | 45 | 46 | 47 | 48 |
49 |
50 | ); 51 | } 52 | }); 53 | 54 | // Main Controller 55 | // ------------------------------ 56 | 57 | var MainViewController = React.createClass({ 58 | render () { 59 | return ( 60 | 61 | 62 | 63 | 64 | 65 | 66 | ); 67 | } 68 | }); 69 | 70 | // Tab Controller 71 | // ------------------------------ 72 | 73 | var lastSelectedTab = 'lists' 74 | var TabViewController = React.createClass({ 75 | getInitialState () { 76 | return { 77 | selectedTab: lastSelectedTab 78 | }; 79 | }, 80 | 81 | onViewChange (nextView) { 82 | lastSelectedTab = nextView 83 | 84 | this.setState({ 85 | selectedTab: nextView 86 | }); 87 | }, 88 | 89 | selectTab (value) { 90 | let viewProps; 91 | 92 | this.refs.vm.transitionTo(value, { 93 | transition: 'instant', 94 | viewProps: viewProps 95 | }); 96 | 97 | this.setState({ 98 | selectedTab: value 99 | }) 100 | }, 101 | 102 | render () { 103 | let selectedTab = this.state.selectedTab 104 | let selectedTabSpan = selectedTab 105 | 106 | if (selectedTab === 'lists' || selectedTab === 'list-simple' || selectedTab === 'list-complex' || selectedTab === 'list-details') { 107 | selectedTabSpan = 'lists'; 108 | } 109 | 110 | if (selectedTab === 'transitions' || selectedTab === 'transitions-target') { 111 | selectedTabSpan = 'transitions'; 112 | } 113 | 114 | return ( 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | Lists 130 | 131 | 132 | 133 | Forms 134 | 135 | 136 | 137 | Controls 138 | 139 | 140 | 141 | Transitions 142 | 143 | 144 | 145 | ); 146 | } 147 | }); 148 | 149 | function startApp () { 150 | if (window.StatusBar) { 151 | window.StatusBar.styleDefault(); 152 | } 153 | ReactDOM.render(, document.getElementById('app')); 154 | } 155 | 156 | if (!window.cordova) { 157 | startApp(); 158 | } else { 159 | document.addEventListener('deviceready', startApp, false); 160 | } 161 | -------------------------------------------------------------------------------- /src/js/components/svg/icon-qr.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var React = require('react'); 3 | 4 | var svg = fs.readFileSync('./src/img/icon-qr.svg', 'utf-8'); 5 | 6 | module.exports = React.createClass({ 7 | render: function () { 8 | return React.createElement('span', { 9 | className: this.props.className ? this.props.className : 'svg-icon', 10 | dangerouslySetInnerHTML: { __html: svg } 11 | }); 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /src/js/config.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /src/js/stores/people.js: -------------------------------------------------------------------------------- 1 | var EventEmitter = require('events').EventEmitter; 2 | 3 | var async = require('async'); 4 | var httpify = require('httpify'); 5 | 6 | const apiUrl = (window.location.protocol === 'https:') ? 'https://randomuser.me/api?nat=au&results=16' : 'http://api.randomuser.me/?nat=au&results=16'; 7 | 8 | function PeopleStore () { 9 | EventEmitter.call(this); 10 | 11 | // initialize internal cache 12 | var storage = this.cache = { 13 | people: [] 14 | }; 15 | var self = this; 16 | 17 | // Dispatchers 18 | this.starQueue = async.queue((data, callback) => { 19 | var { id, starred } = data; 20 | 21 | // update internal data 22 | self.cache.people 23 | .filter(person => person.id === id) 24 | .forEach(person => person.isStarred = starred); 25 | 26 | // emit events 27 | self.emit('people-updated', storage.people); 28 | 29 | callback(); 30 | }, 1); 31 | 32 | this.refreshQueue = async.queue((_, callback) => { 33 | // update 34 | httpify({ 35 | method: 'GET', 36 | url: apiUrl 37 | }, function (err, res) { 38 | if (err) return callback(err); 39 | 40 | storage.people = res.body.results.map(p => p.user); 41 | 42 | // post process new data 43 | storage.people.forEach((person, i) => { 44 | person.id = i; 45 | person.name.first = person.name.first[0].toUpperCase() + person.name.first.slice(1); 46 | person.name.last = person.name.last[0].toUpperCase() + person.name.last.slice(1); 47 | person.name.initials = person.name.first[0] + person.name.last[0]; 48 | person.name.full = person.name.first + ' ' + person.name.last; 49 | person.category = Math.random() > 0.5 ? 'A' : 'B'; 50 | person.github = person.name.first.toLowerCase() + person.name.last.toLowerCase(); 51 | person.picture = person.picture.medium; 52 | person.twitter = '@' + person.name.first.toLowerCase() + (Math.random().toString(32).slice(2, 5)); 53 | }); 54 | 55 | // emit events 56 | self.emit('people-updated', storage.people); 57 | self.emit('refresh'); 58 | 59 | callback(null, storage.people); 60 | }); 61 | }, 1); 62 | 63 | // refresh immediately 64 | this.refresh(); 65 | } 66 | 67 | Object.assign(PeopleStore.prototype, EventEmitter.prototype); 68 | 69 | // Intents 70 | PeopleStore.prototype.refresh = function (callback) { 71 | this.refreshQueue.push(null, callback); 72 | } 73 | 74 | PeopleStore.prototype.star = function ({ id }, starred, callback) { 75 | this.starQueue.push({ id, starred }, callback); 76 | } 77 | 78 | // Getters 79 | PeopleStore.prototype.getPeople = function () { return this.cache.people; }; 80 | 81 | module.exports = PeopleStore; 82 | -------------------------------------------------------------------------------- /src/js/views/controls.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import Tappable from 'react-tappable'; 4 | import Timers from 'react-timers'; 5 | import { Link, UI } from 'touchstonejs'; 6 | 7 | module.exports = React.createClass({ 8 | mixins: [Timers], 9 | statics: { 10 | navigationBar: 'main', 11 | getNavigation () { 12 | return { 13 | title: 'Controls' 14 | } 15 | } 16 | }, 17 | 18 | getInitialState () { 19 | return { 20 | alertbar: { 21 | visible: false, 22 | type: '', 23 | text: '' 24 | }, 25 | popup: { 26 | visible: false 27 | } 28 | } 29 | }, 30 | 31 | showLoadingPopup () { 32 | this.setState({ 33 | popup: { 34 | visible: true, 35 | loading: true, 36 | header: 'Loading', 37 | iconName: 'ion-load-c', 38 | iconType: 'default' 39 | } 40 | }); 41 | 42 | this.setTimeout(() => { 43 | this.setState({ 44 | popup: { 45 | visible: true, 46 | loading: false, 47 | header: 'Done!', 48 | iconName: 'ion-ios-checkmark', 49 | iconType: 'success' 50 | } 51 | }); 52 | }, 2000); 53 | 54 | this.setTimeout(() => { 55 | this.setState({ 56 | popup: { 57 | visible: false 58 | } 59 | }); 60 | }, 3000); 61 | }, 62 | 63 | showAlertbar (type, text) { 64 | this.setState({ 65 | alertbar: { 66 | visible: true, 67 | type: type, 68 | text: text 69 | } 70 | }); 71 | 72 | this.setTimeout(() => { 73 | this.setState({ 74 | alertbar: { 75 | visible: false 76 | } 77 | }); 78 | }, 2000); 79 | }, 80 | 81 | handleModeChange (newMode) { 82 | let selectedItem = newMode; 83 | 84 | if (this.state.selectedMode === newMode) { 85 | selectedItem = null; 86 | } 87 | 88 | this.setState({ 89 | selectedMode: selectedItem 90 | }); 91 | 92 | }, 93 | 94 | render () { 95 | let { alertbar } = this.state; 96 | return ( 97 | 98 | {alertbar.text || ''} 99 | 100 | Segmented Control 101 | 107 | 108 | 109 | 110 | Alert Bar 111 | 112 | 113 | Danger 114 | 115 | 116 | Warning 117 | 118 | 119 | Success 120 | 121 | 122 | 123 | 124 | Popup 125 | 126 | Show Popup 127 | 128 | 129 | 130 | Application State 131 | 132 | 133 | 134 | Invalid View 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
{this.state.popup.header}
143 | 144 | 145 | ); 146 | } 147 | }); 148 | -------------------------------------------------------------------------------- /src/js/views/form.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import dialogs from 'cordova-dialogs'; 3 | import React from 'react'; 4 | import Tappable from 'react-tappable'; 5 | import { UI } from 'touchstonejs'; 6 | 7 | const scrollable = Container.initScrollable(); 8 | 9 | // html5 input types for testing 10 | // omitted: button, checkbox, radio, image, hidden, reset, submit 11 | const HTML5_INPUT_TYPES = ['color', 'date', 'datetime', 'datetime-local', 'email', 'file', 'month', 'number', 'password', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']; 12 | const FLAVOURS = [ 13 | { label: 'Vanilla', value: 'vanilla' }, 14 | { label: 'Chocolate', value: 'chocolate' }, 15 | { label: 'Caramel', value: 'caramel' }, 16 | { label: 'Strawberry', value: 'strawberry' } 17 | ]; 18 | 19 | module.exports = React.createClass({ 20 | statics: { 21 | navigationBar: 'main', 22 | getNavigation () { 23 | return { 24 | title: 'Forms' 25 | } 26 | } 27 | }, 28 | 29 | getInitialState () { 30 | return { 31 | flavourLabelSelect: 'chocolate', 32 | flavourRadioList: 'chocolate', 33 | switchValue: true 34 | } 35 | }, 36 | 37 | handleRadioListChange (key, newValue) { 38 | console.log('handleFlavourChange:', key, newValue); 39 | let newState = {}; 40 | newState[key] = newValue; 41 | 42 | this.setState(newState); 43 | }, 44 | 45 | handleLabelSelectChange (key, event) { 46 | console.log('handleFlavourChange:', key, event.target.value); 47 | let newState = {}; 48 | newState[key] = event.target.value; 49 | 50 | this.setState(newState); 51 | }, 52 | 53 | handleSwitch (key, event) { 54 | let newState = {}; 55 | newState[key] = !this.state[key]; 56 | 57 | this.setState(newState); 58 | }, 59 | 60 | alert (message) { 61 | dialogs.alert(message, function() {}, null) 62 | }, 63 | 64 | // used for testing 65 | renderInputTypes () { 66 | return HTML5_INPUT_TYPES.map(type => { 67 | return ; 68 | }); 69 | }, 70 | 71 | showDatePicker () { 72 | this.setState({datePicker: true}); 73 | }, 74 | 75 | handleDatePickerChange (d) { 76 | this.setState({datePicker: false, date: d}); 77 | }, 78 | 79 | formatDate (date) { 80 | if (date) { 81 | return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); 82 | } 83 | }, 84 | 85 | render () { 86 | 87 | return ( 88 | 89 | 90 | {/* 91 | Input Type Experiment 92 | 93 | {this.renderInputTypes()} 94 | 95 | */} 96 | 97 | Checkbox 98 | 99 | 100 | 101 | Switch 102 | 103 | 104 | 105 | 106 | 107 | Disabled 108 | 109 | 110 | 111 | 112 | 113 | 114 | Radio 115 | 116 | 117 | 118 | 119 | 120 | Inputs 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | Labelled Inputs 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | Primary Button 141 | 142 | 143 | Default Button 144 | 145 | 146 | Danger Button 147 | 148 | 149 | Disabled Button 150 | 151 | 152 | 153 | 154 | ); 155 | } 156 | }); 157 | -------------------------------------------------------------------------------- /src/js/views/list-complex.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import Sentry from 'react-sentry'; 4 | import Tappable from 'react-tappable'; 5 | import { Link, UI } from 'touchstonejs'; 6 | 7 | var scrollable = Container.initScrollable(); 8 | 9 | var ComplexLinkItem = React.createClass({ 10 | contextTypes: { peopleStore: React.PropTypes.object.isRequired }, 11 | 12 | toggleStar () { 13 | let person = this.props.person 14 | 15 | this.context.peopleStore.star(person, !person.isStarred) 16 | }, 17 | 18 | render () { 19 | let person = this.props.person; 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | {person.name.full} 28 | {person.email || ''} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | } 38 | }); 39 | 40 | // FIXME: this bit is global and hacky, expect it to change 41 | var EventEmitter = require('events').EventEmitter; 42 | var emitter = new EventEmitter(); 43 | 44 | function getNavigation (props, app, filterStarred) { 45 | return { 46 | leftLabel: 'Lists', 47 | leftArrow: true, 48 | leftAction: () => { app.transitionTo('tabs:lists', { transition: 'reveal-from-right' }) }, 49 | rightLabel: filterStarred ? 'All' : 'Starred', 50 | rightAction: emitter.emit.bind(emitter, 'navigationBarRightAction'), 51 | title: 'Complex' 52 | }; 53 | } 54 | 55 | module.exports = React.createClass({ 56 | contextTypes: { 57 | app: React.PropTypes.object, 58 | peopleStore: React.PropTypes.object.isRequired 59 | }, 60 | mixins: [Sentry], 61 | 62 | statics: { 63 | navigationBar: 'main', 64 | getNavigation: getNavigation 65 | }, 66 | 67 | getInitialState () { 68 | return { 69 | filterStarred: false, 70 | people: this.context.peopleStore.getPeople() 71 | } 72 | }, 73 | 74 | componentDidMount () { 75 | this.watch(this.context.peopleStore, 'people-updated', people => { 76 | this.setState({ people }) 77 | }) 78 | 79 | this.watch(emitter, 'navigationBarRightAction', this.toggleStarred); 80 | }, 81 | 82 | toggleStarred () { 83 | let filterStarred = !this.state.filterStarred; 84 | this.setState({ filterStarred }); 85 | this.context.app.navigationBars.main.update(getNavigation({}, this.context.app, filterStarred)); 86 | }, 87 | 88 | handleModeChange (newMode) { 89 | let selectedMode = newMode; 90 | 91 | if (this.state.selectedMode === newMode) { 92 | selectedMode = null; 93 | } 94 | 95 | this.setState({ selectedMode }) 96 | }, 97 | 98 | render () { 99 | let { people, filterStarred, selectedMode } = this.state 100 | 101 | if (filterStarred) { 102 | people = people.filter(person => person.isStarred) 103 | } 104 | 105 | if (selectedMode === 'A' || selectedMode === 'B') { 106 | people = people.filter(person => person.category === selectedMode) 107 | } 108 | 109 | function sortByName (a, b) { return a.name.full.localeCompare(b.name.full) } 110 | 111 | let sortedPeople = people.sort(sortByName) 112 | let results 113 | 114 | if (sortedPeople.length) { 115 | let aPeople = sortedPeople 116 | .filter(person => person.category === 'A') 117 | .map((person, i) => { 118 | return 119 | }) 120 | 121 | let bPeople = sortedPeople 122 | .filter(person => person.category === 'B') 123 | .map((person, i) => { 124 | return 125 | }) 126 | 127 | results = ( 128 | 129 | {aPeople.length > 0 ? Category A : ''} 130 | {aPeople} 131 | {bPeople.length > 0 ? Category B : ''} 132 | {bPeople} 133 | 134 | ) 135 | 136 | } else { 137 | results = ( 138 | 139 |
140 |
Go star some people!
141 | 142 | ) 143 | } 144 | 145 | return ( 146 | 147 | 151 | {results} 152 | 153 | ); 154 | } 155 | }); 156 | -------------------------------------------------------------------------------- /src/js/views/list-details.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | 4 | module.exports = React.createClass({ 5 | statics: { 6 | navigationBar: 'main', 7 | getNavigation (props, app) { 8 | var leftLabel = props.prevView === 'list-simple' ? 'Simple' : 'Complex'; 9 | return { 10 | leftArrow: true, 11 | leftLabel: leftLabel, 12 | leftAction: () => { app.transitionTo('tabs:' + props.prevView, { transition: 'reveal-from-right' }) }, 13 | title: 'Person' 14 | } 15 | } 16 | }, 17 | getDefaultProps () { 18 | return { 19 | prevView: 'home' 20 | } 21 | }, 22 | render () { 23 | var { person } = this.props; 24 | 25 | return ( 26 | 27 | 28 | 29 |
{person.name.full}
30 |
{person.email || ''}
31 | {(person.twitter || person.github) &&
32 | {person.twitter &&
33 | 34 | {person.twitter} 35 |
} 36 | {person.github &&
37 | 38 | {person.github} 39 |
} 40 |
} 41 | 42 | 43 | ); 44 | } 45 | }); 46 | -------------------------------------------------------------------------------- /src/js/views/list-simple.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import Sentry from 'react-sentry'; 4 | import Tappable from 'react-tappable'; 5 | import { Link, UI } from 'touchstonejs'; 6 | 7 | var scrollable = Container.initScrollable({ left: 0, top: 44 }); 8 | 9 | var SimpleLinkItem = React.createClass({ 10 | propTypes: { 11 | person: React.PropTypes.object.isRequired 12 | }, 13 | 14 | render () { 15 | return ( 16 | 17 | 18 | 19 | {this.props.person.name.full} 20 | 21 | 22 | 23 | ); 24 | } 25 | }); 26 | 27 | module.exports = React.createClass({ 28 | mixins: [Sentry], 29 | contextTypes: { peopleStore: React.PropTypes.object.isRequired }, 30 | 31 | statics: { 32 | navigationBar: 'main', 33 | getNavigation (props, app) { 34 | return { 35 | leftArrow: true, 36 | leftLabel: 'Lists', 37 | leftAction: () => { app.transitionTo('tabs:lists', { transition: 'reveal-from-right' }) }, 38 | title: 'Simple' 39 | } 40 | } 41 | }, 42 | 43 | componentDidMount () { 44 | this.watch(this.context.peopleStore, 'people-updated', people => { 45 | this.setState({ people }) 46 | }); 47 | }, 48 | 49 | getInitialState () { 50 | return { 51 | searchString: '', 52 | people: this.context.peopleStore.getPeople() 53 | } 54 | }, 55 | 56 | clearSearch () { 57 | this.setState({ searchString: '' }); 58 | }, 59 | 60 | updateSearch (str) { 61 | this.setState({ searchString: str }); 62 | }, 63 | 64 | submitSearch (str) { 65 | console.log(str); 66 | }, 67 | 68 | render () { 69 | let { people, searchString } = this.state 70 | let searchRegex = new RegExp(searchString) 71 | 72 | function searchFilter (person) { return searchRegex.test(person.name.full.toLowerCase()) }; 73 | function sortByName (a, b) { return a.name.full.localeCompare(b.name.full) }; 74 | 75 | let filteredPeople = people.filter(searchFilter).sort(sortByName); 76 | 77 | let results 78 | 79 | if (searchString && !filteredPeople.length) { 80 | results = ( 81 | 82 |
83 |
{'No results for "' + searchString + '"'}
84 | 85 | ); 86 | 87 | } else { 88 | results = ( 89 | 90 | {filteredPeople.map((person, i) => { 91 | return 92 | })} 93 | 94 | ); 95 | } 96 | 97 | return ( 98 | 99 | 100 | {results} 101 | 102 | ); 103 | } 104 | }); 105 | -------------------------------------------------------------------------------- /src/js/views/lists.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import { Link, UI } from 'touchstonejs'; 4 | 5 | module.exports = React.createClass({ 6 | statics: { 7 | navigationBar: 'main', 8 | getNavigation () { 9 | return { 10 | title: 'Lists' 11 | } 12 | } 13 | }, 14 | 15 | render: function () { 16 | return ( 17 | 18 | 19 | Lists 20 | 21 | 22 | 23 | 24 | Simple List 25 | 26 | 27 | 28 | 29 | 30 | 31 | Complex List 32 | 33 | 34 | 35 | 36 | 37 | 38 | GroupHeader 39 | 40 | 41 |

Use groups to contain content or lists. Where appropriate a Group should be accompanied by a GroupHeading and optionally a GroupFooter.

42 | GroupBody will apply the background for content inside groups. 43 | 44 | 45 | GroupFooter: useful for a detailed explanation to express the intentions of the Group. Try to be concise - remember that users are likely to read the text in your UI many times. 46 | 47 | 48 | ); 49 | } 50 | }); 51 | -------------------------------------------------------------------------------- /src/js/views/transitions-target-over.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import Timers from 'react-timers'; 4 | import { Mixins, UI } from 'touchstonejs'; 5 | 6 | module.exports = React.createClass({ 7 | mixins: [Mixins.Transitions, Timers], 8 | componentDidMount () { 9 | var self = this; 10 | this.setTimeout(function () { 11 | self.transitionTo('app:main', { transition: 'fade' }); 12 | }, 1000); 13 | }, 14 | render () { 15 | return ( 16 | 17 | 18 | 19 |
20 |
Hold on a sec...
21 | 22 | 23 | ); 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /src/js/views/transitions-target.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import Timers from 'react-timers'; 4 | import { Mixins } from 'touchstonejs'; 5 | 6 | module.exports = React.createClass({ 7 | mixins: [Mixins.Transitions, Timers], 8 | statics: { 9 | navigationBar: 'main', 10 | getNavigation (props) { 11 | return { 12 | title: props.navbarTitle 13 | } 14 | } 15 | }, 16 | componentDidMount () { 17 | var self = this; 18 | 19 | this.setTimeout(function () { 20 | self.transitionTo('tabs:transitions', { transition: 'fade' }); 21 | }, 1000); 22 | }, 23 | render () { 24 | return ( 25 | 26 |
27 |
Hold on a sec...
28 | 29 | ); 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /src/js/views/transitions.js: -------------------------------------------------------------------------------- 1 | import Container from 'react-container'; 2 | import React from 'react'; 3 | import { Link, UI } from 'touchstonejs'; 4 | 5 | var scrollable = Container.initScrollable(); 6 | 7 | module.exports = React.createClass({ 8 | statics: { 9 | navigationBar: 'main', 10 | getNavigation () { 11 | return { 12 | title: 'Transitions' 13 | } 14 | } 15 | }, 16 | 17 | render () { 18 | return ( 19 | 20 | 21 | Default 22 | 23 | 24 | 25 | Instant 26 | 27 | 28 | 29 | 30 | 31 | Fade 32 | 33 | 34 | 35 | Fade 36 | 37 | 38 | 39 | 40 | Fade Expand (non-standard) 41 | 42 | 43 | 44 | 45 | Fade Contract (non-standard) 46 | 47 | 48 | 49 | 50 | 51 | Show 52 | 53 | 54 | 55 | Show from Left (non-standard) 56 | 57 | 58 | 59 | 60 | Show from Right 61 | 62 | 63 | 64 | 65 | Show from Top (non-standard) 66 | 67 | 68 | 69 | 70 | Show from Bottom 71 | 72 | 73 | 74 | 75 | 76 | Reveal 77 | 78 | 79 | 80 | Reveal from Left (non-standard) 81 | 82 | 83 | 84 | 85 | Reveal from Right 86 | 87 | 88 | 89 | 90 | Reveal from Top (non-standard) 91 | 92 | 93 | 94 | 95 | Reveal from Bottom 96 | 97 | 98 | 99 | 100 | 101 | ); 102 | } 103 | }); 104 | --------------------------------------------------------------------------------