summaryrefslogtreecommitdiffstats
path: root/web_src/js/features
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/js/features')
-rw-r--r--web_src/js/features/common-issue.js5
-rw-r--r--web_src/js/features/comp/LabelEdit.js69
-rw-r--r--web_src/js/features/repo-legacy.js74
-rw-r--r--web_src/js/features/repo-projects.js20
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])}`;