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

renamed .content-padded to just .padded

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 11:56:14 -05:00
parent 3a995d10e2
commit 29569cac81
32 changed files with 244 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/events.html
View File

@ -35,7 +35,7 @@
</style>
</head>
<body>
<div class="content content-padded">
<div class="content padded">
<a href="#" id="tap-button" class="button button-success">Tap me!</a>
<a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
<div id="remove-box" class="relative">

2
example/events/drag.html
View File

@ -16,7 +16,7 @@
</style>
</head>
<body>
<div class="content content-padded">
<div class="content padded">
<div id="drag-me">Drag me around!</div>
</div>
<script src="../../js/utils.js"></script>

2
example/login/index.html
View File

@ -33,7 +33,7 @@
<header class="bar bar-header bar-danger">
<h1 class="title">Sign up for your account</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<form class="form-horizontal">
<label class="input-wrapper row-fluid">
<span class="input-label col-xs-4">Full name</span>

6
example/toderp/index.html
View File

@ -32,7 +32,7 @@
<div id="start" ng-switch-when="splash" class="pane">
</div>
<div id="login" ng-switch-when="login" ng-controller="LoginCtrl" class="pane">
<main class="content content-padded has-header">
<main class="content padded has-header">
<div class="container" style="text-align: center">
<h1>ToDerp</h1>
<h3>Finish your Top Three Tasks Today</h3>
@ -62,7 +62,7 @@
<a href="#" class="button" ng-click="setScreen('login')">Back</a>
<h1 class="title">Sign up (it's free!)</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<form class="form-horizontal" ng-submit="trySignup(signupForm)">
<div class="input-group inset">
<label class="input-wrapper row">
@ -87,7 +87,7 @@
<a href="#" class="button button-icon"><i class="icon-reorder"></i></a>
<h1 class="title">Your Tasks</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<form ng-submit="addTask(task)">
<input type="text" ng-model="task.text">
<button type="submit" class="button button-block button-success">Add</button>

5
ext/simple/toggle.js Normal file
View File

@ -0,0 +1,5 @@
(function(window, document, ionic) {
})(this, document, ionic);

2
hacking/sideMenu.html
View File

@ -17,7 +17,7 @@
<h1 class="title">Tab Bars</h1>
</header>
<main class="has-header content content-padded">
<main class="has-header content padded">
<h1>Swipe me, side to side</h1>
</main>
</section>

193
js/controllers/toggleController.js Normal file
View File

@ -0,0 +1,193 @@
(function(ionic) {
ionic.controllers = ionic.controllers || {};
ionic.controllers.SideMenuController = function(options) {
var _this = this;
this.left = options.left;
this.right = options.right;
this.content = options.content;
this._rightShowing = false;
this._leftShowing = false;
this.content.onDrag = function(e) {
_this._handleDrag(e);
};
this.content.endDrag = function(e) {
_this._endDrag(e);
};
/*
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
_this._endDrag(e);
}, this.center);
window.ion.onGesture('drag', function(e) {
_this._handleDrag(e);
}, this.center);
*/
};
ionic.controllers.SideMenuController.prototype = {
toggleLeft: function() {
var openAmount = this.getOpenAmount();
if(openAmount > 0) {
this.openPercentage(0);
} else {
this.openPercentage(100);
}
},
toggleRight: function() {
var openAmount = this.getOpenAmount();
if(openAmount < 0) {
this.openPercentage(0);
} else {
this.openPercentage(-100);
}
},
getOpenAmount: function() {
return this.content.getTranslateX() || 0;
},
getOpenRatio: function() {
var amount = this.getOpenAmount();
if(amount >= 0) {
return amount / this.left.width;
}
return amount / this.right.width;
},
getOpenPercentage: function() {
return this.getOpenRatio() * 100;
},
openPercentage: function(percentage) {
var p = percentage / 100;
var maxLeft = this.left.width;
var maxRight = this.right.width;
if(percentage >= 0) {
this.openAmount(maxLeft * p);
} else {
this.openAmount(maxRight * p);
}
},
openAmount: function(amount) {
var maxLeft = this.left.width;
var maxRight = this.right.width;
// Check if we can move to that side, depending if the left/right panel is enabled
if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
return;
}
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
return;
}
this.content.setTranslateX(amount);
if(amount >= 0) {
this._leftShowing = true;
this._rightShowing = false;
// Push the z-index of the right menu down
this.right.pushDown();
// Bring the z-index of the left menu up
this.left.bringUp();
} else {
this._rightShowing = true;
this._leftShowing = false;
// Bring the z-index of the right menu up
this.right.bringUp();
// Push the z-index of the left menu down
this.left.pushDown();
}
},
snapToRest: function(e) {
// We want to animate at the end of this
this.content.enableAnimation();
this._isDragging = false;
// Check how much the panel is open after the drag, and
// what the drag velocity is
var ratio = this.getOpenRatio();
if(ratio == 0)
return;
var velocityThreshold = 0.3;
var velocityX = e.gesture.velocityX
var direction = e.gesture.direction;
// Less than half, going left
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
//this.openPercentage(0);
//}
// Going right, less than half, too slow (snap back)
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going left, more than half, too slow (snap back)
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(100);
}
// Going left, less than half, too slow (snap back)
else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going right, more than half, too slow (snap back)
else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(-100);
}
// Going right, more than half, or quickly (snap open)
else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
this.openPercentage(100);
}
// Going left, more than half, or quickly (span open)
else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
this.openPercentage(-100);
}
// Snap back for safety
else {
this.openPercentage(0);
}
},
_endDrag: function(e) {
this.snapToRest(e);
},
_initDrag: function(e) {
this.content.disableAnimation();
this._isDragging = true;
this._startX = 0;
this._offsetX = 0;
this._lastX = 0;
},
_handleDrag: function(e) {
if(!this._isDragging) {
this._initDrag(e);
this._startX = e.gesture.touches[0].pageX;
this._lastX = this._startX;
this._offsetX = this.getOpenAmount();
}
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
var newX = this._offsetX + (this._lastX - this._startX);
this.openAmount(newX);
this._lastX = e.gesture.touches[0].pageX;
}
};
})(ionic = window.ionic || {});

