export default function (channels) {
return h('div', {
style: {
position: 'fixed',
bottom: 0,
width: '100%',
height: '50px',
background: 'black',
zIndex: 1000
}
}, [
h('button', {style: styles.button, 'ev-click': hg.send(channels.toggleShowGroups)}, 'Groups'),
h('button', {style: styles.button, 'ev-click': hg.send(channels.toggleShowContacts)}, 'Contacts'),
h('button', {style: styles.button, 'ev-click': hg.send(channels.toggleShowMessage)}, 'Message')
])
}
App.render = function render(state) {
return h('div.counter', [
'The state ', h('code', 'clickCount'),
' has value: ' + state.value + '.', h('input.button', {
type: 'button',
value: 'Click me!',
'ev-click': hg.send(state.channels.clicks)
})
]);
};
/** The main render function. */
function render(state) {
var darkTheme = state.settings.darkTheme ? true : false;
var settingsContent = h('div.settings-content', [
h('div.settings-title', 'Settings'),
h('div.settings-item', [
h('label', [
h('input', {
type: 'checkbox',
checked: darkTheme,
'ev-change': hg.send(
state.channels.changeTheme, {darkTheme: !darkTheme})
}),
'Dark theme'
])
]),
h('div.btn-close', {
'ev-click': hg.send(state.channels.closeSettingsPanel)
}, 'Close')
]);
return h('div.settings-container', settingsContent);
}
/*
* Renders the addressbar for entering namespace
*/
function renderNamespaceBox(browseState, browseEvents, navEvents) {
// Trigger an actual navigation event when value of the inputs change
var changeEvent = new PropertyValueEvent(function(val) {
var namespace = browseState.namespace;
if (exists(val)) {
namespace = val;
}
navEvents.navigate({
path: browseRoute.createUrl(browseState, {
namespace: namespace
})
});
}, 'value', true);
// Change the namespace suggestions if the user types into the namespace box.
// Ideally, this would be the input event handler. See inputEvent below.
var trueInputEvent = new PropertyValueEvent(function(val) {
browseEvents.getNamespaceSuggestions(val);
}, 'value', false);
// TODO(alexfandrianto): A workaround for Mercury/Polymer. The
// paper-autocomplete's input value updates after Mercury captures the event.
// If we defer handling the event, then the input has time to update itself to
// the correct, new value.
var inputEvent = function(ev) {
setTimeout(trueInputEvent.handleEvent.bind(trueInputEvent, ev), 0);
};
// The focus event also retrieves namespace suggestions.
var focusEvent = inputEvent;
var children = browseState.namespaceSuggestions.map(
function renderChildItem(child) {
return h('paper-item', child.mountedName);
}
);
return h('div.namespace-box',
h('div', {
attributes: {
'layout': 'true',
'horizontal': 'true'
}
}, [
h('core-tooltip.icontooltip', {
attributes: {
'label': 'Reload'
},
'position': 'bottom'
},
h('paper-icon-button.icon', {
attributes: {
'icon': 'refresh',
'label': 'Reload'
},
'ev-click': mercury.send(navEvents.reload)
})
),
h('core-tooltip.nstooltip', {
attributes: {
'label': 'Enter a name to browse, e.g. house/living-room'
},
'position': 'bottom'
},
h('paper-autocomplete.autocomplete', {
attributes: {
'name': 'namespace',
'value': browseState.namespace,
'delimiter': '/',
'flex': 'true',
'spellcheck': 'false',
'maxItems': NAMESPACE_AUTOCOMPLETE_MAX_ITEMS
},
'ev-focus': focusEvent,
'ev-input': inputEvent,
'ev-change': changeEvent
}, children)
)
])
);
}
render: function (state) {
return h('button', {
'ev-click': hg.send(state.channels.action)
}, state.displayValue)
}