javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Angular and taweaks

Browse Source
This commit is contained in:
Max Lynch
2013-08-31 18:15:56 -05:00
parent 09a4e6c0ef
commit ef32c8cd2a
18 changed files with 186 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
dist/ionic.css vendored
View File

@ -81,10 +81,6 @@ main > * {
left: 0; left: 0;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
box-sizing: border-box; box-sizing: border-box;
height: 44px; height: 44px;
padding: 8px; padding: 8px;
@ -98,27 +94,30 @@ main > * {
} }
*/ } */ }
.bar .title { .bar .title {
/*
position: absolute; position: absolute;
width: 100%;
top: 0; top: 0;
left: 0; left: 0;
display: block; line-height: 44px;
width: 100%;
*/
line-height: 26px;
margin: 0; margin: 0;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
font-size: 18px; font-size: 18px; }
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3; }
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar .button {
-webkit-box-flex: 0; .buttons {
-moz-box-flex: 0; position: absolute;
box-flex: 0; } padding: 8px;
line-height: 6px; }
.buttons:first-child {
left: 0;
top: 0; }
.buttons:last-child {
right: 0;
top: 0; }
.bar-header { .bar-header {
top: 0; } top: 0; }
@ -126,6 +125,9 @@ main > * {
.bar-footer { .bar-footer {
bottom: 0; } bottom: 0; }
.bar-tabs {
padding: 0; }
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. /* 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 */ Note: For these to work, content must come after both bars in the markup */
.has-header { .has-header {
@ -136,16 +138,17 @@ main > * {
.button { .button {
position: relative; position: relative;
display: block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer; }
margin: 0; } .button.button-block {
.button.button-inline { margin: 0 0 10px 0;
display: inline-block; } display: block; }
.button.button-borderless { .button.button-clear {
background: none;
border: none; border: none;
padding: 2px 6px; } padding: 10px 0px; }
.button-group { .button-group {
position: relative; position: relative;
@ -1086,10 +1089,10 @@ a.list-item {
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 50px; width: 100%;
height: 100%;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box; }
position: fixed; }
.tabs-inner { .tabs-inner {
display: -webkit-box; display: -webkit-box;
@ -1374,8 +1377,7 @@ a.list-item {
background: #eee; } background: #eee; }
.tabs { .tabs {
font-size: 16px; font-size: 16px; }
height: 60px; }
.tab-item a { .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;

3
example/angular/app.js vendored
View File

@ -1,3 +1,5 @@
/*
document.addEventListener('touchstart', function() {}); document.addEventListener('touchstart', function() {});
var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']); var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']);
@ -45,3 +47,4 @@ app.controller('CustomerCtrl', function($scope, $routeParams, Customers) {
$scope.customer = customer; $scope.customer = customer;
console.log('Showing user', id, customer); console.log('Showing user', id, customer);
}); });
*/

19
example/angular/chat/app.js vendored
View File

@ -9,10 +9,19 @@ chat.controller('RoomsCtrl', function($scope) {
{ name: 'All', key: 'all' }, { name: 'All', key: 'all' },
{ name: 'Marketing', key: 'marketing' } { name: 'Marketing', key: 'marketing' }
]; ];
});
$scope.openPanel = function() {
console.log('Open panel'); // TODO: Move this to a directive corresponding to this panel
$scope.isPanelShowing = true; // 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'
}); });

68
example/angular/chat/index.html
View File

@ -7,47 +7,47 @@
<link rel="stylesheet" href="../../../dist/ionic.css"> <link rel="stylesheet" href="../../../dist/ionic.css">
<script src="angular-1.2.0rc1.min.js"></script> <script src="angular-1.2.0rc1.min.js"></script>
<script src="angular-touch.js"></script> <script src="angular-touch.js"></script>
<script src="app.js"></script>
<script src="../../../js/framework/ion-panel.js"></script>
<script src="../../../js/framework/glue/angular-glue.js"></script>
</head> </head>
<body ng-app="Chat"> <body ng-app="Chat">
<section class="panel-page-container" ng-controller="RoomsCtrl"> <div id="left-panel" class="ion-panel ion-panel-left">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</div>
<section id="this-panel" class="panel-content" ng-class="{'ion-panel-opened': isPanelShowing}"> <div id="right-panel" class="ion-panel ion-panel-right">
<ul class="list"> <ul class="list">
<li class="list-item"> <li class="list-item">
Max Lynch Max Lynch
</li>
</ul>
</div>
<div id="page" class="full-section">
<header class="bar bar-header bar-dark">
<button class="button button-dark">Rooms</button>
<h1 class="title">Feeds</h1>
</header>
<main class="content has-header">
<ul class="list" ng-controller="RoomsCtrl">
<li class="list-item" ng-repeat="room in rooms">
{{room.name}}
</li> </li>
</ul> </ul>
</section> </main>
</div>
<section id="that-panel" class="panel-content" ng-class="{'ion-panel-opened': isPanelShowing}">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</section>
<section> <script src="../../../js/ionic-events.js"></script>
<script src="../../../js/ionic-gestures.js"></script>
<header class="bar bar-header bar-dark"> <script src="../../../js/controllers/ionic-leftrightpanel.js"></script>
<button class="button button-dark" ng-click="openPanel()">Rooms</button> <script src="../../../js/ionic-panel.js"></script>
<h1 class="title">Feeds</h1> <script src="../../../connectors/angular/angular-glue.js"></script>
</header>
<main class="content has-header">
<ul class="list">
<li class="list-item" ng-repeat="room in rooms">
{{room.name}}
</li>
</ul>
</main>
</section>
</section>
<script src="app.js"></script>
</body> </body>
</html> </html>

5
example/angular/index.html
View File

@ -9,9 +9,8 @@
<link rel="stylesheet" href="../../dist/ionic.css"> <link rel="stylesheet" href="../../dist/ionic.css">
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
<script src="/vendor/angular/angular.js"></script> <script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
<script src="/vendor/angular/angular-route.js"></script> <script src="/vendor/angular/1.2.0rc1/angular-touch.js"></script>
<script src="/vendor/angular/angular-animate.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</head> </head>

8
example/button-groups.html
View File

@ -20,10 +20,10 @@
<main class="content-padded has-header"> <main class="content-padded has-header">
<p> <p>
<div class="button-group"> <div class="button-group">
<a class="button button-primary" href="index.html">Success</a> <a class="button button-primary">Success</a>
<a class="button button-primary" href="index.html">Warning</a> <a class="button button-primary">Warning</a>
<a class="button button-primary" href="index.html">Danger</a> <a class="button button-primary">Danger</a>
<a class="button button-primary" href="index.html">Dark</a> <a class="button button-primary">Dark</a>
</div> </div>
</p> </p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>

16
example/buttons.html
View File

@ -25,14 +25,14 @@
<main class="content-padded has-header"> <main class="content-padded has-header">
<p> <p>
<a class="button button-default" href="grid.html">Default</a> <a class="button button-default">Default</a>
<a class="button button-secondary" href="index.html">Secondary</a> <a class="button button-secondary">Secondary</a>
<a class="button button-primary" href="listview.html">Primary</a> <a class="button button-primary">Primary</a>
<a class="button button-info" href="index.html">Info</a> <a class="button button-info">Info</a>
<a class="button button-success" href="index.html">Success</a> <a class="button button-success">Success</a>
<a class="button button-warning" href="index.html">Warning</a> <a class="button button-warning">Warning</a>
<a class="button button-danger" href="index.html">Danger</a> <a class="button button-danger">Danger</a>
<a class="button button-dark" href="index.html">Dark</a> <a class="button button-dark">Dark</a>
</p> </p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main> </main>

9
example/headers.html
View File

@ -14,7 +14,14 @@
<section> <section>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<h1 class="title">Header</h1> <div class="buttons">
<a class="button button-clear">Back</a>
<a class="button button-clear">This</a>
</div>
<h1 class="title">Life Choices</h1>
<div class="buttons">
<a class="button button-success">Forward</a>
</div>
</header> </header>
<main class="content content-padded has-header"> <main class="content content-padded has-header">

2
example/index.html
View File

@ -12,8 +12,6 @@
<script src="/vendor/angular/angular.js"></script> <script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular/angular-route.js"></script> <script src="/vendor/angular/angular-route.js"></script>
<script src="/vendor/angular/angular-animate.js"></script> <script src="/vendor/angular/angular-animate.js"></script>
<script src="app.js"></script>
</head> </head>
<body> <body>

37
example/tab-bars.html
View File

@ -21,6 +21,43 @@
</main> </main>
<footer class="bar bar-tabs bar-footer bar-success">
<nav class="tabs">
<ul class="tabs-inner">
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-home"></i>
Home
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-user"></i>
Friends
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-thumbs-down"></i>
Enemies
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i>
Settings
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-th"></i>
More
</a>
</li>
</ul>
</nav>
</footer>
</section> </section>
</body> </body>

8
js/ionic-gestures.js
View File

@ -115,6 +115,14 @@
ion.Gestures.Instance = function(element, options) { ion.Gestures.Instance = function(element, options) {
var self = this; 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 // setup ion.GesturesJS window events and register all gestures
// this also sets up the default options // this also sets up the default options
setup(); setup();

1
scss/ionic/_structure-variables.scss
View File

@ -41,6 +41,7 @@ $contentPadding: 10px;
// ------------------------- // -------------------------
$barHeight: 44px !default; $barHeight: 44px !default;
$barLineHeight: 44px !default; $barLineHeight: 44px !default;
$barButtonsLineHeight: 6px !default;
$barTitleFontSize: $fontSizeLarge; $barTitleFontSize: $fontSizeLarge;
$barTitleLineHeightComputed: 26px;//$barHeight - 2; $barTitleLineHeightComputed: 26px;//$barHeight - 2;
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2); $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);

4
scss/ionic/_theme-variables.scss
View File

@ -24,9 +24,13 @@ $darkColor: #333;
// ------------------------------- // -------------------------------
$buttonColor: #222; $buttonColor: #222;
$buttonPadding: 10px 15px; $buttonPadding: 10px 15px;
$buttonClearPadding: 10px 0px;
$buttonBorderRadius: 2px; $buttonBorderRadius: 2px;
$buttonBorderWidth: 1px; $buttonBorderWidth: 1px;
// Button block that has spacing
$buttonBlockMargin: 0 0 10px 0;
$buttonDefaultBackground: #fff; $buttonDefaultBackground: #fff;
$buttonDefaultBackgroundActive: #eee; $buttonDefaultBackgroundActive: #eee;
$buttonDefaultBorder: #ddd; $buttonDefaultBorder: #ddd;

39
scss/ionic/structure/_bar.scss
View File

@ -7,11 +7,6 @@
z-index: 10; z-index: 10;
width: 100%; width: 100%;
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
box-sizing: border-box; box-sizing: border-box;
height: $barHeight; height: $barHeight;
@ -20,15 +15,12 @@
// Title inside of a bar is centered // Title inside of a bar is centered
.title { .title {
/*
position: absolute; position: absolute;
width: 100%;
top: 0; top: 0;
left: 0; left: 0;
display: block;
width: 100%;
*/
line-height: $barTitleLineHeightComputed; line-height: $barHeight;
margin: 0; margin: 0;
//padding: $barPaddingVertical 0px; //padding: $barPaddingVertical 0px;
@ -37,21 +29,13 @@
white-space: nowrap; white-space: nowrap;
font-size: $barTitleFontSize; font-size: $barTitleFontSize;
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3;
} }
.title a { .title a {
color: inherit; 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 // Place the last button in a bar on the right of the bar
/* /*
.title + .button:last-child, .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 // Header at top
.bar-header { .bar-header {
@ -75,6 +72,10 @@
bottom: 0; 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. /* 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 */ Note: For these to work, content must come after both bars in the markup */

4
scss/ionic/structure/_base.scss
View File

@ -1,3 +1,4 @@
// TODO: This might be inefficient?
*, *:before, *:after { *, *:before, *:after {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: -webkit-box-sizing:
@ -64,6 +65,3 @@ main > * {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.shadow {
}

15
scss/ionic/structure/_button.scss
View File

@ -1,17 +1,18 @@
.button { .button {
position: relative; position: relative;
display: block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
margin: 0;
&.button-inline { &.button-block {
display: inline-block; margin: $buttonBlockMargin;
} display: block;
}
&.button-borderless { &.button-clear {
background: none;
border: none; border: none;
padding: 2px 6px; padding: $buttonClearPadding;
} }
} }

4
scss/ionic/structure/_tabs.scss
View File

@ -3,10 +3,10 @@
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 50px; width: 100%;
height: 100%;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
position: fixed;
} }
.tabs-inner { .tabs-inner {

1
scss/ionic/theme/_tabs.scss
View File

@ -1,6 +1,5 @@
.tabs { .tabs {
font-size: 16px; font-size: 16px;
height: 60px;
} }
.tab-item { .tab-item {
a { a {