Migrate sidebar to app elements

This commit is contained in:
Paulus Schoutsen 2016-07-30 23:02:17 -07:00
parent 057adee010
commit e5fe5ca0ae

View File

@ -1,41 +1,33 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'> <link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../../bower_components/paper-header-panel/paper-header-panel.html'>
<link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'> <link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'> <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'> <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-item/paper-icon-item.html'> <link rel='import' href='../../bower_components/paper-item/paper-icon-item.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'> <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel='import' href='../components/stream-status.html'> <link rel='import' href='../components/stream-status.html'>
<link rel='import' href='../util/hass-behavior.html'> <link rel='import' href='../util/hass-behavior.html'>
<dom-module id='ha-sidebar'> <dom-module id='ha-sidebar'>
<template> <template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style> <style include="iron-flex iron-flex-alignment iron-positioning">
<style>
:host { :host {
--sidebar-text: { --sidebar-text: {
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} };
} display: block;
overflow: scroll;
.sidenav {
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
} }
paper-toolbar { app-toolbar {
--paper-toolbar-title: { font-weight: 400;
text-align: left;
margin-left: 0px !important;
};
--paper-toolbar-background: #fff;
--paper-toolbar-color: #000;
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
@ -100,11 +92,10 @@
} }
</style> </style>
<paper-header-panel mode='scroll' class='sidenav fit'> <app-toolbar>
<paper-toolbar> <div main-title>Home Assistant</div>
<div class="title">Home Assistant</div>
<paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-tap='toggleMenu'></paper-icon-button> <paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-tap='toggleMenu'></paper-icon-button>
</paper-toolbar> </app-toolbar>
<paper-menu attr-for-selected='data-panel' selected='[[selected]]' on-iron-select='menuSelect'> <paper-menu attr-for-selected='data-panel' selected='[[selected]]' on-iron-select='menuSelect'>
<paper-icon-item on-tap='menuClicked' data-panel='states'> <paper-icon-item on-tap='menuClicked' data-panel='states'>
@ -155,8 +146,6 @@
on-tap='menuClicked'></paper-icon-button> on-tap='menuClicked'></paper-icon-button>
</div> </div>
</div> </div>
</paper-header-panel>
</template> </template>
</dom-module> </dom-module>