iugu-ux 0.6.0

data/Rakefile

@@ -0,0 +1,14 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+#APP_RAKEFILE = File.expand_path("../sandbox/Rakefile", __FILE__)
+#load 'rails/tasks/engine.rake'
+
+
+Bundler::GemHelper.install_tasks
+
+task :default => :test

data/lib/iugu-ux.rb

@@ -0,0 +1,41 @@
+require 'haml'
+require 'compass'
+
+require "iugu-ux/railtie" if defined?(::Rails)
+
+require "iugu-ux/version"
+
+module IuguUX
+
+  def self.src
+    @@src
+  end
+
+  def self.src=(src)
+    @@src = src
+  end
+
+  self.src = %w( iugu-ux.css iugu-ux.js vendor.js )
+
+  class << self
+    def sprite_load_path
+      File.join( File.expand_path("../..",__FILE__),'vendor','assets','sprites')
+    end
+
+    def root
+      File.join( File.expand_path("../..",__FILE__))
+    end
+
+    def assets_path
+      File.join( File.expand_path("../..",__FILE__),'vendor','assets')
+    end
+  end
+
+  def initialize
+  end
+
+  def self.setup
+    yield self
+  end
+
+end

data/lib/iugu-ux/railtie.rb

@@ -0,0 +1,13 @@
+require 'haml-rails'
+require 'compass-rails'
+
+module IuguUX
+  class Engine < Rails::Engine
+      initializer 'iugu-ux.setup' do |app|
+        app.config.assets.precompile += IuguUX.src
+        app.config.compass.sprite_load_path << app.root.join('app','assets','sprites')
+        app.config.compass.sprite_load_path << IuguUX.sprite_load_path 
+      end
+
+  end
+end

data/lib/iugu-ux/version.rb

@@ -0,0 +1,3 @@
+module IuguUX
+  VERSION = "0.6.0"
+end

data/sandbox/Rakefile

@@ -0,0 +1,7 @@
+#!/usr/bin/env rake
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Dummy::Application.load_tasks

data/sandbox/app/assets/javascripts/web-app/config.js.erb

@@ -0,0 +1,9 @@
+var app_domain = 'iugu-ux.dev';
+
+var enable_debug = true;
+
+var enable_ajax_on_subdomain = false;
+var api_base = 'http://iugu-ux.dev/';
+var subdomain_xdr_url = '';
+
+var app_root = '/';

data/sandbox/app/assets/javascripts/web-app/i18n-languages.js.erb

@@ -0,0 +1,12 @@
+<%=
+  # UTF-8 (Fix for Sprockets UTF-8 AutoDetect: á)
+  locale_directory = "#{File.expand_path(File.dirname(__FILE__))}/locale"
+  files = Dir.glob("#{locale_directory}/*.json")
+  content = "var AVAILABLE_LOCALES = Array();\r\n"
+  files.each do |filename|
+    language_name = File.basename(filename, ".json")
+    contents = File.open(filename,"r:UTF-8").read
+    content += "AVAILABLE_LOCALES['#{language_name}'] = #{contents}\r\n"
+  end
+  content
+%>

data/sandbox/app/assets/javascripts/web-app/locale/en.json

@@ -0,0 +1,11 @@
+{
+  'active_record': {
+    'errors': {
+      'invalid': 'is invalid'
+    }
+  },
+  'quantity': {
+    'coupom': 'coupom',
+    'coupoms': 'coupoms'
+  }
+}

data/sandbox/app/assets/javascripts/web-app/locale/pt-BR.json

@@ -0,0 +1,11 @@
+{
+  'active_record': {
+    'errors': {
+      'invalid': 'é inválido'
+    }
+  },
+  'quantity': {
+    'coupom': 'cupom',
+    'coupoms': 'cupons'
+  }
+}

data/sandbox/app/assets/javascripts/web-app/models.js

@@ -0,0 +1 @@
+//= require_tree ./models

data/sandbox/app/assets/javascripts/web-app/presenters.js

@@ -0,0 +1 @@
+//= require_tree ./presenters

data/sandbox/app/assets/javascripts/web-app/presenters/main-view.jst.eco

@@ -0,0 +1,50 @@
+<section id="app-content">
+</section>
+<div class="ui-box">
+  <div class="sidebar">
+    SIDEBAR
+  </div>
+  <div class="content handle-sidebar">
+    <div class="small-navigation">
+      <div class="toggle-sidebar"><div class="iux-default-menu-icon"></div></div>
+    </div>
+    <div style="position:absolute; overflow: hidden; top:48px; bottom:1px; left:2px; right:1px">
+      <div style="width:100%;height:100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: relative">
+        <div id="cap"></div>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  $(function() {
+
+    function toggleSidebar( button ) {
+      var uibox = $( button ).parents('.ui-box');
+      var uisidebar = uibox.children('.sidebar');
+      if ( uisidebar.css('z-index') != '1000' ) return;
+      uibox.toggleClass('open');
+    }
+
+    $('.ui-box .sidebar').bind('click', function(evt) { toggleSidebar( this ) });
+    $('.toggle-sidebar').bind('click', function(evt) { toggleSidebar(this) });
+
+  });
+</script>

data/sandbox/app/assets/javascripts/web-app/usecode.js

@@ -0,0 +1 @@
+//= require_tree ./usecode

data/sandbox/app/assets/javascripts/web-app/usecode/root-view.coffee

@@ -0,0 +1,13 @@
+RootView = Backbone.View.extend
+  el: "#app"
+  initialize: ->
+    _.bindAll @, 'render'
+
+  render: ->
+    $(@el).html JST["web-app/presenters/main-view"]
+
+    $('#cap').html $('html').attr('class') + ' ' + navigator.oscpu + ' ' + navigator.platform + navigator.userAgent
+
+    @
+
+@RootView = RootView

data/sandbox/app/assets/javascripts/web-app/usecode/router.coffee

@@ -0,0 +1,19 @@
+MainRouter = Backbone.Router.extend
+  initialize: ->
+    window.Root = new window.RootView()
+    window.Root.render() if window.Root
+
+  routes:
+    ""                        : "index"
+    "/"                       : "index"
+
+  clearView: () ->
+    if @aView
+      $(@aView.el).empty()
+      @aView = undefined
+
+  index: ->
+    @clearView()
+
+$ ->
+  app.registerRouter( MainRouter )

data/sandbox/app/assets/stylesheets/application.css

@@ -0,0 +1,3 @@
+/*
+ *= require 'experiment.sass'
+*/

data/sandbox/app/assets/stylesheets/default-sprites.sass

@@ -0,0 +1,8 @@
+@import "iugu-ux/core"
+
+@include for-hd()
+  $assets-hd: sprite-map("assets-hd/*.png", $layout: smart, $spacing: 0px, $cleanup: true, $sprite-dimensions: true)
+  @include build-sprites("assets", $assets-hd, retina)
+  
+$assets: sprite-map("assets/*.png", $layout: smart, $spacing: 0px, $cleanup: true, $sprite-dimensions: true)
+@include build-sprites("assets", $assets, normal)

data/sandbox/app/assets/stylesheets/experiment.sass

