teacup 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/Gemfile.lock +1 -1
- data/README.md +13 -0
- data/app/app_delegate.rb +2 -2
- data/app/controllers/constraints_controller.rb +92 -0
- data/lib/teacup/version.rb +1 -1
- data/lib/teacup/z_core_extensions/z_handlers.rb +1 -1
- data/spec/constraints_spec.rb +131 -0
- data/spec/present_modal_spec.rb +9 -0
- metadata +7 -5
- data/samples/OnePage/resources/you_didnt_see_this +0 -125
- data/spec/styling_modal_spec.rb +0 -9
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -3,6 +3,8 @@ Teacup
|
|
3
3
|
|
4
4
|
A community-driven DSL for creating user interfaces on the iphone.
|
5
5
|
|
6
|
+
[](https://travis-ci.org/rubymotion/teacup)
|
7
|
+
|
6
8
|
Using teacup, you can easily create and style layouts while keeping your code
|
7
9
|
dry. The goal is to offer a rubyesque (well, actually a rubymotion-esque) way
|
8
10
|
to create interfaces programmatically.
|
@@ -67,6 +69,17 @@ Teacup implements the `viewDidLoad` method and instantiates any views you
|
|
67
69
|
declare in the `layout` block. Make sure to call `super` if you implement
|
68
70
|
`viewDidLoad`, or you can use the "teacup-esque" `layoutDidLoad` method.
|
69
71
|
|
72
|
+
#### Styling Without Implicitly Adding the View
|
73
|
+
In the situation where you'd like to utilize the styles of Teacup without having your view
|
74
|
+
automatically added in `viewDidLoad`. You can accomplish this by calling the `layout` method instead of the block.
|
75
|
+
|
76
|
+
```ruby
|
77
|
+
# Custom Navigation Title still styled by Teacup
|
78
|
+
@custom_label = layout(UILabel, :custom_title)
|
79
|
+
self.navigationItem.titleView = @custom_label
|
80
|
+
```
|
81
|
+
|
82
|
+
Additionally, you can use the `style` method on a view to apply your styling inline (e.g. `@label.style(styles)`).
|
70
83
|
|
71
84
|
#### Showdown
|
72
85
|
|
data/app/app_delegate.rb
CHANGED
@@ -6,8 +6,8 @@ class AppDelegate
|
|
6
6
|
application.setStatusBarHidden(true, withAnimation:UIStatusBarAnimationSlide)
|
7
7
|
|
8
8
|
@window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
|
9
|
-
ctlr =
|
10
|
-
@window.rootViewController =
|
9
|
+
ctlr = ConstraintsController.new
|
10
|
+
@window.rootViewController = ctlr
|
11
11
|
@window.rootViewController.wantsFullScreenLayout = true
|
12
12
|
@window.makeKeyAndVisible
|
13
13
|
|
@@ -0,0 +1,92 @@
|
|
1
|
+
class ConstraintsController < UIViewController
|
2
|
+
attr :container,
|
3
|
+
:header_view,
|
4
|
+
:footer_view,
|
5
|
+
:center_view,
|
6
|
+
:left_view,
|
7
|
+
:top_right_view,
|
8
|
+
:btm_right_view
|
9
|
+
|
10
|
+
stylesheet :constraints
|
11
|
+
|
12
|
+
layout :root do
|
13
|
+
@container = subview(UIView, :container) do
|
14
|
+
@header_view = subview(UIView, :header)
|
15
|
+
@footer_view = subview(UIView, :footer)
|
16
|
+
@center_view = subview(UIView, :center) do
|
17
|
+
@left_view = subview(UIView, :left)
|
18
|
+
@top_right_view = subview(UIView, :top_right)
|
19
|
+
@btm_right_view = subview(UIView, :btm_right)
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
|
24
|
+
def supportedInterfaceOrientations
|
25
|
+
UIInterfaceOrientationMaskAllButUpsideDown
|
26
|
+
end
|
27
|
+
|
28
|
+
end
|
29
|
+
|
30
|
+
|
31
|
+
Teacup::Stylesheet.new :constraints do
|
32
|
+
|
33
|
+
style :root,
|
34
|
+
accessibilityLabel: 'root view'
|
35
|
+
|
36
|
+
style :container,
|
37
|
+
constraints: [:full],
|
38
|
+
backgroundColor: UIColor.blackColor
|
39
|
+
|
40
|
+
style :header,
|
41
|
+
backgroundColor: UIColor.blueColor,
|
42
|
+
constraints: [
|
43
|
+
:full_width,
|
44
|
+
:top,
|
45
|
+
constrain_height(52),
|
46
|
+
]
|
47
|
+
|
48
|
+
style :footer,
|
49
|
+
backgroundColor: UIColor.magentaColor,
|
50
|
+
constraints: [
|
51
|
+
:full_width,
|
52
|
+
:bottom,
|
53
|
+
constrain(:height).equals(:header, :height),
|
54
|
+
]
|
55
|
+
|
56
|
+
style :center,
|
57
|
+
backgroundColor: UIColor.lightGrayColor,
|
58
|
+
constraints: [
|
59
|
+
constrain_below(:header).plus(8),
|
60
|
+
constrain_above(:footer).minus(8),
|
61
|
+
constrain_left(8),
|
62
|
+
constrain_right(-8),
|
63
|
+
]
|
64
|
+
|
65
|
+
style :left,
|
66
|
+
backgroundColor: UIColor.redColor,
|
67
|
+
constraints: [
|
68
|
+
constrain_left(8),
|
69
|
+
constrain_top(8),
|
70
|
+
constrain(:right).plus(8).equals(:top_right, :left),
|
71
|
+
constrain(:right).plus(8).equals(:btm_right, :left),
|
72
|
+
constrain_bottom(-8),
|
73
|
+
constrain(:width).equals(:top_right, :width),
|
74
|
+
constrain(:width).equals(:btm_right, :width),
|
75
|
+
]
|
76
|
+
|
77
|
+
style :top_right,
|
78
|
+
backgroundColor: UIColor.greenColor,
|
79
|
+
constraints: [
|
80
|
+
constrain(:top).equals(:left, :top),
|
81
|
+
constrain_right(-8),
|
82
|
+
constrain(:height).equals(:btm_right, :height),
|
83
|
+
constrain(:bottom).plus(8).equals(:btm_right, :top),
|
84
|
+
]
|
85
|
+
|
86
|
+
style :btm_right,
|
87
|
+
backgroundColor: UIColor.yellowColor,
|
88
|
+
constraints: [
|
89
|
+
constrain(:bottom).equals(:left, :bottom),
|
90
|
+
]
|
91
|
+
|
92
|
+
end
|
data/lib/teacup/version.rb
CHANGED
@@ -123,7 +123,7 @@ Teacup.handler UIButton, :title { |target, title|
|
|
123
123
|
|
124
124
|
|
125
125
|
Teacup.handler UIButton, :titleColor { |target, color|
|
126
|
-
target.setTitleColor(color
|
126
|
+
target.setTitleColor(color, forState: UIControlStateNormal)
|
127
127
|
}
|
128
128
|
|
129
129
|
|
@@ -0,0 +1,131 @@
|
|
1
|
+
##|
|
2
|
+
##| PORTRAIT
|
3
|
+
##|
|
4
|
+
describe 'Using constraints in portrait' do
|
5
|
+
tests ConstraintsController
|
6
|
+
|
7
|
+
it 'should have a header view' do
|
8
|
+
@controller.header_view.frame.tap do |f|
|
9
|
+
f.origin.x.should == 0
|
10
|
+
f.origin.y.should == 0
|
11
|
+
f.size.width.should == @controller.container.frame.size.width
|
12
|
+
f.size.height.should == 52
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
it 'should have a footer view' do
|
17
|
+
@controller.footer_view.frame.tap do |f|
|
18
|
+
f.origin.x.should == 0
|
19
|
+
(f.origin.y + f.size.height).should == @controller.container.frame.size.height
|
20
|
+
f.size.width.should == @controller.container.frame.size.width
|
21
|
+
f.size.height.should == 52
|
22
|
+
end
|
23
|
+
end
|
24
|
+
|
25
|
+
it 'should have a center view' do
|
26
|
+
@controller.center_view.frame.tap do |f|
|
27
|
+
f.origin.x.should == 8
|
28
|
+
f.origin.y.should == @controller.header_view.frame.size.height + 8
|
29
|
+
f.size.width.should == @controller.container.frame.size.width - 16
|
30
|
+
f.size.height.should == @controller.container.frame.size.height - 120
|
31
|
+
end
|
32
|
+
end
|
33
|
+
|
34
|
+
it 'should have a left view' do
|
35
|
+
@controller.left_view.frame.tap do |f|
|
36
|
+
f.origin.x.should == 8
|
37
|
+
f.origin.y.should == 8
|
38
|
+
f.size.width.should == @controller.center_view.frame.size.width / 2 - 12
|
39
|
+
f.size.height.should == @controller.center_view.frame.size.height - 16
|
40
|
+
end
|
41
|
+
end
|
42
|
+
|
43
|
+
it 'should have a top_right view' do
|
44
|
+
@controller.top_right_view.frame.tap do |f|
|
45
|
+
f.origin.x.should == @controller.center_view.frame.size.width / 2 + 4
|
46
|
+
f.origin.y.should == 8
|
47
|
+
f.size.width.should == @controller.left_view.frame.size.width
|
48
|
+
f.size.height.should == @controller.left_view.frame.size.height / 2 - 4
|
49
|
+
end
|
50
|
+
end
|
51
|
+
|
52
|
+
it 'should have a btm_right view' do
|
53
|
+
@controller.btm_right_view.frame.tap do |f|
|
54
|
+
f.origin.x.should == @controller.center_view.frame.size.width / 2 + 4
|
55
|
+
f.origin.y.should == @controller.center_view.frame.size.height / 2 + 4
|
56
|
+
f.size.width.should == @controller.left_view.frame.size.width
|
57
|
+
f.size.height.should == @controller.top_right_view.frame.size.height
|
58
|
+
end
|
59
|
+
end
|
60
|
+
|
61
|
+
end
|
62
|
+
|
63
|
+
##|
|
64
|
+
##| LANDSCAPE
|
65
|
+
##|
|
66
|
+
describe 'Using constraints in landscape' do
|
67
|
+
tests ConstraintsController
|
68
|
+
|
69
|
+
before do
|
70
|
+
rotate_device :to => :landscape
|
71
|
+
end
|
72
|
+
|
73
|
+
after do
|
74
|
+
rotate_device :to => :portrait
|
75
|
+
end
|
76
|
+
|
77
|
+
it 'should have a header view' do
|
78
|
+
@controller.header_view.frame.tap do |f|
|
79
|
+
f.origin.x.should == 0
|
80
|
+
f.origin.y.should == 0
|
81
|
+
f.size.width.should == @controller.container.frame.size.width
|
82
|
+
f.size.height.should == 52
|
83
|
+
end
|
84
|
+
end
|
85
|
+
|
86
|
+
it 'should have a footer view' do
|
87
|
+
@controller.footer_view.frame.tap do |f|
|
88
|
+
f.origin.x.should == 0
|
89
|
+
(f.origin.y + f.size.height).should == @controller.container.frame.size.height
|
90
|
+
f.size.width.should == @controller.container.frame.size.width
|
91
|
+
f.size.height.should == 52
|
92
|
+
end
|
93
|
+
end
|
94
|
+
|
95
|
+
it 'should have a center view' do
|
96
|
+
@controller.center_view.frame.tap do |f|
|
97
|
+
f.origin.x.should == 8
|
98
|
+
f.origin.y.should == @controller.header_view.frame.size.height + 8
|
99
|
+
f.size.width.should == @controller.container.frame.size.width - 16
|
100
|
+
f.size.height.should == @controller.container.frame.size.height - 120
|
101
|
+
end
|
102
|
+
end
|
103
|
+
|
104
|
+
it 'should have a left view' do
|
105
|
+
@controller.left_view.frame.tap do |f|
|
106
|
+
f.origin.x.should == 8
|
107
|
+
f.origin.y.should == 8
|
108
|
+
f.size.width.should == @controller.center_view.frame.size.width / 2 - 12
|
109
|
+
f.size.height.should == @controller.center_view.frame.size.height - 16
|
110
|
+
end
|
111
|
+
end
|
112
|
+
|
113
|
+
it 'should have a top_right view' do
|
114
|
+
@controller.top_right_view.frame.tap do |f|
|
115
|
+
f.origin.x.should == @controller.center_view.frame.size.width / 2 + 4
|
116
|
+
f.origin.y.should == 8
|
117
|
+
f.size.width.should == @controller.left_view.frame.size.width
|
118
|
+
f.size.height.should == @controller.left_view.frame.size.height / 2 - 4
|
119
|
+
end
|
120
|
+
end
|
121
|
+
|
122
|
+
it 'should have a btm_right view' do
|
123
|
+
@controller.btm_right_view.frame.tap do |f|
|
124
|
+
f.origin.x.should == @controller.center_view.frame.size.width / 2 + 4
|
125
|
+
f.origin.y.should == @controller.center_view.frame.size.height / 2 + 4
|
126
|
+
f.size.width.should == @controller.left_view.frame.size.width
|
127
|
+
f.size.height.should == @controller.top_right_view.frame.size.height
|
128
|
+
end
|
129
|
+
end
|
130
|
+
|
131
|
+
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: teacup
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.3.
|
4
|
+
version: 1.3.2
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2013-04-
|
12
|
+
date: 2013-04-10 00:00:00.000000000 Z
|
13
13
|
dependencies: []
|
14
14
|
description: ! 'Teacup is a community-driven DSL for making CSS-like styling, and
|
15
15
|
layouts for
|
@@ -36,6 +36,7 @@ files:
|
|
36
36
|
- README.md
|
37
37
|
- Rakefile
|
38
38
|
- app/app_delegate.rb
|
39
|
+
- app/controllers/constraints_controller.rb
|
39
40
|
- app/controllers/first_controller.rb
|
40
41
|
- app/controllers/gradient_controller.rb
|
41
42
|
- app/controllers/landscape_only_controller.rb
|
@@ -88,16 +89,16 @@ files:
|
|
88
89
|
- samples/OnePage/Rakefile
|
89
90
|
- samples/OnePage/app/app_delegate.rb
|
90
91
|
- samples/OnePage/resources/Default-568h@2x.png
|
91
|
-
- samples/OnePage/resources/you_didnt_see_this
|
92
92
|
- samples/OnePage/spec/main_spec.rb
|
93
93
|
- samples/README.md
|
94
94
|
- spec/calculations_spec.rb
|
95
|
+
- spec/constraints_spec.rb
|
95
96
|
- spec/custom_class_spec.rb
|
96
97
|
- spec/gradient_spec.rb
|
97
98
|
- spec/main_spec.rb
|
99
|
+
- spec/present_modal_spec.rb
|
98
100
|
- spec/style_spec.rb
|
99
101
|
- spec/stylesheet_spec.rb
|
100
|
-
- spec/styling_modal_spec.rb
|
101
102
|
- spec/uiswitch_spec.rb
|
102
103
|
- spec/view_spec.rb
|
103
104
|
- teacup.gemspec
|
@@ -127,11 +128,12 @@ specification_version: 3
|
|
127
128
|
summary: A community-driven DSL for creating user interfaces on iOS.
|
128
129
|
test_files:
|
129
130
|
- spec/calculations_spec.rb
|
131
|
+
- spec/constraints_spec.rb
|
130
132
|
- spec/custom_class_spec.rb
|
131
133
|
- spec/gradient_spec.rb
|
132
134
|
- spec/main_spec.rb
|
135
|
+
- spec/present_modal_spec.rb
|
133
136
|
- spec/style_spec.rb
|
134
137
|
- spec/stylesheet_spec.rb
|
135
|
-
- spec/styling_modal_spec.rb
|
136
138
|
- spec/uiswitch_spec.rb
|
137
139
|
- spec/view_spec.rb
|
@@ -1,125 +0,0 @@
|
|
1
|
-
include SugarCube::Adjust
|
2
|
-
|
3
|
-
class AppDelegate
|
4
|
-
def application(application, didFinishLaunchingWithOptions:launchOptions)
|
5
|
-
@window = Kiln::KilnWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
|
6
|
-
ctlr = MyController.new
|
7
|
-
first = UINavigationController.alloc.initWithRootViewController(ctlr)
|
8
|
-
@window.rootViewController = first
|
9
|
-
@window.makeKeyAndVisible
|
10
|
-
true
|
11
|
-
end
|
12
|
-
end
|
13
|
-
|
14
|
-
|
15
|
-
Teacup::Stylesheet.new(:teacup) do
|
16
|
-
style :label,
|
17
|
-
color: :white,
|
18
|
-
background: :clear,
|
19
|
-
portrait: {
|
20
|
-
text: 'portrait',
|
21
|
-
},
|
22
|
-
landscape: {
|
23
|
-
text: 'landscape',
|
24
|
-
},
|
25
|
-
constraints: [
|
26
|
-
:center_x,
|
27
|
-
:center_y,
|
28
|
-
]
|
29
|
-
|
30
|
-
style :button,
|
31
|
-
constraints: [
|
32
|
-
:center_x,
|
33
|
-
constrain_below(:label).plus(0),
|
34
|
-
]
|
35
|
-
|
36
|
-
end
|
37
|
-
|
38
|
-
|
39
|
-
class MyController < UIViewController
|
40
|
-
stylesheet :teacup
|
41
|
-
|
42
|
-
layout do
|
43
|
-
@label = subview(UILabel, :label)
|
44
|
-
@button = subview(NiftyButton, :button)
|
45
|
-
|
46
|
-
auto do
|
47
|
-
metrics 'margin' => 20,
|
48
|
-
'height' => 75,
|
49
|
-
'top' => 95
|
50
|
-
horizontal '|-margin-[label]-margin-|'
|
51
|
-
horizontal '|-margin-[button]-margin-|'
|
52
|
-
vertical '|-[label]-margin-[button]-margin-|'
|
53
|
-
end
|
54
|
-
end
|
55
|
-
|
56
|
-
def viewDidAppear(animated)
|
57
|
-
@label.text = 'testing'
|
58
|
-
end
|
59
|
-
|
60
|
-
end
|
61
|
-
|
62
|
-
|
63
|
-
class NiftyButton < UIButton
|
64
|
-
attr_accessor :text
|
65
|
-
attr_accessor :font
|
66
|
-
|
67
|
-
def foreground_color
|
68
|
-
(@touched ? :black : :white).uicolor
|
69
|
-
end
|
70
|
-
|
71
|
-
def background_color
|
72
|
-
(@touched ? :white : :black).uicolor
|
73
|
-
end
|
74
|
-
|
75
|
-
def drawRect(rect)
|
76
|
-
background_color.setFill
|
77
|
-
UIBezierPath.bezierPathWithRoundedRect(bounds, cornerRadius:5).fill
|
78
|
-
|
79
|
-
foreground_color.uicolor.setFill
|
80
|
-
UIBezierPath.bezierPathWithRoundedRect(bounds.shrink(2), cornerRadius:5).fill
|
81
|
-
|
82
|
-
background_color.setFill
|
83
|
-
text.drawAtPoint([5, 5], withFont: font)
|
84
|
-
end
|
85
|
-
|
86
|
-
def text
|
87
|
-
@text || 'neat.'
|
88
|
-
end
|
89
|
-
|
90
|
-
def font
|
91
|
-
@font || :bold.uifont
|
92
|
-
end
|
93
|
-
|
94
|
-
def intrinsicContentSize
|
95
|
-
text.sizeWithFont(font).wider(10).taller(10)
|
96
|
-
end
|
97
|
-
|
98
|
-
def accessibilityLabel
|
99
|
-
text
|
100
|
-
end
|
101
|
-
|
102
|
-
def touchesBegan(touches, withEvent:event)
|
103
|
-
@touched = true
|
104
|
-
setNeedsDisplay
|
105
|
-
end
|
106
|
-
|
107
|
-
def touchesEnded(touches, withEvent:event)
|
108
|
-
@touched = false
|
109
|
-
setNeedsDisplay
|
110
|
-
end
|
111
|
-
|
112
|
-
def touchesCancelled(touches, withEvent:event)
|
113
|
-
@touched = false
|
114
|
-
setNeedsDisplay
|
115
|
-
end
|
116
|
-
|
117
|
-
def self.kiln
|
118
|
-
@kiln ||= {
|
119
|
-
'Content' => {
|
120
|
-
text: Kiln::TextEditor,
|
121
|
-
}
|
122
|
-
}
|
123
|
-
end
|
124
|
-
|
125
|
-
end
|