Commit ce182a6ed828db9aa940f352cf28de6409530165
mvp settings page with style hacking (pairing with Zach!)
mix irving committed on 4/8/2018, 10:01:05 AMParent: 0aa1e55ffcfbd06056d917ca218a05fb8733cbae
Files changed
| app/html/app.js | changed |
| app/page/settings.js | added |
| router/sync/routes.js | changed |
| app/html/app.js | ||
|---|---|---|
| @@ -22,9 +22,9 @@ | ||
| 22 | 22 … | console.log('STARTING app') |
| 23 | 23 … | |
| 24 | 24 … | window = api.app.sync.window(window) |
| 25 | 25 … | |
| 26 | - const initialTabs = ['/public', '/inbox', '/notifications'] // NB router converts these to { page: '/public' } | |
| 26 … | + const initialTabs = ['/settings','/public', '/inbox', '/notifications'] // NB router converts these to { page: '/public' } | |
| 27 | 27 … | const App = h('App', api.app.html.tabs(initialTabs)) |
| 28 | 28 … | |
| 29 | 29 … | api.app.sync.initialise(App) |
| 30 | 30 … | // runs all the functions in app/sync/initialise |
| app/page/settings.js | ||
|---|---|---|
| @@ -1,0 +1,48 @@ | ||
| 1 … | +const nest = require('depnest') | |
| 2 … | +const { h } = require('mutant') | |
| 3 … | +const insertCss = require('insert-css') | |
| 4 … | +const compileCss = require('micro-css') | |
| 5 … | + | |
| 6 … | +exports.gives = nest({ | |
| 7 … | + 'app.html.menuItem': true, | |
| 8 … | + 'app.page.settings': true | |
| 9 … | +}) | |
| 10 … | + | |
| 11 … | +exports.needs = nest({ | |
| 12 … | + 'app.sync.goTo': 'first' | |
| 13 … | +}) | |
| 14 … | + | |
| 15 … | +exports.create = function (api) { | |
| 16 … | + return nest({ | |
| 17 … | + 'app.html.menuItem': menuItem, | |
| 18 … | + 'app.page.settings': publicPage | |
| 19 … | + }) | |
| 20 … | + | |
| 21 … | + function menuItem () { | |
| 22 … | + return h('a', { | |
| 23 … | + style: { order: 1 }, | |
| 24 … | + 'ev-click': () => api.app.sync.goTo({ page: 'settings' }) | |
| 25 … | + }, '/settings') | |
| 26 … | + } | |
| 27 … | + | |
| 28 … | + function publicPage (location) { | |
| 29 … | + const styles = h('textarea') | |
| 30 … | + return h('SettingsPage', [ | |
| 31 … | + styles, | |
| 32 … | + h('button', {'ev-click': () => peachify(styles)}, 'peachify') | |
| 33 … | + ]) | |
| 34 … | + | |
| 35 … | + function peachify (styles) { | |
| 36 … | + const css = compileCss(styles.value) | |
| 37 … | + // body{ | |
| 38 … | + // background-color: peachpuff; | |
| 39 … | + // color: indigo; } | |
| 40 … | + | |
| 41 … | + // a:link, a:visited, a:active { | |
| 42 … | + // color: #116a6a; } | |
| 43 … | + // ` | |
| 44 … | + insertCss(css) | |
| 45 … | + } | |
| 46 … | + } | |
| 47 … | + | |
| 48 … | +} | |
| router/sync/routes.js | |||
|---|---|---|---|
| @@ -12,9 +12,11 @@ | |||
| 12 | 12 … | 'profile': 'first', | |
| 13 | 13 … | 'search': 'first', | |
| 14 | 14 … | 'blob': 'first', | |
| 15 | 15 … | 'thread': 'first', | |
| 16 | - 'channel': 'first' | ||
| 16 … | + 'channel': 'first', | ||
| 17 … | + 'settings': 'first' | ||
| 18 … | + | ||
| 17 | 19 … | }, | |
| 18 | 20 … | 'keys.sync.id': 'first' | |
| 19 | 21 … | }) | |
| 20 | 22 … | ||
| @@ -30,8 +32,9 @@ | |||
| 30 | 32 … | [ loc => loc.page === 'notifications', pages.notifications ], | |
| 31 | 33 … | [ loc => loc.page === 'errors', pages.errors ], | |
| 32 | 34 … | [ loc => loc.page === 'profile', () => pages.profile({ feed: myId }) ], | |
| 33 | 35 … | [ loc => loc.page === 'search' && loc.query, pages.search ], | |
| 36 … | + [ loc => loc.page === 'settings', pages.settings], | ||
| 34 | 37 … | ||
| 35 | 38 … | [ loc => isBlob(loc.blob), pages.blob ], | |
| 36 | 39 … | [ loc => isPresent(loc.channel), pages.channel ], | |
| 37 | 40 … | [ loc => isFeed(loc.feed), pages.profile ], | |
Built with git-ssb-web