diff options
| -rw-r--r-- | extensions/BMO/template/en/default/hook/flag/type_comment-form.html.tmpl | 202 | ||||
| -rw-r--r-- | extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl | 40 | ||||
| -rw-r--r-- | extensions/FlagTypeComment/web/js/ftc.js | 189 | ||||
| -rw-r--r-- | extensions/FlagTypeComment/web/styles/ftc.css | 58 | ||||
| -rw-r--r-- | skins/standard/attachment.css | 4 | ||||
| -rw-r--r-- | skins/standard/global.css | 61 | ||||
| -rw-r--r-- | template/en/default/flag/list.html.tmpl | 1 |
7 files changed, 522 insertions, 33 deletions
diff --git a/extensions/BMO/template/en/default/hook/flag/type_comment-form.html.tmpl b/extensions/BMO/template/en/default/hook/flag/type_comment-form.html.tmpl new file mode 100644 index 000000000..7963af850 --- /dev/null +++ b/extensions/BMO/template/en/default/hook/flag/type_comment-form.html.tmpl @@ -0,0 +1,202 @@ +[%# This Source Code Form is subject to the terms of the Mozilla Public + # License, v. 2.0. If a copy of the MPL was not distributed with this + # file, You can obtain one at http://mozilla.org/MPL/2.0/. + # + # This Source Code Form is "Incompatible With Secondary Licenses", as + # defined by the Mozilla Public License, v. 2.0. + #%] + +<template class="approval-request" data-flags="approval‑mozilla‑beta approval‑mozilla‑release"> + <fieldset> + <legend>Beta/Release Uplift Approval Request</legend> + <table> + <tr> + <th id="_ar_beta_i1_label">Feature/[% terms.Bug %] causing the regression</th> + <td><input type="text" placeholder="[% terms.Bug %] ID" aria-labelledby="_ar_beta_i1_label" data-type="b[% %]ug"></td> + </tr> + <tr> + <th id="_ar_beta_i2_label">User impact if declined</th> + <td><textarea aria-labelledby="_ar_beta_i2_label"></textarea></td> + </tr> + <tr> + <th id="_ar_beta_i3_label">Is this code covered by automated tests?</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_beta_i3_label"> + <div class="item"><input id="_ar_beta_i3_r1" type="radio" name="_ar_beta_i3_radio" value="Yes"><label for="_ar_beta_i3_r1">Yes</label></div> + <div class="item"><input id="_ar_beta_i3_r2" type="radio" name="_ar_beta_i3_radio" value="No"><label for="_ar_beta_i3_r2">No</label></div> + <div class="item"><input id="_ar_beta_i3_r3" type="radio" name="_ar_beta_i3_radio" value="Dunno"><label for="_ar_beta_i3_r3">Dunno</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_beta_i4_label">Has the fix been verified in Nightly?</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_beta_i4_label"> + <div class="item"><input id="_ar_beta_i4_r1" type="radio" name="_ar_beta_i4_radio" value="Yes"><label for="_ar_beta_i4_r1">Yes</label></div> + <div class="item"><input id="_ar_beta_i4_r2" type="radio" name="_ar_beta_i4_radio" value="No"><label for="_ar_beta_i4_r2">No</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_beta_i5_label">Needs manual test from QE?</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_beta_i5_label"> + <div class="item"><input id="_ar_beta_i5_r1" type="radio" name="_ar_beta_i5_radio" value="Yes"><label for="_ar_beta_i5_r1">Yes</label></div> + <div class="item"><input id="_ar_beta_i5_r2" type="radio" name="_ar_beta_i5_radio" value="No"><label for="_ar_beta_i5_r2">No</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_beta_i6_label">If yes, steps to reproduce</th> + <td><textarea aria-labelledby="_ar_beta_i6_label"></textarea></td> + </tr> + <tr> + <th id="_ar_beta_i7_label">List of other uplifts needed</th> + <td><input type="text" placeholder="[% terms.Bug %] IDs" aria-labelledby="_ar_beta_i7_label" data-type="b[% %]ugs"></td> + </tr> + <tr> + <th id="_ar_beta_i8_label">Risk to taking this patch</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_beta_i8_label"> + <div class="item"><input id="_ar_beta_i8_r1" type="radio" name="_ar_beta_i8_radio" value="Low"><label for="_ar_beta_i8_r1">Low</label></div> + <div class="item"><input id="_ar_beta_i8_r2" type="radio" name="_ar_beta_i8_radio" value="Medium"><label for="_ar_beta_i8_r2">Medium</label></div> + <div class="item"><input id="_ar_beta_i8_r3" type="radio" name="_ar_beta_i8_radio" value="High"><label for="_ar_beta_i8_r3">High</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_beta_i9_label">Why is the change risky/not risky?<br>(and alternatives if risky)</th> + <td><textarea aria-labelledby="_ar_beta_i9_label"></textarea></td> + </tr> + <tr> + <th id="_ar_beta_i10_label">String changes made/needed</th> + <td><input type="text" class="long" aria-labelledby="_ar_beta_i10_label"></td> + </tr> + </table> + </fieldset> +</template> + +<template class="approval-request" data-flags="approval‑mozilla‑esr*"> + <fieldset> + <legend>ESR Uplift Approval Request</legend> + <table> + <tr> + <th id="_ar_esr_i1_label">If this is not a sec:{high,crit} [% terms.bug %], please state case for ESR consideration</th> + <td><textarea aria-labelledby="_ar_esr_i1_label"></textarea></td> + </tr> + <tr> + <th id="_ar_esr_i2_label">User impact if declined</th> + <td><textarea aria-labelledby="_ar_esr_i2_label"></textarea></td> + </tr> + <tr> + <th id="_ar_esr_i3_label">Fix Landed on Version</th> + <td><input type="text" aria-labelledby="_ar_esr_i3_label"></td> + </tr> + <tr> + <th id="_ar_esr_i4_label">Risk to taking this patch</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_esr_i4_label"> + <div class="item"><input id="_ar_esr_i4_r1" type="radio" name="_ar_esr_i4_radio" value="Low"><label for="_ar_esr_i4_r1">Low</label></div> + <div class="item"><input id="_ar_esr_i4_r2" type="radio" name="_ar_esr_i4_radio" value="Medium"><label for="_ar_esr_i4_r2">Medium</label></div> + <div class="item"><input id="_ar_esr_i4_r3" type="radio" name="_ar_esr_i4_radio" value="High"><label for="_ar_esr_i4_r3">High</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_esr_i5_label">Why is the change risky/not risky?<br>(and alternatives if risky)</th> + <td><textarea aria-labelledby="_ar_esr_i5_label"></textarea></td> + </tr> + <tr> + <th id="_ar_esr_i6_label">String or UUID changes made by this patch</th> + <td><input type="text" class="long" aria-labelledby="_ar_esr_i6_label"></td> + </tr> + </table> + <p>See <a href="https://wiki.mozilla.org/Release_Management/ESR_Landing_Process" target="_blank">ESR Landing Process</a> for more info.</p> + </fieldset> +</template> + +<template class="approval-request" data-flags="approval‑mozilla‑geckoview*"> + <fieldset> + <legend>GeckoView Uplift Approval Request</legend> + <table> + <tr> + <th id="_ar_gkv_i1_label">If this is not a sec:{high,crit} [% terms.bug %], please state case for consideration</th> + <td><textarea aria-labelledby="_ar_gkv_i1_label"></textarea></td> + </tr> + <tr> + <th id="_ar_gkv_i2_label">User impact if declined</th> + <td><textarea aria-labelledby="_ar_gkv_i2_label"></textarea></td> + </tr> + <tr> + <th id="_ar_gkv_i3_label">Fix Landed on Version</th> + <td><input type="text" aria-labelledby="_ar_gkv_i3_label"></td> + </tr> + <tr> + <th id="_ar_gkv_i4_label">Risk to taking this patch</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_gkv_i4_label"> + <div class="item"><input id="_ar_gkv_i4_r1" type="radio" name="_ar_gkv_i4_radio" value="Low"><label for="_ar_gkv_i4_r1">Low</label></div> + <div class="item"><input id="_ar_gkv_i4_r2" type="radio" name="_ar_gkv_i4_radio" value="Medium"><label for="_ar_gkv_i4_r2">Medium</label></div> + <div class="item"><input id="_ar_gkv_i4_r3" type="radio" name="_ar_gkv_i4_radio" value="High"><label for="_ar_gkv_i4_r3">High</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_gkv_i5_label">Why is the change risky/not risky?<br>(and alternatives if risky)</th> + <td><textarea aria-labelledby="_ar_gkv_i5_label"></textarea></td> + </tr> + <tr> + <th id="_ar_gkv_i6_label">String or UUID changes made by this patch</th> + <td><input type="text" class="long" aria-labelledby="_ar_gkv_i6_label"></td> + </tr> + </table> + <p>See <a href="https://wiki.mozilla.org/Release_Management/Uplift_rules" target="_blank">Patch uplifting rules</a> for more info.</p> + </fieldset> +</template> + +<template class="approval-request" data-flags="sec‑approval"> + <fieldset> + <legend>Security Approval Request</legend> + <table> + <tr> + <th id="_ar_sec_i1_label">How easily could an exploit be constructed based on the patch?</th> + <td><textarea aria-labelledby="_ar_sec_i1_label"></textarea></td> + </tr> + <tr> + <th id="_ar_sec_i2_label">Do comments in the patch, the check-in comment, or tests included in the patch paint a bulls-eye on the security problem?</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_sec_i2_label"> + <div class="item"><input id="_ar_sec_i2_r1" type="radio" name="_ar_sec_i2_radio" value="Yes"><label for="_ar_sec_i2_r1">Yes</label></div> + <div class="item"><input id="_ar_sec_i2_r2" type="radio" name="_ar_sec_i2_radio" value="No"><label for="_ar_sec_i2_r2">No</label></div> + <div class="item"><input id="_ar_sec_i2_r3" type="radio" name="_ar_sec_i2_radio" value="Dunno"><label for="_ar_sec_i2_r3">Dunno</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_sec_i3_label">Which older supported branches are affected by this flaw?</th> + <td><input type="text" aria-labelledby="_ar_sec_i3_label"></td> + </tr> + <tr> + <th id="_ar_sec_i4_label">If not all supported branches, which [% terms.bug %] introduced the flaw?</th> + <td><input type="text" placeholder="[% terms.Bug %] ID" aria-labelledby="_ar_sec_i4_label" data-type="b[% %]ug"></td> + </tr> + <tr> + <th id="_ar_sec_i5_label">Do you have backports for the affected branches?</th> + <td> + <div role="radiogroup" class="buttons toggle" aria-labelledby="_ar_sec_i5_label"> + <div class="item"><input id="_ar_sec_i5_r1" type="radio" name="_ar_sec_i5_radio" value="Yes"><label for="_ar_sec_i5_r1">Yes</label></div> + <div class="item"><input id="_ar_sec_i5_r2" type="radio" name="_ar_sec_i5_radio" value="No"><label for="_ar_sec_i5_r2">No</label></div> + </div> + </td> + </tr> + <tr> + <th id="_ar_sec_i6_label">If not, how different, hard to create, and risky will they be?</th> + <td><textarea aria-labelledby="_ar_sec_i6_label"></textarea></td> + </tr> + <tr> + <th id="_ar_sec_i7_label">How likely is this patch to cause regressions; how much testing does it need?</th> + <td><textarea aria-labelledby="_ar_sec_i7_label"></textarea></td> + </tr> + </table> + </fieldset> +</template> diff --git a/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl b/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl index 88d9d4dd7..56e03040a 100644 --- a/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl +++ b/extensions/FlagTypeComment/template/en/default/flag/type_comment.html.tmpl @@ -20,35 +20,17 @@ # byron jones <glob@mozilla.com> #%] -[% IF ftc_flags.keys.size %] - <script [% script_nonce FILTER none %]> - YAHOO.util.Event.onDOMReady(function() { - var selects = YAHOO.util.Dom.getElementsByClassName('flag_select'); - for (var i = 0; i < selects.length; i++) { - YAHOO.util.Event.on(selects[i], 'change', ftc_on_change); - } - }); +<link rel="stylesheet" href="extensions/FlagTypeComment/web/styles/ftc.css"> +<script [% script_nonce FILTER none %] src="extensions/FlagTypeComment/web/js/ftc.js"></script> - function ftc_on_change(ev) { - var id = ev.target.id.split('-')[1]; - var state = ev.target.value; - var commentEl = document.getElementById('comment'); - if (!commentEl) return; - [% FOREACH type_id = ftc_flags.keys %] - [% FOREACH state = ftc_states %] - if ([% type_id FILTER none %] == id && '[% state FILTER js %]' == state) { - var text = '[% ftc_flags.$type_id.$state FILTER js %]'; - var value = commentEl.value; - if (value == text) { - return; - } else if (value == '') { - commentEl.value = text; - } else { - commentEl.value = text + "\n\n" + value; - } - } - [% END %] +[% IF ftc_flags.keys.size %] + [%# plaintext templates from database %] + [% FOREACH type_id = ftc_flags.keys %] + [% FOREACH state = ftc_states %] + <meta name="ftc:[% type_id FILTER none %]:[% state FILTER html %]" + content="[% ftc_flags.$type_id.$state FILTER html_linebreak %]"> [% END %] - } - </script> + [% END %] + [%# HTML form templates from extensions %] + [% Hook.process("form") %] [% END %] diff --git a/extensions/FlagTypeComment/web/js/ftc.js b/extensions/FlagTypeComment/web/js/ftc.js new file mode 100644 index 000000000..2682721bc --- /dev/null +++ b/extensions/FlagTypeComment/web/js/ftc.js @@ -0,0 +1,189 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. + * + * This Source Code Form is "Incompatible With Secondary Licenses", as + * defined by the Mozilla Public License, v. 2.0. */ + +/** + * Reference or define the Bugzilla app namespace. + * @namespace + */ +var Bugzilla = Bugzilla || {}; // eslint-disable-line no-var + +/** + * Provide the ability to insert a comment template when a patch's approval flag is selected. + */ +Bugzilla.FlagTypeComment = class FlagTypeComment { + /** + * Initialize a new FlagTypeComment instance. + */ + constructor() { + this.templates = [...document.querySelectorAll('template.approval-request')]; + this.$flags = document.querySelector('#flags'); + this.$comment = document.querySelector('#comment'); + + if (this.$flags && this.$comment) { + this.selects = [...this.$flags.querySelectorAll('.flag_select')]; + this.selects.forEach($select => $select.addEventListener('change', () => this.flag_onselect($select))); + this.$comment.form.addEventListener('submit', () => this.form_onsubmit()); + } + } + + /** + * Check if a `<fieldset>` is compatible with the given flag. For example, `approval‑mozilla‑beta` matches + * `<fieldset data-flags="approval‑mozilla‑beta approval‑mozilla‑release">` while `approval‑mozilla‑esr60` + * matches `<fieldset data-flags="approval‑mozilla‑esr*">`. + * @param {String} name Flag name, such as `approval‑mozilla‑beta`. + * @param {(HTMLFieldSetElement|HTMLTemplateElement)} $element `<fieldset>` or `<template>` element with the + * `data-flags` attribute which is a space-separated list of flag names (wildcard chars can be used). + * @returns {Boolean} Whether the `<fieldset>` is compatible. + */ + check_compatibility(name, $element) { + return !!$element.dataset.flags.split(' ') + .find(_name => !!name.match(new RegExp(`^${_name.replace('*', '.+')}$`, 'i'))); + } + + /** + * Return a list of temporary `<fieldset>`s already inserted to the current page. + * @type {Array<HTMLFieldSetElement>} + */ + get inserted_fieldsets() { + return [...this.$flags.parentElement.querySelectorAll('fieldset.approval-request')]; + } + + /** + * Find a temporary `<fieldset>` already inserted to the current page by a flag name. + * @param {String} name Flag name, such as `approval‑mozilla‑beta`. + * @returns {HTMLFieldSetElement} Any `<fieldset>` element. + */ + find_inserted_fieldset(name) { + return this.inserted_fieldsets.find($fieldset => this.check_compatibility(name, $fieldset)); + } + + /** + * Find an available `<fieldset>` embedded in HTML by a flag name. + * @param {String} name Flag name, such as `approval‑mozilla‑beta`. + * @returns {HTMLFieldSetElement} Any `<fieldset>` element. + */ + find_available_fieldset(name) { + for (const $template of this.templates) { + if (this.check_compatibility(name, $template)) { + const $fieldset = $template.content.cloneNode(true).querySelector('fieldset'); + + $fieldset.className = 'approval-request'; + $fieldset.dataset.flags = $template.dataset.flags; + + return $fieldset; + } + } + + return null; + } + + /** + * Find a `<select>` element for a requested flag that matches the given `<fieldset>`. + * @param {HTMLFieldSetElement} $fieldset `<fieldset>` element with the `data-flags` attribute. + * @returns {HTMLSelectElement} Any `<select>` element. + */ + find_select($fieldset) { + return this.selects + .find($_select => $_select.value === '?' && this.check_compatibility($_select.dataset.name, $fieldset)); + } + + /** + * Add text to the comment box at the end of any existing comment. + * @param {String} text Comment text to be added. + */ + add_comment(text) { + this.$comment.value = this.$comment.value.match(/\S+/g) ? [this.$comment.value, text].join('\n\n') : text; + } + + /** + * Called whenever a flag selection is changed. Insert or remove a comment template. + * @param {HTMLSelectElement} $select `<select>` element that the `change` event is fired. + */ + flag_onselect($select) { + const id = Number($select.dataset.id); + const { name } = $select.dataset; + const state = $select.value; + let $fieldset = this.find_inserted_fieldset(name); + + // Remove the temporary `<fieldset>` if not required. One `<fieldset>` can support multiple flags, so, for example, + // if `approval‑mozilla‑release` is unselected but `approval‑mozilla‑beta` is still selected, keep it + if (state !== '?' && $fieldset && !this.find_select($fieldset)) { + $fieldset.remove(); + } + + // Insert a temporary `<fieldset>` if available + if (state === '?' && !$fieldset) { + $fieldset = this.find_available_fieldset(name); + + if ($fieldset) { + this.$flags.parentElement.appendChild($fieldset); + } + } + + // Insert a traditional plaintext comment template if available + if (!$fieldset) { + const $meta = document.querySelector(`meta[name="ftc:${id}:${state}"]`); + const text = $meta ? $meta.content : ''; + + if (text && this.$comment.value !== text) { + this.add_comment(text); + } + } + } + + /** + * Convert the input values into comment text and remove the temporary `<fieldset>` before submitting the form. + * @returns {Boolean} Always `true` to allow submitting the form. + */ + form_onsubmit() { + for (const $fieldset of this.inserted_fieldsets) { + const text = [ + `[${$fieldset.querySelector('legend').innerText}]`, + ...[...$fieldset.querySelectorAll('tr')].map($tr => { + const checkboxes = [...$tr.querySelectorAll('input[type="checkbox"]:checked')]; + const $radio = $tr.querySelector('input[type="radio"]:checked'); + const $input = $tr.querySelector('textarea,select,input'); + const label = $tr.querySelector('th').innerText.replace(/\n/g, ' '); + let value = ''; + + if (checkboxes.length) { + value = checkboxes.map($checkbox => $checkbox.value.trim()).join(', '); + } else if ($radio) { + value = $radio.value.trim(); + } else if ($input) { + value = $input.value.trim(); + + if ($input.dataset.type === 'bug') { + if (!value) { + value = 'None'; + } else if (!isNaN(value)) { + value = `Bug ${value}`; + } + } + + if ($input.dataset.type === 'bugs') { + if (!value) { + value = 'None'; + } else { + value = value.split(/,\s*/).map(str => (!isNaN(str) ? `Bug ${str}` : str)).join(', '); + } + } + } + + return `${label}: ${value}`; + }), + ].join('\n\n'); + + this.add_comment(text); + $fieldset.remove(); + } + + return true; + } +}; + +window.addEventListener('DOMContentLoaded', () => new Bugzilla.FlagTypeComment()); diff --git a/extensions/FlagTypeComment/web/styles/ftc.css b/extensions/FlagTypeComment/web/styles/ftc.css new file mode 100644 index 000000000..93d190935 --- /dev/null +++ b/extensions/FlagTypeComment/web/styles/ftc.css @@ -0,0 +1,58 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. + * + * This Source Code Form is "Incompatible With Secondary Licenses", as + * defined by the Mozilla Public License, v. 2.0. */ + +fieldset.approval-request { + margin: 1em 0; +} + +fieldset.approval-request legend { + font-weight: bold; +} + +fieldset.approval-request th { + padding: .4em; + width: 20em; + line-height: 1.25; + font-weight: normal; + text-align: right; + vertical-align: top; + white-space: normal !important; +} + +fieldset.approval-request td { + vertical-align: middle; +} + +fieldset.approval-request label { + font-weight: normal !important; +} + +fieldset.approval-request input[type="text"] { + width: 10em; +} + +fieldset.approval-request input.long[type="text"] { + width: 40em; +} + +fieldset.approval-request textarea { + width: 40em; + min-height: 5em; + font-size: inherit; + line-height: inherit; + font-family: inherit; + resize: vertical; +} + +fieldset.approval-request div { + padding: 0 !important; +} + +fieldset.approval-request table ~ p:last-child { + margin: .4em; + text-align: right; +} diff --git a/skins/standard/attachment.css b/skins/standard/attachment.css index cec2d49e1..008bc7031 100644 --- a/skins/standard/attachment.css +++ b/skins/standard/attachment.css @@ -133,10 +133,6 @@ table.attachment_info td { display: block; } -#smallCommentFrame, #attachment_flags { - float: left; -} - #smallCommentFrame { margin-right: 1.5em; } diff --git a/skins/standard/global.css b/skins/standard/global.css index e7028f892..81a420077 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -1110,6 +1110,67 @@ select, select[multiple] { font-size: 12px; } +.buttons.toggle[role="radiogroup"] { + display: inline-flex; +} + +.buttons.toggle[role="radiogroup"] .item { + display: flex; +} + +.buttons.toggle[role="radiogroup"] input[type="radio"] { + position: absolute; + left: -99999px; +} + +.buttons.toggle[role="radiogroup"] label { + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 1; + border: 1px solid #B2B2B2; + padding: 4px 12px; + min-width: 1em; + min-height: 1em; + background-color: #FFF; + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1); + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.buttons.toggle[role="radiogroup"] .item:first-child label { + border-radius: 4px 0 0 4px; +} + +.buttons.toggle[role="radiogroup"] .item:last-child label { + border-radius: 0 4px 4px 0; +} + +.buttons.toggle[role="radiogroup"] .item:not(:first-child) label { + margin-left: -1px; + border-left-color: #D2D2D2; +} + +.buttons.toggle[role="radiogroup"] .item:not(:last-child) label { + border-right-color: #D2D2D2; +} + +.buttons.toggle[role="radiogroup"] input[type="radio"]:checked + label { + z-index: 2; + border-color: #B2B2B2; + color: #111; + background-color: #DDD; + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2); +} + +.buttons.toggle[role="radiogroup"] input[type="radio"]:focus + label { + z-index: 2; + border-color: #42A4E0; + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2), 0 0 0 2px rgba(73, 173, 227, .4); +} + hr { border: none; height: 1px; diff --git a/template/en/default/flag/list.html.tmpl b/template/en/default/flag/list.html.tmpl index 6e411add9..bf1c8a6b3 100644 --- a/template/en/default/flag/list.html.tmpl +++ b/template/en/default/flag/list.html.tmpl @@ -131,6 +131,7 @@ title="[% type.description FILTER html %]" onchange="toggleRequesteeField(this);" class="flag_select flag_type-[% type.id %]" + data-id="[% type.id %]" data-name="[% type.name FILTER html FILTER no_break %]" [% IF !can_edit_flag %] disabled="disabled"[% END %]> [%# Only display statuses the user is allowed to set. %] [% IF !flag |