rpi/domo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Skeleton of material design.

Browse Source
This commit is contained in:
NADAL Jean-Baptiste
2016-05-02 23:02:41 +02:00
parent 4aebf8a981
commit ee4025bc70
10 changed files with 110 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/ui/Domo/index.html
View File

@@ -1,21 +1,52 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Domo controller" />
<meta name="author" content="NADAL Jean-Baptiste" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black- translucent">
<meta name="description" content="Domo controller">
<meta name="author" content="NADAL Jean-Baptiste">
content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" sizes="192x192" href="/static/android-desktop.png" />
<!-- Add to homescreen 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="Domo" />
<link rel="apple-touch-icon-precomposed" href="/static/ios-desktop.png" />
<link rel="shortcut icon" href="/static/favicon.png" />
<link rel="stylesheet"
href="node_modules/roboto-fontface/css/roboto-fontface.css" />
<link rel="stylesheet" media="all" type="text/css"
href="node_modules/material-design-icons/iconfont/material-icons.css" />
<link rel="stylesheet"
href="node_modules/material-design-lite/dist/material.min.css" />
<!--
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
<link rel="icon" href="/static/favicon.ico">
<link rel="apple-touch-icon" href="/static/favicon.png">
-->
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
<title>Domo</title>
</head>
<body>

9
src/ui/Domo/package.json
View File

@@ -9,9 +9,12 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^1.0.17",
"vue-router": "^0.7.11",
"vue-mdl": "^0.5.0"
"vue": "^1.0.21",
"vue-router": "^0.7.13",
"vue-mdl": "^0.7.4",
"material-design-lite": "^1.1.3",
"roboto-fontface": "^0.4.5",
"material-design-icons": "^2.2.3"
},
"devDependencies": {
"babel-core": "^6.0.0",

37
src/ui/Domo/src/app.vue
View File

@@ -1,10 +1,47 @@
<template>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<img src="/static/user.jpg" class="demo-avatar">
<div class="demo-avatar-dropdown">
<span>hello@example.com</span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i>
<span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">hello@example.com</li>
<li class="mdl-menu__item">info@example.com</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Home</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">report</i>Spam</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">forum</i>Forums</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">flag</i>Updates</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">local_offer</i>Promos</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">shopping_cart</i>Purchases</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">people</i>Social</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span></a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div id="app" class="mdl-grid demo-content">
<a v-link="{ path: '/' }">Go to Home</a>
<a v-link="{ path: '/lights' }">Go to Lights</a>
<a v-link="{ path: '/shutters' }">Go to Shutters</a>
<a v-link="{ path: '/sprinklers' }">Go to Sprinklers</a>
<router-view class="test" transition="test" transition-mode="out-in">
</router-view>
</div>
</main>
</div>
</template>
<style>
.test {

15
src/ui/Domo/src/components/index.vue
View File

@@ -1,5 +1,20 @@
<template>
<h1> Index </h1>
<mdl-checkbox :checked.sync='checked'>Checkbox</mdl-checkbox>
<mdl-button>Button</mdl-button>
<mdl-button v-mdl-ripple-effect>Ripple Effect</mdl-button>
<mdl-button disabled>Disabled</mdl-button>
<mdl-button icon>
<i class="material-icons">star</i>
</mdl-button>
<mdl-switch :checked.sync="checked">Switch</mdl-switch>
<mdl-switch :checked.sync="checked" class="mdl-js-ripple-effect">Ripple Effect</mdl-switch>
<mdl-switch :checked.sync="checked" disabled>Disabled</mdl-switch>
</template>
<script>
</script>

14
src/ui/Domo/src/main.js
View File

@@ -1,17 +1,9 @@
//var vmdl = require('vue-mdl');
var Vue = require('vue')
var VueRouter = require('vue-router')
var VueMdl = require('vue-mdl')
var Material = require('material-design-lite')
// Globally register the checkbox
//vmdl.register(Vue, 'mdl-checkbox');
// Shorthand
//vmdl.register(Vue, 'checkbox');
// Globally register all components and directives
//vmdl.registerAll(Vue);
// Access any component or directive
//var checkbox = vmdl.components['mdl-checkbox'];
//var badge = vmdl.directives['mdl-badge'];
Vue.use(VueMdl.default)
var App = require('./app.vue')
var routerMap = require('./router')

BIN
src/ui/Domo/static/android-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/ui/Domo/static/dog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/ui/Domo/static/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 905 B

BIN
src/ui/Domo/static/ios-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/ui/Domo/static/user.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB