Skip to content

Commit a925184

Browse files
aekscoaeksco
authored
Merge pull request #5 from aeksco/dev
Dev -> Master
2 parents cff9f99 + 7a2c398 commit a925184

File tree

18 files changed

+13063
-128
lines changed

18 files changed

+13063
-128
lines changed

‎package-lock.json

+12,506
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

+30-21
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
11

22
<template>
3-
<!-- <div id="app">
4-
<AppNavbar/>
5-
<Notification/>
6-
</div> -->
3+
<!-- <div id="app"> -->
4+
<!-- <AppNavbar/> -->
5+
<!-- <Notification/> -->
6+
<!-- </div> -->
77

88
<v-ons-splitter>
9-
<v-ons-splitter-side swipeable width="150px" collapse="" side="left" :open.sync="openSide">
10-
<v-ons-page>
11-
<v-ons-list>
12-
<v-ons-list-item v-for="page in pages" tappable modifier="chevron" @click="currentPage = page; openSide = false">
13-
<div class="center">PAGE</div>
14-
</v-ons-list-item>
15-
</v-ons-list>
16-
</v-ons-page>
9+
10+
<!-- Side Menu -->
11+
<v-ons-splitter-side swipeable collapse width="250px"
12+
:animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
13+
:open.sync="menuIsOpen">
14+
<MenuPage/>
1715
</v-ons-splitter-side>
1816

17+
<!-- Page Content -->
1918
<v-ons-splitter-content>
20-
<!-- <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component> -->
2119
<router-view/>
2220
</v-ons-splitter-content>
23-
</v-ons-splitter>
2421

25-
<!-- <router-view/> -->
22+
</v-ons-splitter>
2623
</template>
2724

2825
<script>
2926
import AppNavbar from './containers/app_navbar'
3027
import AppFooter from './containers/app_footer'
3128
import Notification from './containers/app_notification'
29+
import MenuPage from '@/components/Sidebar'
3230
3331
export default {
3432
name: 'app',
@@ -37,7 +35,8 @@ export default {
3735
components: {
3836
AppNavbar,
3937
Notification,
40-
AppFooter
38+
AppFooter,
39+
MenuPage
4140
},
4241
4342
// Top-Level page Meta
@@ -48,15 +47,22 @@ export default {
4847
lang: 'en'
4948
}
5049
},
51-
5250
data () {
5351
return {
54-
currentPage: 'home',
55-
pages: ['home', 'news', 'settings'],
56-
openSide: false
52+
opened: false
53+
}
54+
},
55+
computed: {
56+
menuIsOpen: {
57+
get () {
58+
return this.opened
59+
},
60+
set (newValue) {
61+
this.opened = newValue
62+
// this.$store.commit('splitter/toggle', newValue)
63+
}
5764
}
5865
}
59-
6066
}
6167
</script>
6268

@@ -76,4 +82,7 @@ export default {
7682
#app {
7783
height: 100%;
7884
}
85+
ons-splitter-side[side=left][animation=overlay] {
86+
border-right: 1px solid #BBB;
87+
}
7988
</style>

‎src/assets/logo_white.svg

+1
Loading

‎src/components/Sidebar.vue

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<v-ons-page>
3+
<v-ons-toolbar modifier="transparent"></v-ons-toolbar>
4+
<div class="header">
5+
<img src="../assets/logo_white.svg">
6+
</div>
7+
8+
<!-- <v-ons-list-title>Onsen UI Essential Links</v-ons-list-title> -->
9+
<v-ons-list>
10+
<v-ons-list-item modifier="chevron" v-for="item in essentialLinks" @click="goTo(item.link)" :key="item.link">
11+
<div class="left"><v-ons-icon fixed-width :icon="item.icon"></v-ons-icon></div>
12+
<div class="center">{{ item.label }}</div>
13+
</v-ons-list-item>
14+
</v-ons-list>
15+
</v-ons-page>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'menu',
21+
data () {
22+
return {
23+
essentialLinks: [
24+
{
25+
label: 'Home',
26+
link: '/',
27+
icon: 'fa-home'
28+
},
29+
{
30+
label: 'Devices',
31+
link: '/devices',
32+
icon: 'fa-usb'
33+
},
34+
{
35+
label: 'Settings',
36+
link: '/settings',
37+
icon: 'fa-cog'
38+
},
39+
{
40+
label: 'Help',
41+
link: '/help',
42+
icon: 'fa-question-circle'
43+
}
44+
]
45+
}
46+
},
47+
methods: {
48+
goTo (url) {
49+
this.$router.push(url)
50+
// window.open(url, '_blank')
51+
}
52+
}
53+
}
54+
</script>
55+
56+
<!-- Add "scoped" attribute to limit CSS to this component only -->
57+
<style scoped>
58+
.header {
59+
text-align: center;
60+
margin-bottom: 20px;
61+
}
62+
63+
img {
64+
max-width: 150px;
65+
}
66+
67+
ons-list-title {
68+
text-transform: none;
69+
}
70+
71+
ons-list-item {
72+
cursor: pointer;
73+
}
74+
</style>

