action-menu / alert

src/components.js

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

src/components/action-menu/action-menu.js

@@ -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)
+  }
+}

src/components/action-menu/action-menu.scss

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

src/components/action-menu/extensions/ios.scss

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

src/components/action-menu/test/basic/main.html

@@ -1,26 +1,4 @@
 
-<div class="pane pane-overlay action-menu">
+<ion-action-menu>
 
-  <div class="pane-backdrop"></div>
+</ion-action-menu>
-
-  <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>

src/components/action-menu/test/basic/main.js

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

src/components/alert/alert.js

@@ -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)
+  }
+}

src/components/alert/alert.scss

@@ -2,33 +2,20 @@
 // Alert
 // --------------------------------------------------
 
-$alert-width:                    270px !default;
-$alert-min-height:               100px !default;
-$alert-padding:                  15px !default;
-$alert-background-color:         #fff !default;
 
-
+.alert-container {
-.pane > .pane-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 {
+.alert-buttons {
-  margin: 0;
-  padding: $alert-padding;
-  min-height: $alert-min-height;
-}
-
-.alert-action {
   @include flex-display();
+  @include flex-justify-content(center);
+  overflow: hidden;
 
   .button {
     @include flex-display();

src/components/alert/extensions/ios.scss

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

src/components/alert/test/basic/main.html

@@ -1,19 +1,4 @@
 
-<div class="pane pane-overlay alert">
+<ion-alert>
 
-  <div class="pane-backdrop"></div>
+</ion-alert>
-
-  <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>

src/components/alert/test/basic/main.js

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

src/components/app/ionic.scss

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

src/components/tabs/test/basic/main.js

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