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'; |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame^] | 9 | import {default as WorkflowsStorage, kWorkflowsDataKey} from '../workflowsStorage.js'; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 10 | |
| 11 | export default class WFApp extends LitElement { |
| 12 | static styles = [ |
| 13 | SHARED_MD3_STYLES, |
| 14 | css` |
| 15 | :host { |
| 16 | font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', |
| 17 | Helvetica, Arial, sans-serif, 'Apple Color Emoji', |
| 18 | 'Segoe UI Emoji', 'Segoe UI Symbol'!important; |
| 19 | |
| 20 | display: block; |
| 21 | max-width: 1024px; |
| 22 | margin: auto; |
| 23 | position: relative; |
| 24 | } |
| 25 | |
| 26 | md-fab { |
| 27 | position: fixed; |
| 28 | bottom: 2em; |
| 29 | right: 2em; |
| 30 | } |
| 31 | `, |
| 32 | ]; |
| 33 | |
| 34 | addFabRef = createRef(); |
| 35 | |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame^] | 36 | constructor() { |
| 37 | super(); |
| 38 | this._workflows = undefined; |
| 39 | this._updateWorkflows(); |
| 40 | chrome.storage.onChanged.addListener((changes, areaName) => { |
| 41 | if (areaName == 'local' && changes[kWorkflowsDataKey]) |
| 42 | this._updateWorkflows(); |
| 43 | }); |
| 44 | } |
| 45 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 46 | render() { |
| 47 | return html` |
| 48 | <h1>Workflows</h1> |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame^] | 49 | <p>Workflows allow you to run a customized list of actions on a thread easily.</p> |
| 50 | <wf-list .workflows=${this._workflows}></wf-list> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 51 | <md-fab ${ref(this.addFabRef)} |
| 52 | icon="add" |
| 53 | @click=${this._showAddDialog}> |
| 54 | </md-fab> |
| 55 | <wf-add-dialog></wf-add-dialog> |
| 56 | `; |
| 57 | } |
| 58 | |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame^] | 59 | _updateWorkflows() { |
| 60 | WorkflowsStorage.getAll(/* asProtobuf = */ true).then(workflows => { |
| 61 | this._workflows = workflows; |
| 62 | this.requestUpdate(); |
| 63 | }); |
| 64 | } |
| 65 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 66 | _showAddDialog() { |
| 67 | this.renderRoot.querySelector('wf-add-dialog').open = true; |
| 68 | } |
| 69 | } |
| 70 | window.customElements.define('wf-app', WFApp); |