From 7e9c479f7de77702622631cff2628a9c8dcbc627 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Thu, 19 Nov 2020 08:27:35 +0000 Subject: Add latest changes from gitlab-org/gitlab@13-6-stable-ee --- .../javascripts/behaviors/copy_to_clipboard.js | 30 ++++++++++++++++++++++ .../javascripts/behaviors/details_behavior.js | 28 -------------------- app/assets/javascripts/behaviors/index.js | 1 - .../behaviors/markdown/gfm_auto_complete.js | 1 + .../behaviors/markdown/render_mermaid.js | 2 +- app/assets/javascripts/behaviors/quick_submit.js | 16 ++++++------ .../behaviors/shortcuts/shortcuts_issuable.js | 17 ++++++++++++ .../javascripts/behaviors/toggler_behavior.js | 18 +++++++++---- 8 files changed, 70 insertions(+), 43 deletions(-) delete mode 100644 app/assets/javascripts/behaviors/details_behavior.js (limited to 'app/assets/javascripts/behaviors') diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js index 430a8c38387..e822072d669 100644 --- a/app/assets/javascripts/behaviors/copy_to_clipboard.js +++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js @@ -79,3 +79,33 @@ export default function initCopyToClipboard() { clipboardData.setData('text/x-gfm', json.gfm); }); } + +/** + * Programmatically triggers a click event on a + * "copy to clipboard" button, causing its + * contents to be copied. Handles some of the messiniess + * around managing the button's tooltip. + * @param {HTMLElement} btnElement + */ +export function clickCopyToClipboardButton(btnElement) { + const $btnElement = $(btnElement); + + // Ensure the button has already been tooltip'd. + // If the use hasn't yet interacted (i.e. hovered or clicked) + // with the button, Bootstrap hasn't yet initialized + // the tooltip, and its `data-original-title` will be `undefined`. + // This value is used in the functions above. + $btnElement.tooltip(); + btnElement.dispatchEvent(new MouseEvent('mouseover')); + + btnElement.click(); + + // Manually trigger the necessary events to hide the + // button's tooltip and allow the button to perform its + // tooltip cleanup (updating the title from "Copied" back + // to its original title, "Copy branch name"). + setTimeout(() => { + btnElement.dispatchEvent(new MouseEvent('mouseout')); + $btnElement.tooltip('hide'); + }, 2000); +} diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js deleted file mode 100644 index 9bdfc21c7e4..00000000000 --- a/app/assets/javascripts/behaviors/details_behavior.js +++ /dev/null @@ -1,28 +0,0 @@ -import $ from 'jquery'; - -$(() => { - $('body').on('click', '.js-details-target', function target() { - $(this) - .closest('.js-details-container') - .toggleClass('open'); - }); - - // Show details content. Hides link after click. - // - // %div - // %a.js-details-expand - // %div.js-details-content - // - $('body').on('click', '.js-details-expand', function expand(e) { - e.preventDefault(); - $(this) - .next('.js-details-content') - .removeClass('hide'); - $(this).hide(); - - const truncatedItem = $(this).siblings('.js-details-short'); - if (truncatedItem.length) { - truncatedItem.addClass('hide'); - } - }); -}); diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js index 613309a1c5a..75659bbf685 100644 --- a/app/assets/javascripts/behaviors/index.js +++ b/app/assets/javascripts/behaviors/index.js @@ -4,7 +4,6 @@ import './bind_in_out'; import './markdown/render_gfm'; import initCopyAsGFM from './markdown/copy_as_gfm'; import initCopyToClipboard from './copy_to_clipboard'; -import './details_behavior'; import installGlEmojiElement from './gl_emoji'; import './quick_submit'; import './requires_input'; diff --git a/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js b/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js index 83f2ca0bdc2..d712c90242c 100644 --- a/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js +++ b/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js @@ -14,6 +14,7 @@ export default function initGFMInput($els) { milestones: enableGFM, mergeRequests: enableGFM, labels: enableGFM, + vulnerabilities: enableGFM, }); }); } diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index cb0e6345059..233c5f84340 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js @@ -25,7 +25,7 @@ function importMermaidModule() { return import(/* webpackChunkName: 'mermaid' */ 'mermaid') .then(mermaid => { let theme = 'neutral'; - const ideDarkThemes = ['dark', 'solarized-dark']; + const ideDarkThemes = ['dark', 'solarized-dark', 'monokai']; if ( ideDarkThemes.includes(window.gon?.user_color_scheme) && diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js index 49eab3e4f09..907cfc06e28 100644 --- a/app/assets/javascripts/behaviors/quick_submit.js +++ b/app/assets/javascripts/behaviors/quick_submit.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import '../commons/bootstrap'; import { isInIssuePage } from '../lib/utils/common_utils'; import { __ } from '~/locale'; +import { add, show, hide } from '~/tooltips'; // Quick Submit behavior // @@ -65,18 +66,17 @@ $(document).on( return; } - const $this = $(this); + const $el = $(this); const title = isMac() - ? __('You can also press ⌘-Enter') + ? __('You can also press \u{2318}-Enter') : __('You can also press Ctrl-Enter'); - $this.tooltip({ - container: 'body', - html: true, - placement: 'top', + add($el, { + triggers: 'manual', + show: true, title, - trigger: 'manual', }); - $this.tooltip('show').one('blur click', () => $this.tooltip('hide')); + $el.one('blur click', () => hide($el)); + show($el); }, ); diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js index f7b327b2af1..5a5a67334d3 100644 --- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js @@ -4,6 +4,8 @@ import Sidebar from '../../right_sidebar'; import Shortcuts from './shortcuts'; import { CopyAsGFM } from '../markdown/copy_as_gfm'; import { getSelectedFragment } from '~/lib/utils/common_utils'; +import { isElementVisible } from '~/lib/utils/dom_utils'; +import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard'; export default class ShortcutsIssuable extends Shortcuts { constructor() { @@ -14,6 +16,7 @@ export default class ShortcutsIssuable extends Shortcuts { Mousetrap.bind('l', () => ShortcutsIssuable.openSidebarDropdown('labels')); Mousetrap.bind('r', ShortcutsIssuable.replyWithSelectedText); Mousetrap.bind('e', ShortcutsIssuable.editIssue); + Mousetrap.bind('b', ShortcutsIssuable.copyBranchName); } static replyWithSelectedText() { @@ -98,4 +101,18 @@ export default class ShortcutsIssuable extends Shortcuts { Sidebar.instance.openDropdown(name); return false; } + + static copyBranchName() { + // There are two buttons - one that is shown when the sidebar + // is expanded, and one that is shown when it's collapsed. + const allCopyBtns = Array.from(document.querySelectorAll('.sidebar-source-branch button')); + + // Select whichever button is currently visible so that + // the "Copied" tooltip is shown when a click is simulated. + const visibleBtn = allCopyBtns.find(isElementVisible); + + if (visibleBtn) { + clickCopyToClipboardButton(visibleBtn); + } + } } diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js index ef8b8788abf..4b63143c4ba 100644 --- a/app/assets/javascripts/behaviors/toggler_behavior.js +++ b/app/assets/javascripts/behaviors/toggler_behavior.js @@ -12,11 +12,19 @@ import { getLocationHash } from '../lib/utils/url_utility'; $(() => { function toggleContainer(container, toggleState) { const $container = $(container); - - $container - .find('.js-toggle-button .fa-chevron-up, .js-toggle-button .fa-chevron-down') - .toggleClass('fa-chevron-up', toggleState) - .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); + const isExpanded = $container.data('is-expanded'); + const $collapseIcon = $container.find('.js-sidebar-collapse'); + const $expandIcon = $container.find('.js-sidebar-expand'); + + if (isExpanded && !toggleState) { + $container.data('is-expanded', false); + $collapseIcon.addClass('hidden'); + $expandIcon.removeClass('hidden'); + } else { + $container.data('is-expanded', true); + $expandIcon.addClass('hidden'); + $collapseIcon.removeClass('hidden'); + } $container.find('.js-toggle-content').toggle(toggleState); } -- cgit v1.2.3