Automation editor: Move save button to fab

This commit is contained in:
Paulus Schoutsen 2017-05-11 20:04:55 -07:00
parent c0f119c853
commit cf8905e7ad

View File

@ -10,6 +10,7 @@
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html"> <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"> <link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html"> <link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../config/ha-config-section.html"> <link rel="import" href="../config/ha-config-section.html">
@ -54,6 +55,23 @@
span[slot=introduction] a { span[slot=introduction] a {
color: var(--primary-color); color: var(--primary-color);
} }
paper-fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 1;
margin-bottom: -80px;
transition: margin-bottom .3s;
}
paper-fab[is-wide] {
bottom: 24px;
right: 24px;
}
paper-fab[dirty] {
margin-bottom: 0;
}
</style> </style>
<app-header-layout has-scrolling-region> <app-header-layout has-scrolling-region>
@ -64,11 +82,6 @@
on-tap='backTapped' on-tap='backTapped'
></paper-icon-button> ></paper-icon-button>
<div main-title>Automation [[name]]</div> <div main-title>Automation [[name]]</div>
<paper-icon-button
icon='mdi:content-save'
on-tap='saveAutomation'
disabled='[[!dirty]]'
></paper-icon-button>
</app-toolbar> </app-toolbar>
</app-header> </app-header>
@ -77,6 +90,13 @@
<div class='errors'>[[errors]]</div> <div class='errors'>[[errors]]</div>
</template> </template>
<div id='root'></div> <div id='root'></div>
<paper-fab
is-wide$='[[isWide]]'
dirty$='[[dirty]]'
icon='mdi:content-save'
title='Save'
on-tap='saveAutomation'
></paper-fab>
</div> </div>
</app-header-layout> </app-header-layout>