1
scss/ionic.scss
View File

@ -31,7 +31,6 @@
"ionic/alerts",
"ionic/card",
"ionic/form",
"ionic/table",
"ionic/toggle",
// Animations

2
scss/ionic/_form.scss
View File

@ -53,7 +53,7 @@ textarea {
border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg;
}
.content-padded > .input-group,
.padded > .input-group,
.input-group.inset {
@include border-radius($input-border-radius);
border-right: $input-border-width solid $input-border-color;

11
scss/ionic/_menu.scss
View File

@ -28,14 +28,3 @@
transition: transform $menu-animation-speed ease;
}
.ion-panel {
background: $menu-bg;
}
.ion-panel-left .ion-panel {
border-right: 1px solid $menu-inset-border-color;
}
.ion-panel-right .ion-panel {
border-left: 1px solid $menu-inset-border-color;
}

16
scss/ionic/_scaffolding.scss
View File

@ -40,24 +40,14 @@ body {
bottom: 0;
left: 0;
overflow: auto;
// TODO: Fix the dynamic content height issue
//height: 100%;
}
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
.content > *, .content-padded > * {
.content > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.content-padded {
padding: $content-padding;
}
.inset {
margin: $inset-margin;
}
// 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 {
@ -73,10 +63,6 @@ body {
bottom: $tabs-height;
}
.rounded {
border-radius: $border-radius-base;
}
.page, .full-section {
position: fixed;
top: 0;

13
scss/ionic/_util.scss Normal file
View File

@ -0,0 +1,13 @@
.padded {
padding: $content-padding;
}
.inset {
margin: $inset-margin;
}
.rounded {
border-radius: $border-radius-base;
}

2
test/alerts.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Alerts</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<p class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.

2
test/button-groups.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Button Group</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<p>
<div class="button-group">
<a class="button button-primary">Success</a>

2
test/buttons.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Buttons</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<p>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>

2
test/footers.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Footer</h1>
</header>
<main class="content content-padded has-header has-footer">
<main class="content padded has-header has-footer">
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
<p>Content element must have "has-footer" as a classname.</p>
<ul>

2
test/forms.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Forms</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<h2>Default form layout</h2>
<form>

2
test/grids.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Grids</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

2
test/headers.html
View File

@ -41,7 +41,7 @@
<a class="button">This</a>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<p>Content element must have "has-header" as a classname.</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

2
test/image-swipe.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Image Swipe</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

2
test/index.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Ionic Tests</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<p><a class="button button-block button-default" href="alerts.html">Alerts</a></p>
<p><a class="button button-block button-default" href="buttons.html">Buttons</a></p>
<p><a class="button button-block button-default" href="button-groups.html">Button Groups</a></p>

2
test/input-slider.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Input: Slider</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

6
test/input-text.html
View File

@ -48,7 +48,7 @@
</label>
</div>
<div class="content-padded">
<div class="padded">
<h3>Default Text Input, Not Inset, With Content Padding</h3>
<div class="input-group">
@ -105,7 +105,7 @@
</label>
</div>
<div class="content-padded">
<div class="padded">
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<div class="input-group">
@ -168,7 +168,7 @@
</label>
</div>
<div class="content-padded">
<div class="padded">
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<div class="input-group stacked-label">

6
test/input-textarea.html
View File

@ -45,7 +45,7 @@
</label>
</div>
<div class="content-padded">
<div class="padded">
<h3>Default Text Area, Not Inset, With Content Padding</h3>
<div class="input-group">
@ -102,7 +102,7 @@
</label>
</div>
<div class="content-padded">
<div class="padded">
<h3>Inline Label On Top Of Text Area, Not Inset, With Content Padding</h3>
<div class="input-group">
@ -165,7 +165,7 @@
</label>
</div>
<div class="content-padded">
<div class="padded">
<h3>Stacked Label On Top Of Text Area, Not Inset, With Content Padding</h3>
<div class="input-group stacked-label">

2
test/menu_controller.html
View File

@ -25,7 +25,7 @@
</div>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>

2
test/menus.html
View File

@ -22,7 +22,7 @@
</button>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<p><button class="button button-primary" data-panel-toggle="my-other-left-panel">Other Left Side Panel</button></p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

2
test/modals.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Modals</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

2
test/panels.html
View File

@ -24,7 +24,7 @@
</div>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>

2
test/popovers.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Popovers</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

2
test/pull-to-refresh.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Pull To Refresh</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
todo
<p>Pull the content down to refresh.</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>

2
test/tab-bars.html
View File

@ -21,7 +21,7 @@
<h1 class="title">Tab Bars</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
content
</main>

2
test/type.html
View File

@ -16,7 +16,7 @@
<h1 class="title">Type</h1>
</header>
<main class="content content-padded has-header">
<main class="content padded has-header">
<h1>I'm an H1 Element</h1>
<h2>I'm an H2 Element</h2>
<h3>I'm an H3 Element</h3>