motion-prime 0.3.2 → 0.3.3

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MjY2ZDk2NzU1ZmRhZTE4Zjc0OTk5ZmQzYmI3MzdhYmM5ZWM5M2VlOA==
+    YzZhZGNhZTIzZDliM2I2MzY3ZTE1NjdmODc2NmFmYjkyNjdjN2NhYw==
   data.tar.gz: !binary |-
-    OGQxMTU0YWRhZTAzMGQ1YTc3NDdkYTU2NThlOTcwZTMwY2Y4NzJhOQ==
+    MDQ2ZmI4ZDMzNjI2MDVjOWQ5NDY2ZmFlZGQwM2RmNWYyNDc4N2IyZg==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    NmQxZGEyNjg5OGVhNGU3OTA4ZWIwNmQ0YTMyMGVjYjZjYzEwYzE4NTlkNzZk
-    NjdmOTRmNWUyMjkyOGQ0NTY4MzM3NTgwZDljOGU3MTZhN2Y1NzA2ZWU4N2Nl
-    Zjg3Mzk2Zjk0YmQ2NDQ0OGYwOTQ3MjZhOTQ1OWIyNTQyNzNlMGE=
+    NjA4ZTk1ZmZmYmM4NmU4YWRkN2UwYWEzMWI3ZDJkY2ZlZDdkNjc0MDA2OGE0
+    ZGQ0ZTM3NGFlNDBiMjRmYzNkMmQyZWQ1MDkzMjRlMzcxYTc3NWJmMGJjODM0
+    MWVlNzYwMzViNjMxMzU2NjIyNWQxZTJjZTUxMGE0MDNkMmFmOTY=
   data.tar.gz: !binary |-
-    ZGUxNDFjMTk3MmZkM2ZkMGY3ZDRkMjA5MThjNjA5YTJmN2U1MTE3ODBmZTc5
-    NDdlNjNkYzdiZWJiZWZiNGRjZDg4M2I4MjhlOWY0NjQ1ZTJhY2E5N2ZmZjRi
-    ODJkMTk0ZDc0ZDdhZTYzNjhjMjM1YmEyZDRmMTg4ZTkyZjFlMzg=
+    YTE2MTY4ZTE5YjVkZjgwYWZhYzhkMDQzZmUzYzA3ZWYxZGFjYTAyOGQ1M2U5
+    MWZlMThkYmIxYTJlN2VhZTE5NWM5OWY0MzlkYmU4NjgwMGRkZjZiNzdlM2Jk
+    ZTQwMjlkNzA4MmExMjFhNTg3OTc1M2Q4MzQ4MzliMGY4NmYzMmQ=

data/CHANGELOG.md

@@ -1,3 +1,6 @@
+=== 0.3.3
+* Screen tab bar support
+
 === 0.3.2
 * Refactor screens
 * Fix paddings for draw sections

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    motion-prime (0.3.2)
+    motion-prime (0.3.3)
       bubble-wrap
       cocoapods
       methadone

data/README.md

@@ -66,6 +66,16 @@ The main feature of MotionPrime is one more layer on UI elements: Section.
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
 
+## Documentation
+
+We are using Docco (http://jashkenas.github.io/docco/) to generate documentation.
+
+Please install the tool and run this to update documentation:
+
+```
+$ cd doc && docco code/*.rb
+```
+
 ## Thanks for using MotionPrime!
 
 Hope, you'll enjoy MotionPrime!

data/doc/code/getting_started.rb

@@ -0,0 +1,61 @@
+# **1. Install required tools.**
+---
+
+# * Ruby 1.9.3 or newer.
+$ rvm install 2.0.0
+
+# * RubyMotion.
+Visit http://www.rubymotion.com
+
+# **2. Create application delegate.**
+#
+# You should rewrite the `on_load` method, which will be runned after starting application.
+# Note: you should always use AppDelegate class name.
+
+class AppDelegate < Prime::BaseAppDelegate
+  def on_load(app, options)
+    open_screen MainScreen.new
+  end
+end
+
+# **3. Create the main screen.**
+#
+# You should rewrite the `render` method, which will be runned after opening screen.
+
+class MainScreen < Prime::BaseScreen
+  title 'Main screen'
+
+  def render
+    @main_section = MyProfileSection.new(model: User.first)
+    @main_section.render(to: self)
+  end
+end
+
+# **4. Create your first section.**
+#
+# "Section" is something like helper, which contains "Elements".
+#
+# Each element will be added to the parent screen when you run `section.render(to: screen)`
+
+class MyProfileSection < Prime::BaseSection
+  element :title, text: "Hello World"
+  element :avatar, image: "images/avatar.png", type: :image
+end
+
+# **5. Create your first stylesheet file.**
+#
+# Styles will be applied to each element in section. 
+# The simplest rule by default is: `:section-name_:element-name`.
+#
+# E.g. if you have 'MyProfileSection' (the name for section by default will be - `my_profile`) 
+# and 'title' element, then you should use `my_profile_title` style name.
+
+Prime::Styles.define do
+  style :my_profile_title, width: 300, height: 20
+end
+
+# Also, you can pass namespace to `define` method.
+
+Prime::Styles.define :my_profile do
+  style :title, width: 300, height: 20
+end

data/doc/docs/docco.css

@@ -0,0 +1,500 @@
+/*--------------------- Typography ----------------------------*/
+
+@font-face {
+    font-family: 'aller-light';
+    src: url('public/fonts/aller-light.eot');
+    src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
+         url('public/fonts/aller-light.woff') format('woff'),
+         url('public/fonts/aller-light.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'aller-bold';
+    src: url('public/fonts/aller-bold.eot');
+    src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
+         url('public/fonts/aller-bold.woff') format('woff'),
+         url('public/fonts/aller-bold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'novecento-bold';
+    src: url('public/fonts/novecento-bold.eot');
+    src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'),
+         url('public/fonts/novecento-bold.woff') format('woff'),
+         url('public/fonts/novecento-bold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/*--------------------- Layout ----------------------------*/
+html { height: 100%; }
+body {
+  font-family: "aller-light";
+  font-size: 14px;
+  line-height: 18px;
+  color: #30404f;
+  margin: 0; padding: 0;
+  height:100%;
+}
+#container { min-height: 100%; }
+
+a {
+  color: #000;
+}
+
+b, strong {
+  font-weight: normal;
+  font-family: "aller-bold";
+}
+
+p, ul, ol {
+  margin: 15px 0 0px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #112233;
+  line-height: 1em;
+  font-weight: normal;
+  font-family: "novecento-bold";
+  text-transform: uppercase;
+  margin: 30px 0 15px 0;
+}
+
+h1 {
+  margin-top: 40px;
+}
+
+hr {
+  border: 0;
+  background: 1px solid #ddd;
+  height: 1px;
+  margin: 20px 0;
+}
+
+pre, tt, code {
+  font-size: 12px; line-height: 16px;
+  font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
+  margin: 0; padding: 0;
+}
+  .annotation pre {
+    display: block;
+    margin: 0;
+    padding: 7px 10px;
+    background: #fcfcfc;
+    -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.1);
+    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
+    box-shadow:         inset 0 0 10px rgba(0,0,0,0.1);
+    overflow-x: auto;
+  }
+    .annotation pre code {
+      border: 0;
+      padding: 0;
+      background: transparent;
+    }
+
+
+blockquote {
+  border-left: 5px solid #ccc;
+  margin: 0;
+  padding: 1px 0 1px 1em;
+}
+  .sections blockquote p {
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 12px; line-height: 16px;
+    color: #999;
+    margin: 10px 0 0;
+    white-space: pre-wrap;
+  }
+
+ul.sections {
+  list-style: none;
+  padding:0 0 5px 0;;
+  margin:0;
+}
+
+/*
+  Force border-box so that % widths fit the parent
+  container without overlap because of margin/padding.
+
+  More Info : http://www.quirksmode.org/css/box.html
+*/
+ul.sections > li > div {
+  -moz-box-sizing: border-box;    /* firefox */
+  -ms-box-sizing: border-box;     /* ie */
+  -webkit-box-sizing: border-box; /* webkit */
+  -khtml-box-sizing: border-box;  /* konqueror */
+  box-sizing: border-box;         /* css3 */
+}
+
+
+/*---------------------- Jump Page -----------------------------*/
+#jump_to, #jump_page {
+  margin: 0;
+  background: white;
+  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
+  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
+  font: 16px Arial;
+  cursor: pointer;
+  text-align: right;
+  list-style: none;
+}
+
+#jump_to a {
+  text-decoration: none;
+}
+
+#jump_to a.large {
+  display: none;
+}
+#jump_to a.small {
+  font-size: 22px;
+  font-weight: bold;
+  color: #676767;
+}
+
+#jump_to, #jump_wrapper {
+  position: fixed;
+  right: 0; top: 0;
+  padding: 10px 15px;
+  margin:0;
+}
+
+#jump_wrapper {
+  display: none;
+  padding:0;
+}
+
+#jump_to:hover #jump_wrapper {
+  display: block;
+}
+
+#jump_page {
+  padding: 5px 0 3px;
+  margin: 0 0 25px 25px;
+}
+
+#jump_page .source {
+  display: block;
+  padding: 15px;
+  text-decoration: none;
+  border-top: 1px solid #eee;
+}
+
+#jump_page .source:hover {
+  background: #f5f5ff;
+}
+
+#jump_page .source:first-child {
+}
+
+/*---------------------- Low resolutions (> 320px) ---------------------*/
+@media only screen and (min-width: 320px) {
+  .pilwrap { display: none; }
+
+  ul.sections > li > div {
+    display: block;
+    padding:5px 10px 0 10px;
+  }
+
+  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
+    padding-left: 30px;
+  }
+
+  ul.sections > li > div.content {
+    background: #f5f5ff;
+    overflow-x:auto;
+    -webkit-box-shadow: inset 0 0 5px #e5e5ee;
+    box-shadow: inset 0 0 5px #e5e5ee;
+    border: 1px solid #dedede;
+    margin:5px 10px 5px 10px;
+    padding-bottom: 5px;
+  }
+
+  ul.sections > li > div.annotation pre {
+    margin: 7px 0 7px;
+    padding-left: 15px;
+  }
+
+  ul.sections > li > div.annotation p tt, .annotation code {
+    background: #f8f8ff;
+    border: 1px solid #dedede;
+    font-size: 12px;
+    padding: 0 0.2em;
+  }
+}
+
+/*----------------------  (> 481px) ---------------------*/
+@media only screen and (min-width: 481px) {
+  #container {
+    position: relative;
+  }
+  body {
+    background-color: #F5F5FF;
+    font-size: 15px;
+    line-height: 21px;
+  }
+  pre, tt, code {
+    line-height: 18px;
+  }
+  p, ul, ol {
+    margin: 0 0 15px;
+  }
+
+
+  #jump_to {
+    padding: 5px 10px;
+  }
+  #jump_wrapper {
+    padding: 0;
+  }
+  #jump_to, #jump_page {
+    font: 10px Arial;
+    text-transform: uppercase;
+  }
+  #jump_page .source {
+    padding: 5px 10px;
+  }
+  #jump_to a.large {
+    display: inline-block;
+  }
+  #jump_to a.small {
+    display: none;
+  }
+
+
+
+  #background {
+    position: absolute;
+    top: 0; bottom: 0;
+    width: 350px;
+    background: #fff;
+    border-right: 1px solid #e5e5ee;
+    z-index: -1;
+  }
+
+  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
+    padding-left: 40px;
+  }
+
+  ul.sections > li {
+    white-space: nowrap;
+  }
+
+  ul.sections > li > div {
+    display: inline-block;
+  }
+
+  ul.sections > li > div.annotation {
+    max-width: 350px;
+    min-width: 350px;
+    min-height: 5px;
+    padding: 13px;
+    overflow-x: hidden;
+    white-space: normal;
+    vertical-align: top;
+    text-align: left;
+  }
+  ul.sections > li > div.annotation pre {
+    margin: 15px 0 15px;
+    padding-left: 15px;
+  }
+
+  ul.sections > li > div.content {
+    padding: 13px;
+    vertical-align: top;
+    background: #f5f5ff;
+    border: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .pilwrap {
+    position: relative;
+    display: inline;
+  }
+
+  .pilcrow {
+    font: 12px Arial;
+    text-decoration: none;
+    color: #454545;
+    position: absolute;
+    top: 3px; left: -20px;
+    padding: 1px 2px;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s linear;
+  }
+    .for-h1 .pilcrow {
+      top: 47px;
+    }
+    .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
+      top: 35px;
+    }
+
+  ul.sections > li > div.annotation:hover .pilcrow {
+    opacity: 1;
+  }
+}
+
+/*---------------------- (> 1025px) ---------------------*/
+@media only screen and (min-width: 1025px) {
+
+  body {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  #background {
+    width: 525px;
+  }
+  ul.sections > li > div.annotation {
+    max-width: 525px;
+    min-width: 525px;
+    padding: 10px 25px 1px 50px;
+  }
+  ul.sections > li > div.content {
+    padding: 9px 15px 16px 25px;
+  }
+}
+
+/*---------------------- Syntax Highlighting -----------------------------*/
+
+td.linenos { background-color: #f0f0f0; padding-right: 10px; }
+span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  color: #000;
+  background: #f8f8ff
+}
+
+pre .comment,
+pre .template_comment,
+pre .diff .header,
+pre .javadoc {
+  color: #408080;
+  font-style: italic
+}
+
+pre .keyword,
+pre .assignment,
+pre .literal,
+pre .css .rule .keyword,
+pre .winutils,
+pre .javascript .title,
+pre .lisp .title,
+pre .subst {
+  color: #954121;
+  /*font-weight: bold*/
+}
+
+pre .number,
+pre .hexcolor {
+  color: #40a070
+}
+
+pre .string,
+pre .tag .value,
+pre .phpdoc,
+pre .tex .formula {
+  color: #219161;
+}
+
+pre .title,
+pre .id {
+  color: #19469D;
+}
+pre .params {
+  color: #00F;
+}
+
+pre .javascript .title,
+pre .lisp .title,
+pre .subst {
+  font-weight: normal
+}
+
+pre .class .title,
+pre .haskell .label,
+pre .tex .command {
+  color: #458;
+  font-weight: bold
+}
+
+pre .tag,
+pre .tag .title,
+pre .rules .property,
+pre .django .tag .keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+pre .attribute,
+pre .variable,
+pre .instancevar,
+pre .lisp .body {
+  color: #008080
+}
+
+pre .regexp {
+  color: #B68
+}
+
+pre .class {
+  color: #458;
+  font-weight: bold
+}
+
+pre .symbol,
+pre .ruby .symbol .string,
+pre .ruby .symbol .keyword,
+pre .ruby .symbol .keymethods,
+pre .lisp .keyword,
+pre .tex .special,
+pre .input_number {
+  color: #990073
+}
+
+pre .builtin,
+pre .constructor,
+pre .built_in,
+pre .lisp .title {
+  color: #0086b3
+}
+
+pre .preprocessor,
+pre .pi,
+pre .doctype,
+pre .shebang,
+pre .cdata {
+  color: #999;
+  font-weight: bold
+}
+
+pre .deletion {
+  background: #fdd
+}
+
+pre .addition {
+  background: #dfd
+}
+
+pre .diff .change {
+  background: #0086b3
+}
+
+pre .chunk {
+  color: #aaa
+}
+
+pre .tex .formula {
+  opacity: 0.5;
+}