diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/confirm_modal.js | 26 | ||||
-rw-r--r-- | app/assets/javascripts/dropzone_input.js | 11 | ||||
-rw-r--r-- | app/assets/javascripts/lib/utils/datetime_utility.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/projects/project_new.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/confirm_modal.vue | 63 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/tree.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/utilities.scss | 6 |
7 files changed, 109 insertions, 8 deletions
diff --git a/app/assets/javascripts/confirm_modal.js b/app/assets/javascripts/confirm_modal.js new file mode 100644 index 00000000000..1c9346e35e0 --- /dev/null +++ b/app/assets/javascripts/confirm_modal.js @@ -0,0 +1,26 @@ +import Vue from 'vue'; +import ConfirmModal from '~/vue_shared/components/confirm_modal.vue'; + +const mountConfirmModal = button => { + const props = { + path: button.dataset.path, + method: button.dataset.method, + modalAttributes: JSON.parse(button.dataset.modalAttributes), + }; + + return new Vue({ + render(h) { + return h(ConfirmModal, { props }); + }, + }).$mount(); +}; + +export default () => { + document.getElementsByClassName('js-confirm-modal-button').forEach(button => { + button.addEventListener('click', e => { + e.preventDefault(); + + mountConfirmModal(button); + }); + }); +}; diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js index 86590865892..0e2dd59092a 100644 --- a/app/assets/javascripts/dropzone_input.js +++ b/app/assets/javascripts/dropzone_input.js @@ -259,8 +259,15 @@ export default function dropzoneInput(form) { const insertToTextArea = (filename, url) => { const $child = $(child); - $child.val((index, val) => val.replace(`{{${filename}}}`, url)); - + const textarea = $child.get(0); + const caretStart = textarea.selectionStart; + const caretEnd = textarea.selectionEnd; + const formattedText = `{{${filename}}}`; + $child.val((index, val) => val.replace(formattedText, url)); + textarea.setSelectionRange( + caretStart - formattedText.length + url.length, + caretEnd - formattedText.length + url.length, + ); $child.trigger('change'); }; diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index fd9a13be18b..ad8095e1ae3 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -175,6 +175,7 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => { function addTimeAgoTooltip() { $timeagoEls.each((i, el) => { // Recreate with custom template + el.setAttribute('title', formatDate(el.dateTime)); $(el).tooltip({ template: '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 2aa5f6ec626..9cbda324aff 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -169,6 +169,10 @@ const bindEvents = () => { text: s__('ProjectTemplates|Go Micro'), icon: '.template-option .icon-gomicro', }, + gatsby: { + text: s__('ProjectTemplates|Pages/Gatsby'), + icon: '.template-option .icon-gatsby', + }, hugo: { text: s__('ProjectTemplates|Pages/Hugo'), icon: '.template-option .icon-hugo', diff --git a/app/assets/javascripts/vue_shared/components/confirm_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_modal.vue new file mode 100644 index 00000000000..21722f62133 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/confirm_modal.vue @@ -0,0 +1,63 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import csrf from '~/lib/utils/csrf'; + +export default { + components: { + GlModal, + }, + props: { + modalAttributes: { + type: Object, + required: true, + }, + path: { + type: String, + required: true, + }, + method: { + type: String, + required: true, + }, + }, + data() { + return { + isDismissed: false, + }; + }, + mounted() { + this.openModal(); + }, + methods: { + openModal() { + this.$refs.modal.show(); + }, + submitModal() { + this.$refs.form.requestSubmit(); + }, + dismiss() { + this.isDismissed = true; + }, + }, + csrf, +}; +</script> + +<template> + <gl-modal + v-if="!isDismissed" + ref="modal" + v-bind="modalAttributes" + @primary="submitModal" + @canceled="dismiss" + > + <form ref="form" :action="path" method="post"> + <!-- Rails workaround for <form method="delete" /> + https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/features/method.coffee + --> + <input type="hidden" name="_method" :value="method" /> + <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> + <div>{{ modalAttributes.message }}</div> + </form> + </gl-modal> +</template> diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index db1b8c559e5..81e910f91c2 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -17,12 +17,6 @@ .tree-controls { text-align: right; - > .btn, - .project-action-button > .btn, - .git-clone-holder > .btn { - margin-left: 8px; - } - .control { float: left; margin-left: 10px; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 0fd6aafef0d..e27ec571531 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -45,6 +45,12 @@ .border-bottom-color-default { border-bottom-color: $border-color; } .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; } +.gl-children-ml-sm-3 > * { + @include media-breakpoint-up(sm) { + @include gl-ml-3; + } +} + .mh-50vh { max-height: 50vh; } .font-size-inherit { font-size: inherit; } |