From: Prateek Saxena Date: Wed, 5 Nov 2014 10:33:57 +0000 (+0530) Subject: mediawiki.ui: Add radio buttons X-Git-Tag: 1.31.0-rc.0~13165^2 X-Git-Url: http://git.cyclocoop.org/ecrire?a=commitdiff_plain;h=1f769a67c5e16f42b3848dd28c93853cea3bc520;p=lhc%2Fweb%2Fwiklou.git mediawiki.ui: Add radio buttons Design specification on Trello- https://trello.com/c/df2N2KJx/8-radio-buttons Change-Id: Idb3d5177b6b2e9374de02416447fee9286e10a65 --- diff --git a/docs/kss/Makefile b/docs/kss/Makefile index a28bf3e554..31feec1a1c 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -6,7 +6,7 @@ kss: kssnodecheck $(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX)) # Keep module names in strict alphabetical order, so CSS loads in the same order as ResourceLoader's addModuleStyles does; this can affect rendering. # See OutputPage::makeResourceLoaderLink. - @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.icon|mediawiki.ui.input|mediawiki.ui.text&only=styles" > $(KSS_RL_TMP) + @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.radio|mediawiki.ui.icon|mediawiki.ui.input|mediawiki.ui.text&only=styles" > $(KSS_RL_TMP) @node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template @rm $(KSS_RL_TMP) diff --git a/resources/Resources.php b/resources/Resources.php index c39ba3bf41..88965d096c 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1524,6 +1524,15 @@ return array( 'position' => 'top', 'targets' => array( 'desktop', 'mobile' ), ), + 'mediawiki.ui.radio' => array( + 'skinStyles' => array( + 'default' => array( + 'resources/src/mediawiki.ui/components/radio.less', + ), + ), + 'position' => 'top', + 'targets' => array( 'desktop', 'mobile' ), + ), // Lightweight module for anchor styles 'mediawiki.ui.anchor' => array( 'skinStyles' => array( diff --git a/resources/src/mediawiki.ui/components/images/radio_checked.png b/resources/src/mediawiki.ui/components/images/radio_checked.png new file mode 100644 index 0000000000..1361ba65b4 Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/radio_checked.png differ diff --git a/resources/src/mediawiki.ui/components/images/radio_checked.svg b/resources/src/mediawiki.ui/components/images/radio_checked.svg new file mode 100644 index 0000000000..8a57732e61 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_checked.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/resources/src/mediawiki.ui/components/images/radio_disabled.png b/resources/src/mediawiki.ui/components/images/radio_disabled.png new file mode 100644 index 0000000000..5a1959ffdd Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/radio_disabled.png differ diff --git a/resources/src/mediawiki.ui/components/images/radio_disabled.svg b/resources/src/mediawiki.ui/components/images/radio_disabled.svg new file mode 100644 index 0000000000..e062895b45 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_disabled.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less new file mode 100644 index 0000000000..6d8978e3e6 --- /dev/null +++ b/resources/src/mediawiki.ui/components/radio.less @@ -0,0 +1,109 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; + +// Radio +// +// Styling radios in a way that works cross browser is a tricky problem to solve. +// In MediaWiki UI put a radio and label inside a mw-ui-radio div. +// This renders in all browsers except IE6-8 which do not support the :checked selector; +// these are kept backwards-compatible using the :not(#noop) selector. +// You should give the radio and label matching "id" and "for" attributes, respectively. +// +// Markup: +//
+// +// +//
+//
+// +// +//
+//
+// +// +//
+//
+// +// +//
+// +// Styleguide 7. +.mw-ui-radio { + display: inline-block; + vertical-align: middle; +} + +@radioSize: 2em; + +// We use the not selector to cancel out styling on IE 8 and below +.mw-ui-radio:not(#noop) { + // Position relatively so we can make use of absolute pseudo elements + position: relative; + line-height: @radioSize; + + * { + font: inherit; + vertical-align: middle; + } + + input[type="radio"] { + // we hide the input element as instead we will style the label that follows + // we use opacity so that VoiceOver software can still identify it + opacity: 0; + // ensure the invisible radio takes up the required width + width: @radioSize; + height: @radioSize; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) + max-width: none; + margin-right: 0.4em; + + // the pseudo before element of the label after the radio now looks like a radio + & + label::before { + cursor: pointer; + content: ''; + .box-sizing(border-box); + position: absolute; + left: 0; + border-radius: 100%; + width: @radioSize; + height: @radioSize; + background-color: #fff; + border: 1px solid @colorGray7; + } + + // when the input is checked, style the label pseudo before element that followed as a checked radio + &:checked + label::before { + .background-image-svg('images/radio_checked.svg', 'images/radio_checked.png'); + .background-size( @radioSize, @radioSize ); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + } + + &:focus + label::before { + border-width: 2px; + } + + &:focus:hover + label::before, + &:hover + label::before { + border-bottom-width: 3px; + } + + &:active + label::before { + background-color: @colorGray13; + border-color: @colorGray13; + } + + // disabled checked boxes have a gray background + &:disabled + label::before { + cursor: default; + border-color: @colorGray14; + background-color: @colorGray14; + } + + // disabled and checked boxes have a white circle + &:disabled:checked + label::before { + .background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png'); + } + } +}