diff options
Diffstat (limited to 'app/assets/javascripts')
15 files changed, 72 insertions, 79 deletions
diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue index 963d104b6b3..9abfd43d85c 100644 --- a/app/assets/javascripts/batch_comments/components/draft_note.vue +++ b/app/assets/javascripts/batch_comments/components/draft_note.vue @@ -81,7 +81,7 @@ export default { @handleUpdateNote="update" @toggleResolveStatus="toggleResolveDiscussion(draft.id)" > - <strong slot="note-header-info" class="badge draft-pending-label append-right-4"> + <strong slot="note-header-info" class="badge draft-pending-label gl-mr-2"> {{ __('Pending') }} </strong> </noteable-note> diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index f2e198eaedb..d90928f35b6 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -153,7 +153,7 @@ export default { v-gl-tooltip name="issue-block" :title="__('Blocked issue')" - class="issue-blocked-icon append-right-4" + class="issue-blocked-icon gl-mr-2" :aria-label="__('Blocked issue')" /> <icon @@ -161,7 +161,7 @@ export default { v-gl-tooltip name="eye-slash" :title="__('Confidential')" - class="confidential-icon append-right-4" + class="confidential-icon gl-mr-2" :aria-label="__('Confidential')" /> <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{ diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index d2110483c1c..00eeac5a9d3 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -166,13 +166,7 @@ export default { class="diff-toggle-caret append-right-5" @click.stop="handleToggleFile" /> - <a - v-once - ref="titleWrapper" - class="append-right-4" - :href="titleLink" - @click="handleFileNameClick" - > + <a v-once ref="titleWrapper" class="gl-mr-2" :href="titleLink" @click="handleFileNameClick"> <file-icon :file-name="filePath" :size="18" diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 6b9748bb725..be90ba12678 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -104,7 +104,7 @@ export default { :class="{ 'project-row-contents': !isGroup }" class="group-row-contents d-flex align-items-center py-2 pr-3" > - <div class="folder-toggle-wrap append-right-4 d-flex align-items-center"> + <div class="folder-toggle-wrap gl-mr-2 d-flex align-items-center"> <item-caret :is-group-open="group.isOpen" /> <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" /> </div> @@ -140,7 +140,7 @@ export default { <item-stats-value :icon-name="visibilityIcon" :title="visibilityTooltip" - css-class="item-visibility d-inline-flex align-items-center gl-mt-3 append-right-4 text-secondary" + css-class="item-visibility d-inline-flex align-items-center gl-mt-3 gl-mr-2 text-secondary" /> <span v-if="group.permission" class="user-access-role gl-mt-3"> {{ group.permission }} diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue index 18ea4819878..cd3e3de4cb4 100644 --- a/app/assets/javascripts/groups/components/item_caret.vue +++ b/app/assets/javascripts/groups/components/item_caret.vue @@ -21,5 +21,5 @@ export default { </script> <template> - <span class="folder-caret append-right-4"> <icon :size="10" :name="iconClass" /> </span> + <span class="folder-caret gl-mr-2"> <icon :size="10" :name="iconClass" /> </span> </template> diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index da01269a50c..b69e6f9686f 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -31,7 +31,7 @@ export default { s__(`This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:`) }} - <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4"> + <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2"> {{ tag }} </span> </p> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 52642dadea6..3c52368acdd 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -316,6 +316,16 @@ export default { // As a fallback, switch to default time range instead this.selectedTimeRange = defaultTimeRange; }, + isPanelHalfWidth(panelIndex, totalPanels) { + /** + * A single panel on a row should take the full width of its parent. + * All others should have half the width their parent. + */ + const isNumberOfPanelsEven = totalPanels % 2 === 0; + const isLastPanel = panelIndex === totalPanels - 1; + + return isNumberOfPanelsEven || !isLastPanel; + }, }, i18n: { goBackLabel: s__('Metrics|Go back (Esc)'), @@ -391,8 +401,12 @@ export default { <div v-for="(graphData, graphIndex) in groupData.panels" :key="`dashboard-panel-${graphIndex}`" - class="col-12 col-lg-6 px-2 mb-2 draggable" - :class="{ 'draggable-enabled': isRearrangingPanels }" + data-testid="dashboard-panel-layout-wrapper" + class="col-12 px-2 mb-2 draggable" + :class="{ + 'draggable-enabled': isRearrangingPanels, + 'col-lg-6': isPanelHalfWidth(graphIndex, groupData.panels.length), + }" > <div class="position-relative draggable-panel js-draggable-panel"> <div diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 1ff5b662d18..02fbf342ba7 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -172,7 +172,7 @@ export default { :class="{ 'has-upstream prepend-left-64': hasUpstream(index), 'has-only-one-job': hasOnlyOneJob(stage), - 'append-right-46': shouldAddRightMargin(index), + 'gl-mr-26': shouldAddRightMargin(index), }" :title="capitalizeStageName(stage.name)" :groups="stage.groups" diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue index 3c4b87e2329..558a8e38e43 100644 --- a/app/assets/javascripts/releases/components/release_block_assets.vue +++ b/app/assets/javascripts/releases/components/release_block_assets.vue @@ -157,7 +157,7 @@ export default { <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list"> <li v-for="link in assets.links" :key="link.name" class="gl-mb-3"> <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl"> - <icon name="package" class="align-middle append-right-4 align-text-bottom" /> + <icon name="package" class="align-middle gl-mr-2 align-text-bottom" /> {{ link.name }} <span v-if="link.external" data-testid="external-link-indicator">{{ __('(external source)') @@ -174,7 +174,7 @@ export default { aria-haspopup="true" aria-expanded="false" > - <icon name="doc-code" class="align-top append-right-4" /> + <icon name="doc-code" class="align-top gl-mr-2" /> {{ __('Source code') }} <icon name="chevron-down" /> </button> diff --git a/app/assets/javascripts/releases/components/release_block_metadata.vue b/app/assets/javascripts/releases/components/release_block_metadata.vue index a3377ce044a..861c2e11798 100644 --- a/app/assets/javascripts/releases/components/release_block_metadata.vue +++ b/app/assets/javascripts/releases/components/release_block_metadata.vue @@ -75,7 +75,7 @@ export default { <release-block-milestones v-if="shouldRenderMilestones" :milestones="release.milestones" /> - <div class="append-right-4"> + <div class="gl-mr-2"> • <span v-gl-tooltip.bottom diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue index 4f75e15a149..b16ae400d6b 100644 --- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue +++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue @@ -126,12 +126,12 @@ export default { v-gl-tooltip :title="milestone.description" :href="milestone.webUrl" - class="append-right-4" + class="gl-mr-2" > {{ milestone.title }} </gl-link> <template v-if="shouldRenderBullet(index)"> - <span :key="'bullet-' + milestone.id" class="append-right-4">•</span> + <span :key="'bullet-' + milestone.id" class="gl-mr-2">•</span> </template> <template v-if="shouldRenderShowMoreLink(index)"> <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll"> diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue index b8c6be51afa..b052c211542 100644 --- a/app/assets/javascripts/static_site_editor/components/edit_area.vue +++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue @@ -37,41 +37,28 @@ export default { saveable: false, parsedSource: parseSourceFile(this.content), editorMode: EDITOR_TYPES.wysiwyg, + isModified: false, }; }, computed: { editableContent() { - return this.parsedSource.editable; - }, - editableKey() { - return this.isWysiwygMode ? 'body' : 'raw'; + return this.parsedSource.content(this.isWysiwygMode); }, isWysiwygMode() { return this.editorMode === EDITOR_TYPES.wysiwyg; }, - modified() { - return this.isWysiwygMode - ? this.parsedSource.isModifiedBody() - : this.parsedSource.isModifiedRaw(); - }, }, methods: { - syncSource() { - if (this.isWysiwygMode) { - this.parsedSource.syncBodyToRaw(); - return; - } - - this.parsedSource.syncRawToBody(); + onInputChange(newVal) { + this.parsedSource.sync(newVal, this.isWysiwygMode); + this.isModified = this.parsedSource.isModified(); }, onModeChange(mode) { - // Sequentially sync then switch modes (rich-content-editor's v-model computed source content update) - this.syncSource(); this.editorMode = mode; + this.$refs.editor.resetInitialValue(this.editableContent); }, onSubmit() { - this.syncSource(); - this.$emit('submit', { content: this.editableContent.raw }); + this.$emit('submit', { content: this.parsedSource.content() }); }, }, }; @@ -80,16 +67,18 @@ export default { <div class="d-flex flex-grow-1 flex-column h-100"> <edit-header class="py-2" :title="title" /> <rich-content-editor - v-model="editableContent[editableKey]" + ref="editor" + :content="editableContent" :initial-edit-type="editorMode" class="mb-9 h-100" @modeChange="onModeChange" + @input="onInputChange" /> - <unsaved-changes-confirm-dialog :modified="modified" /> + <unsaved-changes-confirm-dialog :modified="isModified" /> <publish-toolbar class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full" :return-url="returnUrl" - :saveable="modified" + :saveable="isModified" :saving-changes="savingChanges" @submit="onSubmit" /> diff --git a/app/assets/javascripts/static_site_editor/services/parse_source_file.js b/app/assets/javascripts/static_site_editor/services/parse_source_file.js index c22bd1d27f2..126dfe81b90 100644 --- a/app/assets/javascripts/static_site_editor/services/parse_source_file.js +++ b/app/assets/javascripts/static_site_editor/services/parse_source_file.js @@ -22,33 +22,43 @@ const parseSourceFile = raw => { return buildPayload(source, '', '', source); }; - const computedRaw = () => `${editable.header}${editable.spacing}${editable.body}`; - - const syncRawToBody = () => { + const syncEditable = () => { /* We re-parse as markdown editing could have added non-body changes (preFrontMatter, frontMatter, or spacing). - Re-parsing additionally gets us the desired body that was extracted from the mutated editable.raw - Additionally we intentionally mutate the existing editable's key values as opposed to reassigning the object itself so consumers of the potentially reactive property stay in sync. + Re-parsing additionally gets us the desired body that was extracted from the potentially mutated editable.raw */ - Object.assign(editable, parse(editable.raw)); + editable = parse(editable.raw); }; const syncBodyToRaw = () => { - editable.raw = computedRaw(); + editable.raw = `${editable.header}${editable.spacing}${editable.body}`; + }; + + const sync = (newVal, isBodyToRaw) => { + const editableKey = isBodyToRaw ? 'body' : 'raw'; + editable[editableKey] = newVal; + + if (isBodyToRaw) { + syncBodyToRaw(); + } + + syncEditable(); + }; + + const content = (isBody = false) => { + const editableKey = isBody ? 'body' : 'raw'; + return editable[editableKey]; }; - const isModifiedRaw = () => initial.raw !== editable.raw; - const isModifiedBody = () => initial.raw !== computedRaw(); + const isModified = () => initial.raw !== editable.raw; initial = parse(raw); editable = parse(raw); return { - editable, - isModifiedRaw, - isModifiedBody, - syncBodyToRaw, - syncRawToBody, + content, + isModified, + sync, }; }; diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue index 63de1e009fd..caf13bc898b 100644 --- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue +++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue @@ -82,7 +82,7 @@ export default { v-gl-tooltip name="eye-slash" :title="__('Confidential')" - class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0" + class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0" :aria-label="__('Confidential')" /> <a :href="computedPath" class="sortable-link gl-font-weight-normal">{{ title }}</a> diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue index 76d7683e889..aaa13985b09 100644 --- a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue +++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue @@ -27,7 +27,7 @@ export default { AddImageModal, }, props: { - value: { + content: { type: String, required: true, }, @@ -66,23 +66,6 @@ export default { return this.$refs.editor; }, }, - watch: { - value(newVal) { - const isSameMode = this.previousMode === this.editorApi.currentMode; - if (!isSameMode) { - /* - The ToastUI Editor consumes its content via the `initial-value` prop and then internally - manages changes. If we desire the `v-model` to work as expected, we need to manually call - `setMarkdown`. However, if we do this in each v-model change we'll continually prevent - the editor from internally managing changes. Thus we use the `previousMode` flag as - confirmation to actually update its internals. This is initially designed so that front - matter is excluded from editing in wysiwyg mode, but included in markdown mode. - */ - this.editorInstance.invoke('setMarkdown', newVal); - this.previousMode = this.editorApi.currentMode; - } - }, - }, beforeDestroy() { removeCustomEventListener( this.editorApi, @@ -93,6 +76,9 @@ export default { this.editorApi.eventManager.removeEventHandler('changeMode', this.onChangeMode); }, methods: { + resetInitialValue(newVal) { + this.editorInstance.invoke('setMarkdown', newVal); + }, onContentChanged() { this.$emit('input', getMarkdown(this.editorInstance)); }, @@ -123,7 +109,7 @@ export default { <div> <toast-editor ref="editor" - :initial-value="value" + :initial-value="content" :options="editorOptions" :preview-style="previewStyle" :initial-edit-type="initialEditType" |