@@ -0,0 +1,178 @@
+@import "iugu-ux/core"
+@import "compass/utilities/general/clearfix"
+
+// CINZA
+// $background_base_color: #ECECEC
+// $base_ui_color: #F1ECE7
+$background_base_color: #3C5A76
+$base_ui_color: #ECECEC
+$mobile_navigation_color: #3D3D3D
+$header_ui_color: #5282BC
+
+$desktop_navigation_size: 256px
+$mobile_navigation_size: 256px
+
+$toolbar_height: 44px
+
+// Color Palette
+$background_highlight_color: lighten( $background_base_color, 10 )
+
+$base_ui_color_lighten: lighten( $base_ui_color, 10 )
+$base_ui_color_darken: darken( $base_ui_color, 10 )
+$base_ui_color_highlight: lighten( $base_ui_color, 50 )
+$base_ui_color_shadow: darken( $base_ui_color, 50 )
+
+$secondary_ui_color: darken( $base_ui_color, 3 )
+$secondary_ui_color_lighten: lighten( $secondary_ui_color, 10 )
+$secondary_ui_color_darken: darken( $secondary_ui_color, 10 )
+$secondary_ui_color_highlight: lighten( $secondary_ui_color, 50 )
+$secondary_ui_color_shadow: darken( $secondary_ui_color, 50 )
+
+$header_ui_color_lighten: lighten(   $header_ui_color, 10 )
+$header_ui_color_darken: darken(     $header_ui_color, 10 )
+$header_ui_color_highlight: lighten( $header_ui_color, 50 )
+$header_ui_color_shadow: darken(     $header_ui_color, 50 )
+
+html,body,#app
+  height: 100%
+  width: 100%
+  position: relative
+  @include box-sizing( border-box )
+
+html,body
+  overflow: hidden
+
+body
+  background: $background_base_color
+
+.ui-box
+  @include pie-clearfix
+  background: $base_ui_color
+  width: 100%
+  margin-left: auto
+  margin-right: auto
+  position: relative
+  color: #666
+  height: 100%
+  @include box-sizing( border-box )
+  border-left: 1px solid $base_ui_color_highlight
+  border-top: 1px solid $base_ui_color_highlight
+  border-right: 1px solid $base_ui_color
+  border-bottom: 1px solid $base_ui_color
+
+  .sidebar
+    float: left
+    width: $desktop_navigation_size 
+    height: 100%
+    background: $secondary_ui_color
+    border-right: 1px solid $secondary_ui_color_darken
+    padding: 20px
+    @include box-sizing( border-box )
+    position: relative
+
+  .content
+    height: 100%
+    position: relative
+    @include background( top, linear-gradient( lighten($base_ui_color, 3) 44px, $base_ui_color ) )
+
+    @include box-sizing( border-box )
+    .small-navigation
+      display: none
+    
+    &.handle-sidebar
+      border-left: 1px solid $secondary_ui_color_lighten
+      margin-left: $desktop_navigation_size
+
+@include for-large-screens()
+  body
+    padding: 20px
+    @include background-image( radial-gradient(top center, circle, $background_highlight_color 0px, rgba($background_highlight_color,0) 300px) ,linear-gradient(bottom, $background_highlight_color 30%,$background_base_color 70%) )
+  .ui-box
+    max-width: 980px
+    @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.25) 0px 0px 20px )
+    border: 1px solid #FF0000, 2px solid #00FFFF
+    @include border-radius( 4px, 4px )
+
+@include for-small-screens()
+  body
+    background: $mobile_navigation_color
+
+  .mobile
+    .ui-box
+      .content.handle-sidebar
+        @include translate3d(0,0,0)
+
+  .ui-box
+    border: none
+    background: $mobile_navigation_color
+
+    .sidebar
+      float: none
+      position: absolute
+      z-index: 1000
+      width: $mobile_navigation_size
+      border: none
+      background: $mobile_navigation_color
+      visibility: hidden
+
+      @include transition-property( visibility, border, margin )
+      @include transition-delay( 0.3s )
+
+    .content.handle-sidebar
+      margin-left: 0px
+      border-left: none
+      z-index: 2000
+      min-width: 320px
+      @include transition-property( all )
+      @include transition-duration( 0.3s )
+      @include transition-timing-function( ease )
+
+    // A merda esta aki
+    .content
+      @include background( top, linear-gradient( lighten($base_ui_color, 3) 44px, $base_ui_color ) )
+      @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.8) 0px 0px 15px )
+      border-left: 1px solid $base_ui_color_highlight
+      border-top: 1px solid $base_ui_color_highlight
+      border-right: 1px solid $base_ui_color
+      border-bottom: 1px solid $base_ui_color
+      @include border-radius( 4px, 4px )
+
+      &.handle-sidebar
+        .small-navigation
+          display: block
+          height: $toolbar_height
+          position: relative
+          background: $header_ui_color
+          @include background( top, linear-gradient( $header_ui_color 22px, $header_ui_color_darken ) )
+
+          margin-top: -1px
+          margin-right: -2px
+
+          @include border-radius( 4px 4px 0px 0px )
+          border-left: 1px solid $header_ui_color_lighten
+          border-top: 1px solid $header_ui_color_lighten
+          border-right: 1px solid $header_ui_color
+          border-bottom: 1px solid $header_ui_color_shadow
+          
+          .toggle-sidebar
+            display: block
+            width: 44px
+            height: 44px
+            cursor: pointer
+            position: absolute
+            top: 0px
+            left: 0px
+            z-index: 10
+
+  .desktop .open, .mobile .open
+    border: none
+    .content.handle-sidebar
+      @include translate3d( $mobile_navigation_size, 0, 0 )
+
+    .sidebar
+      display: block
+      visibility: visible
+      margin: 1px
+
+      @include transition-property( border )
+      @include transition-delay( 0.3s )