diff options
Diffstat (limited to 'app/assets')
6 files changed, 100 insertions, 69 deletions
diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_form.js b/app/assets/javascripts/dirty_submit/dirty_submit_form.js index 83dd4b0a124..941c42f75eb 100644 --- a/app/assets/javascripts/dirty_submit/dirty_submit_form.js +++ b/app/assets/javascripts/dirty_submit/dirty_submit_form.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import { memoize, throttle } from 'lodash'; import createEventHub from '~/helpers/event_hub_factory'; @@ -34,7 +33,6 @@ class DirtySubmitForm { this.form.addEventListener('input', throttledUpdateDirtyInput); this.form.addEventListener('change', throttledUpdateDirtyInput); - $(this.form).on('change.select2', throttledUpdateDirtyInput); this.form.addEventListener('submit', (event) => this.formSubmit(event)); } diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_action.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_action.js new file mode 100644 index 00000000000..3bfbfea7f22 --- /dev/null +++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_action.js @@ -0,0 +1,57 @@ +import Vue from 'vue'; + +export function confirmAction( + message, + { + primaryBtnVariant, + primaryBtnText, + secondaryBtnVariant, + secondaryBtnText, + cancelBtnVariant, + cancelBtnText, + modalHtmlMessage, + title, + hideCancel, + } = {}, +) { + return new Promise((resolve) => { + let confirmed = false; + let component; + + const ConfirmAction = Vue.extend({ + components: { + ConfirmModal: () => import('./confirm_modal.vue'), + }, + render(h) { + return h( + 'confirm-modal', + { + props: { + secondaryText: secondaryBtnText, + secondaryVariant: secondaryBtnVariant, + primaryVariant: primaryBtnVariant, + primaryText: primaryBtnText, + cancelVariant: cancelBtnVariant, + cancelText: cancelBtnText, + title, + modalHtmlMessage, + hideCancel, + }, + on: { + confirmed() { + confirmed = true; + }, + closed() { + component.$destroy(); + resolve(confirmed); + }, + }, + }, + [message], + ); + }, + }); + + component = new ConfirmAction().$mount(); + }); +} diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js index 2dc479db80a..0e959e899e9 100644 --- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js +++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js @@ -1,75 +1,21 @@ -import Vue from 'vue'; +import { confirmAction } from './confirm_action'; -export function confirmAction( - message, - { - primaryBtnVariant, - primaryBtnText, - secondaryBtnVariant, - secondaryBtnText, - cancelBtnVariant, - cancelBtnText, - modalHtmlMessage, - title, - hideCancel, - } = {}, -) { - return new Promise((resolve) => { - let confirmed = false; - - const component = new Vue({ - components: { - ConfirmModal: () => import('./confirm_modal.vue'), - }, - render(h) { - return h( - 'confirm-modal', - { - props: { - secondaryText: secondaryBtnText, - secondaryVariant: secondaryBtnVariant, - primaryVariant: primaryBtnVariant, - primaryText: primaryBtnText, - cancelVariant: cancelBtnVariant, - cancelText: cancelBtnText, - title, - modalHtmlMessage, - hideCancel, - }, - on: { - confirmed() { - confirmed = true; - }, - closed() { - component.$destroy(); - resolve(confirmed); - }, - }, - }, - [message], - ); - }, - }).$mount(); - }); -} - -export function confirmViaGlModal(message, element) { - const primaryBtnConfig = {}; - - const { confirmBtnVariant } = element.dataset; - - if (confirmBtnVariant) { - primaryBtnConfig.primaryBtnVariant = confirmBtnVariant; - } +function confirmViaGlModal(message, element) { + const { confirmBtnVariant, title, isHtmlMessage } = element.dataset; const screenReaderText = element.querySelector('.gl-sr-only')?.textContent || element.querySelector('.sr-only')?.textContent || element.getAttribute('aria-label'); - if (screenReaderText) { - primaryBtnConfig.primaryBtnText = screenReaderText; - } + const config = { + ...(screenReaderText && { primaryBtnText: screenReaderText }), + ...(confirmBtnVariant && { primaryBtnVariant: confirmBtnVariant }), + ...(title && { title }), + ...(isHtmlMessage && { modalHtmlMessage: message }), + }; - return confirmAction(message, primaryBtnConfig); + return confirmAction(message, config); } + +export { confirmAction, confirmViaGlModal }; diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 02b76b89482..7a92adf7b7b 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -207,7 +207,7 @@ body { } @include media-breakpoint-up(sm) { - .logged-out-marketing-header-candidate { + .logged-out-marketing-header { --header-height: 72px; } } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index e6f8c6a5676..687b466ab76 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -603,6 +603,11 @@ svg { html { overflow-y: scroll; } +@media (min-width: 576px) { + .logged-out-marketing-header { + --header-height: 72px; + } +} .btn { border-radius: 4px; font-size: 0.875rem; @@ -2054,9 +2059,19 @@ body.gl-dark { .gl-display-none { display: none; } +@media (min-width: 576px) { + .gl-sm-display-none { + display: none; + } +} .gl-display-flex { display: flex; } +@media (min-width: 992px) { + .gl-lg-display-flex { + display: flex; + } +} @media (min-width: 576px) { .gl-sm-display-block { display: block; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index b8079c274f1..802262ba346 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -584,6 +584,11 @@ svg { html { overflow-y: scroll; } +@media (min-width: 576px) { + .logged-out-marketing-header { + --header-height: 72px; + } +} .btn { border-radius: 4px; font-size: 0.875rem; @@ -1700,9 +1705,19 @@ svg.s16 { .gl-display-none { display: none; } +@media (min-width: 576px) { + .gl-sm-display-none { + display: none; + } +} .gl-display-flex { display: flex; } +@media (min-width: 992px) { + .gl-lg-display-flex { + display: flex; + } +} @media (min-width: 576px) { .gl-sm-display-block { display: block; |