fixed #1597

primefaces · Dec 15, 2016 · d68d152 · d68d152
1 parent 02e88b1
commit d68d152
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/components/togglebutton/togglebutton.ts b/components/togglebutton/togglebutton.ts
@@ -12,8 +12,11 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = {
     selector: 'p-toggleButton',
     template: `
         <div [ngClass]="{'ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all': true, 'ui-button-text-only': (!onIcon&&!offIcon), 'ui-button-text-icon-left': (onIcon&&offIcon),
-                'ui-state-active': checked, 'ui-state-hover': hover&&!disabled, 'ui-state-disabled': disabled}" [ngStyle]="style" [class]="styleClass" 
+                'ui-state-active': checked,'ui-state-focus': focus, 'ui-state-hover': hover&&!disabled, 'ui-state-disabled': disabled}" [ngStyle]="style" [class]="styleClass" 
                 (click)="toggle($event)" (mouseenter)="hover=true" (mouseleave)="hover=false">
+            <div class="ui-helper-hidden-accessible">
+                <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()">
+            </div>
             <span *ngIf="onIcon||offIcon" [class]="getIconClass()"></span>
             <span class="ui-button-text ui-unselectable-text">{{checked ? onLabel : offLabel}}</span>
         </div>
@@ -39,6 +42,8 @@ export class ToggleButton implements ControlValueAccessor {
     @Output() onChange: EventEmitter<any> = new EventEmitter();
 
     checked: boolean = false;
+
+    focus: boolean = false;
 
     onModelChange: Function = () => {};
 
@@ -62,6 +67,15 @@ export class ToggleButton implements ControlValueAccessor {
             })
         }
     }
+
+    onFocus() {
+        this.focus = true;
+    }
+
+    onBlur() {
+        this.focus = false;
+        this.onModelTouched();
+    }
 
     writeValue(value: any) : void {
         this.checked = value;

diff --git a/resources/themes/bootstrap/theme.css b/resources/themes/bootstrap/theme.css
@@ -145,6 +145,11 @@ body .ui-button.raised-btn {
     -webkit-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
     box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
 }
+body .ui-togglebutton.ui-button.ui-state-focus {
+    -moz-box-shadow: 0px 0px 5px #1f89ce;
+	-webkit-box-shadow: 0px 0px 5px #1f89ce;
+	box-shadow: 0px 0px 5px #1f89ce;
+}
 body .ui-chips .ui-chips-token .ui-chips-token-label {
     padding: 0.125em;
 }

diff --git a/resources/themes/omega/theme.css b/resources/themes/omega/theme.css
@@ -543,6 +543,12 @@ button.ui-button.ui-state-active, .ui-button.ui-state-active {
    border: 1px solid #156090; background: #186ba0; color: #FFFFFF;
 }
 
+.ui-togglebutton.ui-button.ui-state-focus {
+    -moz-box-shadow: 0px 0px 5px #1f89ce;
+	-webkit-box-shadow: 0px 0px 5px #1f89ce;
+	box-shadow: 0px 0px 5px #1f89ce;
+}
+
 /* SelectOneMenu */
 .ui-dropdown .ui-dropdown-trigger,
 .ui-multiselect .ui-multiselect-trigger {