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;
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;

3
example/angular/app.js vendored
View File

@ -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);
});
*/

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

@ -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'
});

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

@ -7,47 +7,47 @@
<link rel="stylesheet" href="../../../dist/ionic.css">
<script src="angular-1.2.0rc1.min.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>
<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}">
<ul class="list">
<li class="list-item">
Max Lynch
<div id="right-panel" class="ion-panel ion-panel-right">
<ul class="list">
<li class="list-item">
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>
</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>
<header class="bar bar-header bar-dark">
<button class="button button-dark" ng-click="openPanel()">Rooms</button>
<h1 class="title">Feeds</h1>
</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="../../../js/ionic-events.js"></script>
<script src="../../../js/ionic-gestures.js"></script>
<script src="../../../js/controllers/ionic-leftrightpanel.js"></script>
<script src="../../../js/ionic-panel.js"></script>
<script src="../../../connectors/angular/angular-glue.js"></script>
<script src="app.js"></script>
</body>
</html>

5
example/angular/index.html
View File

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

8
example/button-groups.html
View File

@ -20,10 +20,10 @@
<main class="content-padded has-header">
<p>
<div class="button-group">
<a class="button button-primary" href="index.html">Success</a>
<a class="button button-primary" href="index.html">Warning</a>
<a class="button button-primary" href="index.html">Danger</a>
<a class="button button-primary" href="index.html">Dark</a>
<a class="button button-primary">Success</a>
<a class="button button-primary">Warning</a>
<a class="button button-primary">Danger</a>
<a class="button button-primary">Dark</a>
</div>
</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">
<p>
<a class="button button-default" href="grid.html">Default</a>
<a class="button button-secondary" href="index.html">Secondary</a>
<a class="button button-primary" href="listview.html">Primary</a>
<a class="button button-info" href="index.html">Info</a>
<a class="button button-success" href="index.html">Success</a>
<a class="button button-warning" href="index.html">Warning</a>
<a class="button button-danger" href="index.html">Danger</a>
<a class="button button-dark" href="index.html">Dark</a>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

9
example/headers.html
View File

@ -14,7 +14,14 @@
<section>
<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>
<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-route.js"></script>
<script src="/vendor/angular/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body>

37
example/tab-bars.html
View File

@ -21,6 +21,43 @@
</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>
</body>

8
js/ionic-gestures.js
View File

@ -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();

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

@ -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);

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

@ -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;

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

@ -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 */

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

@ -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 {
}

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

@ -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;
}
}

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

@ -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 {

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

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