From ef32c8cd2aa6e8c81b6086b033739c4d014e53b8 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Sat, 31 Aug 2013 18:15:56 -0500 Subject: [PATCH] Angular and taweaks --- dist/ionic.css | 60 ++++++++++++------------ example/angular/app.js | 3 ++ example/angular/chat/app.js | 19 ++++++-- example/angular/chat/index.html | 70 ++++++++++++++-------------- example/angular/index.html | 5 +- example/button-groups.html | 8 ++-- example/buttons.html | 16 +++---- example/headers.html | 9 +++- example/index.html | 2 - example/tab-bars.html | 37 +++++++++++++++ js/ionic-gestures.js | 8 ++++ scss/ionic/_structure-variables.scss | 1 + scss/ionic/_theme-variables.scss | 4 ++ scss/ionic/structure/_bar.scss | 39 ++++++++-------- scss/ionic/structure/_base.scss | 4 +- scss/ionic/structure/_button.scss | 15 +++--- scss/ionic/structure/_tabs.scss | 4 +- scss/ionic/theme/_tabs.scss | 1 - 18 files changed, 186 insertions(+), 119 deletions(-) diff --git a/dist/ionic.css b/dist/ionic.css index 3c7bef049e..e259013f7e 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -81,10 +81,6 @@ main > * { left: 0; z-index: 10; width: 100%; - display: -webkit-box; - display: box; - -webkit-box-orient: horizontal; - box-orient: horizontal; box-sizing: border-box; height: 44px; padding: 8px; @@ -98,27 +94,30 @@ main > * { } */ } .bar .title { - /* position: absolute; + width: 100%; top: 0; left: 0; - display: block; - width: 100%; - */ - line-height: 26px; + line-height: 44px; margin: 0; text-align: center; white-space: nowrap; - font-size: 18px; - -webkit-box-flex: 3; - -moz-box-flex: 3; - box-flex: 3; } + font-size: 18px; } .bar .title a { color: inherit; } - .bar .button { - -webkit-box-flex: 0; - -moz-box-flex: 0; - box-flex: 0; } + +.buttons { + position: absolute; + padding: 8px; + line-height: 6px; } + +.buttons:first-child { + left: 0; + top: 0; } + +.buttons:last-child { + right: 0; + top: 0; } .bar-header { top: 0; } @@ -126,6 +125,9 @@ main > * { .bar-footer { bottom: 0; } +.bar-tabs { + padding: 0; } + /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. Note: For these to work, content must come after both bars in the markup */ .has-header { @@ -136,16 +138,17 @@ main > * { .button { position: relative; - display: block; + display: inline-block; vertical-align: middle; text-align: center; - cursor: pointer; - margin: 0; } - .button.button-inline { - display: inline-block; } - .button.button-borderless { + cursor: pointer; } + .button.button-block { + margin: 0 0 10px 0; + display: block; } + .button.button-clear { + background: none; border: none; - padding: 2px 6px; } + padding: 10px 0px; } .button-group { position: relative; @@ -1086,10 +1089,10 @@ a.list-item { right: 0; left: 0; bottom: 0; - height: 50px; + width: 100%; + height: 100%; padding: 0; - box-sizing: border-box; - position: fixed; } + box-sizing: border-box; } .tabs-inner { display: -webkit-box; @@ -1374,8 +1377,7 @@ a.list-item { background: #eee; } .tabs { - font-size: 16px; - height: 60px; } + font-size: 16px; } .tab-item a { font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/example/angular/app.js b/example/angular/app.js index 6bf8c7e8ab..4d7b3877c0 100644 --- a/example/angular/app.js +++ b/example/angular/app.js @@ -1,3 +1,5 @@ + +/* document.addEventListener('touchstart', function() {}); var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']); @@ -45,3 +47,4 @@ app.controller('CustomerCtrl', function($scope, $routeParams, Customers) { $scope.customer = customer; console.log('Showing user', id, customer); }); +*/ diff --git a/example/angular/chat/app.js b/example/angular/chat/app.js index 7a78575225..ad091ad240 100644 --- a/example/angular/chat/app.js +++ b/example/angular/chat/app.js @@ -9,10 +9,19 @@ chat.controller('RoomsCtrl', function($scope) { { name: 'All', key: 'all' }, { name: 'Marketing', key: 'marketing' } ]; - - $scope.openPanel = function() { - console.log('Open panel'); - $scope.isPanelShowing = true; - }; +}); + +// TODO: Move this to a directive corresponding to this panel +// Grab the sections +var page = document.getElementById('page'); +var leftPanel = document.getElementById('left-panel'); +var rightPanel = document.getElementById('right-panel'); +var controller = new ion.controllers.LeftRightPanelViewController({ + left: leftPanel, + leftWidth: 270, + right: rightPanel, + rightWidth: 270, + center: page, + animateClass: 'ion-panel-animated' }); diff --git a/example/angular/chat/index.html b/example/angular/chat/index.html index 06c9e19e5e..fc3bc47c9c 100644 --- a/example/angular/chat/index.html +++ b/example/angular/chat/index.html @@ -7,47 +7,47 @@ - - - - -
+
+
    +
  • + Max Lynch +
    • +
+
+ +
+
    +
  • + Max Lynch +
    • +
+
+ +
+ +
+ +

Feeds

+
-
-
    -
  • - Max Lynch +
    +
      +
    • + {{room.name}}
    -
- -
-
    -
  • - Max Lynch -
    • -
-
+ +
-
- -
- -

Feeds

-
- -
-
    -
  • - {{room.name}} -
    • -
-
-
- -
+ + + + + + + diff --git a/example/angular/index.html b/example/angular/index.html index e88cb83b7c..f145663558 100644 --- a/example/angular/index.html +++ b/example/angular/index.html @@ -9,9 +9,8 @@ - - - + + diff --git a/example/button-groups.html b/example/button-groups.html index eb74960701..7e09080dfd 100644 --- a/example/button-groups.html +++ b/example/button-groups.html @@ -20,10 +20,10 @@

- Success - Warning - Danger - Dark + Success + Warning + Danger + Dark

Homepage

diff --git a/example/buttons.html b/example/buttons.html index bbb894845a..0df5677cf1 100644 --- a/example/buttons.html +++ b/example/buttons.html @@ -25,14 +25,14 @@

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + Default + Secondary + Primary + Info + Success + Warning + Danger + Dark

Homepage

diff --git a/example/headers.html b/example/headers.html index 7c1fb22502..a8e61ddb22 100644 --- a/example/headers.html +++ b/example/headers.html @@ -14,7 +14,14 @@
-

Header

+
+ Back + This +
+

Life Choices

+
+ Forward +
diff --git a/example/index.html b/example/index.html index 904b79a437..50107c2c6f 100644 --- a/example/index.html +++ b/example/index.html @@ -12,8 +12,6 @@ - - diff --git a/example/tab-bars.html b/example/tab-bars.html index 6f505763d3..004bc30f72 100644 --- a/example/tab-bars.html +++ b/example/tab-bars.html @@ -21,6 +21,43 @@
+ +
diff --git a/js/ionic-gestures.js b/js/ionic-gestures.js index a31df278e9..472d8c31f3 100644 --- a/js/ionic-gestures.js +++ b/js/ionic-gestures.js @@ -115,6 +115,14 @@ ion.Gestures.Instance = function(element, options) { var self = this; + // A null element was passed into the instance, which means + // whatever lookup was done to find this element failed to find it + // so we can't listen for events on it. + if(element === null) { + console.error('Null element passed to gesture (element does not exist). Not listening for gesture'); + return; + } + // setup ion.GesturesJS window events and register all gestures // this also sets up the default options setup(); diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss index 2d2a622128..b0812b8617 100644 --- a/scss/ionic/_structure-variables.scss +++ b/scss/ionic/_structure-variables.scss @@ -41,6 +41,7 @@ $contentPadding: 10px; // ------------------------- $barHeight: 44px !default; $barLineHeight: 44px !default; +$barButtonsLineHeight: 6px !default; $barTitleFontSize: $fontSizeLarge; $barTitleLineHeightComputed: 26px;//$barHeight - 2; $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2); diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss index 3ce7b76bcb..1e70c4c7e7 100644 --- a/scss/ionic/_theme-variables.scss +++ b/scss/ionic/_theme-variables.scss @@ -24,9 +24,13 @@ $darkColor: #333; // ------------------------------- $buttonColor: #222; $buttonPadding: 10px 15px; +$buttonClearPadding: 10px 0px; $buttonBorderRadius: 2px; $buttonBorderWidth: 1px; +// Button block that has spacing +$buttonBlockMargin: 0 0 10px 0; + $buttonDefaultBackground: #fff; $buttonDefaultBackgroundActive: #eee; $buttonDefaultBorder: #ddd; diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss index e32075d82b..d9f4d86c39 100644 --- a/scss/ionic/structure/_bar.scss +++ b/scss/ionic/structure/_bar.scss @@ -7,11 +7,6 @@ z-index: 10; width: 100%; - display: -webkit-box; - display: box; - -webkit-box-orient: horizontal; - box-orient: horizontal; - box-sizing: border-box; height: $barHeight; @@ -20,15 +15,12 @@ // Title inside of a bar is centered .title { - /* position: absolute; + width: 100%; top: 0; left: 0; - display: block; - width: 100%; - */ - line-height: $barTitleLineHeightComputed; + line-height: $barHeight; margin: 0; //padding: $barPaddingVertical 0px; @@ -37,21 +29,13 @@ white-space: nowrap; font-size: $barTitleFontSize; - -webkit-box-flex: 3; - -moz-box-flex: 3; - box-flex: 3; } + .title a { color: inherit; } - .button { - -webkit-box-flex: 0; - -moz-box-flex: 0; - box-flex: 0; - } - // Place the last button in a bar on the right of the bar /* .title + .button:last-child, @@ -64,6 +48,19 @@ */ } +.buttons { + position: absolute; + padding: $barPaddingPortrait; + line-height: $barButtonsLineHeight; +} +.buttons:first-child { + left: 0; + top: 0; +} +.buttons:last-child { + right: 0; + top: 0; +} // Header at top .bar-header { @@ -75,6 +72,10 @@ bottom: 0; } +// Don't render padding if the bar is just for tabs +.bar-tabs { + padding: 0; +} /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. Note: For these to work, content must come after both bars in the markup */ diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/structure/_base.scss index 5c4e37f2d3..725d72e3a1 100644 --- a/scss/ionic/structure/_base.scss +++ b/scss/ionic/structure/_base.scss @@ -1,3 +1,4 @@ +// TODO: This might be inefficient? *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: @@ -64,6 +65,3 @@ main > * { width: 100%; height: 100%; } - -.shadow { -} diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss index 45124cefa2..c403c53c16 100644 --- a/scss/ionic/structure/_button.scss +++ b/scss/ionic/structure/_button.scss @@ -1,17 +1,18 @@ .button { position: relative; - display: block; + display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; - margin: 0; - &.button-inline { - display: inline-block; - } + &.button-block { + margin: $buttonBlockMargin; + display: block; + } - &.button-borderless { + &.button-clear { + background: none; border: none; - padding: 2px 6px; + padding: $buttonClearPadding; } } diff --git a/scss/ionic/structure/_tabs.scss b/scss/ionic/structure/_tabs.scss index e4b592a0fc..94ef0270c4 100644 --- a/scss/ionic/structure/_tabs.scss +++ b/scss/ionic/structure/_tabs.scss @@ -3,10 +3,10 @@ right: 0; left: 0; bottom: 0; - height: 50px; + width: 100%; + height: 100%; padding: 0; box-sizing: border-box; - position: fixed; } .tabs-inner { diff --git a/scss/ionic/theme/_tabs.scss b/scss/ionic/theme/_tabs.scss index 8918f2dd7d..fc71f67983 100644 --- a/scss/ionic/theme/_tabs.scss +++ b/scss/ionic/theme/_tabs.scss @@ -1,6 +1,5 @@ .tabs { font-size: 16px; - height: 60px; } .tab-item { a {