Lots of tweaks, and angular demos

2025-11-06 22:29:44 +08:00 · 2013-08-24 14:14:45 -05:00
parent ae59de54bd
commit d9f1c23ee1
15 changed files with 195 additions and 33 deletions
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.css
@ -44,6 +44,8 @@ ul {
  text-align: center;
  cursor: pointer;
  margin: 0; }
+  .button.button-borderless {
+    border: none; }

 .bar {
  position: fixed;
@ -55,7 +57,7 @@ ul {
  -webkit-box-orient: horizontal;
  box-orient: horizontal;
  box-sizing: border-box;
-  height: 60px;
+  height: 50px;
  /*
  .title + .button:last-child,
  .button + .button:last-child,
@ -73,9 +75,8 @@ ul {
    display: block;
    width: 100%;
    */
-    line-height: 20px;
+    line-height: 30px;
    margin: 0;
-    padding: 20px 0px;
    text-align: center;
    white-space: nowrap;
    font-size: 18px;
@ -98,10 +99,10 @@ ul {
 /* 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 */
 .bar ~ .content {
-  top: 60px; }
+  top: 50px; }

 .bar ~ .content {
-  bottom: 51px; }
+  bottom: 50px; }

 /* Bar docked to bottom used for primary app navigation */
 .tabs {
@ -124,15 +125,19 @@ ul {
 /* Navigational tab */
 .tab-item {
  height: 100%;
-  padding-top: 9px;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  box-flex: 1; }
+  .tab-item a {
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    height: 100%; }

 /* Active state for tab */
-.tab-item.active {
-  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); }
+.tab-item.active, .tab-item:active {
+  background-color: rgba(0, 0, 0, 0.2); }

 /* Icon for tab  */
 .tab-item i {
@ -144,8 +149,7 @@ ul {
  margin-top: 1px;
  font-size: 10px;
  font-weight: bold;
-  color: #fff;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3); }
+  color: #fff; }

 .button-group {
  position: relative;
@ -216,7 +220,9 @@ ul {
    .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
      color: inherit; }

-a.list-item:hover, a.list-item:focus {
+a.list-item {
+  text-decoration: none; }
+  a.list-item:hover, a.list-item:focus {
    text-decoration: none; }

 .list-divider {
@ -299,7 +305,8 @@ a.list-item:hover, a.list-item:focus {
  height: 60px; }

 .tab-item a {
-  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }
+  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 200; }
 .tab-item i {
  font-size: 25px; }

--- a/example/angular/app.css
+++ b/example/angular/app.css
@ -0,0 +1,27 @@
+.pane {
+  position: fixed;
+  width: 100%;
+}
+.reveal-animation {
+  /*
+  -webkit-transform: translate3d(0%, 0, 0);
+          transform: translate3d(0%, 0, 0);
+
+ -webkit-transition: -webkit-transform 1s ease-in-out;
+         transition:         transform 1s ease-in-out;
+  */
+}
+.reveal-animation.ng-enter {
+  -webkit-transition: 0.2s linear all;
+  -webkit-transform:translate3d(100%,0,0) ;
+}
+.reveal-animation.ng-enter-active {
+  -webkit-transform:translate3d(0,0,0) ;
+}
+.reveal-animation.ng-leave {
+  -webkit-transition: 0.2s linear all;
+  -webkit-transform:translate3d(0,0,0);
+}
+.reveal-animation.ng-leave-active {
+  -webkit-transform:translate3d(-100%,0,0);
+}
--- a/example/angular/app.js
+++ b/example/angular/app.js
@ -0,0 +1,47 @@
+document.addEventListener('touchstart', function() {});
+
+var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']);
+
+app.config( ["$routeProvider", function($routeProvider){
+    $routeProvider.when("/customers", {"templateUrl" : "customers.html", controller: 'CustomersCtrl'});
+    $routeProvider.when("/customer/:id", {"templateUrl" : "customer.html", controller: 'CustomerCtrl'});
+    $routeProvider.otherwise({"redirectTo":"/customers"});
+
+  }]
+);
+
+app.provider('Customers', function() {
+  var customers = [
+    {'name': 'Max Lynch', id: 1},
+    {'name': 'Max Lynch', id: 2},
+    {'name': 'Max Lynch', id: 3},
+    {'name': 'Max Lynch', id: 4},
+    {'name': 'Max Lynch', id: 5},
+    {'name': 'Max Lynch', id: 6},
+    {'name': 'Max Lynch', id: 7},
+    {'name': 'Max Lynch', id: 8},
+    {'name': 'Max Lynch', id: 9},
+    {'name': 'Max Lynch', id: 10},
+    {'name': 'Max Lynch', id: 11},
+  ];
+
+  this.$get = function() {
+    return {
+      list: customers,
+      getById: function(id) {
+        for(var i = 0; i < this.list.length; i++) { if(this.list[i].id == id) return this.list[i]; }
+      }
+    }
+  }
+});
+
+app.controller('CustomersCtrl', function($scope, Customers) {
+  $scope.customers = Customers;
+});
+
+app.controller('CustomerCtrl', function($scope, $routeParams, Customers) {
+  var id = $routeParams.id;
+  var customer = Customers.getById(id);
+  $scope.customer = customer;
+  console.log('Showing user', id, customer);
+});
--- a/example/angular/customer.html
+++ b/example/angular/customer.html
@ -0,0 +1,3 @@
+<h2>{{customer.name}}</h2>
+<a class="button button-default">Edit</a>
+<a class="button button-danger">Delete</a>
--- a/example/angular/customers.html
+++ b/example/angular/customers.html
@ -0,0 +1,6 @@
+<ul class="list" ng-controller="CustomersCtrl">
+  <a href="#customer/{{customer.id}}" class="list-item" ng-repeat="customer in customers.list">
+    {{customer.name}}
+    <i class="icon-arrow-right"></i>
+  </a>
+</ul>
--- a/example/angular/index.html
+++ b/example/angular/index.html
@ -0,0 +1,27 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="app.css">
+    
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
+    <script src="http://code.angularjs.org/1.2.0rc1/angular-animate.js"></script>
+    
+    <script src="app.js"></script>
+  </head>
+  <body ng-app="peopleApp">
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Customers</h1>
+    </header>
+
+    <main class="content" ng-controller="CustomersCtrl">
+      <div ng-view class="pane reveal-animation"></div>
+    </main>
+  </body>
+</html>
--- a/example/bar.html
+++ b/example/bar.html
@ -25,30 +25,49 @@
    <link rel="stylesheet" href="app.css">

    <script src="app.js"></script>
+    <style>
+      .bar-header {
+        position: static;
+      }
+    </style>
  </head>
  <body ontouchstart="">
    <header class="bar bar-header bar-default">
+      <a class="button button-default">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-default">Next</a>
    </header>
-    <header class="bar bar-header bar-secondary" style="top: 50px">
+    <header class="bar bar-header bar-secondary">
+      <a class="button button-secondary">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-secondary">Next</a>
    </header>
-    <header class="bar bar-header bar-primary" style="top: 100px">
+    <header class="bar bar-header bar-primary">
+      <a class="button button-primary">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-primary">Next</a>
    </header>
-    <header class="bar bar-header bar-success" style="top: 150px">
+    <header class="bar bar-header bar-success">
+      <a class="button button-success">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-success">Next</a>
    </header>
-    <header class="bar bar-header bar-warning" style="top: 200px">
+    <header class="bar bar-header bar-warning">
+      <a class="button button-warning">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-warning">Next</a>
    </header>
-    <header class="bar bar-header bar-danger" style="top: 250px">
+    <header class="bar bar-header bar-danger">
+      <a class="button button-danger">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-danger">Next</a>
    </header>
-    <header class="bar bar-header bar-dark" style="top: 300px">
+    <header class="bar bar-header bar-dark">
+      <a class="button button-dark">Previous</a>
      <h1 class="title">Willkommen!</h1>
+      <a class="button button-dark">Next</a>
    </header>
-    <footer class="bar bar-footer bar-danger">
+    <footer class="bar bar-footer bar-success">
      <nav class="tabs">
        <ul class="tabs-inner">
          <li class="tab-item">
@ -84,5 +103,10 @@
        </ul>
      </nav>
    </footer>
+    <script src="../js/framework/framework-utilities.js"></script>
+    <script src="../js/framework/framework-navigation.js"></script>
+    <script src="../js/framework/framework-buttons.js"></script>
+    <script src="../js/framework/framework-tabs.js"></script>
+    <script src="../js/framework/framework-init.js"></script>
  </body>
 </html>
--- a/js/framework/framework-buttons.js
+++ b/js/framework/framework-buttons.js
@ -18,6 +18,8 @@
    if(event.target && event.target.classList.contains('button')) {
      event.target.classList.remove('active');
    }
+
+    // TODO: Process the click? Set flag to not process other click events
  };

  document.addEventListener('touchstart', framework.Button.prototype._onTouchStart);
--- a/js/framework/framework-tabs.js
+++ b/js/framework/framework-tabs.js
@ -1,20 +1,23 @@
 (function(window, document, framework) {
  framework.Tabs = function() {}

+  framework.Tabs.prototype._TAB_ITEM_CLASS = 'tab-item';
+
  framework.Tabs.prototype._onTouchStart = function(event) {
    console.log('Touch start!', event);
-    if(event.target && event.target.classList.contains('button')) {
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
      event.target.classList.add('active');
    }
  };
  framework.Tabs.prototype._onTouchEnd = function(event) {
    console.log('Touch end!', event);
-    if(event.target && event.target.classList.contains('button')) {
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
      event.target.classList.remove('active');
    }
  };

-  document.addEventListener('touchstart', framework.Button.prototype._onTouchStart);
-  document.addEventListener('touchend', framework.Button.prototype._onTouchEnd);
+  document.addEventListener('mousedown', framework.Tabs.prototype._onTouchStart);
+  document.addEventListener('touchstart', framework.Tabs.prototype._onTouchStart);
+  document.addEventListener('touchend', framework.Tabs.prototype._onTouchEnd);

 })(this, document, this.FM = this.FM || {});
--- a/scss/framework/structure/_bar.scss
+++ b/scss/framework/structure/_bar.scss
@ -28,7 +28,7 @@
    line-height: $barTitleLineHeightComputed;

    margin: 0;
-    padding: $barPaddingVertical 0px;
+    //padding: $barPaddingVertical 0px;

    text-align: center;
    white-space: nowrap;
@ -79,5 +79,5 @@
  top: $barHeight;
 }
 .bar ~ .content {
-  bottom: 51px;
+  bottom: $barHeight;
 }
--- a/scss/framework/structure/_button.scss
+++ b/scss/framework/structure/_button.scss
@ -5,4 +5,8 @@
 	text-align: center;
 	cursor: pointer;
 	margin: 0;
+
+  &.button-borderless {
+    border: none;
+  }
 }
--- a/scss/framework/structure/_listview.scss
+++ b/scss/framework/structure/_listview.scss
@ -64,6 +64,7 @@
 // Linked list items
 a.list-item {
  //color: $list-group-link-color;
+  text-decoration: none;

  .list-item-heading {
    //color: $list-group-link-heading-color;
--- a/scss/framework/structure/_tabs.scss
+++ b/scss/framework/structure/_tabs.scss
@ -21,16 +21,23 @@
 /* Navigational tab */
 .tab-item {
  height: 100%;
-  padding-top: 9px;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-flex: 1;
          box-flex: 1;
+
+  a {
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }

 /* Active state for tab */
-.tab-item.active {
-  box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
+.tab-item.active, .tab-item:active {
+  //box-shadow: inset 0 0 1px rgba(0, 0, 0, .12);
+  background-color: rgba(0,0,0,0.2);
 }

 /* Icon for tab  */
@ -45,5 +52,4 @@
  font-size: 10px;
  font-weight: bold;
  color: #fff;
-  text-shadow: 0 1px rgba(0, 0, 0, .3);
 }
--- a/scss/framework/structure/_variables.scss
+++ b/scss/framework/structure/_variables.scss
@ -15,10 +15,10 @@ $baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
 $contentPadding: 10px;

 // Bar stuff
-$barHeight: 60px !default;
-$barLineHeight: 60px !default;
+$barHeight: 50px !default;
+$barLineHeight: 50px !default;
 $barTitleFontSize: $fontSizeLarge;
-$barTitleLineHeightComputed: $baseLineHeightComputed;
+$barTitleLineHeightComputed: 30px;//$barHeight - 2;
 $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);


--- a/scss/framework/theme/default/_tabs.scss
+++ b/scss/framework/theme/default/_tabs.scss
@ -5,6 +5,11 @@
 .tab-item {
  a {
    font-family: $lightSansFontFamily;
+    font-weight: 200;
+
+    .active, &:active {
+      //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
+    }
  }
  i {
    font-size: 25px;