‎src/components/Toolbar.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
<template>
3+
<v-ons-toolbar>
4+
<div class="left">
5+
<v-ons-toolbar-button>
6+
<v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
7+
</v-ons-toolbar-button>
8+
</div>
9+
<div class="center">{{ title }}</div>
10+
</v-ons-toolbar>
11+
</template>
12+
13+
<!-- // // // // -->
14+
15+
<script>
16+
export default {
17+
name: 'device_list',
18+
props: ['title']
19+
}
20+
</script>
21+
22+

‎src/config/vue.js

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Meta from 'vue-meta'
1111
import VueOnsen from 'vue-onsenui'
1212
import 'onsenui/css/onsenui.css'
1313
import 'onsenui/css/onsen-css-components.css'
14+
import 'onsenui/css/dark-onsen-css-components.css'
1415

1516
// VueOnsen
1617
// OnsenUI components and directives

‎src/containers/device_interfaces/components/layout.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="h-100">
3+
<div class="row d-flex w-100 h-100 justify-content-center">
4+
<p class="lead">Home</p>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'main_home'
12+
}
13+
</script>

‎src/containers/device_interfaces/index.vue

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
<template>
3+
<!-- <v-ons-page>
4+
5+
<LayoutView/>
6+
<v-ons-toolbar>
7+
<div class="center">Title</div>
8+
</v-ons-toolbar>
9+
10+
<p style="text-align: center">
11+
<v-ons-button @click="$ons.notification.alert('Hello World!')">
12+
Click me!
13+
</v-ons-button>
14+
</p>
15+
16+
</v-ons-page> -->
17+
18+
<v-ons-page>
19+
20+
<!-- TOOLBAR COMPONENT -->
21+
<v-ons-toolbar>
22+
<div class="left">
23+
<ons-toolbar-button @click="carouselIndex > 0 && carouselIndex--">
24+
<v-ons-icon icon="fa-arrow-left"></v-ons-icon>
25+
</ons-toolbar-button>
26+
</div>
27+
<div class="center">
28+
<!-- Index: {{carouselIndex}} -->
29+
<v-ons-button @click="$ons.notification.alert('Onsen rules!')">
30+
<v-ons-icon icon="fa-question-circle-o"></v-ons-icon>
31+
</v-ons-button>
32+
</div>
33+
<div class="right">
34+
<ons-toolbar-button @click="carouselIndex < 2 && carouselIndex++">
35+
<v-ons-icon icon="fa-arrow-right"></v-ons-icon>
36+
</ons-toolbar-button>
37+
</div>
38+
</v-ons-toolbar>
39+
40+
<!-- CAROUSEL COMPONENT -->
41+
<v-ons-carousel fullscreen swipeable auto-scroll overscrollable :index.sync="carouselIndex">
42+
<v-ons-carousel-item v-for="(value, key) in items" :key="key" :style="{backgroundColor: value}">
43+
<div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">{{key}}</div>
44+
</v-ons-carousel-item>
45+
</v-ons-carousel>
46+
47+
<!-- DOTS COMPONENT -->
48+
<div :style="dots">
49+
<span :index="dotIndex - 1" v-for="dotIndex in Object.keys(items).length" :key="dotIndex" style="cursor: pointer" @click="carouselIndex = dotIndex - 1">
50+
{{ carouselIndex === dotIndex - 1 ? '\u25CF' : '\u25CB' }}
51+
</span>
52+
</div>
53+
</v-ons-page>
54+
55+
</template>
56+
57+
<!-- // // // // -->
58+
59+
<script>
60+
import LayoutView from './components/layout.vue'
61+
62+
export default {
63+
name: 'main_home',
64+
components: {
65+
LayoutView
66+
},
67+
metaInfo: {
68+
title: 'Main - Home'
69+
},
70+
data () {
71+
return {
72+
carouselIndex: 0,
73+
items: {
74+
KEYBOARD: '#085078',
75+
MOUSE: '#373B44',
76+
REMOTE: '#D38312'
77+
},
78+
dots: {
79+
textAlign: 'center',
80+
fontSize: '30px',
81+
color: '#fff',
82+
position: 'absolute',
83+
bottom: '40px',
84+
left: 0,
85+
right: 0
86+
}
87+
}
88+
}
89+
}
90+
</script>

0 commit comments

Comments
 (0)