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