skeleton for dashboard2 based on vux2.
2
src/prog/dashboard2/.gitignore
vendored
@@ -1,6 +1,8 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# dashboard2
|
||||
# domo
|
||||
|
||||
> AwoX dashboard App
|
||||
> Home Automation Tool
|
||||
|
||||
## Build Setup
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
var chalk = require('chalk')
|
||||
var semver = require('semver')
|
||||
var packageConfig = require('../package.json')
|
||||
var shell = require('shelljs')
|
||||
|
||||
function exec (cmd) {
|
||||
return require('child_process').execSync(cmd).toString().trim()
|
||||
}
|
||||
@@ -12,15 +12,12 @@ var versionRequirements = [
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
},
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
versionRequirements.push({
|
||||
{
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = function () {
|
||||
var warnings = []
|
||||
|
||||
@@ -73,6 +73,7 @@ console.log('> Starting dev server...')
|
||||
devMiddleware.waitUntilValid(() => {
|
||||
console.log('> Listening at ' + uri + '\n')
|
||||
// when env is testing, don't need open it
|
||||
|
||||
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
|
||||
opn(uri)
|
||||
}
|
||||
|
||||
@@ -8,5 +8,10 @@ module.exports = {
|
||||
? config.build.productionSourceMap
|
||||
: config.dev.cssSourceMap,
|
||||
extract: isProduction
|
||||
})
|
||||
}),
|
||||
postcss: [
|
||||
require('autoprefixer')({
|
||||
browsers: ['iOS >= 7', 'Android >= 4.1']
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
var path = require('path')
|
||||
var utils = require('./utils')
|
||||
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
const vuxLoader = require('vux-loader')
|
||||
|
||||
var config = require('../config')
|
||||
var vueLoaderConfig = require('./vue-loader.conf')
|
||||
|
||||
@@ -7,7 +11,7 @@ function resolve (dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
let webpackConfig = {
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
},
|
||||
@@ -65,3 +69,8 @@ module.exports = {
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = vuxLoader.merge(webpackConfig, {
|
||||
plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
|
||||
})
|
||||
|
||||
@@ -8,12 +8,10 @@ var CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
|
||||
|
||||
var env = config.build.env
|
||||
|
||||
var webpackConfig = merge(baseWebpackConfig, {
|
||||
watch: process.env.WEBPACK_WATCH === 'true',
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
sourceMap: config.build.productionSourceMap,
|
||||
@@ -92,15 +90,7 @@ var webpackConfig = merge(baseWebpackConfig, {
|
||||
to: config.build.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
]),
|
||||
// service worker caching
|
||||
new SWPrecacheWebpackPlugin({
|
||||
cacheId: 'my-vue-app',
|
||||
filename: 'service-worker.js',
|
||||
staticFileGlobs: ['dist/**/*.{js,html,css}'],
|
||||
minify: true,
|
||||
stripPrefix: 'dist/'
|
||||
})
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ module.exports = {
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
autoOpenBrowser: true,
|
||||
autoOpenBrowser: false,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
@@ -2,31 +2,11 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>dashboard2</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/img/icons/favicon-16x16.png">
|
||||
<!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
|
||||
<!-- Add to home screen for Android and modern mobile browsers -->
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<meta name="theme-color" content="#4DBA87">
|
||||
|
||||
<!-- Add to home screen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="dashboard2">
|
||||
<link rel="apple-touch-icon" href="/static/img/icons/apple-touch-icon-152x152.png">
|
||||
<!-- Add to home screen for Windows -->
|
||||
<meta name="msapplication-TileImage" content="/static/img/icons/msapplication-icon-144x144.png">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<% for (var chunk of webpack.chunks) {
|
||||
for (var file of chunk.files) {
|
||||
if (file.match(/\.(js|css)$/)) { %>
|
||||
<link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
|
||||
<title>domo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app-box"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
{
|
||||
"name": "dashboard2",
|
||||
"version": "1.0.0",
|
||||
"description": "Domo dashboard App",
|
||||
"author": "AwoX",
|
||||
"description": "Stream Device Dashboard",
|
||||
"author": "jbnadal <jbnadal@awox.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"start": "node build/dev-server.js",
|
||||
"build": "node build/build.js",
|
||||
"build:watch": "cross-env WEBPACK_WATCH=true node build/build.js",
|
||||
"lint": "eslint --ext .js,.vue src"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.16.2",
|
||||
"components": "^0.1.0",
|
||||
"ionicons": "^3.0.0",
|
||||
"node-sass": "^4.5.3",
|
||||
"onsenui": "~2.4.0",
|
||||
"vue": "^2.3.3",
|
||||
"vue-onsenui": "~2.0.0",
|
||||
"vuex": "^2.3.1"
|
||||
"fastclick": "^1.0.6",
|
||||
"vue": "^2.2.2",
|
||||
"vue-router": "^2.2.0",
|
||||
"vuex": "^2.1.1",
|
||||
"vuex-i18n": "^1.3.1",
|
||||
"vuex-router-sync": "^4.2.0",
|
||||
"vux": "^2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.2",
|
||||
@@ -27,53 +25,54 @@
|
||||
"babel-eslint": "^7.1.1",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-env": "^1.2.1",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"babel-register": "^6.22.0",
|
||||
"chalk": "^1.1.3",
|
||||
"compression-webpack-plugin": "^0.3.2",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cross-env": "^4.0.0",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-standard": "^6.2.1",
|
||||
"css-loader": "^0.26.1",
|
||||
"eslint": "^3.14.1",
|
||||
"eslint-friendly-formatter": "^2.0.7",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-loader": "^1.6.1",
|
||||
"eslint-plugin-html": "^2.0.0",
|
||||
"eslint-config-standard": "^6.2.1",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.14.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0",
|
||||
"file-loader": "^0.11.1",
|
||||
"file-loader": "^0.10.0",
|
||||
"friendly-errors-webpack-plugin": "^1.1.3",
|
||||
"function-bind": "^1.1.0",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"http-proxy-middleware": "^0.17.3",
|
||||
"webpack-bundle-analyzer": "^2.2.1",
|
||||
"semver": "^5.3.0",
|
||||
"opn": "^4.0.2",
|
||||
"optimize-css-assets-webpack-plugin": "^1.3.0",
|
||||
"ora": "^1.2.0",
|
||||
"ora": "^1.1.0",
|
||||
"rimraf": "^2.6.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"sw-precache-webpack-plugin": "^0.9.1",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^12.1.0",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.3.3",
|
||||
"webpack": "^2.6.1",
|
||||
"webpack-bundle-analyzer": "^2.2.1",
|
||||
"url-loader": "^0.5.7",
|
||||
"yaml-loader": "^0.4.0",
|
||||
"less": "^2.7.1",
|
||||
"less-loader": "^2.2.3",
|
||||
"vux-loader": "^1.0.70",
|
||||
"vue-loader": "^11.1.4",
|
||||
"vue-style-loader": "^2.0.0",
|
||||
"vue-template-compiler": "^2.2.4",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-hot-middleware": "^2.18.0",
|
||||
"webpack-merge": "^4.1.0"
|
||||
"webpack-hot-middleware": "^2.16.1",
|
||||
"webpack-merge": "^2.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
"iOS >= 7",
|
||||
"Android >= 4.1"
|
||||
]
|
||||
}
|
||||
|
||||
19
src/prog/dashboard2/src/App.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '~vux/src/styles/reset.less';
|
||||
|
||||
body {
|
||||
background-color: #fbf9fe;
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<v-ons-navigator
|
||||
:page-stack="pageStack"
|
||||
:pop-page="storePop"
|
||||
:options="options"
|
||||
></v-ons-navigator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppSplitter from './AppSplitter.vue'
|
||||
|
||||
export default {
|
||||
beforeCreate () {
|
||||
this.$store.commit('navigator/push', AppSplitter)
|
||||
},
|
||||
computed: {
|
||||
pageStack () {
|
||||
return this.$store.state.navigator.stack
|
||||
},
|
||||
options () {
|
||||
return this.$store.state.navigator.options
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
storePop () {
|
||||
this.$store.commit('navigator/pop')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<v-ons-splitter>
|
||||
<v-ons-splitter-side swipeable side="right" collapse="" width="260px" :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
|
||||
:open.sync="isOpen"
|
||||
>
|
||||
<menu-page></menu-page>
|
||||
</v-ons-splitter-side>
|
||||
|
||||
<v-ons-splitter-content>
|
||||
<app-tabbar></app-tabbar>
|
||||
</v-ons-splitter-content>
|
||||
</v-ons-splitter>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppTabbar from './AppTabbar.vue'
|
||||
import MenuPage from './pages/Menu.vue'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
isOpen: {
|
||||
get () {
|
||||
return this.$store.state.splitter.open
|
||||
},
|
||||
set (newValue) {
|
||||
this.$store.commit('splitter/toggle', newValue)
|
||||
}
|
||||
}
|
||||
},
|
||||
components: { AppTabbar, MenuPage }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ons-splitter-side[animation=overlay] {
|
||||
border-left: 1px solid #bbb;
|
||||
}
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar>
|
||||
{{ title }}
|
||||
<v-ons-toolbar-button slot="right" @click="$store.commit('splitter/toggle')">
|
||||
<v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
|
||||
</v-ons-toolbar-button>
|
||||
</custom-toolbar>
|
||||
<v-ons-tabbar
|
||||
position="auto"
|
||||
:tabs="tabs"
|
||||
:index.sync="index"
|
||||
></v-ons-tabbar>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Home from './pages/Home.vue'
|
||||
import Lights from './pages/Lights.vue'
|
||||
import Sprinklers from './pages/Sprinklers.vue'
|
||||
import Shutters from './pages/Shutters.vue'
|
||||
import Timers from './pages/Timers.vue'
|
||||
import Settings from './pages/Settings.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabs: [
|
||||
{
|
||||
label: 'Home',
|
||||
icon: this.md() ? null : 'ion-home',
|
||||
page: Home
|
||||
},
|
||||
{
|
||||
label: 'Lights',
|
||||
icon: this.md() ? null : 'ion-lightbulb',
|
||||
page: Lights
|
||||
},
|
||||
{
|
||||
label: 'Sprinklers',
|
||||
icon: this.md() ? null : 'icon-sprinklers',
|
||||
page: Sprinklers
|
||||
},
|
||||
{
|
||||
label: 'Shutters',
|
||||
icon: this.md() ? null : 'icon-shutters',
|
||||
page: Shutters
|
||||
},
|
||||
{
|
||||
label: 'Timers',
|
||||
icon: this.md() ? null : 'ion-clock',
|
||||
page: Timers
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: this.md() ? null : 'ion-ios-settings',
|
||||
page: Settings
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
md () {
|
||||
return this.$ons.platform.isAndroid()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
index: {
|
||||
get () {
|
||||
return this.$store.state.tabbar.index
|
||||
},
|
||||
set (newValue) {
|
||||
this.$store.commit('tabbar/set', newValue)
|
||||
}
|
||||
},
|
||||
title () {
|
||||
return this.md() ? 'Kitchen Sink' : this.tabs[this.index].label
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'domo';
|
||||
src: url('assets/fonts/domo.woff2') format('woff2'),
|
||||
url('assets/fonts/domo.woff') format('woff'),
|
||||
url('assets/fonts/domo.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
#app {
|
||||
font-family: 'ratio', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #d3d3d3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fa-icon-shutters:before { font-family: "domo"; content: '\e800'; }
|
||||
.fa-icon-sprinklers:before { font-family: "domo"; content: '\e801'; }
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 64 KiB |
@@ -1,45 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="150.000000pt" height="161.000000pt" viewBox="0 0 150.000000 161.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,161.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M210 1592 c0 -6 746 -256 925 -309 73 -22 105 -61 105 -130 0 -99
|
||||
-73 -167 -152 -144 -96 29 -103 176 -10 212 26 10 69 -4 88 -29 40 -52 -13
|
||||
-141 -70 -119 -39 15 -36 87 4 87 23 0 27 -25 5 -34 -26 -9 -16 -27 13 -24 22
|
||||
2 28 9 30 34 7 70 -71 85 -102 19 -49 -102 89 -173 147 -76 9 16 17 49 17 74
|
||||
0 39 -5 49 -35 76 -60 52 -137 35 -175 -39 -35 -69 -23 -136 34 -189 19 -18
|
||||
41 -26 81 -29 54 -4 56 -4 99 39 84 85 84 217 -1 277 -16 10 -226 85 -468 166
|
||||
-319 106 -453 146 -488 146 -26 0 -47 -3 -47 -8z"/>
|
||||
<path d="M133 1568 c-13 -6 -23 -14 -23 -18 0 -4 199 -75 441 -159 420 -144
|
||||
443 -151 465 -136 28 18 30 30 8 39 -109 42 -836 286 -850 285 -10 0 -29 -5
|
||||
-41 -11z"/>
|
||||
<path d="M51 1504 c-12 -15 -21 -30 -21 -33 0 -7 910 -345 914 -339 19 32 33
|
||||
78 26 83 -15 9 -879 315 -889 315 -5 0 -19 -12 -30 -26z"/>
|
||||
<path d="M1013 1469 c-18 -5 -33 -14 -33 -18 0 -5 28 -19 63 -30 60 -20 66
|
||||
-21 102 -5 93 39 181 -10 212 -116 34 -118 15 -240 -52 -331 -30 -42 -39 -48
|
||||
-82 -52 -59 -7 -183 -40 -183 -49 0 -4 30 -22 67 -40 64 -31 73 -33 173 -32
|
||||
58 0 118 6 135 13 l30 13 -24 19 c-21 17 -23 23 -13 37 29 40 64 126 78 194
|
||||
32 150 -13 254 -146 340 -90 58 -236 83 -327 57z"/>
|
||||
<path d="M29 1393 c-8 -85 -59 -62 809 -372 l112 -40 0 59 0 59 -57 21 c-131
|
||||
49 -851 310 -856 310 -3 0 -6 -17 -8 -37z"/>
|
||||
<path d="M30 1221 c0 -38 4 -61 13 -64 6 -2 208 -80 447 -172 239 -92 441
|
||||
-170 448 -172 10 -4 12 11 10 67 l-3 73 -200 74 c-374 136 -700 253 -707 253
|
||||
-5 0 -8 -27 -8 -59z"/>
|
||||
<path d="M30 1072 l0 -61 455 -180 c250 -100 457 -181 460 -181 3 0 5 30 3 66
|
||||
l-3 67 -435 168 c-239 93 -445 172 -457 175 -22 6 -23 4 -23 -54z"/>
|
||||
<path d="M32 929 l3 -61 455 -188 455 -189 3 56 c2 31 -1 59 -5 64 -6 6 -769
|
||||
322 -891 370 -23 9 -23 8 -20 -52z"/>
|
||||
<path d="M29 836 c-2 -2 -2 -27 -1 -54 l4 -51 446 -191 c246 -106 453 -194
|
||||
460 -197 10 -4 12 9 10 58 l-3 64 -450 187 c-468 194 -459 191 -466 184z"/>
|
||||
<path d="M32 639 l3 -50 452 -200 c249 -109 455 -199 458 -199 3 0 5 26 3 57
|
||||
l-3 57 -454 193 c-250 106 -456 193 -458 193 -2 0 -3 -23 -1 -51z"/>
|
||||
<path d="M32 495 l3 -57 453 -209 c250 -115 456 -209 458 -209 2 0 4 31 4 68
|
||||
l0 68 -443 192 c-243 105 -450 194 -460 198 -16 6 -18 1 -15 -51z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1,73 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M301 1636 c-7 -8 -11 -27 -9 -43 2 -22 9 -29 31 -31 50 -6 75 38 41
|
||||
72 -19 20 -48 20 -63 2z"/>
|
||||
<path d="M916 1640 c-118 -21 -176 -78 -176 -172 l0 -48 80 0 81 0 -3 -77 c-3
|
||||
-77 -3 -78 -30 -81 l-28 -3 0 -380 0 -379 -35 0 -35 0 0 -105 0 -105 250 0
|
||||
250 0 0 105 0 105 -35 0 -35 0 0 380 0 380 -25 0 c-25 0 -25 1 -25 80 l0 80
|
||||
76 0 76 0 -4 65 c-5 78 -26 105 -105 135 -63 23 -203 34 -277 20z"/>
|
||||
<path d="M1676 1634 c-33 -32 -13 -74 36 -74 38 0 55 33 33 66 -18 28 -46 31
|
||||
-69 8z"/>
|
||||
<path d="M442 1538 c-15 -15 -15 -51 0 -66 28 -28 78 -7 78 33 0 27 -18 45
|
||||
-45 45 -12 0 -26 -5 -33 -12z"/>
|
||||
<path d="M1536 1534 c-23 -23 -20 -51 8 -69 34 -23 66 -5 66 35 0 44 -44 64
|
||||
-74 34z"/>
|
||||
<path d="M308 1459 c-22 -12 -24 -62 -3 -79 23 -19 64 -4 71 27 5 20 2 31 -16
|
||||
45 -25 21 -29 21 -52 7z"/>
|
||||
<path d="M570 1452 c-45 -36 -1 -99 50 -72 27 14 27 65 1 80 -25 13 -25 13
|
||||
-51 -8z"/>
|
||||
<path d="M1412 1438 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
|
||||
33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
|
||||
-12 0 -26 -5 -33 -12z"/>
|
||||
<path d="M1670 1431 c-14 -27 -13 -37 6 -55 23 -23 51 -20 69 8 13 19 14 29 5
|
||||
45 -14 28 -65 29 -80 2z"/>
|
||||
<path d="M452 1354 c-49 -34 -6 -103 47 -74 28 14 25 57 -4 76 -18 12 -24 11
|
||||
-43 -2z"/>
|
||||
<path d="M688 1358 c-25 -21 -28 -45 -9 -69 24 -30 68 -20 77 18 5 20 2 31
|
||||
-16 45 -26 21 -31 22 -52 6z"/>
|
||||
<path d="M1541 1344 c-30 -21 -27 -61 5 -76 36 -17 59 0 59 42 0 40 -31 57
|
||||
-64 34z"/>
|
||||
<path d="M1288 1325 c-9 -21 -8 -28 7 -45 10 -11 26 -20 35 -20 9 0 25 9 35
|
||||
20 27 30 7 70 -35 70 -23 0 -33 -6 -42 -25z"/>
|
||||
<path d="M308 1259 c-28 -16 -23 -67 7 -81 21 -9 28 -8 45 7 25 23 26 47 2 68
|
||||
-21 19 -30 20 -54 6z"/>
|
||||
<path d="M565 1250 c-36 -40 7 -96 55 -70 27 14 27 65 1 80 -27 14 -35 13 -56
|
||||
-10z"/>
|
||||
<path d="M1412 1238 c-7 -7 -12 -21 -12 -33 0 -12 5 -26 12 -33 7 -7 21 -12
|
||||
33 -12 12 0 26 5 33 12 7 7 12 21 12 33 0 12 -5 26 -12 33 -7 7 -21 12 -33 12
|
||||
-12 0 -26 -5 -33 -12z"/>
|
||||
<path d="M1672 1238 c-27 -27 -1 -78 38 -78 29 0 54 43 40 69 -12 24 -58 29
|
||||
-78 9z"/>
|
||||
<path d="M442 1158 c-28 -28 -7 -78 33 -78 40 0 61 50 33 78 -7 7 -21 12 -33
|
||||
12 -12 0 -26 -5 -33 -12z"/>
|
||||
<path d="M1539 1151 c-29 -23 -20 -68 16 -77 34 -9 57 12 53 49 -4 39 -38 53
|
||||
-69 28z"/>
|
||||
<path d="M302 1058 c-30 -30 -3 -83 39 -76 32 5 45 31 31 62 -13 28 -49 35
|
||||
-70 14z"/>
|
||||
<path d="M1676 1054 c-30 -30 -10 -74 34 -74 40 0 58 32 35 66 -18 28 -46 31
|
||||
-69 8z"/>
|
||||
<path d="M1310 863 c25 -83 48 -256 56 -425 l7 -148 119 0 118 0 0 30 c0 88
|
||||
69 340 122 443 19 38 19 38 -1 28 -42 -23 -124 -129 -164 -213 -23 -48 -44
|
||||
-87 -47 -88 -3 0 -13 33 -22 73 -23 95 -75 198 -144 286 -30 39 -57 71 -59 71
|
||||
-1 0 5 -26 15 -57z"/>
|
||||
<path d="M514 773 c-52 -78 -101 -202 -115 -291 l-12 -74 -40 76 c-22 42 -57
|
||||
95 -78 119 l-38 42 25 -73 c14 -40 33 -120 42 -178 l16 -104 128 0 127 0 6 38
|
||||
c15 90 39 192 61 256 17 50 20 65 9 56 -25 -21 -84 -106 -116 -167 l-31 -58 6
|
||||
85 c2 47 16 139 31 204 14 65 24 121 21 123 -2 2 -21 -22 -42 -54z"/>
|
||||
<path d="M1831 563 c-50 -56 -124 -189 -137 -245 l-6 -28 69 0 70 0 6 83 c3
|
||||
45 17 118 31 162 14 43 24 81 22 83 -2 1 -27 -23 -55 -55z"/>
|
||||
<path d="M136 433 c13 -37 24 -85 24 -105 l0 -38 46 0 c42 0 45 1 39 23 -11
|
||||
37 -68 126 -101 158 l-31 30 23 -68z"/>
|
||||
<path d="M683 473 c-28 -31 -58 -86 -79 -145 l-13 -38 44 0 45 0 0 44 c0 24 9
|
||||
72 19 105 10 34 17 61 14 61 -2 0 -15 -12 -30 -27z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 30 KiB |
BIN
src/prog/dashboard2/src/assets/vux_logo.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
53
src/prog/dashboard2/src/components/Hello.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
|
||||
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
|
||||
<br>
|
||||
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
|
||||
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
|
||||
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hello',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
41
src/prog/dashboard2/src/components/HelloFromVux.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="vux-demo">
|
||||
<img class="logo" src="../assets/vux_logo.png">
|
||||
<h1> </h1>
|
||||
</div>
|
||||
<group title="cell demo">
|
||||
<cell title="VUX" value="cool" is-link></cell>
|
||||
</group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Group, Cell } from 'vux'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Group,
|
||||
Cell
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// note: changing this line won't causes changes
|
||||
// with hot-reload because the reloaded component
|
||||
// preserves its current state and we are modifying
|
||||
// its initial state.
|
||||
msg: 'Hello World!'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.vux-demo {
|
||||
text-align: center;
|
||||
}
|
||||
.logo {
|
||||
width: 100px;
|
||||
height: 100px
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,28 @@
|
||||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import VueOnsen from 'vue-onsenui'
|
||||
import CustomToolbar from './partials/CustomToolbar.vue'
|
||||
import storeLike from './store.js'
|
||||
import AppNavigator from './AppNavigator.vue'
|
||||
// Onsen UI basic CSS
|
||||
import 'onsenui/css/onsenui.css'
|
||||
// Onsen UI CSS components source (requires cssnext)
|
||||
import 'onsenui/css/onsen-css-components.css'
|
||||
import FastClick from 'fastclick'
|
||||
import VueRouter from 'vue-router'
|
||||
import App from './App'
|
||||
import Home from './components/HelloFromVux'
|
||||
|
||||
Vue.use(Vuex)
|
||||
Vue.use(VueOnsen)
|
||||
Vue.component('custom-toolbar', CustomToolbar) // Common toolbar
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [{
|
||||
path: '/',
|
||||
component: Home
|
||||
}]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
FastClick.attach(document.body)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(AppNavigator),
|
||||
store: new Vuex.Store(storeLike)
|
||||
})
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app-box')
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<v-ons-list>
|
||||
<v-ons-list-header>Transitions</v-ons-list-header>
|
||||
<v-ons-list-item v-for="animation in animations" :key="animation"
|
||||
modifier="chevron"
|
||||
@click="transition(animation)"
|
||||
>
|
||||
{{ animation }}
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const transitionPage = {
|
||||
template: `
|
||||
<v-ons-page>
|
||||
<custom-toolbar backLabel="Anim">
|
||||
{{ animation }}
|
||||
</custom-toolbar>
|
||||
<p style="text-align: center">
|
||||
Use the VOnsBackButton
|
||||
</p>
|
||||
</v-ons-page>
|
||||
`
|
||||
}
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
animations: ['none', 'default', 'slide-ios', 'slide-md', 'lift-ios', 'lift-md', 'fade-ios', 'fade-md']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transition (name) {
|
||||
this.$store.commit('navigator/options', {
|
||||
// Sets animations
|
||||
animation: name,
|
||||
// Resets default options
|
||||
callback: () => this.$store.commit('navigator/options', {})
|
||||
})
|
||||
|
||||
this.$store.commit('navigator/push', {
|
||||
extends: transitionPage,
|
||||
data () {
|
||||
return {
|
||||
animation: name
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<section style="margin: 16px">
|
||||
<v-ons-button class="button-margin">Normal</v-ons-button>
|
||||
<v-ons-button modifier="quiet" class="button-margin">Quiet</v-ons-button>
|
||||
<v-ons-button modifier="outline" class="button-margin">Outline</v-ons-button>
|
||||
<v-ons-button modifier="cta" class="button-margin">Call to action</v-ons-button>
|
||||
<v-ons-button modifier="light" class="button-margin">Light</v-ons-button>
|
||||
<v-ons-button modifier="large" class="button-margin">Large</v-ons-button>
|
||||
</section>
|
||||
|
||||
<section style="margin: 16px">
|
||||
<v-ons-button class="button-margin" disabled>Normal</v-ons-button>
|
||||
<v-ons-button modifier="quiet" class="button-margin" disabled>Quiet</v-ons-button>
|
||||
<v-ons-button modifier="outline" class="button-margin" disabled>Outline</v-ons-button>
|
||||
<v-ons-button modifier="cta" class="button-margin" disabled>Call to action</v-ons-button>
|
||||
<v-ons-button modifier="light" class="button-margin" disabled>Light</v-ons-button>
|
||||
<v-ons-button modifier="large" class="button-margin" disabled>Large</v-ons-button>
|
||||
</section>
|
||||
|
||||
<v-ons-fab position="top right" :style="spdStyle">
|
||||
<v-ons-icon icon="md-face"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-fab position="bottom left" :style="spdStyle" disabled>
|
||||
<v-ons-icon icon="md-car"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-speed-dial position="bottom right" direction="up"
|
||||
:open.sync="spdOpen"
|
||||
>
|
||||
<v-ons-fab :style="spdStyle">
|
||||
<v-ons-icon icon="md-share"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-speed-dial-item v-for="(icon, name) in shareItems" :key="name"
|
||||
:style="spdStyle"
|
||||
@click="$ons.notification.confirm(`Share on ${name}?`)"
|
||||
>
|
||||
<v-ons-icon :icon="icon"></v-ons-icon>
|
||||
</v-ons-speed-dial-item>
|
||||
|
||||
</v-ons-speed-dial>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
spdOpen: false,
|
||||
spdStyle: {
|
||||
backgroundColor: this.$ons.platform.isAndroid() ? null : '#4282cc'
|
||||
},
|
||||
shareItems: {
|
||||
'Twitter': 'md-twitter',
|
||||
'Facebook': 'md-facebook',
|
||||
'Google+': 'md-google-plus'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-margin {
|
||||
margin: 6px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-carousel fullscreen swipeable auto-scroll overscrollable
|
||||
:index.sync="carouselIndex"
|
||||
>
|
||||
<v-ons-carousel-item v-for="(value, key) in items" :key="key"
|
||||
class="carousel-item"
|
||||
:style="{ backgroundColor: value }"
|
||||
>
|
||||
<div class="color-tag">{{key}}</div>
|
||||
</v-ons-carousel-item>
|
||||
</v-ons-carousel>
|
||||
|
||||
<div class="dots">
|
||||
<span v-for="dotIndex in Object.keys(items).length" :key="dotIndex"
|
||||
@click="carouselIndex = dotIndex - 1"
|
||||
>
|
||||
{{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
carouselIndex: 0,
|
||||
items: {
|
||||
gray: 'gray',
|
||||
blue: '#085078',
|
||||
dark: '#373B44',
|
||||
orange: '#D38312'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.carousel-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
color: #fff;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dots {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dots > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo">
|
||||
<v-ons-toolbar-button slot="right" id="info-button" @click="popoverVisible = true">
|
||||
<v-ons-icon v-if="$ons.platform.isAndroid()" icon="md-more-vert"></v-ons-icon>
|
||||
<span v-else>More</span>
|
||||
</v-ons-toolbar-button>
|
||||
</custom-toolbar>
|
||||
|
||||
<v-ons-fab v-if="$ons.platform.isAndroid()" position="bottom right">
|
||||
<v-ons-icon icon="md-face"></v-ons-icon>
|
||||
</v-ons-fab>
|
||||
|
||||
<v-ons-list-title>Notifications</v-ons-list-title>
|
||||
<v-ons-list modifier="inset">
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.alert('Hello, world!')"
|
||||
>
|
||||
<div class="center">
|
||||
Alert
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.confirm('Are you ready?')"
|
||||
>
|
||||
<div class="center">
|
||||
Simple Confirmation
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.prompt('What is your name?')"
|
||||
>
|
||||
<div class="center">
|
||||
Prompt
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.notification.toast('Hi there!', { buttonLabel: 'Dismiss', timeout: 1500 })"
|
||||
>
|
||||
<div class="center">
|
||||
Toast
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item
|
||||
tappable modifier="longdivider"
|
||||
@click="$ons.openActionSheet({ buttons: ['Label 1', 'Label 2', 'Label 3', 'Cancel'], destructive: 2, cancelable: true })"
|
||||
>
|
||||
<div class="center">
|
||||
Action/Bottom Sheet
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<v-ons-list-title>Components</v-ons-list-title>
|
||||
<v-ons-list modifier="inset">
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="dialogVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Simple Dialog
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="alertDialogVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Alert Dialog
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="toastVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Toast (top)
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="showModal"
|
||||
>
|
||||
<div class="center">
|
||||
Modal
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="popoverVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Popover - MD Menu
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-item tappable modifier="longdivider"
|
||||
@click="actionSheetVisible = true"
|
||||
>
|
||||
<div class="center">
|
||||
Action/Bottom Sheet
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<!-- Components -->
|
||||
|
||||
<v-ons-dialog cancelable
|
||||
class="lorem-dialog"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<!-- Optional page. This could contain a Navigator as well. -->
|
||||
<v-ons-page>
|
||||
<v-ons-toolbar>
|
||||
<div class="center">Simple Dialog</div>
|
||||
</v-ons-toolbar>
|
||||
<p style="text-align: center">Lorem ipsum dolor</p>
|
||||
<p style="text-align: center">
|
||||
<v-ons-button modifier="light" @click="dialogVisible = false">Close</v-ons-button>
|
||||
</p>
|
||||
</v-ons-page>
|
||||
</v-ons-dialog>
|
||||
|
||||
<v-ons-alert-dialog cancelable
|
||||
:modifier="$ons.platform.isAndroid() ? '' : 'rowfooter'"
|
||||
:title="'Hey!!'"
|
||||
:footer="{
|
||||
'Wat': () => alertDialogVisible = false,
|
||||
'Hmm': () => alertDialogVisible = false,
|
||||
'Sure': () => alertDialogVisible = false
|
||||
}"
|
||||
:visible.sync="alertDialogVisible"
|
||||
>
|
||||
Lorem ipsum <v-ons-icon icon="fa-commenting-o"></v-ons-icon>
|
||||
</v-ons-alert-dialog>
|
||||
|
||||
<v-ons-toast :visible="toastVisible" animation="fall">Supercalifragilisticexpialidocious<button @click="toastVisible = false">No way</button></v-ons-toast>
|
||||
|
||||
<v-ons-modal
|
||||
:visible="modalVisible"
|
||||
@click="modalVisible = false"
|
||||
>
|
||||
<p style="text-align: center">
|
||||
Loading <v-ons-icon icon="fa-spinner" spin></v-ons-icon>
|
||||
<br><br>
|
||||
Click or wait
|
||||
</p>
|
||||
</v-ons-modal>
|
||||
|
||||
<v-ons-popover cancelable direction="down" cover-target
|
||||
target="#info-button"
|
||||
:visible.sync="popoverVisible"
|
||||
>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item tappable
|
||||
v-for="label in ['Call history', 'Import/export', 'New contact', 'Settings']"
|
||||
@click="popoverVisible = false"
|
||||
:key="label"
|
||||
:modifier="$ons.platform.isAndroid() ? 'nodivider' : 'longdivider'"
|
||||
>
|
||||
<div class="center">{{ label }}</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-popover>
|
||||
|
||||
<v-ons-action-sheet :visible.sync="actionSheetVisible" cancelable>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 1</v-ons-action-sheet-button>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Action 2</v-ons-action-sheet-button>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" modifier="destructive" icon="md-square-o">Action 3</v-ons-action-sheet-button>
|
||||
<v-ons-action-sheet-button @click="actionSheetVisible = false" icon="md-square-o">Cancel</v-ons-action-sheet-button>
|
||||
</v-ons-action-sheet>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
alertDialogVisible: false,
|
||||
toastVisible: false,
|
||||
modalVisible: false,
|
||||
popoverVisible: false,
|
||||
actionSheetVisible: false,
|
||||
timeoutID: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showModal () {
|
||||
this.modalVisible = true
|
||||
clearTimeout(this.timeoutID)
|
||||
this.timeoutID = setTimeout(() => (this.modalVisible = false), 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.lorem-dialog .dialog-container {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
ons-list-title {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,160 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-list-header>Text input</v-ons-list-header>
|
||||
<v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
|
||||
<div class="left">
|
||||
<v-ons-icon icon="md-face" class="list-item__icon"></v-ons-icon>
|
||||
</div>
|
||||
<label class="center">
|
||||
<v-ons-input float maxlength="20"
|
||||
placeholder="Name"
|
||||
v-model="name"
|
||||
>
|
||||
</v-ons-input>
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item :modifier="$ons.platform.isAndroid() ? 'nodivider' : ''">
|
||||
<div class="left">
|
||||
<v-ons-icon icon="fa-question-circle-o" class="list-item__icon"></v-ons-icon>
|
||||
</div>
|
||||
<label class="center">
|
||||
<v-ons-search-input maxlength="20"
|
||||
placeholder="Search"
|
||||
v-model="name"
|
||||
>
|
||||
</v-ons-search-input>
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item>
|
||||
<div class="right right-label">
|
||||
Hello {{ name || 'anonymous' }}!<v-ons-icon icon="fa-hand-spock-o" size="lg" class="right-icon"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-header>Switches</v-ons-list-header>
|
||||
<ons-list-item>
|
||||
<label class="center" for="switch1">
|
||||
Switch ({{ switchOn ? 'on' : 'off' }})
|
||||
</label>
|
||||
<div class="right">
|
||||
<v-ons-switch input-id="switch1" v-model="switchOn">
|
||||
</v-ons-switch>
|
||||
</div>
|
||||
</ons-list-item>
|
||||
<ons-list-item>
|
||||
<label class="center" for="switch2">
|
||||
{{ switchOn ? 'Enabled switch' : 'Disabled switch' }}
|
||||
</label>
|
||||
<div class="right">
|
||||
<v-ons-switch input-id="switch2" :disabled="!switchOn">
|
||||
</v-ons-switch>
|
||||
</div>
|
||||
</ons-list-item>
|
||||
|
||||
<v-ons-list-header>Select</v-ons-list-header>
|
||||
<ons-list-item>
|
||||
<div class="center">
|
||||
<v-ons-select style="width: 120px" v-model="selectedItem">
|
||||
<option v-for="item in items" :value="item.value">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</v-ons-select>
|
||||
|
||||
</div>
|
||||
<div class="right right-label">
|
||||
<s v-show="selectedItem !== 'Vue'">{{ selectedItem }}</s> Vue is awesome!
|
||||
</div>
|
||||
</ons-list-item>
|
||||
|
||||
<v-ons-list-header>Radio buttons</v-ons-list-header>
|
||||
<v-ons-list-item v-for="(vegetable, $index) in vegetables" :key="vegetable"
|
||||
tappable
|
||||
:modifier="($index === vegetables.length - 1) ? 'longdivider' : ''"
|
||||
>
|
||||
<label class="left">
|
||||
<v-ons-radio
|
||||
:input-id="'radio-' + $index"
|
||||
:value="vegetable"
|
||||
v-model=" selectedVegetable"
|
||||
>
|
||||
</v-ons-radio>
|
||||
</label>
|
||||
<label :for="'radio-' + $index" class="center">
|
||||
{{ vegetable }}
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
<v-ons-list-item>
|
||||
<div class="center">
|
||||
I love {{ selectedVegetable }}!
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-header>Checkboxes - {{checkedColors}}</v-ons-list-header>
|
||||
<v-ons-list-item v-for="(color, $index) in colors" :key="color" tappable>
|
||||
<label class="left">
|
||||
<v-ons-checkbox
|
||||
:input-id="'checkbox-' + $index"
|
||||
:value="color"
|
||||
v-model="checkedColors"
|
||||
>
|
||||
</v-ons-checkbox>
|
||||
</label>
|
||||
<label class="center" :for="'checkbox-' + $index">
|
||||
{{ color }}
|
||||
</label>
|
||||
</v-ons-list-item>
|
||||
|
||||
<v-ons-list-header>Range slider</v-ons-list-header>
|
||||
<v-ons-list-item>
|
||||
Adjust the volume:
|
||||
<v-ons-row>
|
||||
<v-ons-col width="40px" style="text-align: center; line-height: 31px;">
|
||||
<v-ons-icon icon="md-volume-down"></v-ons-icon>
|
||||
</v-ons-col>
|
||||
<v-ons-col>
|
||||
|
||||
<v-ons-range v-model="volume" style="width: 100%;"></v-ons-range>
|
||||
|
||||
</v-ons-col>
|
||||
<v-ons-col width="40px" style="text-align: center; line-height: 31px;">
|
||||
<v-ons-icon icon="md-volume-up"></v-ons-icon>
|
||||
</v-ons-col>
|
||||
</v-ons-row>
|
||||
Volume: {{ volume }} <span v-show="Number(volume) > 80"> (careful, that's loud)</span>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
switchOn: true,
|
||||
items: [
|
||||
{ text: 'Vue', value: 'Vue' },
|
||||
{ text: 'React', value: 'React' },
|
||||
{ text: 'Angular', value: 'Angular' }
|
||||
],
|
||||
selectedItem: 'Vue',
|
||||
vegetables: ['Apples', 'Bananas', 'Oranges'],
|
||||
selectedVegetable: 'Bananas',
|
||||
colors: ['Red', 'Green', 'Blue'],
|
||||
checkedColors: ['Green', 'Blue'],
|
||||
volume: 25
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.right-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.right-label {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<p class="intro">
|
||||
This is a kitchen sink example that shows off the Vue bindings for Onsen UI.<br><br>
|
||||
</p>
|
||||
|
||||
<v-ons-card v-for="page of pages" :key="page.label"
|
||||
@click="push(page.component, page.label)"
|
||||
>
|
||||
<div class="title">{{ page.label }}</div>
|
||||
<div class="content">{{ page.desc }}</div>
|
||||
</v-ons-card>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PullHook from './PullHook.vue'
|
||||
import Dialogs from './Dialogs.vue'
|
||||
import Buttons from './Buttons.vue'
|
||||
import Carousel from './Carousel.vue'
|
||||
import InfiniteScroll from './InfiniteScroll.vue'
|
||||
import Progress from './Progress.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
component: PullHook,
|
||||
label: 'Pull Hook',
|
||||
desc: 'Simple "pull to refresh" functionality to update data.'
|
||||
},
|
||||
{
|
||||
component: Dialogs,
|
||||
label: 'Dialogs',
|
||||
desc: 'Components and utility methods to display many types of dialogs.'
|
||||
},
|
||||
{
|
||||
component: Buttons,
|
||||
label: 'Buttons',
|
||||
desc: 'Different styles for buttons, floating action buttons and speed dials.'
|
||||
},
|
||||
{
|
||||
component: Carousel,
|
||||
label: 'Carousel',
|
||||
desc: 'Customizable carousel that can be optionally fullscreen.'
|
||||
},
|
||||
{
|
||||
component: InfiniteScroll,
|
||||
label: 'Infinite Scroll',
|
||||
desc: 'Two types of infinite lists: "Load More" and "Lazy Repeat".'
|
||||
},
|
||||
{
|
||||
component: Progress,
|
||||
label: 'Progress',
|
||||
desc: 'Linear progress, circular progress and spinners.'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
push (page, key) {
|
||||
this.$store.commit('navigator/push', {
|
||||
extends: page,
|
||||
data () {
|
||||
return {
|
||||
toolbarInfo: {
|
||||
backLabel: 'Home',
|
||||
title: key
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.intro {
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
ons-card {
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card__title, .card--material__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-tabbar position="auto">
|
||||
<template slot="pages">
|
||||
|
||||
<!-- Load more items on scroll bottom -->
|
||||
<v-ons-page :infinite-scroll="loadMore">
|
||||
<p class="intro">
|
||||
Useful for loading more items when the scroll reaches the bottom of the page, typically after an asynchronous API call.<br><br>
|
||||
</p>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="item in list" :key="item">
|
||||
Item #{{ item }}
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<div class="after-list">
|
||||
<v-ons-icon icon="fa-spinner" size="26px" spin></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-page>
|
||||
|
||||
<!-- Lazy load thousands of items -->
|
||||
<v-ons-page>
|
||||
<p class="intro">
|
||||
Automatically unloads items that are not visible and loads new ones. Useful when the list contains thousands of items.<br><br>
|
||||
</p>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-lazy-repeat :render-item="renderItem" :length="3000"></v-ons-lazy-repeat>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<v-ons-tab label="Load More"></v-ons-tab>
|
||||
<v-ons-tab label="Lazy Repeat" active></v-ons-tab>
|
||||
</v-ons-tabbar>
|
||||
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
beforeMount () {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
this.list.push(i)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadMore (done) {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.list.push(this.list.length + i)
|
||||
}
|
||||
done()
|
||||
}, 600)
|
||||
},
|
||||
|
||||
renderItem (i) {
|
||||
return new Vue({
|
||||
template: `
|
||||
<v-ons-list-item :key="index">
|
||||
Item #{{ index }}
|
||||
</v-ons-list-item>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
index: i
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.intro {
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.after-list {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<div class="profile-pic">
|
||||
<img src="../assets/vue-onsenui.png">
|
||||
</div>
|
||||
|
||||
<v-ons-list-title>Access</v-ons-list-title>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="(item, index) in access" :key="item.title"
|
||||
@click="loadView(index)"
|
||||
>
|
||||
<div class="left">
|
||||
<v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<v-ons-icon icon="fa-link"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<v-ons-list-title style="margin-top: 10px">Links</v-ons-list-title>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="item in links" :key="item.title"
|
||||
@click="loadLink(item.url)"
|
||||
>
|
||||
<div class="left">
|
||||
<v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<v-ons-icon icon="fa-external-link"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadView (index) {
|
||||
this.$store.commit('tabbar/set', index)
|
||||
this.$store.commit('splitter/toggle')
|
||||
},
|
||||
loadLink (url) {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
title: 'Docs',
|
||||
icon: 'ion-document-text',
|
||||
url: 'https://onsen.io/v2/docs/guide/vue/'
|
||||
},
|
||||
{
|
||||
title: 'Github',
|
||||
icon: 'ion-social-github',
|
||||
url: 'https://github.com/OnsenUI/OnsenUI'
|
||||
},
|
||||
{
|
||||
title: 'Code',
|
||||
icon: 'ion-code',
|
||||
url: 'https://github.com/frandiox/vue-onsenui-kitchensink'
|
||||
},
|
||||
{
|
||||
title: 'Forum',
|
||||
icon: 'ion-chatboxes',
|
||||
url: 'https://community.onsen.io/'
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
icon: 'ion-social-twitter',
|
||||
url: 'https://twitter.com/Onsen_UI'
|
||||
}
|
||||
],
|
||||
access: [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'ion-home, material:md-home'
|
||||
},
|
||||
{
|
||||
title: 'Forms',
|
||||
icon: 'ion-edit, material:md-edit'
|
||||
},
|
||||
{
|
||||
title: 'Animations',
|
||||
icon: 'ion-film-marker, material: md-movie-alt'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-pic {
|
||||
width: 200px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto 10px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.profile-pic > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ons-list-item {
|
||||
color: #444;
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-progress-bar :modifier="!md() && 'ios' || ''" :value="progress"></v-ons-progress-bar>
|
||||
|
||||
<section style="margin: 40px 16px">
|
||||
<p>
|
||||
Progress: {{ progress }}%
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-progress-bar value="20" :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-progress-bar value="40" secondary-value="80" :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-progress-bar indeterminate :modifier="!md() && 'ios' || ''"></v-ons-progress-bar>
|
||||
</p>
|
||||
|
||||
<div style="text-align: center; margin: 40px; color: #666">
|
||||
<p>
|
||||
<v-ons-progress-circular value="20" :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
|
||||
<v-ons-progress-circular value="40" secondary-value="80" :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
|
||||
<v-ons-progress-circular indeterminate :modifier="!md() && 'ios' || ''"></v-ons-progress-circular>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-icon icon="ion-load-a" spin size="30px"></v-ons-icon>
|
||||
<v-ons-icon icon="ion-load-b" spin size="30px"></v-ons-icon>
|
||||
<v-ons-icon icon="ion-load-c" spin size="30px"></v-ons-icon>
|
||||
<v-ons-icon icon="ion-load-d" spin size="30px"></v-ons-icon>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-icon icon="fa-spinner" spin size="26px"></v-ons-icon>
|
||||
<v-ons-icon icon="circle-o-notch" spin size="26px"></v-ons-icon>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<v-ons-icon icon="md-spinner" spin size="30px"></v-ons-icon>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<v-ons-button modifier="large">
|
||||
<v-ons-icon icon="ion-load-c" spin size="26px"></v-ons-icon>
|
||||
</v-ons-button>
|
||||
<br><br>
|
||||
<v-ons-button modifier="large" disabled>
|
||||
<v-ons-icon icon="ion-load-c" spin size="26px"></v-ons-icon>
|
||||
</v-ons-button>
|
||||
</p>
|
||||
</section>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
progress: 0,
|
||||
intervalID: 0
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.intervalID = setInterval(() => {
|
||||
if (this.progress === 100) {
|
||||
clearInterval(this.intervalID)
|
||||
return
|
||||
}
|
||||
|
||||
this.progress++
|
||||
}, 40)
|
||||
},
|
||||
methods: {
|
||||
md () {
|
||||
return this.$ons.platform.isAndroid()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 'ios' modifier */
|
||||
.progress-bar--ios__primary,
|
||||
.progress-bar--ios.progress-bar--indeterminate::before,
|
||||
.progress-bar--ios.progress-bar--indeterminate::after {
|
||||
background-color: #4282cc
|
||||
}
|
||||
|
||||
.progress-bar--ios__secondary {
|
||||
background-color: #87b6eb;
|
||||
}
|
||||
|
||||
.progress-circular--ios__primary {
|
||||
stroke: #4282cc
|
||||
}
|
||||
|
||||
.progress-circular--ios__secondary {
|
||||
stroke: #87b6eb;
|
||||
}
|
||||
</style>
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<custom-toolbar v-bind="toolbarInfo"></custom-toolbar>
|
||||
|
||||
<v-ons-pull-hook
|
||||
threshold-height="120px"
|
||||
:action="onAction"
|
||||
@changestate="state = $event.state"
|
||||
>
|
||||
|
||||
<v-ons-icon
|
||||
size="22px"
|
||||
class="pull-hook-content"
|
||||
:icon="state === 'action' ? 'fa-spinner' : 'fa-arrow-down'"
|
||||
:rotate="state === 'preaction' && 180"
|
||||
:spin="state === 'action'"
|
||||
></v-ons-icon>
|
||||
|
||||
</v-ons-pull-hook>
|
||||
|
||||
<v-ons-list>
|
||||
<v-ons-list-header>Pull to refresh</v-ons-list-header>
|
||||
<v-ons-list-item v-for="kitten in kittens" :key="kitten">
|
||||
<div class="left">
|
||||
<img class="list-item__thumbnail" :src="kitten.url">
|
||||
</div>
|
||||
<div class="center">{{ kitten.name }}</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
state: 'initial',
|
||||
kittens: this.getRandomData()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAction (done) {
|
||||
setTimeout(() => {
|
||||
this.kittens = [...this.kittens, this.getRandomKitten()]
|
||||
done()
|
||||
}, 400)
|
||||
},
|
||||
getRandomName () {
|
||||
const names = ['Oscar', 'Max', 'Tiger', 'Sam', 'Misty', 'Simba', 'Coco', 'Chloe', 'Lucy', 'Missy']
|
||||
|
||||
return names[Math.floor(Math.random() * names.length)]
|
||||
},
|
||||
getRandomUrl () {
|
||||
const width = 40 + Math.floor(20 * Math.random())
|
||||
const height = 40 + Math.floor(20 * Math.random())
|
||||
|
||||
return `https://placekitten.com/g/${width}/${height}`
|
||||
},
|
||||
getRandomKitten () {
|
||||
return {
|
||||
name: this.getRandomName(),
|
||||
url: this.getRandomUrl()
|
||||
}
|
||||
},
|
||||
getRandomData () {
|
||||
const data = []
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
data.push(this.getRandomKitten())
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pull-hook-content {
|
||||
color: #666;
|
||||
transition: transform .25s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<h1>Home</h1>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<h1>Light</h1>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<div class="profile-pic">
|
||||
<img src="../assets/vue-onsenui.png">
|
||||
</div>
|
||||
|
||||
<v-ons-list-title>Access</v-ons-list-title>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="(item, index) in access" :key="item.title"
|
||||
@click="loadView(index)"
|
||||
>
|
||||
<div class="left">
|
||||
<v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<v-ons-icon icon="fa-link"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
|
||||
<v-ons-list-title style="margin-top: 10px">Links</v-ons-list-title>
|
||||
<v-ons-list>
|
||||
<v-ons-list-item v-for="item in links" :key="item.title"
|
||||
@click="loadLink(item.url)"
|
||||
>
|
||||
<div class="left">
|
||||
<v-ons-icon fixed-width class="list-item__icon" :icon="item.icon"></v-ons-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<v-ons-icon icon="fa-external-link"></v-ons-icon>
|
||||
</div>
|
||||
</v-ons-list-item>
|
||||
</v-ons-list>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
loadView (index) {
|
||||
this.$store.commit('tabbar/set', index)
|
||||
this.$store.commit('splitter/toggle')
|
||||
},
|
||||
loadLink (url) {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
title: 'Docs',
|
||||
icon: 'ion-document-text',
|
||||
url: 'https://onsen.io/v2/docs/guide/vue/'
|
||||
},
|
||||
{
|
||||
title: 'Github',
|
||||
icon: 'ion-social-github',
|
||||
url: 'https://github.com/OnsenUI/OnsenUI'
|
||||
},
|
||||
{
|
||||
title: 'Code',
|
||||
icon: 'ion-code',
|
||||
url: 'https://github.com/frandiox/vue-onsenui-kitchensink'
|
||||
},
|
||||
{
|
||||
title: 'Forum',
|
||||
icon: 'ion-chatboxes',
|
||||
url: 'https://community.onsen.io/'
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
icon: 'ion-social-twitter',
|
||||
url: 'https://twitter.com/Onsen_UI'
|
||||
}
|
||||
],
|
||||
access: [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'ion-home, material:md-home'
|
||||
},
|
||||
{
|
||||
title: 'Forms',
|
||||
icon: 'ion-edit, material:md-edit'
|
||||
},
|
||||
{
|
||||
title: 'Animations',
|
||||
icon: 'ion-film-marker, material: md-movie-alt'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-pic {
|
||||
width: 200px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto 10px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.profile-pic > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ons-list-item {
|
||||
color: #444;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<h1>Settings</h1>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<h1>Shutters</h1>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<h1>Sprintklers</h1>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<v-ons-page>
|
||||
<h1>Timer</h1>
|
||||
</v-ons-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<v-ons-toolbar>
|
||||
<div class="left">
|
||||
<slot name="left">
|
||||
<v-ons-back-button v-if="backLabel">
|
||||
{{ backLabel }}
|
||||
</v-ons-back-button>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="center"><slot>{{ title }}</slot></div>
|
||||
<div class="right"><slot name="right"></slot></div>
|
||||
</v-ons-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['title', 'backLabel']
|
||||
}
|
||||
</script>
|
||||
15
src/prog/dashboard2/src/router/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Hello from '@/components/Hello'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Hello',
|
||||
component: Hello
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -1,62 +0,0 @@
|
||||
export default {
|
||||
modules: {
|
||||
navigator: {
|
||||
strict: true,
|
||||
namespaced: true,
|
||||
state: {
|
||||
stack: [],
|
||||
options: {}
|
||||
},
|
||||
mutations: {
|
||||
push (state, page) {
|
||||
state.stack.push(page)
|
||||
},
|
||||
pop (state) {
|
||||
if (state.stack.length > 1) {
|
||||
state.stack.pop()
|
||||
}
|
||||
},
|
||||
replace (state, page) {
|
||||
state.stack.pop()
|
||||
state.stack.push(page)
|
||||
},
|
||||
reset (state, page) {
|
||||
state.stack = [page || state.stack[0]]
|
||||
},
|
||||
options (state, newOptions = {}) {
|
||||
state.options = newOptions
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
splitter: {
|
||||
strict: true,
|
||||
namespaced: true,
|
||||
state: {
|
||||
open: false
|
||||
},
|
||||
mutations: {
|
||||
toggle (state, shouldOpen) {
|
||||
if (shouldOpen instanceof Boolean) {
|
||||
state.open = shouldOpen
|
||||
} else {
|
||||
state.open = !state.open
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tabbar: {
|
||||
strict: true,
|
||||
namespaced: true,
|
||||
state: {
|
||||
index: 0
|
||||
},
|
||||
mutations: {
|
||||
set (state, index) {
|
||||
state.index = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
src/prog/dashboard2/static/.gitkeep
Normal file
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 773 B |
|
Before Width: | Height: | Size: 937 B |
|
Before Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 350 B |
|
Before Width: | Height: | Size: 559 B |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 693 B |
|
Before Width: | Height: | Size: 7.6 KiB |
@@ -1,149 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
|
||||
-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
|
||||
173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
|
||||
13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
|
||||
20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
|
||||
-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
|
||||
11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
|
||||
-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
|
||||
-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
|
||||
11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
|
||||
-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
|
||||
36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
|
||||
-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
|
||||
-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
|
||||
-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
|
||||
10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
|
||||
-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
|
||||
221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
|
||||
-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
|
||||
-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
|
||||
-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
|
||||
-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
|
||||
-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
|
||||
30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
|
||||
-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
|
||||
-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
|
||||
96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
|
||||
-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
|
||||
-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
|
||||
-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
|
||||
-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
|
||||
-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
|
||||
30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
|
||||
342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
|
||||
22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
|
||||
-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
|
||||
-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
|
||||
-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
|
||||
-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
|
||||
-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
|
||||
17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
|
||||
-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
|
||||
-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
|
||||
-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
|
||||
72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
|
||||
35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
|
||||
-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
|
||||
-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
|
||||
0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
|
||||
-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
|
||||
-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
|
||||
-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
|
||||
11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
|
||||
-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
|
||||
12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
|
||||
145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
|
||||
-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
|
||||
-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
|
||||
-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
|
||||
248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
|
||||
29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
|
||||
-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
|
||||
-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
|
||||
-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
|
||||
109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
|
||||
-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
|
||||
-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
|
||||
-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
|
||||
38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
|
||||
34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
|
||||
136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
|
||||
67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
|
||||
150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
|
||||
116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
|
||||
113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
|
||||
175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
|
||||
89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
|
||||
11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
|
||||
6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
|
||||
430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
|
||||
220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
|
||||
24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
|
||||
478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
|
||||
394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
|
||||
55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
|
||||
175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
|
||||
88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
|
||||
155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
|
||||
11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
|
||||
14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
|
||||
51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
|
||||
37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
|
||||
55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
|
||||
55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
|
||||
295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
|
||||
16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
|
||||
157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
|
||||
200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
|
||||
241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
|
||||
61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
|
||||
28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
|
||||
62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
|
||||
56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
|
||||
350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
|
||||
90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
|
||||
121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
|
||||
60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
|
||||
167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
|
||||
171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
|
||||
97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
|
||||
111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
|
||||
11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
|
||||
13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
|
||||
101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
|
||||
19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
|
||||
54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
|
||||
0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
|
||||
90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
|
||||
108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
|
||||
20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
|
||||
-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
|
||||
-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
|
||||
-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
|
||||
-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
|
||||
-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
|
||||
-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
|
||||
-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
|
||||
-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
|
||||
396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
|
||||
110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
|
||||
-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
|
||||
-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
|
||||
583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
|
||||
408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
|
||||
561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
|
||||
-9615 0 20 -32z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 10 KiB |
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"name": "dashboard2",
|
||||
"short_name": "dashboard2",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/img/icons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/static/img/icons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "/index.html",
|
||||
"display": "standalone",
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#4DBA87"
|
||||
}
|
||||