From 4711ba070c63a0aa89dc252e9736e44a1fddb344 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 10 Mar 2016 18:46:26 +0100
Subject: [PATCH] Improved usability of .flexibleButtonGroup

---
 .../templates/booleanOptionType.tpl           | 11 ++++++-
 .../files/acp/templates/booleanOptionType.tpl |  4 +--
 .../templates/userGroupBooleanOptionType.tpl  |  4 +--
 .../files/style/ui/buttonGroupFlexible.scss   | 33 +++++++++++++++----
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/com.woltlab.wcf/templates/booleanOptionType.tpl b/com.woltlab.wcf/templates/booleanOptionType.tpl
index 532f54a5c4..754a9899c8 100644
--- a/com.woltlab.wcf/templates/booleanOptionType.tpl
+++ b/com.woltlab.wcf/templates/booleanOptionType.tpl
@@ -1 +1,10 @@
-<input type="checkbox" id="{$option->optionName}" {if $value} checked="checked"{/if} name="values[{$option->optionName}]" value="1" {if $disableOptions || $enableOptions}class="jsEnablesOptions" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]" {/if} />
+<ol class="flexibleButtonGroup">
+	<li>
+		<input type="radio" id="{$option->optionName}"{if $value == 1} checked="checked"{/if} name="values[{$option->optionName}]" value="1"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
+		<label for="{$option->optionName}" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.acp.option.type.boolean.yes{/lang}</label>
+	</li>
+	<li>
+		<input type="radio" id="{$option->optionName}_no"{if $value == 0} checked="checked"{/if} name="values[{$option->optionName}]" value="0"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
+		<label for="{$option->optionName}_no" class="red"><span class="icon icon16 fa-times"></span> {lang}wcf.acp.option.type.boolean.no{/lang}</label>
+	</li>
+</ol>
diff --git a/wcfsetup/install/files/acp/templates/booleanOptionType.tpl b/wcfsetup/install/files/acp/templates/booleanOptionType.tpl
index f6c30b9cf7..754a9899c8 100644
--- a/wcfsetup/install/files/acp/templates/booleanOptionType.tpl
+++ b/wcfsetup/install/files/acp/templates/booleanOptionType.tpl
@@ -1,7 +1,7 @@
 <ol class="flexibleButtonGroup">
 	<li>
-		<input type="radio" id="{$option->optionName}_yes"{if $value == 1} checked="checked"{/if} name="values[{$option->optionName}]" value="1"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
-		<label for="{$option->optionName}_yes" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.acp.option.type.boolean.yes{/lang}</label>
+		<input type="radio" id="{$option->optionName}"{if $value == 1} checked="checked"{/if} name="values[{$option->optionName}]" value="1"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
+		<label for="{$option->optionName}" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.acp.option.type.boolean.yes{/lang}</label>
 	</li>
 	<li>
 		<input type="radio" id="{$option->optionName}_no"{if $value == 0} checked="checked"{/if} name="values[{$option->optionName}]" value="0"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
diff --git a/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl b/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl
index 787f75e899..15f87ef818 100644
--- a/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl
@@ -1,7 +1,7 @@
 <ol class="flexibleButtonGroup">
 	<li>
-		<input type="radio" id="{$option->optionName}_yes"{if $value == 1} checked="checked"{/if} name="values[{$option->optionName}]" value="1"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
-		<label for="{$option->optionName}_yes" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.acp.option.type.boolean.yes{/lang}</label>
+		<input type="radio" id="{$option->optionName}"{if $value == 1} checked="checked"{/if} name="values[{$option->optionName}]" value="1"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
+		<label for="{$option->optionName}" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.acp.option.type.boolean.yes{/lang}</label>
 	</li>
 	<li>
 		<input type="radio" id="{$option->optionName}_no"{if $value == 0} checked="checked"{/if} name="values[{$option->optionName}]" value="0"{if $disableOptions || $enableOptions} class="jsEnablesOptions" data-is-boolean="true" data-disable-options="[ {@$disableOptions}]" data-enable-options="[ {@$enableOptions}]"{/if}>
diff --git a/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss b/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss
index 7043abc3a3..2e407ef908 100644
--- a/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss
+++ b/wcfsetup/install/files/style/ui/buttonGroupFlexible.scss
@@ -14,7 +14,9 @@
 		}
 		
 		> input[type="radio"] {
-			display: none;
+			left: -3000px;
+			opacity: 0;
+			position: absolute;
 			
 			&:checked + label {
 				cursor: default;
@@ -23,26 +25,32 @@
 					cursor: default !important;
 				}
 			}
+			
+			&:focus + label {
+				border-color: rgba(0, 0, 0, .3);
+			}
 		}
 		
 		> a,
 		> label {
 			background-color: rgb(242, 242, 242);
+			border: 1px solid transparent;
 			cursor: pointer;
 			padding: 5px 10px;
 			
-			&.green,
-			&.green > .icon {
+			> .icon {
+				color: inherit;
+			}
+			
+			&.green {
 				color: rgb(54, 125, 54);
 			}
 			
-			&.red,
-			&.red > .icon {
+			&.red {
 				color: rgb(201, 48, 44);
 			}
 			
-			&.yellow,
-			&.yellow > .icon {
+			&.yellow {
 				color: rgb(236, 151, 31);
 			}
 			
@@ -72,5 +80,16 @@
 				color: #fff;
 			}
 		}
+		
+		> input[type="radio"]:disabled + label {
+			background-color: rgb(242, 242, 242) !important;
+			color: rgb(125, 130, 100) !important;
+			cursor: default;
+			
+			> .icon {
+				color: rgb(125, 130, 100) !important;
+				cursor: default !important;
+			}
+		}
 	}
 }
-- 
2.20.1