javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

action-menu / alert

Browse Source
This commit is contained in:
Adam Bradley
2015-04-01 22:27:44 -05:00
parent fd74dc937e
commit 0e09f64021
13 changed files with 241 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components.js
View File

@ -1,3 +1,5 @@
export * from 'ionic2/components/action-menu/action-menu'
export * from 'ionic2/components/alert/alert'
export * from 'ionic2/components/aside/aside'
export * from 'ionic2/components/checkbox/checkbox'
export * from 'ionic2/components/content/content'

43
src/components/action-menu/action-menu.js
View File

@ -0,0 +1,43 @@
import {NgElement, Component, Template, Parent} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config'
export let ActionMenuConfig = new ComponentConfig('action-menu')
@Component({
selector: 'ion-action-menu',
services: [ActionMenuConfig]
})
@Template({
inline: `
<div class="pane-backdrop"></div>
<div class="action-menu-container">
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
</div>
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<button class="button action-menu-button">Button 1</button>
<button class="button action-menu-button">Button 2</button>
</div>
<div class="action-menu-group">
<button class="button action-menu-button">Button 1</button>
</div>
</div>`
})
export class ActionMenu {
constructor(
configFactory: ActionMenuConfig,
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.domElement.classList.add('pane')
this.domElement.classList.add('pane-overlay')
this.config = configFactory.create(this)
}
}

10
src/components/action-menu/action-menu.scss
View File

@ -2,7 +2,6 @@
// Action Menu
// --------------------------------------------------
$action-menu-group-margin: 15px !default;
$action-menu-background-color: rgba(243,243,243,.95) !default;
$action-menu-button-text-color: #007aff !default;
@ -15,21 +14,12 @@ $action-menu-button-text-color: #007aff !default;
width: 100%;
}
.action-menu-group {
margin: $action-menu-group-margin;
}
.action-menu-group .action-menu-label {
display: block;
width: 100%;
text-align: center;
background: $action-menu-background-color;
}
.action-menu-group .action-menu-button {
display: block;
width: 100%;
text-align: center;
background: $action-menu-background-color;
color: $action-menu-button-text-color;
}

79
src/components/action-menu/extensions/ios.scss Normal file
View File

@ -0,0 +1,79 @@
// iOS Action Menu
// --------------------------------------------------
$action-menu-ios-group-margin: 8px !default;
$action-menu-ios-background-color: rgba(243,243,243,.95) !default;
$action-menu-ios-border-color: #d2d2d6 !default;
$action-menu-ios-border-radius: 4px !default;
$action-menu-ios-label-color: #8a8a8a !default;
$action-menu-ios-label-font-size: 1.3rem !default;
$action-menu-ios-button-color: #007aff !default;
$action-menu-ios-button-font-size: 2rem !default;
.action-menu-ios {
text-align: center;
.action-menu-group {
margin: $action-menu-ios-group-margin;
}
.action-menu-label,
.action-menu-button {
position: relative;
@include flex-display();
@include flex-justify-content(center);
@include flex-align-items(center);
border: 0;
min-height: 44px;
background: $action-menu-ios-background-color;
font-weight: 400;
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $action-menu-ios-border-color;
content: '';
}
}
.action-menu-label {
font-size: $action-menu-ios-label-font-size;
color: $action-menu-ios-label-color;
}
.action-menu-button {
font-size: $action-menu-ios-button-font-size;
color: $action-menu-ios-button-color;
}
.action-menu-label:first-child,
.action-menu-button:first-child {
border-top-left-radius: $action-menu-ios-border-radius;
border-top-right-radius: $action-menu-ios-border-radius;
}
.action-menu-label:last-child,
.action-menu-button:last-child {
border-bottom-left-radius: $action-menu-ios-border-radius;
border-bottom-right-radius: $action-menu-ios-border-radius;
}
}

26
src/components/action-menu/test/basic/main.html
View File

@ -1,26 +1,4 @@
<div class="pane pane-overlay action-menu">
<ion-action-menu>
<div class="pane-backdrop"></div>
<div class="action-menu-container">
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<div class="action-menu-button">Button 1</div>
<div class="action-menu-button">Button 2</div>
</div>
<div class="action-menu-group">
<div class="action-menu-label">Action Menu Label</div>
<div class="action-menu-button">Button 1</div>
<div class="action-menu-button">Button 2</div>
</div>
<div class="action-menu-group">
<div class="action-menu-button">Button 1</div>
</div>
</div>
</div>
</ion-action-menu>

