motion-pixatefreestyle 2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +120 -0
- data/lib/motion-pixatefreestyle.rb +1 -0
- data/lib/motion/project/pixatefreestyle.rb +94 -0
- metadata +64 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 27086a58c7cab6f92a218e9874a28d26c19d1727
|
4
|
+
data.tar.gz: 077e1555d27c761f2c843364689a7bead1ac18f0
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: eca8755e6424bd8ac45c2abe49d5cf296944cd022355ca5ab3f0014007d7b7e813f095cfe707559cbba143c258e4f5958b241a95c07a412d77814ff41336d586
|
7
|
+
data.tar.gz: 261fca43cc393602e32e36d26631c8b8d571c61ee1a3cbc18b85028f6000ab618ac76c1f4412636c102e2a097d7d6ca57464f50c5da7cb673232cbd9cff600bf
|
data/README.md
ADDED
@@ -0,0 +1,120 @@
|
|
1
|
+
RubyMotion-Pixate
|
2
|
+
=================
|
3
|
+
|
4
|
+
Pixate gem for RubyMotion.
|
5
|
+
|
6
|
+
|
7
|
+
## Requirements
|
8
|
+
|
9
|
+
- RubyMotion 1.0 or greater (see http://www.rubymotion.com).
|
10
|
+
- The *motion-pixate* 2.1 gem requires PixateFreestyle Framework 2.1
|
11
|
+
|
12
|
+
## Setup
|
13
|
+
|
14
|
+
1. Download the PixateFreestyle Framework package from http://www.pixate.com/ and copy the `PixateFreestyle.framework` folder into `vendor` directory (or alternatively just create a symbolic link). Create the `vendor` directory if it does not exist. You should have something like this.
|
15
|
+
```
|
16
|
+
$ ls vendor/PixateFreestyle.framework
|
17
|
+
/Headers/ PixateFreestyle Resources/ Versions/
|
18
|
+
```
|
19
|
+
|
20
|
+
2. Edit the `Rakefile` of your RubyMotion project and add the following require lines.
|
21
|
+
```ruby
|
22
|
+
require 'rubygems'
|
23
|
+
require 'motion-pixate'
|
24
|
+
```
|
25
|
+
|
26
|
+
3. Still in the `Rakefile`, set up the `framework` variable in your application configuration block.
|
27
|
+
```ruby
|
28
|
+
Motion::Project::App.setup do |app|
|
29
|
+
# ...
|
30
|
+
app.pixate.framework = 'vendor/PixateFreestyle.framework'
|
31
|
+
end
|
32
|
+
```
|
33
|
+
|
34
|
+
4. Note: As of Pixate 1.1 beta 4, you need to add the following line to your `app_delegate` file in the `application(application, didFinishLaunchingWithOptions:launchOptions)` method before the `@window.makeKeyAndVisible` call:
|
35
|
+
```ruby
|
36
|
+
@window.styleMode = PXStylingNormal
|
37
|
+
```
|
38
|
+
|
39
|
+
5. Create the `default.css` in `resources` directory, or copy it from the pixate-blue theme.
|
40
|
+
|
41
|
+
Note: To install the motion-pixate gem, see the [RubyGems site](https://rubygems.org/gems/motion-pixate).
|
42
|
+
|
43
|
+
## Example
|
44
|
+
|
45
|
+
We'll take the Timer example that comes with RubyMotion and add Pixate and quickly style the application. Start by following the Setup steps above to add Pixate to the Timer project.
|
46
|
+
|
47
|
+
Type `rake` to make sure everything is good so far. You should see the Timer app running.
|
48
|
+
|
49
|
+
![Timer](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/timer_run.png)
|
50
|
+
|
51
|
+
## Add the CSS File
|
52
|
+
|
53
|
+
In the `default.css` file you added prior, let's add a simple entry:
|
54
|
+
|
55
|
+
```css
|
56
|
+
button {
|
57
|
+
background-color: red;
|
58
|
+
}
|
59
|
+
```
|
60
|
+
|
61
|
+
`Rake` again and you should see this:
|
62
|
+
|
63
|
+
![Red Button](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/red_button.png)
|
64
|
+
|
65
|
+
Let's pretty this button up with the following CSS:
|
66
|
+
|
67
|
+
```css
|
68
|
+
button {
|
69
|
+
color : #446620;
|
70
|
+
background-color : linear-gradient(#87c44a, #b4da77);
|
71
|
+
border-width : 1px;
|
72
|
+
border-color : #84a254;
|
73
|
+
border-radius : 10px;
|
74
|
+
font-size : 15px;
|
75
|
+
font-weight : bold;
|
76
|
+
}
|
77
|
+
```
|
78
|
+
|
79
|
+
`Rake` again and you should see this:
|
80
|
+
|
81
|
+
![Green Button](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/green_button.png)
|
82
|
+
|
83
|
+
## Add a Styling ID
|
84
|
+
|
85
|
+
Lastly, let's change the background color. Let's add an ID to our background view. In the `timer_controller.rb` file, add the following line before the `end` of `viewDidLoad`:
|
86
|
+
|
87
|
+
```css
|
88
|
+
view.styleId = 'myView'
|
89
|
+
```
|
90
|
+
|
91
|
+
What's we've done here is add a `styleId` to the view so we can style it by name. Now add the following CSS after your button CSS that was already added:
|
92
|
+
|
93
|
+
```css
|
94
|
+
#myView {
|
95
|
+
background-color: linear-gradient(#000000, #f2f4f6);
|
96
|
+
}
|
97
|
+
```
|
98
|
+
|
99
|
+
Now you have a beautiful interface with just a few lines of CSS!
|
100
|
+
|
101
|
+
![Final App](https://raw.github.com/Pixate/RubyMotion-Pixate/master/Screenshots/background_view.png)
|
102
|
+
|
103
|
+
## SASS
|
104
|
+
|
105
|
+
Pixate gem supports [Sass](http://sass-lang.com/) to generate the stylesheet. Create the `sass` directory and `default.scss` with the `rake pixate:init` command. Then, `rake pixate:sass` command generates the stylesheet from `default.scss`.
|
106
|
+
|
107
|
+
You could specify the Sass output style through `style` environment variable. For example,
|
108
|
+
```
|
109
|
+
$ rake pixate:sass style=compressed
|
110
|
+
```
|
111
|
+
|
112
|
+
You could use `nested`, `expanded`, `compact` and `compressed` as output style.
|
113
|
+
|
114
|
+
## REPL
|
115
|
+
|
116
|
+
Pixate gem provides "style" method in REPL. You could change the stylesheet at the moment in REPL. For example,
|
117
|
+
```
|
118
|
+
(main)> style "button { color : blue; }"
|
119
|
+
(main)> style "button { background-color: red; border-radius: 20pt; }"
|
120
|
+
```
|
@@ -0,0 +1 @@
|
|
1
|
+
require "motion/project/pixatefreestyle"
|
@@ -0,0 +1,94 @@
|
|
1
|
+
unless defined?(Motion::Project::Config)
|
2
|
+
raise "This file must be required within a RubyMotion project Rakefile."
|
3
|
+
end
|
4
|
+
|
5
|
+
class PixateFreestyleConfig
|
6
|
+
attr_accessor :framework
|
7
|
+
|
8
|
+
def initialize(config)
|
9
|
+
@config = config
|
10
|
+
end
|
11
|
+
|
12
|
+
def framework=(path)
|
13
|
+
if @framework != path
|
14
|
+
@config.unvendor_project(@framework)
|
15
|
+
@framework = path
|
16
|
+
@config.vendor_project(path, :static, :products => ['PixateFreestyle'], :headers_dir => 'Headers')
|
17
|
+
create_code
|
18
|
+
end
|
19
|
+
end
|
20
|
+
|
21
|
+
private
|
22
|
+
|
23
|
+
def create_code
|
24
|
+
code = <<EOF
|
25
|
+
# This file is automatically generated. Do not edit.
|
26
|
+
|
27
|
+
def style(str)
|
28
|
+
PixateFreestyle.initializePixateFreestyle
|
29
|
+
PixateFreestyle.styleSheetFromSource(str, withOrigin:0)
|
30
|
+
PixateFreestyle.updateStylesForAllViews
|
31
|
+
end
|
32
|
+
EOF
|
33
|
+
pixate_file = './app/pixatefreestyle_code.rb'
|
34
|
+
create_stub(pixate_file, code)
|
35
|
+
add_file(pixate_file)
|
36
|
+
end
|
37
|
+
|
38
|
+
def create_stub(path, code)
|
39
|
+
if !File.exist?(path) or File.read(path) != code
|
40
|
+
File.open(path, 'w') { |io| io.write(code) }
|
41
|
+
end
|
42
|
+
end
|
43
|
+
|
44
|
+
def add_file(path)
|
45
|
+
files = @config.files.flatten
|
46
|
+
@config.files << path unless files.find { |x| File.expand_path(x) == File.expand_path(path) }
|
47
|
+
end
|
48
|
+
end
|
49
|
+
|
50
|
+
module Motion; module Project; class Config
|
51
|
+
|
52
|
+
variable :pixatefreestyle
|
53
|
+
|
54
|
+
def pixatefreestyle
|
55
|
+
@pixatefreestyle ||= PixateFreestyleConfig.new(self)
|
56
|
+
end
|
57
|
+
|
58
|
+
end; end; end
|
59
|
+
|
60
|
+
namespace 'pixatefreestyle' do
|
61
|
+
desc "Create initial stylesheet files"
|
62
|
+
task :init do
|
63
|
+
if Dir.glob("sass/default.s[ac]ss").empty?
|
64
|
+
mkdir_p "sass"
|
65
|
+
touch "sass/default.scss"
|
66
|
+
App.info 'Create', 'sass/default.scss'
|
67
|
+
end
|
68
|
+
|
69
|
+
unless File.exist?("resources/default.css")
|
70
|
+
mkdir_p "resources"
|
71
|
+
touch "resources/default.css"
|
72
|
+
App.info 'Create', 'resources/default.css'
|
73
|
+
end
|
74
|
+
end
|
75
|
+
|
76
|
+
desc "Compile SASS/SCSS file"
|
77
|
+
task :sass do
|
78
|
+
unless sass_path = Dir.glob("sass/default.s[ac]ss").first
|
79
|
+
warn "Not found `sass/default.scss'"
|
80
|
+
exit
|
81
|
+
end
|
82
|
+
|
83
|
+
unless File.exist?("resources")
|
84
|
+
mkdir_p "resources"
|
85
|
+
end
|
86
|
+
|
87
|
+
style = ""
|
88
|
+
if ENV['style'].to_s.length > 0
|
89
|
+
style = "--style #{ENV['style']}"
|
90
|
+
end
|
91
|
+
sh "sass #{sass_path} resources/default.css #{style}"
|
92
|
+
App.info 'Compile', sass_path
|
93
|
+
end
|
94
|
+
end
|
metadata
ADDED
@@ -0,0 +1,64 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: motion-pixatefreestyle
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: '2.1'
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Paul Colton
|
8
|
+
- Shizuo Fujita
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2014-02-24 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: sass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
requirements:
|
18
|
+
- - '>='
|
19
|
+
- !ruby/object:Gem::Version
|
20
|
+
version: '0'
|
21
|
+
type: :runtime
|
22
|
+
prerelease: false
|
23
|
+
version_requirements: !ruby/object:Gem::Requirement
|
24
|
+
requirements:
|
25
|
+
- - '>='
|
26
|
+
- !ruby/object:Gem::Version
|
27
|
+
version: '0'
|
28
|
+
description: Pixate Freestyle integration for RubyMotion projects
|
29
|
+
email:
|
30
|
+
- paul@pixate.com
|
31
|
+
- watson1978@gmail.com
|
32
|
+
executables: []
|
33
|
+
extensions: []
|
34
|
+
extra_rdoc_files: []
|
35
|
+
files:
|
36
|
+
- README.md
|
37
|
+
- lib/motion/project/pixatefreestyle.rb
|
38
|
+
- lib/motion-pixatefreestyle.rb
|
39
|
+
homepage: https://github.com/Pixate/RubyMotion-PixateFreestyle
|
40
|
+
licenses:
|
41
|
+
- Apache-2.0
|
42
|
+
metadata: {}
|
43
|
+
post_install_message:
|
44
|
+
rdoc_options: []
|
45
|
+
require_paths:
|
46
|
+
- lib
|
47
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
48
|
+
requirements:
|
49
|
+
- - '>='
|
50
|
+
- !ruby/object:Gem::Version
|
51
|
+
version: '0'
|
52
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
53
|
+
requirements:
|
54
|
+
- - '>='
|
55
|
+
- !ruby/object:Gem::Version
|
56
|
+
version: '0'
|
57
|
+
requirements: []
|
58
|
+
rubyforge_project:
|
59
|
+
rubygems_version: 2.1.11
|
60
|
+
signing_key:
|
61
|
+
specification_version: 4
|
62
|
+
summary: motion-pixatefreestyle allows RubyMotion projects to easily embed the Pixate
|
63
|
+
Freestyle Framework.
|
64
|
+
test_files: []
|