diff options
Diffstat (limited to 'app/assets/javascripts/blob/components')
6 files changed, 95 insertions, 42 deletions
diff --git a/app/assets/javascripts/blob/components/blob_content_error.vue b/app/assets/javascripts/blob/components/blob_content_error.vue index 44dc4a6c727..7344b9cdff5 100644 --- a/app/assets/javascripts/blob/components/blob_content_error.vue +++ b/app/assets/javascripts/blob/components/blob_content_error.vue @@ -1,6 +1,6 @@ <script> -import { __ } from '~/locale'; import { GlSprintf, GlLink } from '@gitlab/ui'; +import { __ } from '~/locale'; import { BLOB_RENDER_ERRORS } from './constants'; export default { diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue index 056b4ea4aa8..26ba7b98a39 100644 --- a/app/assets/javascripts/blob/components/blob_edit_content.vue +++ b/app/assets/javascripts/blob/components/blob_edit_content.vue @@ -1,6 +1,12 @@ <script> -import { initEditorLite } from '~/blob/utils'; import { debounce } from 'lodash'; +import { initEditorLite } from '~/blob/utils'; +import { + SNIPPET_MARK_BLOBS_CONTENT, + SNIPPET_MARK_EDIT_APP_START, + SNIPPET_MEASURE_BLOBS_CONTENT, + SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP, +} from '~/performance_constants'; export default { props: { @@ -14,6 +20,13 @@ export default { required: false, default: '', }, + // This is used to help uniquely create a monaco model + // even if two blob's share a file path. + fileGlobalId: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -30,17 +43,33 @@ export default { el: this.$refs.editor, blobPath: this.fileName, blobContent: this.value, + blobGlobalId: this.fileGlobalId, + }); + + this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250)); + + window.requestAnimationFrame(() => { + if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) { + performance.mark(SNIPPET_MARK_BLOBS_CONTENT); + performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT); + performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP, SNIPPET_MARK_EDIT_APP_START); + } }); }, + beforeDestroy() { + this.editor.dispose(); + }, methods: { - triggerFileChange: debounce(function debouncedFileChange() { + onFileChange() { this.$emit('input', this.editor.getValue()); - }, 250), + }, }, }; </script> <template> <div class="file-content code"> - <pre id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">{{ value }}</pre> + <div id="editor" ref="editor" data-editor-loading> + <pre class="editor-loading-content">{{ value }}</pre> + </div> </div> </template> diff --git a/app/assets/javascripts/blob/components/blob_edit_header.vue b/app/assets/javascripts/blob/components/blob_edit_header.vue index e1e1d76f721..2cbbbddceeb 100644 --- a/app/assets/javascripts/blob/components/blob_edit_header.vue +++ b/app/assets/javascripts/blob/components/blob_edit_header.vue @@ -1,9 +1,10 @@ <script> -import { GlFormInput } from '@gitlab/ui'; +import { GlFormInput, GlButton } from '@gitlab/ui'; export default { components: { GlFormInput, + GlButton, }, inheritAttrs: false, props: { @@ -11,6 +12,16 @@ export default { type: String, required: true, }, + canDelete: { + type: Boolean, + required: false, + default: true, + }, + showDelete: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -21,17 +32,27 @@ export default { </script> <template> <div class="js-file-title file-title-flex-parent"> - <gl-form-input - id="snippet_file_name" - v-model="name" - :placeholder=" - s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby') - " - name="snippet_file_name" - class="form-control js-snippet-file-name" - type="text" - v-bind="$attrs" - @change="$emit('input', name)" - /> + <div class="gl-display-flex gl-align-items-center gl-w-full"> + <gl-form-input + v-model="name" + :placeholder=" + s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby') + " + name="snippet_file_name" + class="form-control js-snippet-file-name" + type="text" + v-bind="$attrs" + @change="$emit('input', name)" + /> + <gl-button + v-if="showDelete" + class="gl-ml-4" + variant="danger" + category="secondary" + :disabled="!canDelete" + @click="$emit('delete')" + >{{ s__('Snippets|Delete file') }}</gl-button + > + </div> </div> </template> diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue index 76c5779f3ae..fd40c51fec1 100644 --- a/app/assets/javascripts/blob/components/blob_header.vue +++ b/app/assets/javascripts/blob/components/blob_header.vue @@ -71,7 +71,7 @@ export default { </template> </blob-filepath> - <div class="file-actions d-none d-sm-flex"> + <div class="gl-display-none gl-display-sm-flex"> <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" /> <slot name="actions"></slot> diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue index 62fef108b47..daade611651 100644 --- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue +++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui'; import { BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, @@ -10,9 +10,8 @@ import { export default { components: { - GlIcon, GlButtonGroup, - GlDeprecatedButton, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -48,7 +47,7 @@ export default { </script> <template> <gl-button-group> - <gl-deprecated-button + <gl-button v-if="!hasRenderError" v-gl-tooltip.hover :aria-label="$options.BTN_COPY_CONTENTS_TITLE" @@ -56,26 +55,29 @@ export default { :disabled="copyDisabled" data-clipboard-target="#blob-code-content" data-testid="copyContentsButton" - > - <gl-icon name="copy-to-clipboard" :size="14" /> - </gl-deprecated-button> - <gl-deprecated-button + icon="copy-to-clipboard" + category="primary" + variant="default" + /> + <gl-button v-gl-tooltip.hover :aria-label="$options.BTN_RAW_TITLE" :title="$options.BTN_RAW_TITLE" :href="rawPath" target="_blank" - > - <gl-icon name="doc-code" :size="14" /> - </gl-deprecated-button> - <gl-deprecated-button + icon="doc-code" + category="primary" + variant="default" + /> + <gl-button v-gl-tooltip.hover :aria-label="$options.BTN_DOWNLOAD_TITLE" :title="$options.BTN_DOWNLOAD_TITLE" :href="downloadUrl" target="_blank" - > - <gl-icon name="download" :size="14" /> - </gl-deprecated-button> + icon="download" + category="primary" + variant="default" + /> </gl-button-group> </template> diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue index 5b15fe2d7cc..902dd0b8eec 100644 --- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue +++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui'; import { RICH_BLOB_VIEWER, RICH_BLOB_VIEWER_TITLE, @@ -9,7 +9,6 @@ import { export default { components: { - GlIcon, GlButtonGroup, GlButton, }, @@ -52,19 +51,21 @@ export default { :title="$options.SIMPLE_BLOB_VIEWER_TITLE" :selected="isSimpleViewer" :class="{ active: isSimpleViewer }" + icon="code" + category="primary" + variant="default" @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)" - > - <gl-icon name="code" :size="14" /> - </gl-button> + /> <gl-button v-gl-tooltip.hover :aria-label="$options.RICH_BLOB_VIEWER_TITLE" :title="$options.RICH_BLOB_VIEWER_TITLE" :selected="isRichViewer" :class="{ active: isRichViewer }" + icon="document" + category="primary" + variant="default" @click="switchToViewer($options.RICH_BLOB_VIEWER)" - > - <gl-icon name="document" :size="14" /> - </gl-button> + /> </gl-button-group> </template> |