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

fix(button): add a category to buttons so they won't get the button styles

Browse Source 
fixes #6237
This commit is contained in:
Brandy Carney
2016-04-20 13:20:01 -04:00
parent 4a8975cb8b
commit 35dd0ed0b0
12 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/action-sheet/action-sheet.md.scss
View File

@ -70,6 +70,10 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
&:last-child .action-sheet-button {
margin-bottom: $action-sheet-md-group-margin-bottom;
}
.button-inner {
justify-content: flex-start;
}
}
.action-sheet-selected {

4
ionic/components/action-sheet/action-sheet.ts
View File

@ -222,14 +222,14 @@ export class ActionSheet extends ViewController {
'<div class="action-sheet-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
'<button category="action-sheet-button" (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
'{{b.text}}' +
'<ion-button-effect></ion-button-effect>' +
'</button>' +
'</div>' +
'<div class="action-sheet-group" *ngIf="d.cancelButton">' +
'<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
'<button category="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
'<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon> ' +
'{{d.cancelButton.text}}' +
'<ion-button-effect></ion-button-effect>' +

4
ionic/components/action-sheet/action-sheet.wp.scss
View File

@ -73,6 +73,10 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default;
&:last-child .action-sheet-button {
margin-bottom: $action-sheet-wp-group-margin-bottom;
}
.button-inner {
justify-content: flex-start;
}
}
.action-sheet-selected {

2
ionic/components/alert/alert.ios.scss
View File

@ -58,7 +58,7 @@ $alert-ios-radio-label-padding: 13px !default;
$alert-ios-radio-min-width: 30px !default;
$alert-ios-radio-icon-top: 13px !default;
$alert-ios-radio-icon-top: -7px !default;
$alert-ios-radio-icon-left: 7px !default;
$alert-ios-radio-icon-width: 6px !default;
$alert-ios-radio-icon-height: 12px !default;

8
ionic/components/alert/alert.md.scss
View File

@ -57,7 +57,7 @@ $alert-md-list-border-bottom: $alert-md-list-border-top !default
$alert-md-radio-label-padding: 13px 26px !default;
$alert-md-radio-top: 13px !default;
$alert-md-radio-top: 0 !default;
$alert-md-radio-left: 13px !default;
$alert-md-radio-width: 16px !default;
$alert-md-radio-height: 16px !default;
@ -78,7 +78,7 @@ $alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0
$alert-md-checkbox-label-padding: 13px 26px !default;
$alert-md-checkbox-top: 13px !default;
$alert-md-checkbox-top: 0 !default;
$alert-md-checkbox-left: 13px !default;
$alert-md-checkbox-width: 16px !default;
$alert-md-checkbox-height: 16px !default;
@ -337,4 +337,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
&.activated {
background-color: $alert-md-button-background-color-activated;
}
.button-inner {
justify-content: $alert-md-button-group-justify-content;
}
}

6
ionic/components/alert/alert.ts
View File

@ -323,7 +323,7 @@ export class Alert extends ViewController {
'<template ngSwitchWhen="radio">' +
'<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
'<button *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
'<button category="alert-radio-button" *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
'<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
'<div class="alert-radio-label">' +
'{{i.label}}' +
@ -334,7 +334,7 @@ export class Alert extends ViewController {
'<template ngSwitchWhen="checkbox">' +
'<div class="alert-checkbox-group">' +
'<button *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
'<button category="alert-checkbox-button" *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
'<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
'<div class="alert-checkbox-label">' +
'{{i.label}}' +
@ -353,7 +353,7 @@ export class Alert extends ViewController {
'</div>' +
'<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
'<button *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
'<button category="alert-button" *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
'{{b.text}}' +
'<ion-button-effect></ion-button-effect>' +
'</button>' +

8
ionic/components/alert/alert.wp.scss
View File

@ -59,7 +59,7 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
$alert-wp-radio-label-padding: 13px 26px !default;
$alert-wp-radio-top: 13px !default;
$alert-wp-radio-top: 0 !default;
$alert-wp-radio-left: 13px !default;
$alert-wp-radio-width: 16px !default;
$alert-wp-radio-height: 16px !default;
@ -76,7 +76,7 @@ $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !de
$alert-wp-checkbox-label-padding: 13px 26px !default;
$alert-wp-checkbox-top: 13px !default;
$alert-wp-checkbox-top: 0 !default;
$alert-wp-checkbox-left: 13px !default;
$alert-wp-checkbox-width: 16px !default;
$alert-wp-checkbox-height: 16px !default;
@ -354,4 +354,8 @@ ion-alert {
&.activated {
background: $alert-wp-button-background-activated;
}
.button-inner {
justify-content: $alert-wp-button-group-justify-content;
}
}

15
ionic/components/button/button.ts
View File

@ -58,6 +58,11 @@ export class Button {
*/
isItem: boolean;
/**
* @input {string} The category of the button.
*/
@Input() category: string;
/**
* @input {string} Large button.
*/
@ -179,6 +184,16 @@ export class Button {
this._readAttrs(element);
}
/**
* @private
*/
ngOnInit() {
// If the button has a role applied to it
if (this.category) {
this.setRole(this.category);
}
}
/**
* @private
*/

1
ionic/components/checkbox/checkbox.ts
View File

@ -55,6 +55,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
'</div>' +
'<button role="checkbox" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +

1
ionic/components/radio/radio-button.ts
View File

@ -37,6 +37,7 @@ import {RadioGroup} from './radio-group';
'</div>' +
'<button role="radio" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +

1
ionic/components/select/select.ts
View File

@ -109,6 +109,7 @@ const SELECT_VALUE_ACCESSOR = new Provider(
'</div>' +
'<button aria-haspopup="true" ' +
'[id]="id" ' +
'category="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +

1
ionic/components/toggle/toggle.ts
View File

@ -58,6 +58,7 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
'</div>' +
'<button role="checkbox" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +