Browse Source

some styling

master
strfry 2 years ago
parent
commit
56c897b63a
  1. 77
      needs.js

77
needs.js

@ -7,9 +7,11 @@ var m = require('mithril')
var stream = require('mithril-stream')
//import stream from 'mithril-stream'
var {Card, Checkbox, ListTile, List} = require('polythene-mithril')
var {Card, Checkbox, Icon, IconButton, SVG, ListTile, List} = require('polythene-mithril')
//import {Card, Checkbox, ListTile, List} from 'polythene-mithril'
//var {CheckboxCss} = require('polythene-css');
//CheckboxCSS.addStyle("")
const Item = {
/*
@ -20,32 +22,71 @@ const Item = {
*/
view: vnode => {
console.log('Item.view', vnode)
return m(ListTile, {title: vnode.attrs.name},
m(Checkbox, {
size: 'large',
// value: model.confirmed,
defaultChecked: vnode.attrs.confirmed,
// onChange: state => vnode.attrs.confirmed = state.checked,
onChange: state => vnode.state.checked = state.checked,
// checked: state => vnode.attrs.confirmed
checked: vnode.state.checked,
}))}
return m(ListTile, {
title: vnode.attrs.name,
front:
m(Checkbox, {
size: 'large',
style: { color: 'limegreen'} ,
// value: model.confirmed,
defaultChecked: vnode.attrs.confirmed,
// onChange: state => vnode.attrs.confirmed = state.checked,
onChange: state => vnode.state.checked = state.checked,
// checked: state => vnode.attrs.confirmed
checked: vnode.state.checked,
}),
})
}
}
const addIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'
const AddIcon = m(Icon, {svg: m.trust(addIconSVG), size: 'large' })
const StoreCard = {
view: vnode =>
m(Card, {content:
m(List, {
header: {title: vnode.attrs.store},
tiles: vnode.attrs.items.map(item => m(Item, item)),
}),
})
m(Card, {
content: [
{
header: {
content: [
// TODO: Find a more materialistic way to render store name as Card title
vnode.attrs.store,
m('.flex', { key: "space"}),
m(IconButton, {icon: AddIcon} )
]
}
},
]},
m(List, {
tiles: vnode.attrs.items.map(item => m(Item, item) )
} )
)
}
/*
const StoreCard = {
view: vnode =>
m(Card, {
content: [
{
m(List, {
header: {title: vnode.attrs.store},
tiles: vnode.attrs.items.map(item => m(Item, item))
}),
actions: {
content: [
m(IconButton, {icon: AddIcon} )
]
}
}
})
}
*/
//export
const NeedsApp = {
view: (vnode) => {
return m('div', {id: 'mountpoint'}, [vnode.attrs.stores.map(store => m(StoreCard, store))])
return m('div', {id: 'mountpoint'}, [vnode.attrs.stores.map(store => m(StoreCard, store)),
])
},
// oninit: vnode => { console.log('oninit') },
// oncreate: vnode => console.log('oncreate'),

Loading…
Cancel
Save