feat(actionsheet): android style/layout, iOS update

ionic-team · Dec 31, 2014 · b837fb2 · b837fb2
1 parent 61a8353
commit b837fb2
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 17 deletions.
diff --git a/js/angular/directive/actionSheet.js b/js/angular/directive/actionSheet.js
@@ -8,16 +8,17 @@ IonicModule
     restrict: 'E',
     scope: true,
     replace: true,
-    link: function($scope, $element){
+    link: function($scope, $element) {
+
       var keyUp = function(e) {
-        if(e.which == 27) {
+        if (e.which == 27) {
           $scope.cancel();
           $scope.$apply();
         }
       };
 
       var backdropClick = function(e) {
-        if(e.target == $element[0]) {
+        if (e.target == $element[0]) {
           $scope.cancel();
           $scope.$apply();
         }
@@ -32,10 +33,10 @@ IonicModule
     },
     template: '<div class="action-sheet-backdrop">' +
                 '<div class="action-sheet-wrapper">' +
-                  '<div class="action-sheet">' +
+                  '<div class="action-sheet" ng-class="{\'action-sheet-has-icons\': $actionSheetHasIcon}">' +
                     '<div class="action-sheet-group action-sheet-options">' +
                       '<div class="action-sheet-title" ng-if="titleText" ng-bind-html="titleText"></div>' +
-                      '<button class="button action-sheet-option" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-bind-html="button.text"></button>' +
+                      '<button class="button action-sheet-option" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text"></button>' +
                       '<button class="button destructive action-sheet-destructive" ng-if="destructiveText" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText"></button>' +
                     '</div>' +
                     '<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">' +

diff --git a/js/angular/service/actionSheet.js b/js/angular/service/actionSheet.js
@@ -103,6 +103,17 @@ function($rootScope, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicP
       cancelOnStateChange: true
     }, opts || {});
 
+    function textForIcon(text) {
+      if (text && /icon/.test(text)) {
+        scope.$actionSheetHasIcon = true;
+      }
+    }
+
+    for (var x = 0; x < scope.buttons.length; x++) {
+      textForIcon(scope.buttons[x].text);
+    }
+    textForIcon(scope.cancelText);
+    textForIcon(scope.destructiveText);
 
     // Compile the template
     var element = scope.element = $compile('<ion-action-sheet ng-class="cssClass" buttons="buttons"></ion-action-sheet>')(scope);

diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss
@@ -42,36 +42,41 @@
     padding: 1px;
     width: 100%;
     border-radius: 0;
-    border-color: $sheet-options-borer-color;
+    border-color: $sheet-options-border-color;
     background-color: transparent;
 
     color: $sheet-options-text-color;
-    font-size: 18px;
+    font-size: 21px;
 
     &:hover {
       color: $sheet-options-text-color;
     }
     &.destructive {
-      color: $assertive;
+      color: #ff3b30;
       &:hover {
-        color: $assertive;
+        color: #ff3b30;
       }
     }
   }
 
   .button.active, .button.activated {
     box-shadow: none;
-    border-color: $sheet-options-borer-color;
+    border-color: $sheet-options-border-color;
     color: $sheet-options-text-color;
     background: $sheet-options-bg-active-color;
   }
 }
 
+.action-sheet-has-icons .icon {
+  position: absolute;
+  left: 16px;
+}
+
 .action-sheet-title {
-  padding: $sheet-margin;
-  color: lighten($base-color, 40%);
+  padding: $sheet-margin * 2;
+  color: #8f8f8f;
   text-align: center;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .action-sheet-group {
@@ -109,3 +114,53 @@
     pointer-events: auto;
   }
 }
+
+
+.platform-android {
+
+  .action-sheet-backdrop.active {
+    background-color: rgba(0,0,0,0.2);
+  }
+
+  .action-sheet {
+    margin: 0;
+
+    .action-sheet-title,
+    .button {
+      text-align: left;
+      border-color: transparent;
+      font-size: 16px;
+      color: inherit;
+    }
+
+    .action-sheet-title {
+      font-size: 14px;
+      padding: 16px;
+      color: #666;
+    }
+
+    .button.active,
+    .button.activated {
+      background: #e8e8e8;
+    }
+  }
+
+  .action-sheet-group {
+    margin: 0;
+    border-radius: 0;
+    background-color: #fafafa;
+  }
+
+  .action-sheet-cancel {
+    display: none;
+  }
+
+  .action-sheet-has-icons {
+
+    .button {
+      padding-left: 56px;
+    }
+
+  }
+
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -606,10 +606,10 @@ $grid-responsive-lg-break:        1023px !default; // smaller than landscape tab
 $sheet-margin:                    8px !default;
 $sheet-border-radius:             4px !default;
 
-$sheet-options-bg-color:          #f6f7f8 !default;
-$sheet-options-bg-active-color:   #ecedee !default;
-$sheet-options-text-color:        $positive !default;
-$sheet-options-borer-color:       #d1d3d6 !default;
+$sheet-options-bg-color:          #f1f2f3 !default;
+$sheet-options-bg-active-color:   #e4e5e7 !default;
+$sheet-options-text-color:        #007aff !default;
+$sheet-options-border-color:      #d1d3d6 !default;
 
 
 // Popups