Improved usability of .flexibleButtonGroup

diff --git a/com.woltlab.wcf/templates/booleanOptionType.tpl b/com.woltlab.wcf/templates/booleanOptionType.tpl
index 532f54a5c4512d4ad50497bac6f592adeaa12e2a..754a9899c8840871414dd881f4a53b7b3138058b 100644 (file)
--- 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 f6c30b9cf73b8458753b2ec38a32d50cec53a178..754a9899c8840871414dd881f4a53b7b3138058b 100644 (file)
--- 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 787f75e8997cee37276c1d915751a350368cf526..15f87ef818bcadb8788748f4940e013056e8068d 100644 (file)
--- 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 7043abc3a3ef53e4c839b4d56bc70cfc0a7ed3be..2e407ef908becd4f90e04d2bc6114d5c6460f9eb 100644 (file)
--- 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;
+                       }
+               }
        }
 }