diff options
Diffstat (limited to 'web_src/js/features')
-rw-r--r-- | web_src/js/features/common-issue.js | 5 | ||||
-rw-r--r-- | web_src/js/features/comp/LabelEdit.js | 69 | ||||
-rw-r--r-- | web_src/js/features/repo-legacy.js | 74 | ||||
-rw-r--r-- | web_src/js/features/repo-projects.js | 20 |
4 files changed, 117 insertions, 51 deletions
diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js index 4a62089c60..f53dd5081b 100644 --- a/web_src/js/features/common-issue.js +++ b/web_src/js/features/common-issue.js @@ -32,7 +32,7 @@ export function initCommonIssue() { syncIssueSelectionState(); }); - $('.issue-action').on('click', async function () { + $('.issue-action').on('click', async function (e) { let action = this.getAttribute('data-action'); let elementId = this.getAttribute('data-element-id'); const url = this.getAttribute('data-url'); @@ -43,6 +43,9 @@ export function initCommonIssue() { elementId = ''; action = 'clear'; } + if (action === 'toggle' && e.altKey) { + action = 'toggle-alt'; + } updateIssuesMeta( url, action, diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js index df294078fa..313d406821 100644 --- a/web_src/js/features/comp/LabelEdit.js +++ b/web_src/js/features/comp/LabelEdit.js @@ -1,26 +1,64 @@ import $ from 'jquery'; import {initCompColorPicker} from './ColorPicker.js'; +function isExclusiveScopeName(name) { + return /.*[^/]\/[^/].*/.test(name); +} + +function updateExclusiveLabelEdit(form) { + const nameInput = $(`${form} .label-name-input`); + const exclusiveField = $(`${form} .label-exclusive-input-field`); + const exclusiveCheckbox = $(`${form} .label-exclusive-input`); + const exclusiveWarning = $(`${form} .label-exclusive-warning`); + + if (isExclusiveScopeName(nameInput.val())) { + exclusiveField.removeClass('muted'); + if (exclusiveCheckbox.prop('checked') && exclusiveCheckbox.data('exclusive-warn')) { + exclusiveWarning.removeClass('gt-hidden'); + } else { + exclusiveWarning.addClass('gt-hidden'); + } + } else { + exclusiveField.addClass('muted'); + exclusiveWarning.addClass('gt-hidden'); + } +} + export function initCompLabelEdit(selector) { if (!$(selector).length) return; + initCompColorPicker(); + // Create label - const $newLabelPanel = $('.new-label.segment'); $('.new-label.button').on('click', () => { - $newLabelPanel.show(); - }); - $('.new-label.segment .cancel').on('click', () => { - $newLabelPanel.hide(); + updateExclusiveLabelEdit('.new-label'); + $('.new-label.modal').modal({ + onApprove() { + $('.new-label.form').trigger('submit'); + } + }).modal('show'); + return false; }); - initCompColorPicker(); - + // Edit label $('.edit-label-button').on('click', function () { $('.edit-label .color-picker').minicolors('value', $(this).data('color')); $('#label-modal-id').val($(this).data('id')); - $('.edit-label .new-label-input').val($(this).data('title')); - $('.edit-label .new-label-desc-input').val($(this).data('description')); + + const nameInput = $('.edit-label .label-name-input'); + nameInput.val($(this).data('title')); + + const exclusiveCheckbox = $('.edit-label .label-exclusive-input'); + exclusiveCheckbox.prop('checked', this.hasAttribute('data-exclusive')); + // Warn when label was previously not exclusive and used in issues + exclusiveCheckbox.data('exclusive-warn', + $(this).data('num-issues') > 0 && + (!this.hasAttribute('data-exclusive') || !isExclusiveScopeName(nameInput.val()))); + updateExclusiveLabelEdit('.edit-label'); + + $('.edit-label .label-desc-input').val($(this).data('description')); $('.edit-label .color-picker').val($(this).data('color')); $('.edit-label .minicolors-swatch-color').css('background-color', $(this).data('color')); + $('.edit-label.modal').modal({ onApprove() { $('.edit-label.form').trigger('submit'); @@ -28,4 +66,17 @@ export function initCompLabelEdit(selector) { }).modal('show'); return false; }); + + $('.new-label .label-name-input').on('input', () => { + updateExclusiveLabelEdit('.new-label'); + }); + $('.new-label .label-exclusive-input').on('change', () => { + updateExclusiveLabelEdit('.new-label'); + }); + $('.edit-label .label-name-input').on('input', () => { + updateExclusiveLabelEdit('.edit-label'); + }); + $('.edit-label .label-exclusive-input').on('change', () => { + updateExclusiveLabelEdit('.edit-label'); + }); } diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 07c67ba5da..2cf4963b6a 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -110,35 +110,59 @@ export function initRepoCommentForm() { } hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var - if ($(this).hasClass('checked')) { - $(this).removeClass('checked'); - $(this).find('.octicon-check').addClass('invisible'); - if (hasUpdateAction) { - if (!($(this).data('id') in items)) { - items[$(this).data('id')] = { - 'update-url': $listMenu.data('update-url'), - action: 'detach', - 'issue-id': $listMenu.data('issue-id'), - }; - } else { - delete items[$(this).data('id')]; + + const clickedItem = $(this); + const scope = $(this).attr('data-scope'); + const canRemoveScope = e.altKey; + + $(this).parent().find('.item').each(function () { + if (scope) { + // Enable only clicked item for scoped labels + if ($(this).attr('data-scope') !== scope) { + return true; } + if ($(this).is(clickedItem)) { + if (!canRemoveScope && $(this).hasClass('checked')) { + return true; + } + } else if (!$(this).hasClass('checked')) { + return true; + } + } else if (!$(this).is(clickedItem)) { + // Toggle for other labels + return true; } - } else { - $(this).addClass('checked'); - $(this).find('.octicon-check').removeClass('invisible'); - if (hasUpdateAction) { - if (!($(this).data('id') in items)) { - items[$(this).data('id')] = { - 'update-url': $listMenu.data('update-url'), - action: 'attach', - 'issue-id': $listMenu.data('issue-id'), - }; - } else { - delete items[$(this).data('id')]; + + if ($(this).hasClass('checked')) { + $(this).removeClass('checked'); + $(this).find('.octicon-check').addClass('invisible'); + if (hasUpdateAction) { + if (!($(this).data('id') in items)) { + items[$(this).data('id')] = { + 'update-url': $listMenu.data('update-url'), + action: 'detach', + 'issue-id': $listMenu.data('issue-id'), + }; + } else { + delete items[$(this).data('id')]; + } + } + } else { + $(this).addClass('checked'); + $(this).find('.octicon-check').removeClass('invisible'); + if (hasUpdateAction) { + if (!($(this).data('id') in items)) { + items[$(this).data('id')] = { + 'update-url': $listMenu.data('update-url'), + action: 'attach', + 'issue-id': $listMenu.data('issue-id'), + }; + } else { + delete items[$(this).data('id')]; + } } } - } + }); // TODO: Which thing should be done for choosing review requests // to make chosen items be shown on time here? diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index f6d6c89816..534f517853 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {useLightTextOnBackground} from '../utils.js'; const {csrfToken} = window.config; @@ -183,26 +184,13 @@ export function initRepoProject() { } function setLabelColor(label, color) { - const red = getRelativeColor(parseInt(color.slice(1, 3), 16)); - const green = getRelativeColor(parseInt(color.slice(3, 5), 16)); - const blue = getRelativeColor(parseInt(color.slice(5, 7), 16)); - const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue; - - if (luminance > 0.179) { - label.removeClass('light-label').addClass('dark-label'); - } else { + if (useLightTextOnBackground(color)) { label.removeClass('dark-label').addClass('light-label'); + } else { + label.removeClass('light-label').addClass('dark-label'); } } -/** - * Inspired by W3C recommendation https://www.w3.org/TR/WCAG20/#relativeluminancedef - */ -function getRelativeColor(color) { - color /= 255; - return color <= 0.03928 ? color / 12.92 : ((color + 0.055) / 1.055) ** 2.4; -} - function rgbToHex(rgb) { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)$/); return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`; |