Commit 8e75010c68d2c079e58d57c19ae1919e2b878d31
add sbot connection indicator back in finally!
mix irving committed on 9/1/2017, 3:24:47 AMParent: dc283efb2799619e2251a148cc5e98c6174f86f9
Files changed
| app/html/menu.js | changed |
| app/html/menu.mcss | changed |
| app/html/menu.js | |||
|---|---|---|---|
| @@ -1,29 +1,29 @@ | |||
| 1 | 1 … | const nest = require('depnest') | |
| 2 | -const { h, Value } = require('mutant') | ||
| 2 … | +const { h, Value, when } = require('mutant') | ||
| 3 | 3 … | ||
| 4 | 4 … | exports.gives = nest('app.html.menu') | |
| 5 | 5 … | ||
| 6 | 6 … | exports.needs = nest({ | |
| 7 | - app: { | ||
| 8 | - 'html.menuItem': 'map', | ||
| 9 | - 'sync.goTo': 'first' | ||
| 10 | - } | ||
| 7 … | + "app.html.menuItem": "map", | ||
| 8 … | + "app.sync.goTo": "first", | ||
| 9 … | + "sbot.obs.connection": "first" | ||
| 11 | 10 … | }) | |
| 12 | 11 … | ||
| 13 | 12 … | exports.create = function (api) { | |
| 14 | 13 … | var _menu | |
| 15 | 14 … | ||
| 16 | 15 … | return nest('app.html.menu', function menu () { | |
| 17 | 16 … | if (_menu) return _menu | |
| 18 | 17 … | ||
| 19 | - var state = Value('') | ||
| 18 … | + const hoverClass = Value('') | ||
| 19 … | + const connectionClass = when(api.sbot.obs.connection, '', '-disconnected') | ||
| 20 | 20 … | ||
| 21 | 21 … | // TODO: move goTo out into each menuItem | |
| 22 | 22 … | _menu = h('Menu', { | |
| 23 | - classList: [ state ], | ||
| 24 | - 'ev-mouseover': () => state.set('-active'), | ||
| 25 | - 'ev-mouseout': () => state.set('') | ||
| 23 … | + classList: [ hoverClass, connectionClass ], | ||
| 24 … | + 'ev-mouseover': () => hoverClass.set('-open'), | ||
| 25 … | + 'ev-mouseout': () => hoverClass.set('') | ||
| 26 | 26 … | }, [ | |
| 27 | 27 … | h('div', api.app.html.menuItem(api.app.sync.goTo)) | |
| 28 | 28 … | ]) | |
| 29 | 29 … | ||
| app/html/menu.mcss | ||
|---|---|---|
| @@ -16,12 +16,16 @@ | ||
| 16 | 16 … | background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0) 1.5rem, #f5f5f5 1.5rem, #f5f5f5) |
| 17 | 17 … | z-index: 5 |
| 18 | 18 … | } |
| 19 | 19 … | |
| 20 | - -active { | |
| 20 … | + -open { | |
| 21 | 21 … | div { |
| 22 | 22 … | display: flex |
| 23 | 23 … | flex-direction: column |
| 24 | 24 … | } |
| 25 | 25 … | } |
| 26 … | + | |
| 27 … | + -disconnected { | |
| 28 … | + background-color: red | |
| 29 … | + } | |
| 26 | 30 … | } |
| 27 | 31 … | |
Built with git-ssb-web