Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add non-iOS specific tabbedbar view. #3

Merged
merged 2 commits into from

2 participants

@tonydewan
Collaborator

No description provided.

@trabianmatt trabianmatt was assigned
@trabianmatt
Owner

Looks great!

@trabianmatt trabianmatt merged commit 407f115 into master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 8, 2012
  1. @tonydewan
Commits on May 9, 2012
  1. @trabianmatt

    Refactored tabbed bar

    trabianmatt authored
This page is out of date. Refresh to see the latest.
View
2  package.json
@@ -1,6 +1,6 @@
{
"name": "titanium-backbone",
- "version": "0.2.2",
+ "version": "0.2.3",
"homepage": "https://github.com/trabian/titanium-backbone",
"description": "Framework for Titanium apps built with Backbone",
"dependencies": {
View
8 src/presenters/view_list.coffee
@@ -9,3 +9,11 @@ module.exports = class ViewPresenterList extends Backbone.Collection
fetch: (options = {}) =>
@trigger 'reset'
options.success? @
+
+ selectOne: (selected) =>
+
+ @each (presenter) ->
+ presenter.set
+ selected: presenter is selected
+
+ @trigger 'select', selected
View
16 src/styles/ui/index.coffee
@@ -1,15 +1,17 @@
module.exports =
- contentBlock: require './content_block'
+ contentBlock: require './content_block'
- button: require './button'
+ button: require './button'
- form: require './form'
+ form: require './form'
- labels: require './labels'
+ labels: require './labels'
- search: require './search'
+ search: require './search'
- table: require './table'
+ table: require './table'
- window: require './window'
+ window: require './window'
+
+ tabbedBar: require './tabbed_bar'
View
67 src/styles/ui/tabbed_bar.coffee
@@ -0,0 +1,67 @@
+borderWidth = 3
+
+module.exports =
+ view:
+ layout: 'horizontal'
+ height: 30 + (borderWidth * 2)
+ width: Ti.UI.FULL
+ borderWidth: borderWidth
+ borderRadius: borderWidth
+ borderColor: "#eeeeee"
+ backgroundColor: "#eeeeee"
+ wrapper:
+ layout: 'horizontal'
+ left: borderWidth
+ top: borderWidth
+ right: borderWidth
+ bottom: borderWidth
+ borderRadius: 4
+ borderWidth: 1
+ height: 30
+ borderColor: "#ababab"
+ label:
+ text:
+ textAlign: 'center'
+ font:
+ fontSize: 13
+ fontColor: '#333333'
+ shadowColor: '#ffffff'
+ shadowOffset: {x:1,y:1}
+ icon:
+ width: 16
+ height: 16
+ left: 4
+ inactive:
+ #backgroundColor: '#eee'
+ backgroundGradient:
+ type: 'linear'
+ startPoint:
+ x: 0
+ y: 0
+ endPoint:
+ x: 0
+ y: '100%'
+ colors: [
+ { color: '#eee', offset: 0.0 },
+ { color: '#eee', offset: 1.0 }
+ ]
+ active:
+ #backgroundColor: '#ababab'
+ backgroundColor: '#eee'
+ backgroundGradient:
+ type: 'linear'
+ startPoint:
+ x: 0
+ y: 0
+ endPoint:
+ x: 0
+ y: '100%'
+ colors: [
+ { color: '#ababab', offset: 0.0 },
+ { color: '#eee', offset: 1.0 }
+ ]
+ divider:
+ backgroundColor: '#ababab'
+ width: 1
+ top: 0
+ bottom: 0
View
1  src/views/ui/index.coffee
@@ -5,3 +5,4 @@ module.exports =
NavGroup: require './nav_group'
Tabs: require './tabs'
Window: require './window'
+ TabbedBar: require './tabbed_bar'
View
42 src/views/ui/tabbed_bar/index.coffee
@@ -0,0 +1,42 @@
+styles = require('styles').ui.tabbedBar
+
+CollectionView = require 'views/base/collection'
+
+TabbedBarLabel = require './label'
+
+ViewPresenter = require 'presenters/view'
+
+# Platform Independent Tabbed Bar
+#
+# Creates a bar of buttons that maintains a
+# selected state
+#
+# Takes akes an array of labels on view creation,
+# but will also take an object that has an icon, like:
+# new TabbedBar
+# labels: [ 'First', {title :'Second', icon: '/images/second.png'} ]
+# index: 0
+
+module.exports = class TabbedBar extends CollectionView
+
+ attributes: styles.view
+
+ addAll: =>
+
+ @view.add @wrapper = @make 'View', styles.wrapper
+
+ @width = (100 / @collection.length) - 0.3
+
+ super
+
+ addOne: (presenter, index) =>
+
+ @wrapper.add (new TabbedBarLabel
+ presenter: presenter
+ controller: @controller
+ style:
+ width: "#{@width}%"
+ ).render().view
+
+ if index
+ @wrapper.add @make 'View', styles.divider
View
35 src/views/ui/tabbed_bar/label.coffee
@@ -0,0 +1,35 @@
+styles = require('styles').ui.tabbedBar.label
+
+View = require 'views/base'
+
+module.exports = class TabbedBarLabel extends View
+
+ attributes: styles.inactive
+
+ events: =>
+ click: =>
+ @presenter.collection.selectOne @presenter
+
+ initialize: ->
+
+ @bindToAndTrigger @presenter, 'change:selected', =>
+ @updateState @presenter.get 'selected'
+
+ updateState: (selected) =>
+
+ gradientStyle = if selected then 'active' else 'inactive'
+
+ @view.backgroundGradient = styles[gradientStyle].backgroundGradient
+
+ render: =>
+
+ if icon = @presenter.get 'icon'
+
+ @view.add @make 'View', styles.icon,
+ backgroundImage: icon
+
+ @view.add @make 'Label', styles.text,
+ text: @presenter.get 'label'
+ left: 20 if icon
+
+ @
Something went wrong with that request. Please try again.