6
src/components/action-menu/test/basic/main.js
View File

@ -1,12 +1,12 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {View} from 'ionic2/components/view/view';
import {Content} from 'ionic2/components/content/content';
import {ActionMenu} from 'ionic2/components/action-menu/action-menu';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [View, Content]
directives: [ActionMenu]
})
class IonicApp {
constructor() {

35
src/components/alert/alert.js
View File

@ -0,0 +1,35 @@
import {NgElement, Component, Template, Parent} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config'
export let AlertConfig = new ComponentConfig('alert')
@Component({
selector: 'ion-alert',
services: [AlertConfig]
})
@Template({
inline: `
<div class="pane-backdrop"></div>
<div class="alert-container">
<div class="alert-content">
Do you like cookies?
</div>
<div class="alert-buttons">
<button class="button">OK</button>
</div>
</div>`
})
export class Alert {
constructor(
configFactory: AlertConfig,
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.domElement.classList.add('pane')
this.domElement.classList.add('pane-overlay')
this.config = configFactory.create(this)
}
}

23
src/components/alert/alert.scss
View File

@ -2,33 +2,20 @@
// Alert
// --------------------------------------------------
$alert-width: 270px !default;
$alert-min-height: 100px !default;
$alert-padding: 15px !default;
$alert-background-color: #fff !default;
.pane > .pane-container.alert-container {
.alert-container {
position: absolute;
z-index: $z-index-alert;
display: block;
top: 40%;
top: 35%;
left: 50%;
width: $alert-width;
margin-left: -$alert-width / 2;
background: $alert-background-color;
}
.alert-content {
margin: 0;
padding: $alert-padding;
min-height: $alert-min-height;
}
.alert-action {
.alert-buttons {
@include flex-display();
@include flex-justify-content(center);
overflow: hidden;
.button {
@include flex-display();

63
src/components/alert/extensions/ios.scss Normal file
View File

@ -0,0 +1,63 @@
// Alert
// --------------------------------------------------
$alert-ios-width: 270px !default;
$alert-ios-min-height: 100px !default;
$alert-ios-padding: 15px !default;
$alert-ios-background-color: #e8e8e8 !default;
$alert-ios-border-radius: 15px !default;
$alert-ios-button-color: #007aff !default;
$alert-ios-button-font-size: 2rem !default;
.alert-ios {
.alert-container {
width: $alert-ios-width;
margin-left: -$alert-ios-width / 2;
}
.alert-content {
position: relative;
padding: $alert-ios-padding;
min-height: $alert-ios-min-height;
border-top-left-radius: $alert-ios-border-radius;
border-top-right-radius: $alert-ios-border-radius;
background: $alert-ios-background-color;
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: #b5b5b5;
content: '';
}
}
.alert-buttons {
min-height: 44px;
background: $alert-ios-background-color;
border-bottom-left-radius: $alert-ios-border-radius;
border-bottom-right-radius: $alert-ios-border-radius;
.button {
border: 0;
background: transparent;
font-size: $alert-ios-button-font-size;
font-weight: 400;
color: $alert-ios-button-color;
}
}
}

19
src/components/alert/test/basic/main.html
View File

@ -1,19 +1,4 @@
<div class="pane pane-overlay alert">
<ion-alert>
<div class="pane-backdrop"></div>
<div class="pane-container alert-container">
<div class="content alert-content">
<div>Do you like cookies?</div>
</div>
<div class="alert-action">
<button class="button">Cancel</button>
<button class="button">Ok</button>
</div>
</div>
</div>
</ion-alert>

6
src/components/alert/test/basic/main.js
View File

@ -1,12 +1,12 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {View} from 'ionic2/components/view/view';
import {Content} from 'ionic2/components/content/content';
import {Alert} from 'ionic2/components/alert/alert';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [View, Content]
directives: [Alert]
})
class IonicApp {
constructor() {

2
src/components/app/ionic.scss
View File

@ -50,6 +50,8 @@
// iOS Components
@import
"../action-menu/extensions/ios",
"../alert/extensions/ios",
"../card/extensions/ios",
"../checkbox/extensions/ios",
"../content/extensions/ios",

3
src/components/tabs/test/basic/main.js
View File

@ -1,6 +1,7 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {View, Tabs} from 'ionic2/components';
import {View} from 'ionic2/components/view/view';
import {Tabs} from 'ionic2/components/tabs/tabs';
@Component({ selector: '[ion-app]' })