client ui

Functions

list(content)

Starts a list

Example:

Dom = require 'dom'
Ui = require 'ui'

Dom.section !->
	Ui.list !->
		Ui.item "Look"
		Ui.item "At"
		Ui.item "My"
		Ui.item "List"

item(content)

Create a list item. This can be a simple string, or function containing other Dom elements.

Example:

Dom = require 'dom'
Ui = require 'ui'
Form = require 'form'

Dom.section !->
	Dom.h4 "I like:"
	Ui.list !->
		Ui.item !->
			Form.check {name:"cats", text:"Cats"}
		Ui.item !->
			Form.check {name:"dogs", text:"Dogs"}
		Ui.item !->
			Form.check {name:"chickens", text:"Chickens"}

bigImg(path,content, size)

Creates a big image. Per default it's centered and size limited to either the innerWidth of the parent div or 500px, whichever is smaller. You can override this by providing a custom size.

Example:

Dom = require 'dom'
Ui = require 'ui'

content = !->
	Dom.style
		color: "#FFF"
	Dom.h2 !->
		Dom.style
			color: "#FFF"
		Dom.text "Thanks XKCD!"
	Dom.h5 "Buy the book"

Dom.section !->
	Ui.bigImg("http://imgs.xkcd.com/comics/up_goer_five.png", content, 600)

avatar(key,opts)

Render the user avatar. Key is obtained with Plugin.userAvatar() or Plugin.groupAvatar() You can also enter a color, to render a default user avatar in a certain color. Like bigImg you can add additional content and set the size. The only option available is size and accepts an integer.

Example:

Dom = require 'dom'
Ui = require 'ui'

Dom.section !->
	Dom.div !->
		Ui.avatar Plugin.userAvatar()
		Ui.avatar Plugin.groupAvatar()
		Ui.avatar "#FF00FF"

button(content,action)

This creates a 'small' button. You can supply a function in content, but most of the time you will provide a string. Action contains the callback function.

Example:

Dom = require 'dom'
Ui = require 'ui'
Modal = require 'modal'

Dom.section !->
	Ui.button "Press me", !->
		Modal.show "You did! Thanks!"

bigButton(content,action)

Works like button(content, action), but makes a full with button.

spinner(size, content, img)

Renders a loading spinner. size: provide a size in pixels (without 'px'). No default size is set. content: You can add additional content. Very useful for additional styling img: If you want, you can supply a custom background image url.

Example:

Dom = require 'dom'
Ui = require 'ui'

Dom.section !->
	Ui.spinner(50, !->
		Dom.style
			margin: "auto"
	)

emptyText(content)

Adds a div, with gray and centered text styling.

Used to display a message to the user when he navigates to a page that is empty.

Example:

Dom = require 'dom'
Ui = require 'ui'

Dom.section !->
	Ui.emptyText "There is little here..." 

unread(content, bg, outerStyle)

Renders, per default, a green circle used to notify the user of unread events.

Simple example:

Dom = require 'dom'
Ui = require 'ui'

Dom.section !->
	Ui.avatar Plugin.userAvatar()
	Dom.text "Your great, great grandfather"
	Ui.unread 2

additional you can restyle the element with:

• bg: set the background stlye.
• outerStyle: A fully parsed CSS hash

Example:

Dom = require 'dom'
Ui = require 'ui'

Dom.section !->
	Ui.avatar Plugin.userAvatar()
	Dom.text "Your great, great grandfather"
	Ui.unread 2, "#666", { marginTop: '-4px' }

dots

Renders three dots...