Adrià Vilanova MartÃnez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 1 | import '@material/web/fab/fab.js'; |
| 2 | import './components/List.js'; |
| 3 | import './components/AddDialog.js'; |
| 4 | |
| 5 | import {css, html, LitElement} from 'lit'; |
| 6 | import {createRef, ref} from 'lit/directives/ref.js'; |
| 7 | |
| 8 | import {SHARED_MD3_STYLES} from '../../common/styles/md3.js'; |
| 9 | |
| 10 | export default class WFApp extends LitElement { |
| 11 | static styles = [ |
| 12 | SHARED_MD3_STYLES, |
| 13 | css` |
| 14 | :host { |
| 15 | font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', |
| 16 | Helvetica, Arial, sans-serif, 'Apple Color Emoji', |
| 17 | 'Segoe UI Emoji', 'Segoe UI Symbol'!important; |
| 18 | |
| 19 | display: block; |
| 20 | max-width: 1024px; |
| 21 | margin: auto; |
| 22 | position: relative; |
| 23 | } |
| 24 | |
| 25 | md-fab { |
| 26 | position: fixed; |
| 27 | bottom: 2em; |
| 28 | right: 2em; |
| 29 | } |
| 30 | `, |
| 31 | ]; |
| 32 | |
| 33 | addFabRef = createRef(); |
| 34 | |
| 35 | render() { |
| 36 | return html` |
| 37 | <h1>Workflows</h1> |
| 38 | <wf-list></wf-list> |
| 39 | <md-fab ${ref(this.addFabRef)} |
| 40 | icon="add" |
| 41 | @click=${this._showAddDialog}> |
| 42 | </md-fab> |
| 43 | <wf-add-dialog></wf-add-dialog> |
| 44 | `; |
| 45 | } |
| 46 | |
| 47 | _showAddDialog() { |
| 48 | this.renderRoot.querySelector('wf-add-dialog').open = true; |
| 49 | } |
| 50 | } |
| 51 | window.customElements.define('wf-app', WFApp); |