diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
77 files changed, 726 insertions, 1060 deletions
diff --git a/app/assets/javascripts/vue_shared/components/bar_chart.vue b/app/assets/javascripts/vue_shared/components/bar_chart.vue index 690dd794ba4..4abf795f7bd 100644 --- a/app/assets/javascripts/vue_shared/components/bar_chart.vue +++ b/app/assets/javascripts/vue_shared/components/bar_chart.vue @@ -271,25 +271,17 @@ export default { }; </script> <template> - <div - ref="svgContainer" - :class="activateGrabCursor" - class="svg-graph-container" - > + <div ref="svgContainer" :class="activateGrabCursor" class="svg-graph-container"> <svg ref="baseSvg" :width="vpWidth" :height="vpHeight" :viewBox="svgViewBox" - :preserveAspectRatio="preserveAspectRatioType"> - <g - ref="xAxis" - :transform="xAxisLocation" - class="x-axis" - /> + :preserveAspectRatio="preserveAspectRatioType" + > + <g ref="xAxis" :transform="xAxisLocation" class="x-axis" /> <g v-if="!isLoading"> - <template - v-for="(data, index) in graphData"> + <template v-for="(data, index) in graphData"> <rect :key="index" v-tooltip @@ -301,43 +293,24 @@ export default { :title="setTooltipTitle(data)" class="bar-rect" data-placement="top" - @mouseover="barHoveredIn(index)" - @mouseout="barHoveredOut(index)" + @mouseover="barHoveredIn(index);" + @mouseout="barHoveredOut(index);" /> </template> </g> - <rect - :height="vbHeight + 100" - transform="translate(-100, -5)" - width="100" - fill="#fff" - /> + <rect :height="vbHeight + 100" transform="translate(-100, -5)" width="100" fill="#fff" /> <g class="y-axis-label"> - <line - :x1="0" - :x2="0" - :y1="0" - :y2="vbHeight" - transform="translate(-35, 0)" - stroke="black" - /> - <!--Get text length and change the height of this rect accordingly--> + <line :x1="0" :x2="0" :y1="0" :y2="vbHeight" transform="translate(-35, 0)" stroke="black" /> + <!-- Get text length and change the height of this rect accordingly --> <rect :height="rectYAxisLabelDims.height" :transform="yAxisLabelRectTransform" :width="30" fill="#fff" /> - <text - ref="yAxisLabel" - :transform="yAxisLabelTextTransform" - > - {{ yAxisLabel }} - </text> + <text ref="yAxisLabel" :transform="yAxisLabelTextTransform">{{ yAxisLabel }}</text> </g> - <g - class="y-axis" - /> + <g class="y-axis" /> <g v-if="showScrollIndicator"> <rect :height="vbHeight + 100" @@ -354,38 +327,24 @@ export default { class="animate-flicker" /> </g> - <!--The line that shows up when the data elements surpass the available width --> - <g - v-if="showScrollIndicator" - :transform="scrollIndicatorTransform"> - <rect - :height="vbHeight" - x="0" - y="0" - width="20" - fill="url(#shadow-gradient)" - /> + <!-- The line that shows up when the data elements surpass the available width --> + <g v-if="showScrollIndicator" :transform="scrollIndicatorTransform"> + <rect :height="vbHeight" x="0" y="0" width="20" fill="url(#shadow-gradient)" /> </g> - <!--Left scroll indicator--> - <g - v-if="showLeftScrollIndicator" - transform="translate(0, 0)"> - <rect - :height="vbHeight" - x="0" - y="0" - width="20" - fill="url(#left-shadow-gradient)" - /> + <!-- Left scroll indicator --> + <g v-if="showLeftScrollIndicator" transform="translate(0, 0)"> + <rect :height="vbHeight" x="0" y="0" width="20" fill="url(#left-shadow-gradient)" /> </g> <svg-gradient :colors="gradientColors" :opacity="gradientOpacity" - identifier-name="shadow-gradient"/> + identifier-name="shadow-gradient" + /> <svg-gradient :colors="inverseGradientColors" :opacity="inverseGradientOpacity" - identifier-name="left-shadow-gradient"/> + identifier-name="left-shadow-gradient" + /> </svg> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue index ccf802c456c..ddbb14ae812 100644 --- a/app/assets/javascripts/vue_shared/components/callout.vue +++ b/app/assets/javascripts/vue_shared/components/callout.vue @@ -17,11 +17,7 @@ export default { }; </script> <template> - <div - :class="`bs-callout bs-callout-${category}`" - role="alert" - aria-live="assertive" - > + <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive"> {{ message }} </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue index 766fc211bf5..bb7710f708e 100644 --- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import { pluralize } from '~/lib/utils/text_utility'; import { __, sprintf } from '~/locale'; @@ -78,17 +78,8 @@ export default { </script> <template> - <span - v-gl-tooltip.right - :title="tooltipTitle" - class="file-changed-icon ml-auto" - > - <icon - v-if="showIcon" - :name="changedIcon" - :size="size" - :css-classes="changedIconClass" - /> + <span v-gl-tooltip.right :title="tooltipTitle" class="file-changed-icon ml-auto"> + <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" /> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index 6780254827f..b0962684430 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective } from '@gitlab/ui'; import CiIcon from './ci_icon.vue'; /** * Renders CI Badge link with CI icon and status text based on diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 03f924ba99d..b8eb555106f 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -59,10 +59,5 @@ export default { }; </script> <template> - <span :class="cssClass"> - <icon - :name="icon" - :size="size" - /> - </span> + <span :class="cssClass"> <icon :name="icon" :size="size" /> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue index 6b90a1f540e..671b4909839 100644 --- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue +++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue @@ -12,7 +12,7 @@ * css-class="btn-transparent" * /> */ -import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import Icon from '../components/icon.vue'; export default { diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index b1139f34e41..ee685a4b8cd 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective } from '@gitlab/ui'; import UserAvatarLink from './user_avatar/user_avatar_link.vue'; import Icon from '../../vue_shared/components/icon.vue'; @@ -111,44 +111,19 @@ export default { <div class="branch-commit"> <template v-if="hasCommitRef && showBranch"> <div class="icon-container"> - <i - v-if="tag" - class="fa fa-tag" - aria-hidden="true" - > - </i> - <icon - v-if="!tag" - name="fork" - /> + <i v-if="tag" class="fa fa-tag" aria-hidden="true"> </i> <icon v-if="!tag" name="fork" /> </div> - <a - v-gl-tooltip - :href="commitRef.ref_url" - :title="commitRef.name" - class="ref-name" - > + <a v-gl-tooltip :href="commitRef.ref_url" :title="commitRef.name" class="ref-name"> {{ commitRef.name }} </a> </template> - <icon - name="commit" - class="commit-icon js-commit-icon" - /> + <icon name="commit" class="commit-icon js-commit-icon" /> - <a - :href="commitUrl" - class="commit-sha" - > - {{ shortSha }} - </a> + <a :href="commitUrl" class="commit-sha"> {{ shortSha }} </a> <div class="commit-title flex-truncate-parent"> - <span - v-if="title" - class="flex-truncate-child" - > + <span v-if="title" class="flex-truncate-child"> <user-avatar-link v-if="hasAuthor" :link-href="author.path" @@ -157,16 +132,9 @@ export default { :tooltip-text="author.username" class="avatar-image-container" /> - <a - :href="commitUrl" - class="commit-row-message" - > - {{ title }} - </a> - </span> - <span v-else> - Can't find HEAD commit for this branch + <a :href="commitUrl" class="commit-row-message"> {{ title }} </a> </span> + <span v-else> Can't find HEAD commit for this branch </span> </div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue index c78b96695cf..c6d61d6ee62 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; import Icon from '../../icon.vue'; import { numberToHumanSize } from '../../../../lib/utils/number_utils'; @@ -39,17 +39,8 @@ export default { ({{ fileSizeReadable }}) </template> </p> - <gl-link - :href="path" - class="btn btn-default" - rel="nofollow" - download - target="_blank"> - <icon - :size="16" - name="download" - css-classes="float-left append-right-8" - /> + <gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank"> + <icon :size="16" name="download" css-classes="float-left append-right-8" /> {{ __('Download') }} </gl-link> </div> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue index 6f2f0f98690..2ca933a37d2 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue @@ -34,14 +34,7 @@ export default { fileSizeReadable() { return numberToHumanSize(this.fileSize); }, - dimensionStyles() { - if (!this.isLoaded) return {}; - return { - width: `${this.width}px`, - height: `${this.height}px`, - }; - }, hasFileSize() { return this.fileSize > 0; }, @@ -87,22 +80,10 @@ export default { <template> <div> - <div - :class="innerCssClasses" - :style="dimensionStyles" - class="position-relative" - > - <img - ref="contentImg" - :src="path" - @load="onImgLoad" - /> - <slot name="image-overlay"></slot> + <div :class="innerCssClasses" class="position-relative"> + <img ref="contentImg" :src="path" @load="onImgLoad" /> <slot name="image-overlay"></slot> </div> - <p - v-if="renderInfo" - class="image-info" - > + <p v-if="renderInfo" class="image-info"> <template v-if="hasFileSize"> {{ fileSizeReadable }} </template> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue index 419987d2c50..c9915f7d685 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue @@ -2,7 +2,7 @@ import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; import $ from 'jquery'; -import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui'; +import { GlSkeletonLoading } from '@gitlab/ui'; const { CancelToken } = axios; let axiosSource; @@ -78,13 +78,8 @@ export default { </script> <template> - <div - ref="markdown-preview" - class="md md-previewer"> + <div ref="markdown-preview" class="md md-previewer"> <gl-skeleton-loading v-if="isLoading" /> - <div - v-else - v-html="previewContent"> - </div> + <div v-else v-html="previewContent"></div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue index 4d63296e332..2129f90d497 100644 --- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue +++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue @@ -84,67 +84,41 @@ export default { <template> <div class="modal-open"> - <div - :id="id" - :class="id ? '' : 'd-block'" - class="modal" - role="dialog" - tabindex="-1" - > - <div - :class="modalDialogClass" - class="modal-dialog" - role="document" - > + <div :id="id" :class="id ? '' : 'd-block'" class="modal" role="dialog" tabindex="-1"> + <div :class="modalDialogClass" class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <slot name="header"> - <h4 class="modal-title float-left"> - {{ title }} - </h4> + <h4 class="modal-title float-left">{{ title }}</h4> <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close" - @click="emitCancel($event)" + @click="emitCancel($event);" > <span aria-hidden="true">×</span> </button> </slot> </div> <div class="modal-body"> - <slot - :text="text" - name="body" - > + <slot :text="text" name="body"> <p>{{ text }}</p> </slot> </div> - <div - v-if="!hideFooter" - class="modal-footer" - > + <div v-if="!hideFooter" class="modal-footer"> <button :class="btnCancelKindClass" type="button" class="btn" data-dismiss="modal" - @click="emitCancel($event)" + @click="emitCancel($event);" > {{ closeButtonLabel }} </button> - <slot - v-if="secondaryButtonLabel" - name="secondary-button" - > - <button - v-if="secondaryButtonLabel" - type="button" - class="btn" - data-dismiss="modal" - > + <slot v-if="secondaryButtonLabel" name="secondary-button"> + <button v-if="secondaryButtonLabel" type="button" class="btn" data-dismiss="modal"> {{ secondaryButtonLabel }} </button> </slot> @@ -156,7 +130,7 @@ export default { type="button" class="btn js-primary-button" data-dismiss="modal" - @click="emitSubmit($event)" + @click="emitSubmit($event);" > {{ primaryButtonLabel }} </button> @@ -164,10 +138,6 @@ export default { </div> </div> </div> - <div - v-if="!id" - class="modal-backdrop fade show" - > - </div> + <div v-if="!id" class="modal-backdrop fade show"></div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue index 9c3f3e7f7a9..75c66ed850b 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue @@ -1,7 +1,10 @@ <script> +import { diffModes } from '~/ide/constants'; import { viewerInformationForPath } from '../content_viewer/lib/viewer_utils'; import ImageDiffViewer from './viewers/image_diff_viewer.vue'; import DownloadDiffViewer from './viewers/download_diff_viewer.vue'; +import RenamedFile from './viewers/renamed.vue'; +import ModeChanged from './viewers/mode_changed.vue'; export default { props: { @@ -30,9 +33,25 @@ export default { required: false, default: '', }, + aMode: { + type: String, + required: false, + default: null, + }, + bMode: { + type: String, + required: false, + default: null, + }, }, computed: { viewer() { + if (this.diffMode === diffModes.renamed) { + return RenamedFile; + } else if (this.diffMode === diffModes.mode_changed) { + return ModeChanged; + } + if (!this.newPath) return null; const previewInfo = viewerInformationForPath(this.newPath); @@ -60,21 +79,17 @@ export default { </script> <template> - <div - v-if="viewer" - class="diff-file preview-container"> + <div v-if="viewer" class="diff-file preview-container"> <component :is="viewer" :diff-mode="diffMode" :new-path="fullNewPath" :old-path="fullOldPath" :project-path="projectPath" + :a-mode="aMode" + :b-mode="bMode" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"></slot> </component> <slot></slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue index 50389b6ae63..40ae9ed6c02 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue @@ -32,37 +32,19 @@ export default { <template> <div class="diff-file-container"> <div class="diff-viewer"> - <div - v-if="diffMode === $options.diffModes.replaced" - class="two-up view row"> + <div v-if="diffMode === $options.diffModes.replaced" class="two-up view row"> <div class="col-sm-6 deleted"> - <download-viewer - :path="oldPath" - :project-path="projectPath" - /> + <download-viewer :path="oldPath" :project-path="projectPath" /> </div> <div class="col-sm-6 added"> - <download-viewer - :path="newPath" - :project-path="projectPath" - /> + <download-viewer :path="newPath" :project-path="projectPath" /> </div> </div> - <div - v-else-if="diffMode === $options.diffModes.new" - class="added"> - <download-viewer - :path="newPath" - :project-path="projectPath" - /> + <div v-else-if="diffMode === $options.diffModes.new" class="added"> + <download-viewer :path="newPath" :project-path="projectPath" /> </div> - <div - v-else - class="deleted"> - <download-viewer - :path="oldPath" - :project-path="projectPath" - /> + <div v-else class="deleted"> + <download-viewer :path="oldPath" :project-path="projectPath" /> </div> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue index cd0c1e850af..f085ef35ccc 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue @@ -100,17 +100,19 @@ export default { <div class="onion-skin view"> <div :style="{ - 'width': onionMaxPixelWidth, - 'height': onionMaxPixelHeight, + width: onionMaxPixelWidth, + height: onionMaxPixelHeight, 'user-select': dragging === true ? 'none' : '', }" - class="onion-skin-frame"> + class="onion-skin-frame" + > <div :style="{ - 'width': onionMaxPixelWidth, - 'height': onionMaxPixelHeight, + width: onionMaxPixelWidth, + height: onionMaxPixelHeight, }" - class="frame deleted"> + class="frame deleted" + > <image-viewer key="onionOldImg" :render-info="false" @@ -121,36 +123,25 @@ export default { <div ref="addedFrame" :style="{ - 'opacity': onionOpacity, - 'width': onionMaxPixelWidth, - 'height': onionMaxPixelHeight, + opacity: onionOpacity, + width: onionMaxPixelWidth, + height: onionMaxPixelHeight, }" - class="added frame"> + class="added frame" + > <image-viewer key="onionNewImg" :render-info="false" :path="newPath" @imgLoaded="onionNewImgLoaded" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> <div class="controls"> <div class="transparent"></div> - <div - ref="dragTrack" - class="drag-track" - @mousedown="startDrag" - @mouseup="stopDrag"> - <div - ref="dragger" - :style="{ 'left': onionDraggerPixelPos }" - class="dragger"> - </div> + <div ref="dragTrack" class="drag-track" @mousedown="startDrag" @mouseup="stopDrag"> + <div ref="dragger" :style="{ left: onionDraggerPixelPos }" class="dragger"></div> </div> <div class="opaque"></div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue index c3cfe54eb4d..1c970b72a66 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue @@ -25,7 +25,7 @@ export default { swipeMaxWidth: undefined, swipeMaxHeight: undefined, swipeBarPos: 1, - swipeWrapWidth: undefined, + swipeWrapWidth: 0, }; }, computed: { @@ -63,7 +63,7 @@ export default { leftValue = clientWidth - spaceLeft; } - this.swipeWrapWidth = this.swipeMaxWidth - leftValue; + this.swipeWrapWidth = (leftValue / clientWidth) * 100; this.swipeBarPos = leftValue; }, startDrag() { @@ -81,7 +81,6 @@ export default { // Add 2 for border width this.swipeMaxWidth = Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2; - this.swipeWrapWidth = this.swipeMaxWidth; this.swipeMaxHeight = Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2; @@ -105,13 +104,7 @@ export default { <template> <div class="swipe view"> - <div - ref="swipeFrame" - :style="{ - 'width': swipeMaxPixelWidth, - 'height': swipeMaxPixelHeight, - }" - class="swipe-frame"> + <div ref="swipeFrame" class="swipe-frame"> <image-viewer key="swipeOldImg" ref="swipeOldImg" @@ -123,32 +116,31 @@ export default { <div ref="swipeWrap" :style="{ - 'width': swipeWrapPixelWidth, - 'height': swipeMaxPixelHeight, + width: `${swipeWrapWidth}%`, }" - class="swipe-wrap"> + class="swipe-wrap" + > <image-viewer key="swipeNewImg" :render-info="false" :path="newPath" + :style="{ + width: swipeMaxPixelWidth, + }" class="frame added" @imgLoaded="swipeNewImgLoaded" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> <span ref="swipeBar" - :style="{ 'left': swipeBarPixelPos }" + :style="{ left: swipeBarPixelPos }" class="swipe-bar" @mousedown="startDrag" - @mouseup="stopDrag"> - <span class="top-handle"></span> - <span class="bottom-handle"></span> + @mouseup="stopDrag" + > + <span class="top-handle"></span> <span class="bottom-handle"></span> </span> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue index 9806d65e940..a17fc022195 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue @@ -19,24 +19,20 @@ export default { </script> <template> - <div class="two-up view"> + <div class="two-up view d-flex"> <image-viewer :path="oldPath" :render-info="true" inner-css-classes="frame deleted" - class="wrap" + class="wrap w-50" /> <image-viewer :path="newPath" :render-info="true" :inner-css-classes="['frame', 'added']" - class="wrap" + class="wrap w-50" > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue index d7f24c1afc5..d5fda7e4ed3 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue @@ -63,65 +63,54 @@ export default { <template> <div class="diff-file-container"> - <div - v-if="diffMode === $options.diffModes.replaced" - class="diff-viewer"> + <div v-if="diffMode === $options.diffModes.replaced" class="diff-viewer"> <div class="image js-replaced-image"> - <component - :is="imageViewComponent" - v-bind="$props" - > - <slot - slot="image-overlay" - name="image-overlay" - > - </slot> + <component :is="imageViewComponent" v-bind="$props"> + <slot slot="image-overlay" name="image-overlay"> </slot> </component> </div> <div class="view-modes"> <ul class="view-modes-menu"> <li :class="{ - active: mode === $options.imageViewMode.twoup + active: mode === $options.imageViewMode.twoup, }" - @click="changeMode($options.imageViewMode.twoup)"> + @click="changeMode($options.imageViewMode.twoup);" + > {{ s__('ImageDiffViewer|2-up') }} </li> <li :class="{ - active: mode === $options.imageViewMode.swipe + active: mode === $options.imageViewMode.swipe, }" - @click="changeMode($options.imageViewMode.swipe)"> + @click="changeMode($options.imageViewMode.swipe);" + > {{ s__('ImageDiffViewer|Swipe') }} </li> <li :class="{ - active: mode === $options.imageViewMode.onion + active: mode === $options.imageViewMode.onion, }" - @click="changeMode($options.imageViewMode.onion)"> + @click="changeMode($options.imageViewMode.onion);" + > {{ s__('ImageDiffViewer|Onion skin') }} </li> </ul> </div> </div> - <div - v-else - class="diff-viewer" - > + <div v-else class="diff-viewer"> <div class="image"> <image-viewer :path="imagePath" - :inner-css-classes="['frame', { - 'added': isNew, - 'deleted': diffMode === $options.diffModes.deleted - }]" + :inner-css-classes="[ + 'frame', + { + added: isNew, + deleted: diffMode === $options.diffModes.deleted, + }, + ]" > - <slot - v-if="isNew || isRenamed" - slot="image-overlay" - name="image-overlay" - > - </slot> + <slot v-if="isNew || isRenamed" slot="image-overlay" name="image-overlay"> </slot> </image-viewer> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue new file mode 100644 index 00000000000..3c7a4ea6183 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue @@ -0,0 +1,30 @@ +<script> +import { sprintf, __ } from '~/locale'; + +export default { + props: { + aMode: { + type: String, + required: false, + default: null, + }, + bMode: { + type: String, + required: false, + default: null, + }, + }, + computed: { + outputText() { + return sprintf(__('File mode changed from %{a_mode} to %{b_mode}'), { + a_mode: this.aMode, + b_mode: this.bMode, + }); + }, + }, +}; +</script> + +<template> + <div class="nothing-here-block">{{ outputText }}</div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue new file mode 100644 index 00000000000..5c1ea59b471 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue @@ -0,0 +1,3 @@ +<template> + <div class="nothing-here-block">{{ __('File moved') }}</div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue index 0e194eaaed5..22f370c4bca 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue @@ -1,6 +1,6 @@ <script> import { __ } from '~/locale'; -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; export default { components: { @@ -34,30 +34,13 @@ export default { data-toggle="dropdown" aria-expanded="false" > - <gl-loading-icon - v-show="isLoading" - :inline="true" - /> + <gl-loading-icon v-show="isLoading" :inline="true" /> <template> - <slot - v-if="$slots.default" - ></slot> - <span - v-else - class="dropdown-toggle-text" - > - {{ toggleText }} - </span> + <slot v-if="$slots.default"></slot> + <span v-else class="dropdown-toggle-text"> {{ toggleText }} </span> </template> - <span - v-show="!isLoading" - class="dropdown-toggle-icon" - > - <i - class="fa fa-chevron-down" - aria-hidden="true" - data-hidden="true" - ></i> + <span v-show="!isLoading" class="dropdown-toggle-icon"> + <i class="fa fa-chevron-down" aria-hidden="true" data-hidden="true"></i> </span> </button> </template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue index b7a4613bdd2..afde0c81580 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue @@ -14,9 +14,5 @@ export default { </script> <template> - <input - :name="name" - :value="value" - type="hidden" - /> + <input :name="name" :value="value" type="hidden" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue index 7f1912f6405..c01c7cc4ccc 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue @@ -29,12 +29,7 @@ export default { type="search" autocomplete="off" /> - <i - class="fa fa-search dropdown-input-search" - aria-hidden="true" - data-hidden="true" - > - </i> + <i class="fa fa-search dropdown-input-search" aria-hidden="true" data-hidden="true"> </i> <i class="fa fa-times dropdown-input-clear js-dropdown-input-clear" aria-hidden="true" diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index e6e92594b65..d64ab774431 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -44,14 +44,10 @@ export default { :aria-label="ariaLabel" type="button" class="text-expander btn-blank" - @click="onClick"> - <icon - :size="12" - name="ellipsis_h" - /> + @click="onClick" + > + <icon :size="12" name="ellipsis_h" /> </button> - <span v-if="!isCollapsed"> - <slot name="expanded"></slot> - </span> + <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue index 03818be6a69..b69ecc1dce6 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/file_icon.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import getIconForFile from './file_icon/file_icon_map'; import icon from '../../vue_shared/components/icon.vue'; @@ -72,21 +72,10 @@ export default { </script> <template> <span> - <svg - v-if="!loading && !folder" - :class="[iconSizeClass, cssClasses]" - > - <use v-bind="{ 'xlink:href':spriteHref }" /> + <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]"> + <use v-bind="{ 'xlink:href': spriteHref }" /> </svg> - <icon - v-if="!loading && folder" - :name="folderIconName" - :size="size" - css-classes="folder-icon" - /> - <gl-loading-icon - v-if="loading" - :inline="true" - /> + <icon v-if="!loading && folder" :name="folderIconName" :size="size" css-classes="folder-icon" /> + <gl-loading-icon v-if="loading" :inline="true" /> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue index 2d89a156117..9e713673678 100644 --- a/app/assets/javascripts/vue_shared/components/file_row.vue +++ b/app/assets/javascripts/vue_shared/components/file_row.vue @@ -161,17 +161,11 @@ export default { class="file-row" role="button" @click="clickFile" - @mouseover="toggleHover(true)" - @mouseout="toggleHover(false)" + @mouseover="toggleHover(true);" + @mouseout="toggleHover(false);" > - <div - class="file-row-name-container" - > - <span - ref="textOutput" - :style="levelIndentation" - class="file-row-name str-truncated" - > + <div class="file-row-name-container"> + <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated"> <file-icon v-if="!showChangedIcon || file.type === 'tree'" :file-name="file.name" @@ -180,12 +174,7 @@ export default { :opened="file.opened" :size="16" /> - <changed-file-icon - v-else - :file="file" - :size="16" - class="append-right-5" - /> + <changed-file-icon v-else :file="file" :size="16" class="append-right-5" /> {{ outputText }} </span> <component diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue index 388a2f4ca36..834c39a5ee0 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue @@ -82,16 +82,8 @@ export default { <template> <div class="dropdown"> <div class="btn-group"> - <slot - name="mainAction" - :class-name="className" - > - <button - type="button" - :class="className" - > - {{ title }} - </button> + <slot name="mainAction" :class-name="className"> + <button type="button" :class="className">{{ title }}</button> </slot> <button @@ -103,10 +95,7 @@ export default { aria-expanded="false" aria-label="Expand dropdown" > - <icon - name="angle-down" - :size="12" - /> + <icon name="angle-down" :size="12" /> </button> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-input"> @@ -117,25 +106,13 @@ export default { placeholder="Filter" class="js-filtered-dropdown-input dropdown-input-field" /> - <icon - class="dropdown-input-search" - name="search" - /> + <icon class="dropdown-input-search" name="search" /> </div> <div class="dropdown-content"> <ul> - <li - v-for="(result, i) in filteredResults" - :key="i" - class="js-filtered-dropdown-result" - > - <slot - name="result" - :result="result" - > - {{ result[filterKey] }} - </slot> + <li v-for="(result, i) in filteredResults" :key="i" class="js-filtered-dropdown-result"> + <slot name="result" :result="result"> {{ result[filterKey] }} </slot> </li> </ul> </div> diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue index a35986b2d03..c1aace31fb2 100644 --- a/app/assets/javascripts/vue_shared/components/gl_countdown.vue +++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue @@ -1,6 +1,6 @@ <script> import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility'; -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective } from '@gitlab/ui'; /** * Counts down to a given end date. @@ -43,11 +43,5 @@ export default { </script> <template> - <time - v-gl-tooltip - :datetime="endDateString" - :title="endDateString" - > - {{ remainingTime }} - </time> + <time v-gl-tooltip :datetime="endDateString" :title="endDateString"> {{ remainingTime }} </time> </template> diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue index b5444d43ded..faf4181bbaf 100644 --- a/app/assets/javascripts/vue_shared/components/gl_modal.vue +++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue @@ -68,40 +68,27 @@ export default { </script> <template> - <div - :id="id" - class="modal fade" - tabindex="-1" - role="dialog" - > - <div - :class="modalSizeClass" - class="modal-dialog" - role="document" - > + <div :id="id" class="modal fade" tabindex="-1" role="dialog"> + <div :class="modalSizeClass" class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <slot name="header"> <h4 class="modal-title"> - <slot name="title"> - {{ headerTitleText }} - </slot> + <slot name="title"> {{ headerTitleText }} </slot> </h4> <button :aria-label="s__('Modal|Close')" type="button" class="close js-modal-close-action" data-dismiss="modal" - @click="emitCancel($event)" + @click="emitCancel($event);" > <span aria-hidden="true">×</span> </button> </slot> </div> - <div class="modal-body"> - <slot></slot> - </div> + <div class="modal-body"><slot></slot></div> <div class="modal-footer"> <slot name="footer"> @@ -109,7 +96,7 @@ export default { type="button" class="btn js-modal-cancel-action qa-modal-cancel-button" data-dismiss="modal" - @click="emitCancel($event)" + @click="emitCancel($event);" > {{ s__('Modal|Cancel') }} </button> @@ -118,7 +105,7 @@ export default { type="button" class="btn js-modal-primary-action qa-modal-primary-button" data-dismiss="modal" - @click="emitSubmit($event)" + @click="emitSubmit($event);" > {{ footerPrimaryButtonText }} </button> diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index 88e95c33b9b..c830f5b49b6 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; import CiIconBadge from './ci_badge_link.vue'; import TimeagoTooltip from './time_ago_tooltip.vue'; import UserAvatarImage from './user_avatar/user_avatar_image.vue'; @@ -83,12 +83,9 @@ export default { <template> <header class="page-content-header ci-header-container"> <section class="header-main-content"> - <ci-icon-badge :status="status" /> - <strong> - {{ itemName }} #{{ itemId }} - </strong> + <strong> {{ itemName }} #{{ itemId }} </strong> <template v-if="shouldRenderTriggeredLabel"> triggered @@ -108,7 +105,6 @@ export default { :title="user.email" class="js-user-link commit-committer-link" > - <user-avatar-image :img-src="user.avatar_url" :img-alt="userAvatarAltText" @@ -118,19 +114,12 @@ export default { {{ user.name }} </gl-link> - <span - v-if="user.status_tooltip_html" - v-html="user.status_tooltip_html"></span> + <span v-if="user.status_tooltip_html" v-html="user.status_tooltip_html"></span> </template> </section> - <section - v-if="actions.length" - class="header-action-buttons" - > - <template - v-for="(action, i) in actions" - > + <section v-if="actions.length" class="header-action-buttons"> + <template v-for="(action, i) in actions"> <gl-link v-if="action.type === 'link'" :key="i" @@ -159,7 +148,7 @@ export default { :class="action.cssClass" container-class="d-inline" :label="action.label" - @click="onClickAction(action)" + @click="onClickAction(action);" /> </template> </section> @@ -170,12 +159,7 @@ export default { sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" @click="onClickSidebarButton" > - <i - class="fa fa-angle-double-left" - aria-hidden="true" - aria-labelledby="toggleSidebar" - > - </i> + <i class="fa fa-angle-double-left" aria-hidden="true" aria-labelledby="toggleSidebar"> </i> </gl-button> </header> </template> diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue index 540df392e4e..a57fa09f753 100644 --- a/app/assets/javascripts/vue_shared/components/help_popover.vue +++ b/app/assets/javascripts/vue_shared/components/help_popover.vue @@ -43,11 +43,7 @@ export default { }; </script> <template> - <button - type="button" - class="btn btn-blank btn-transparent btn-help" - tabindex="0" - > + <button type="button" class="btn btn-blank btn-transparent btn-help" tabindex="0"> <icon name="question" /> </button> </template> diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue index a25841fc02f..41c4c861566 100644 --- a/app/assets/javascripts/vue_shared/components/icon.vue +++ b/app/assets/javascripts/vue_shared/components/icon.vue @@ -106,6 +106,6 @@ export default { :tabindex="tabIndex" aria-hidden="true" > - <use v-bind="{ 'xlink:href':spriteHref }"/> + <use v-bind="{ 'xlink:href': spriteHref }" /> </svg> </template> diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue index 0862f2c0cff..d42f0d8192c 100644 --- a/app/assets/javascripts/vue_shared/components/identicon.vue +++ b/app/assets/javascripts/vue_shared/components/identicon.vue @@ -29,9 +29,7 @@ export default { </script> <template> - <div - :class="[sizeClass, identiconBackgroundClass]" - class="avatar identicon"> + <div :class="[sizeClass, identiconBackgroundClass]" class="avatar identicon"> {{ identiconTitle }} </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue new file mode 100644 index 00000000000..7e79e63aa1e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue @@ -0,0 +1,94 @@ +<script> +import { GlTooltipDirective } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; + +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; + +export default { + components: { + UserAvatarLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + assignees: { + type: Array, + required: true, + }, + }, + data() { + return { + maxVisibleAssignees: 2, + maxAssigneeAvatars: 3, + maxAssignees: 99, + }; + }, + computed: { + countOverLimit() { + return this.assignees.length - this.maxVisibleAssignees; + }, + assigneesToShow() { + if (this.assignees.length > this.maxAssigneeAvatars) { + return this.assignees.slice(0, this.maxVisibleAssignees); + } + return this.assignees; + }, + assigneesCounterTooltip() { + const { countOverLimit, maxAssignees } = this; + const count = countOverLimit > maxAssignees ? maxAssignees : countOverLimit; + + return sprintf(__('%{count} more assignees'), { count }); + }, + shouldRenderAssigneesCounter() { + const assigneesCount = this.assignees.length; + if (assigneesCount <= this.maxAssigneeAvatars) { + return false; + } + + return assigneesCount > this.countOverLimit; + }, + assigneeCounterLabel() { + if (this.countOverLimit > this.maxAssignees) { + return `${this.maxAssignees}+`; + } + + return `+${this.countOverLimit}`; + }, + }, + methods: { + avatarUrlTitle(assignee) { + return sprintf(__('Avatar for %{assigneeName}'), { + assigneeName: assignee.name, + }); + }, + }, +}; +</script> +<template> + <div class="issue-assignees"> + <user-avatar-link + v-for="assignee in assigneesToShow" + :key="assignee.id" + :link-href="assignee.web_url" + :img-alt="avatarUrlTitle(assignee)" + :img-src="assignee.avatar_url" + :img-size="24" + class="js-no-trigger" + tooltip-placement="bottom" + > + <span class="js-assignee-tooltip"> + <span class="bold d-block">{{ __('Assignee') }}</span> {{ assignee.name }} + <span class="text-white-50">@{{ assignee.username }}</span> + </span> + </user-avatar-link> + <span + v-if="shouldRenderAssigneesCounter" + v-gl-tooltip + :title="assigneesCounterTooltip" + class="avatar-counter" + data-placement="bottom" + >{{ assigneeCounterLabel }}</span + > + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue new file mode 100644 index 00000000000..d5d967e25bf --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue @@ -0,0 +1,90 @@ +<script> +import { GlTooltip } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import { timeFor, parsePikadayDate, dateInWords } from '~/lib/utils/datetime_utility'; +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + Icon, + GlTooltip, + }, + mixins: [timeagoMixin], + props: { + milestone: { + type: Object, + required: true, + }, + }, + data() { + return { + milestoneDue: this.milestone.due_date ? parsePikadayDate(this.milestone.due_date) : null, + milestoneStart: this.milestone.start_date + ? parsePikadayDate(this.milestone.start_date) + : null, + }; + }, + computed: { + isMilestoneStarted() { + if (!this.milestoneStart) { + return false; + } + return Date.now() > this.milestoneStart; + }, + isMilestonePastDue() { + if (!this.milestoneDue) { + return false; + } + return Date.now() > this.milestoneDue; + }, + milestoneDatesAbsolute() { + if (this.milestoneDue) { + return `(${dateInWords(this.milestoneDue)})`; + } else if (this.milestoneStart) { + return `(${dateInWords(this.milestoneStart)})`; + } + return ''; + }, + milestoneDatesHuman() { + if (this.milestoneStart || this.milestoneDue) { + if (this.milestoneDue) { + return timeFor( + this.milestoneDue, + sprintf(__('Expired %{expiredOn}'), { + expiredOn: this.timeFormated(this.milestoneDue), + }), + ); + } + + return sprintf( + this.isMilestoneStarted ? __('Started %{startsIn}') : __('Starts %{startsIn}'), + { + startsIn: this.timeFormated(this.milestoneStart), + }, + ); + } + return ''; + }, + }, +}; +</script> +<template> + <div ref="milestoneDetails" class="issue-milestone-details"> + <icon :size="16" class="inline icon" name="clock" /> + <span class="milestone-title">{{ milestone.title }}</span> + <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone"> + <span class="bold">{{ __('Milestone') }}</span> <br /> + <span>{{ milestone.title }}</span> <br /> + <span + v-if="milestoneStart || milestoneDue" + :class="{ + 'text-danger-muted': isMilestonePastDue, + 'text-tertiary': !isMilestonePastDue, + }" + ><span>{{ milestoneDatesHuman }}</span + ><br /><span>{{ milestoneDatesAbsolute }}</span> + </span> + </gl-tooltip> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue index dc88749c18f..e92babc499b 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue @@ -32,17 +32,14 @@ export default { </script> <template> <div class="issuable-note-warning"> - <icon - v-if="!isLockedAndConfidential" - :name="warningIcon" - :size="16" - class="icon inline" - /> + <icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" /> <span v-if="isLockedAndConfidential"> {{ __('This issue is confidential and locked.') }} - {{ __(`People without permission will never -get a notification and won't be able to comment.`) }} + {{ + __(`People without permission will never +get a notification and won't be able to comment.`) + }} </span> <span v-else-if="isConfidential"> @@ -51,8 +48,7 @@ get a notification and won't be able to comment.`) }} </span> <span v-else-if="isLocked"> - {{ __('This issue is locked.') }} - {{ __('Only project members can comment.') }} + {{ __('This issue is locked.') }} {{ __('Only project members can comment.') }} </span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index 69d7e5c46f5..7a53d053eec 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; /* eslint-disable vue/require-default-prop */ /* This is a re-usable vue component for rendering a button that will probably be sending off ajax requests and need @@ -52,30 +52,20 @@ export default { </script> <template> - <button - :class="containerClass" - :disabled="loading || disabled" - type="button" - @click="onClick" - > + <button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick"> <transition name="fade"> <gl-loading-icon v-if="loading" :inline="true" :class="{ - 'append-right-5': label + 'append-right-5': label, }" class="js-loading-button-icon" /> </transition> <transition name="fade"> <slot> - <span - v-if="label" - class="js-loading-button-label" - > - {{ label }} - </span> + <span v-if="label" class="js-loading-button-label"> {{ label }} </span> </slot> </transition> </button> diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 4687de62614..21d6519191f 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -142,27 +142,18 @@ export default { <div ref="gl-form" :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }" - class="md-area js-vue-markdown-field"> + class="md-area js-vue-markdown-field" + > <markdown-header :preview-markdown="previewMarkdown" @preview-markdown="showPreviewTab" @write-markdown="showWriteTab" /> - <div - v-show="!previewMarkdown" - class="md-write-holder" - > + <div v-show="!previewMarkdown" class="md-write-holder"> <div class="zen-backdrop"> <slot name="textarea"></slot> - <a - class="zen-control zen-control-leave js-zen-leave" - href="#" - aria-label="Enter zen mode" - > - <icon - :size="32" - name="screen-normal" - /> + <a class="zen-control zen-control-leave js-zen-leave" href="#" aria-label="Enter zen mode"> + <icon :size="32" name="screen-normal" /> </a> <markdown-toolbar :markdown-docs-path="markdownDocsPath" @@ -171,42 +162,19 @@ export default { /> </div> </div> - <div - v-show="previewMarkdown" - class="md md-preview-holder md-preview js-vue-md-preview" - > - <div - ref="markdown-preview" - v-html="markdownPreview" - > - </div> - <span v-if="markdownPreviewLoading"> - Loading... - </span> + <div v-show="previewMarkdown" class="md md-preview-holder md-preview js-vue-md-preview"> + <div ref="markdown-preview" v-html="markdownPreview"></div> + <span v-if="markdownPreviewLoading"> Loading... </span> </div> <template v-if="previewMarkdown && !markdownPreviewLoading"> - <div - v-if="referencedCommands" - class="referenced-commands" - v-html="referencedCommands" - > - </div> - <div - v-if="shouldShowReferencedUsers" - class="referenced-users" - > + <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div> + <div v-if="shouldShowReferencedUsers" class="referenced-users"> <span> - <i - class="fa fa-exclamation-triangle" - aria-hidden="true" - > - </i> - You are about to add + <i class="fa fa-exclamation-triangle" aria-hidden="true"> </i> You are about to add <strong> - <span class="js-referenced-users-count"> - {{ referencedUsers.length }} - </span> - </strong> people to the discussion. Proceed with caution. + <span class="js-referenced-users-count"> {{ referencedUsers.length }} </span> + </strong> + people to the discussion. Proceed with caution. </span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index 27e3f314dd3..4c4ba537065 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective } from '@gitlab/ui'; import ToolbarButton from './toolbar_button.vue'; import Icon from '../icon.vue'; @@ -64,58 +64,31 @@ export default { <template> <div class="md-header"> <ul class="nav-links clearfix"> - <li - :class="{ active: !previewMarkdown }" - class="md-header-tab" - > + <li :class="{ active: !previewMarkdown }" class="md-header-tab"> <button class="js-write-link" tabindex="-1" type="button" - @click="writeMarkdownTab($event)" + @click="writeMarkdownTab($event);" > Write </button> </li> - <li - :class="{ active: previewMarkdown }" - class="md-header-tab" - > + <li :class="{ active: previewMarkdown }" class="md-header-tab"> <button class="js-preview-link js-md-preview-button" tabindex="-1" type="button" - @click="previewMarkdownTab($event)" + @click="previewMarkdownTab($event);" > Preview </button> </li> - <li - :class="{ active: !previewMarkdown }" - class="md-header-toolbar" - > - <toolbar-button - tag="**" - button-title="Add bold text" - icon="bold" - /> - <toolbar-button - tag="*" - button-title="Add italic text" - icon="italic" - /> - <toolbar-button - :prepend="true" - tag="> " - button-title="Insert a quote" - icon="quote" - /> - <toolbar-button - tag="`" - tag-block="```" - button-title="Insert code" - icon="code" - /> + <li :class="{ active: !previewMarkdown }" class="md-header-toolbar"> + <toolbar-button tag="**" button-title="Add bold text" icon="bold" /> + <toolbar-button tag="*" button-title="Add italic text" icon="italic" /> + <toolbar-button :prepend="true" tag="> " button-title="Insert a quote" icon="quote" /> + <toolbar-button tag="`" tag-block="```" button-title="Insert code" icon="code" /> <toolbar-button tag="[{text}](url)" tag-select="url" @@ -155,9 +128,7 @@ export default { title="Go full screen" type="button" > - <icon - name="screen-full" - /> + <icon name="screen-full" /> </button> </li> </ul> diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue index b0a93794013..3b57b5e8da4 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue @@ -1,5 +1,5 @@ <script> -import { GlLink } from '@gitlab-org/gitlab-ui'; +import { GlLink } from '@gitlab/ui'; export default { components: { @@ -33,92 +33,39 @@ export default { <div class="comment-toolbar clearfix"> <div class="toolbar-text"> <template v-if="!hasQuickActionsDocsPath && markdownDocsPath"> - <gl-link - :href="markdownDocsPath" - target="_blank" - tabindex="-1" - > + <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"> Markdown is supported </gl-link> </template> <template v-if="hasQuickActionsDocsPath && markdownDocsPath"> - <gl-link - :href="markdownDocsPath" - target="_blank" - tabindex="-1" - > - Markdown - </gl-link> + <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"> Markdown </gl-link> and - <gl-link - :href="quickActionsDocsPath" - target="_blank" - tabindex="-1" - > + <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1"> quick actions </gl-link> are supported </template> </div> - <span - v-if="canAttachFile" - class="uploading-container" - > + <span v-if="canAttachFile" class="uploading-container"> <span class="uploading-progress-container hide"> - <i - class="fa fa-file-image-o toolbar-button-icon" - aria-hidden="true" - > - </i> - <span class="attaching-file-message"></span> - <span class="uploading-progress">0%</span> + <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> + <span class="attaching-file-message"></span> <span class="uploading-progress">0%</span> <span class="uploading-spinner"> - <i - class="fa fa-spinner fa-spin toolbar-button-icon" - aria-hidden="true" - > - </i> + <i class="fa fa-spinner fa-spin toolbar-button-icon" aria-hidden="true"> </i> </span> </span> <span class="uploading-error-container hide"> <span class="uploading-error-icon"> - <i - class="fa fa-file-image-o toolbar-button-icon" - aria-hidden="true" - > - </i> + <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> </span> <span class="uploading-error-message"></span> - <button - class="retry-uploading-link" - type="button" - > - Try again - </button> - or - <button - class="attach-new-file markdown-selector" - type="button" - > - attach a new file - </button> + <button class="retry-uploading-link" type="button">Try again</button> or + <button class="attach-new-file markdown-selector" type="button">attach a new file</button> </span> - <button - class="markdown-selector button-attach-file" - tabindex="-1" - type="button" - > - <i - class="fa fa-file-image-o toolbar-button-icon" - aria-hidden="true" - > - </i> - Attach a file + <button class="markdown-selector button-attach-file" tabindex="-1" type="button"> + <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> Attach a file </button> - <button - class="btn btn-default btn-sm hide button-cancel-uploading-files" - type="button" - > + <button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button"> Cancel </button> </span> diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue index 91d0bbfc21c..a6d2cecdf7e 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlTooltipDirective } from '@gitlab/ui'; import Icon from '../icon.vue'; export default { @@ -55,8 +55,6 @@ export default { tabindex="-1" data-container="body" > - <icon - :name="icon" - /> + <icon :name="icon" /> </button> </template> diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue index 964dedb38c4..16f4ff068f6 100644 --- a/app/assets/javascripts/vue_shared/components/memory_graph.vue +++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue @@ -118,17 +118,10 @@ export default { :width="width" :height="height" class="has-tooltip" - xmlns="http://www.w3.org/2000/svg"> - <path - :d="pathD" - :viewBox="pathViewBox" - /> - <circle - :cx="dotX" - :cy="dotY" - r="1.5" - transform="translate(0 -1)" - /> + xmlns="http://www.w3.org/2000/svg" + > + <path :d="pathD" :viewBox="pathViewBox" /> + <circle :cx="dotX" :cy="dotY" r="1.5" transform="translate(0 -1)" /> </svg> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue index 99d61b5639d..09a64502819 100644 --- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue +++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue @@ -58,19 +58,10 @@ export default { active: tab.isActive, }" > - <a - :class="`js-${scope}-tab-${tab.scope}`" - role="button" - @click="onTabClick(tab)" - > + <a :class="`js-${scope}-tab-${tab.scope}`" role="button" @click="onTabClick(tab);"> {{ tab.name }} - <span - v-if="shouldRenderBadge(tab.count)" - class="badge badge-pill" - > - {{ tab.count }} - </span> + <span v-if="shouldRenderBadge(tab.count)" class="badge badge-pill"> {{ tab.count }} </span> </a> </li> </ul> diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue index dcad79e521d..8d3a3009c55 100644 --- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue @@ -17,12 +17,14 @@ * /> */ import { mapGetters } from 'vuex'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import userAvatarLink from '../user_avatar/user_avatar_link.vue'; export default { name: 'PlaceholderNote', components: { userAvatarLink, + TimelineEntryItem, }, props: { note: { @@ -37,32 +39,28 @@ export default { </script> <template> - <li class="note being-posted fade-in-half timeline-entry"> - <div class="timeline-entry-inner"> - <div class="timeline-icon"> - <user-avatar-link - :link-href="getUserData.path" - :img-src="getUserData.avatar_url" - :img-size="40" - /> - </div> - <div - :class="{ discussion: !note.individual_note }" - class="timeline-content"> - <div class="note-header"> - <div class="note-header-info"> - <a :href="getUserData.path"> - <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span> - <span class="note-headline-light">@{{ getUserData.username }}</span> - </a> - </div> + <timeline-entry-item class="note being-posted fade-in-half"> + <div class="timeline-icon"> + <user-avatar-link + :link-href="getUserData.path" + :img-src="getUserData.avatar_url" + :img-size="40" + /> + </div> + <div :class="{ discussion: !note.individual_note }" class="timeline-content"> + <div class="note-header"> + <div class="note-header-info"> + <a :href="getUserData.path"> + <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span> + <span class="note-headline-light">@{{ getUserData.username }}</span> + </a> </div> - <div class="note-body"> - <div class="note-text"> - <p>{{ note.body }}</p> - </div> + </div> + <div class="note-body"> + <div class="note-text"> + <p>{{ note.body }}</p> </div> </div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue index 674f923478d..7689425eb52 100644 --- a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue @@ -1,4 +1,6 @@ <script> +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; + /** * Common component to render a placeholder system note. * @@ -9,6 +11,9 @@ */ export default { name: 'PlaceholderSystemNote', + components: { + TimelineEntryItem, + }, props: { note: { type: Object, @@ -19,11 +24,9 @@ export default { </script> <template> - <li class="note system-note timeline-entry being-posted fade-in-half"> - <div class="timeline-entry-inner"> - <div class="timeline-content"> - <em>{{ note.body }}</em> - </div> + <timeline-entry-item class="note system-note being-posted fade-in-half"> + <div class="timeline-content"> + <em>{{ note.body }}</em> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue index 8cb72afcdc0..e61d1fd2031 100644 --- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -1,25 +1,22 @@ <script> -import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui'; +import { GlSkeletonLoading } from '@gitlab/ui'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; export default { name: 'SkeletonNote', components: { GlSkeletonLoading, + TimelineEntryItem, }, }; </script> <template> - <li class="timeline-entry note note-wrapper"> - <div class="timeline-entry-inner"> - <div class="timeline-icon"> - </div> - <div class="timeline-content"> - <div class="note-header"></div> - <div class="note-body"> - <gl-skeleton-loading /> - </div> - </div> + <timeline-entry-item class="note note-wrapper"> + <div class="timeline-icon"></div> + <div class="timeline-content"> + <div class="note-header"></div> + <div class="note-body"><gl-skeleton-loading /></div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index 6a44e6a29ed..31df26f7b05 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -20,6 +20,7 @@ import $ from 'jquery'; import { mapGetters } from 'vuex'; import noteHeader from '~/notes/components/note_header.vue'; import Icon from '~/vue_shared/components/icon.vue'; +import TimelineEntryItem from './timeline_entry_item.vue'; import { spriteIcon } from '../../../lib/utils/common_utils'; const MAX_VISIBLE_COMMIT_LIST_COUNT = 3; @@ -29,6 +30,7 @@ export default { components: { Icon, noteHeader, + TimelineEntryItem, }, props: { note: { @@ -73,52 +75,34 @@ export default { </script> <template> - <li + <timeline-entry-item :id="noteAnchorId" :class="{ target: isTargetNote }" - class="note system-note timeline-entry note-wrapper"> - <div class="timeline-entry-inner"> - <div - class="timeline-icon" - v-html="iconHtml"> + class="note system-note note-wrapper" + > + <div class="timeline-icon" v-html="iconHtml"></div> + <div class="timeline-content"> + <div class="note-header"> + <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> + <span v-html="actionTextHtml"></span> + </note-header> </div> - <div class="timeline-content"> - <div class="note-header"> - <note-header - :author="note.author" - :created-at="note.created_at" - :note-id="note.id" - > - <span v-html="actionTextHtml"></span> - </note-header> - </div> - <div class="note-body"> - <div - :class="{ - 'system-note-commit-list': hasMoreCommits, - 'hide-shade': expanded - }" - class="note-text" - v-html="note.note_html" - ></div> - <div - v-if="hasMoreCommits" - class="flex-list" - > - <div - class="system-note-commit-list-toggler flex-row" - @click="expanded = !expanded" - > - <icon - :name="toggleIcon" - :size="8" - class="append-right-5" - /> - <span>Toggle commit list</span> - </div> + <div class="note-body"> + <div + :class="{ + 'system-note-commit-list': hasMoreCommits, + 'hide-shade': expanded, + }" + class="note-text" + v-html="note.note_html" + ></div> + <div v-if="hasMoreCommits" class="flex-list"> + <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded;"> + <icon :name="toggleIcon" :size="8" class="append-right-5" /> + <span>Toggle commit list</span> </div> </div> </div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue new file mode 100644 index 00000000000..06974a12aed --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue @@ -0,0 +1,11 @@ +<script> +export default { + name: 'TimelineEntryItem', +}; +</script> + +<template> + <li class="timeline-entry"> + <div class="timeline-entry-inner"><slot></slot></div> + </li> +</template> diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue index 89dcf049f6e..0b44f8578cb 100644 --- a/app/assets/javascripts/vue_shared/components/pagination_links.vue +++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue @@ -1,5 +1,5 @@ <script> -import { GlPagination } from '@gitlab-org/gitlab-ui'; +import { GlPagination } from '@gitlab/ui'; import { s__ } from '../../locale'; export default { diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue index 26c99aecae4..8bdb5bf22c2 100644 --- a/app/assets/javascripts/vue_shared/components/pikaday.vue +++ b/app/assets/javascripts/vue_shared/components/pikaday.vue @@ -62,20 +62,9 @@ export default { <template> <div class="pikaday-container"> <div class="dropdown open"> - <button - type="button" - class="dropdown-menu-toggle" - data-toggle="dropdown" - @click="toggled" - > - <span class="dropdown-toggle-text"> - {{ label }} - </span> - <i - class="fa fa-chevron-down" - aria-hidden="true" - > - </i> + <button type="button" class="dropdown-menu-toggle" data-toggle="dropdown" @click="toggled"> + <span class="dropdown-toggle-text"> {{ label }} </span> + <i class="fa fa-chevron-down" aria-hidden="true"> </i> </button> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue index 17927fabbcc..b399c232937 100644 --- a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue +++ b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue @@ -26,10 +26,7 @@ export default { </script> <template> - <span - :class="sizeClass" - class="avatar-container project-avatar" - > + <span :class="sizeClass" class="avatar-container project-avatar"> <project-avatar-image v-if="project.avatar_url" :link-href="project.path" @@ -37,11 +34,6 @@ export default { :img-alt="project.name" :img-size="size" /> - <identicon - v-else - :entity-id="project.id" - :entity-name="project.name" - :size-class="sizeClass" - /> + <identicon v-else :entity-id="project.id" :entity-name="project.name" :size-class="sizeClass" /> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue index 1a2fd2ad985..e77b9ddc7ba 100644 --- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue +++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue @@ -87,7 +87,7 @@ export default { :class="{ lazy: lazy, [avatarSizeClass]: true, - [cssClasses]: true + [cssClasses]: true, }" :src="resultantSrcAttribute" :width="size" diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue index 09394847b10..1c6c3fc4734 100644 --- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue +++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue @@ -73,14 +73,8 @@ export default { @cancel="close" > <div slot="body"> - <p> - {{ __('We want to be sure it is you, please confirm you are not a robot.') }} - </p> - <div - ref="recaptcha" - v-html="html" - > - </div> + <p>{{ __('We want to be sure it is you, please confirm you are not a robot.') }}</p> + <div ref="recaptcha" v-html="html"></div> </div> </deprecated-modal> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue index 5841db52704..cc24fedceed 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue @@ -47,16 +47,9 @@ export default { data-boundary="viewport" @click="click" > - <i - v-if="showIcon" - class="fa fa-calendar" - aria-hidden="true" - > - </i> + <i v-if="showIcon" class="fa fa-calendar" aria-hidden="true"> </i> <slot> - <span> - {{ text }} - </span> + <span> {{ text }} </span> </slot> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue index 174c29809ac..b5e43da401e 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue @@ -85,16 +85,10 @@ export default { @click="toggleSidebar" > <span class="sidebar-collapsed-value"> - <span v-if="showFromText">From</span> - <span>{{ dateText('min') }}</span> + <span v-if="showFromText">From</span> <span>{{ dateText('min') }}</span> </span> </collapsed-calendar-icon> - <div - v-if="hasMinAndMaxDates" - class="text-center sidebar-collapsed-divider" - > - - - </div> + <div v-if="hasMinAndMaxDates" class="text-center sidebar-collapsed-divider">-</div> <collapsed-calendar-icon v-if="maxDate" :container-class="iconClass" @@ -102,8 +96,7 @@ export default { @click="toggleSidebar" > <span class="sidebar-collapsed-value"> - <span v-if="!minDate">Until</span> - <span>{{ dateText('max') }}</span> + <span v-if="!minDate">Until</span> <span>{{ dateText('max') }}</span> </span> </collapsed-calendar-icon> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue index 5b12bb6b59e..82067129c57 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import datePicker from '../pikaday.vue'; import toggleSidebar from './toggle_sidebar.vue'; import collapsedCalendarIcon from './collapsed_calendar_icon.vue'; @@ -96,26 +96,14 @@ export default { </script> <template> - <div - :class="blockClass" - class="block" - > + <div :class="blockClass" class="block"> <div class="issuable-sidebar-header"> - <toggle-sidebar - :collapsed="collapsed" - @toggle="toggleSidebar" - /> + <toggle-sidebar :collapsed="collapsed" @toggle="toggleSidebar" /> </div> - <collapsed-calendar-icon - :text="collapsedText" - class="sidebar-collapsed-icon" - /> + <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" /> <div class="title"> {{ label }} - <gl-loading-icon - v-if="isLoading" - :inline="true" - /> + <gl-loading-icon v-if="isLoading" :inline="true" /> <div class="float-right"> <button v-if="editable && !editing" @@ -125,11 +113,7 @@ export default { > Edit </button> - <toggle-sidebar - v-if="showToggleSidebar" - :collapsed="collapsed" - @toggle="toggleSidebar" - /> + <toggle-sidebar v-if="showToggleSidebar" :collapsed="collapsed" @toggle="toggleSidebar" /> </div> </div> <div class="value"> @@ -142,32 +126,21 @@ export default { @newDateSelected="newDateSelected" @hidePicker="stopEditing" /> - <span - v-else - class="value-content" - > + <span v-else class="value-content"> <template v-if="selectedDate"> <strong>{{ selectedDateWords }}</strong> - <span - v-if="selectedAndEditable" - class="no-value" - > + <span v-if="selectedAndEditable" class="no-value"> - <button type="button" class="btn-blank btn-link btn-secondary-hover-link" - @click="newDateSelected(null)" + @click="newDateSelected(null);" > remove </button> </span> </template> - <span - v-else - class="no-value" - > - None - </span> + <span v-else class="no-value"> None </span> </span> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue index e50d612ce36..f66e81b1e08 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue @@ -4,7 +4,7 @@ import { __ } from '~/locale'; import LabelsSelect from '~/labels_select'; import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import DropdownTitle from './dropdown_title.vue'; import DropdownValue from './dropdown_value.vue'; import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; @@ -122,30 +122,18 @@ export default { :labels="context.labels" @onValueClick="handleCollapsedValueClick" /> - <dropdown-title - :can-edit="canEdit" - /> - <dropdown-value - :labels="context.labels" - :label-filter-base-path="labelFilterBasePath" - > + <dropdown-title :can-edit="canEdit" /> + <dropdown-value :labels="context.labels" :label-filter-base-path="labelFilterBasePath"> <slot></slot> </dropdown-value> - <div - v-if="canEdit" - class="selectbox js-selectbox" - style="display: none;" - > + <div v-if="canEdit" class="selectbox js-selectbox" style="display: none;"> <dropdown-hidden-input v-for="label in context.labels" :key="label.id" :name="hiddenInputName" :value="label.id" /> - <div - ref="dropdown" - class="dropdown" - > + <div ref="dropdown" class="dropdown"> <dropdown-button :ability-name="abilityName" :field-name="hiddenInputName" @@ -161,11 +149,9 @@ dropdown-menu-labels dropdown-menu-selectable" > <div class="dropdown-page-one"> <dropdown-header v-if="showCreate" /> - <dropdown-search-input/> + <dropdown-search-input /> <div class="dropdown-content"></div> - <div class="dropdown-loading"> - <gl-loading-icon /> - </div> + <div class="dropdown-loading"><gl-loading-icon /></div> <dropdown-footer v-if="showCreate" :labels-web-url="labelsWebUrl" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue index 48d2f16f554..498b507d11d 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue @@ -65,14 +65,7 @@ export default { class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal" data-toggle="dropdown" > - <span class="dropdown-toggle-text"> - {{ dropdownToggleText }} - </span> - <i - aria-hidden="true" - class="fa fa-chevron-down" - data-hidden="true" - > - </i> + <span class="dropdown-toggle-text"> {{ dropdownToggleText }} </span> + <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"> </i> </button> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue index fe895136ccc..74c5e063c3d 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue @@ -23,12 +23,7 @@ export default { type="button" class="dropdown-title-button dropdown-menu-back" > - <i - aria-hidden="true" - class="fa fa-arrow-left" - data-hidden="true" - > - </i> + <i aria-hidden="true" class="fa fa-arrow-left" data-hidden="true"> </i> </button> {{ headerTitle }} <button @@ -36,12 +31,7 @@ export default { type="button" class="dropdown-title-button dropdown-menu-close" > - <i - aria-hidden="true" - class="fa fa-times dropdown-menu-close-icon" - data-hidden="true" - > - </i> + <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i> </button> </div> <div class="dropdown-content"> @@ -75,16 +65,10 @@ export default { /> </div> <div class="clearfix"> - <button - type="button" - class="btn btn-primary float-left js-new-label-btn disabled" - > + <button type="button" class="btn btn-primary float-left js-new-label-btn disabled"> {{ __('Create') }} </button> - <button - type="button" - class="btn btn-default float-right js-cancel-label-btn" - > + <button type="button" class="btn btn-default float-right js-cancel-label-btn"> {{ __('Cancel') }} </button> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue index d64ad016f9b..ebbd8d119b5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue @@ -25,19 +25,10 @@ export default { <div class="dropdown-footer"> <ul class="dropdown-footer-list"> <li> - <a - href="#" - class="dropdown-toggle-page" - > - {{ createLabelTitle }} - </a> + <a href="#" class="dropdown-toggle-page"> {{ createLabelTitle }} </a> </li> <li> - <a - :href="labelsWebUrl" - data-is-link="true" - class="dropdown-external-link" - > + <a :href="labelsWebUrl" data-is-link="true" class="dropdown-external-link"> {{ manageLabelsTitle }} </a> </li> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue index e98b6392827..eb837be165b 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue @@ -10,12 +10,7 @@ export default {}; type="button" class="dropdown-title-button dropdown-menu-close" > - <i - aria-hidden="true" - class="fa fa-times dropdown-menu-close-icon" - data-hidden="true" - > - </i> + <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i> </button> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue index 80d65a2a534..bf51fa3dc38 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue @@ -10,12 +10,7 @@ export default {}; class="dropdown-input-field" type="search" /> - <i - aria-hidden="true" - class="fa fa-search dropdown-input-search" - data-hidden="true" - > - </i> + <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true"> </i> <i aria-hidden="true" class="fa fa-times dropdown-input-clear js-dropdown-input-clear" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue index 9ac32ff13c6..cb53273c786 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue @@ -13,16 +13,8 @@ export default { <div class="title hide-collapsed append-bottom-10"> {{ __('Labels') }} <template v-if="canEdit"> - <i - aria-hidden="true" - class="fa fa-spinner fa-spin block-loading" - data-hidden="true" - > - </i> - <button - type="button" - class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle" - > + <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" data-hidden="true"> </i> + <button type="button" class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle"> {{ __('Edit') }} </button> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue index 10e990f8a80..6faf3fafad1 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue @@ -37,22 +37,14 @@ export default { <template> <div :class="{ - 'has-labels':!isEmpty, + 'has-labels': !isEmpty, }" class="hide-collapsed value issuable-show-labels js-value" > - <span - v-if="isEmpty" - class="text-secondary" - > + <span v-if="isEmpty" class="text-secondary"> <slot>{{ __('None') }}</slot> </span> - <a - v-for="label in labels" - v-else - :key="label.id" - :href="labelFilterUrl(label)" - > + <a v-for="label in labels" v-else :key="label.id" :href="labelFilterUrl(label)"> <span v-tooltip :style="labelStyle(label)" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue index 0d5fc07e6e3..373794fb1f2 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue @@ -44,14 +44,10 @@ export default { class="sidebar-collapsed-icon" data-placement="left" data-container="body" + data-boundary="viewport" @click="handleClick" > - <i - aria-hidden="true" - data-hidden="true" - class="fa fa-tags" - > - </i> + <i aria-hidden="true" data-hidden="true" class="fa fa-tags"> </i> <span>{{ labels.length }}</span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue index 80dc7d3557c..3b5ce0e9910 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue @@ -46,7 +46,7 @@ export default { <i :class="{ 'fa-angle-double-right': !collapsed, - 'fa-angle-double-left': collapsed + 'fa-angle-double-left': collapsed, }" aria-label="toggle collapse" class="fa" diff --git a/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue b/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue index 63034a45f77..49f987bb619 100644 --- a/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue +++ b/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue @@ -27,16 +27,7 @@ export default { > <slot></slot> </virtual-list> - <component - :is="rtag" - v-else - class="js-plain-element" - > - <component - :is="wtag" - :class="wclass" - > - <slot></slot> - </component> + <component :is="rtag" v-else class="js-plain-element"> + <component :is="wtag" :class="wclass"> <slot></slot> </component> </component> </template> diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue index cd3ee544344..8ba6b73f928 100644 --- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue +++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue @@ -88,16 +88,8 @@ export default { </script> <template> - <div - :class="cssClass" - class="stacked-progress-bar" - > - <span - v-if="!totalCount" - class="status-unavailable" - > - {{ __("Not available") }} - </span> + <div :class="cssClass" class="stacked-progress-bar"> + <span v-if="!totalCount" class="status-unavailable"> {{ __('Not available') }} </span> <span v-if="successPercent" v-tooltip diff --git a/app/assets/javascripts/vue_shared/components/svg_gradient.vue b/app/assets/javascripts/vue_shared/components/svg_gradient.vue index b61a1befcd6..cca90af275e 100644 --- a/app/assets/javascripts/vue_shared/components/svg_gradient.vue +++ b/app/assets/javascripts/vue_shared/components/svg_gradient.vue @@ -17,20 +17,11 @@ export default { }; </script> <template> - <svg - height="0" - width="0"> + <svg height="0" width="0"> <defs> - <linearGradient - :id="identifierName"> - <stop - :stop-color="colors[0]" - :stop-opacity="opacity[0]" - offset="0%" /> - <stop - :stop-color="colors[1]" - :stop-opacity="opacity[1]" - offset="100%" /> + <linearGradient :id="identifierName"> + <stop :stop-color="colors[0]" :stop-opacity="opacity[0]" offset="0%" /> + <stop :stop-color="colors[1]" :stop-opacity="opacity[1]" offset="100%" /> </linearGradient> </defs> </svg> diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue index 03a5a078879..01e655d27e5 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.vue +++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue @@ -131,10 +131,7 @@ export default { }; </script> <template> - <div - v-if="showPagination" - class="gl-pagination prepend-top-default" - > + <div v-if="showPagination" class="gl-pagination prepend-top-default"> <ul class="pagination justify-content-center"> <li v-for="(item, index) in getItems" @@ -148,14 +145,11 @@ export default { 'd-none d-md-block': hideOnSmallScreen(item), separator: item.separator, active: item.active, - disabled: item.disabled || item.separator + disabled: item.disabled || item.separator, }" class="page-item" > - <a - class="page-link" - @click.prevent="changePage(item.title, item.disabled)" - > + <a class="page-link" @click.prevent="changePage(item.title, item.disabled);"> {{ item.title }} </a> </li> diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue index 1c6011dcfd0..d24c27cfcc3 100644 --- a/app/assets/javascripts/vue_shared/components/tabs/tab.vue +++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue @@ -37,7 +37,7 @@ export default { <template> <div :class="{ - active: localActive + active: localActive, }" class="tab-pane" role="tabpanel" diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue index d760263929a..8bcad7ac765 100644 --- a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue +++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue @@ -1,5 +1,5 @@ <script> -import tooltip from '../directives/tooltip'; +import { GlTooltipDirective } from '@gitlab/ui'; import timeagoMixin from '../mixins/timeago'; import '../../lib/utils/datetime_utility'; @@ -9,7 +9,7 @@ import '../../lib/utils/datetime_utility'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, mixins: [timeagoMixin], props: { @@ -17,13 +17,11 @@ export default { type: String, required: true, }, - tooltipPlacement: { type: String, required: false, default: 'top', }, - cssClass: { type: String, required: false, @@ -34,11 +32,10 @@ export default { </script> <template> <time - v-tooltip + v-gl-tooltip="{ placement: tooltipPlacement }" :class="cssClass" :title="tooltipTitle(time)" - :data-placement="tooltipPlacement" - data-container="body" - v-text="timeFormated(time)"> + v-text="timeFormated(time)" + > </time> </template> diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue index e7cb5cfac12..de70fa2182b 100644 --- a/app/assets/javascripts/vue_shared/components/toggle_button.vue +++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import { s__ } from '../../locale'; import icon from './icon.vue'; @@ -61,29 +61,20 @@ export default { <template> <label class="toggle-wrapper"> - <input - v-if="name" - :name="name" - :value="value" - type="hidden" - /> + <input v-if="name" :name="name" :value="value" type="hidden" /> <button :aria-label="ariaLabel" :class="{ 'is-checked': value, 'is-disabled': disabledInput, - 'is-loading': isLoading + 'is-loading': isLoading, }" type="button" class="project-feature-toggle" @click="toggleFeature" > <gl-loading-icon class="loading-icon" /> - <span class="toggle-icon"> - <icon - :name="toggleIcon" - css-classes="toggle-icon-svg"/> - </span> + <span class="toggle-icon"> <icon :name="toggleIcon" css-classes="toggle-icon-svg" /> </span> </button> </label> </template> diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue index d5b58574123..69eb791d195 100644 --- a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue +++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue @@ -59,9 +59,5 @@ export default { > <slot></slot> </span> - <span - v-else - > - <slot></slot> - </span> + <span v-else> <slot></slot> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue index 4cfb1ded0a9..e833a8e0483 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue @@ -15,7 +15,7 @@ */ -import { GlTooltip } from '@gitlab-org/gitlab-ui'; +import { GlTooltip } from '@gitlab/ui'; import defaultAvatarUrl from 'images/no_avatar.png'; import { placeholderImage } from '../../../lazy_loader'; @@ -67,7 +67,7 @@ export default { // In both cases we should render the defaultAvatarUrl sanitizedSource() { let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; - if (baseSrc.indexOf('?') === -1) baseSrc += `?width=${this.size}`; + if (!baseSrc.startsWith('data:') && !baseSrc.includes('?')) baseSrc += `?width=${this.size}`; return baseSrc; }, resultantSrcAttribute() { @@ -87,7 +87,7 @@ export default { :class="{ lazy: lazy, [avatarSizeClass]: true, - [cssClasses]: true + [cssClasses]: true, }" :src="resultantSrcAttribute" :width="size" @@ -97,14 +97,13 @@ export default { class="avatar" /> <gl-tooltip + v-if="tooltipText || $slots.default" :target="() => $refs.userAvatarImage" :placement="tooltipPlacement" boundary="window" class="js-user-avatar-image-toolip" > - <slot> - {{ tooltipText }} - </slot> + <slot> {{ tooltipText }} </slot> </gl-tooltip> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue index 351a639c6e8..55e2a786c8f 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue @@ -17,7 +17,7 @@ */ -import { GlLink, GlTooltipDirective } from '@gitlab-org/gitlab-ui'; +import { GlLink, GlTooltipDirective } from '@gitlab/ui'; import userAvatarImage from './user_avatar_image.vue'; export default { @@ -83,9 +83,7 @@ export default { </script> <template> - <gl-link - :href="linkHref" - class="user-avatar-link"> + <gl-link :href="linkHref" class="user-avatar-link"> <user-avatar-image :img-src="imgSrc" :img-alt="imgAlt" @@ -94,13 +92,14 @@ export default { :tooltip-text="avatarTooltipText" :tooltip-placement="tooltipPlacement" > - <slot></slot> - </user-avatar-image><span + <slot></slot> </user-avatar-image + ><span v-if="shouldShowUsername" v-gl-tooltip :title="tooltipText" :tooltip-placement="tooltipPlacement" class="js-user-avatar-link-username" - >{{ username }}</span><slot name="avatar-badge"></slot> + >{{ username }}</span + ><slot name="avatar-badge"></slot> </gl-link> </template> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue index 8e460566d09..7ed4da84120 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue @@ -34,10 +34,5 @@ export default { </script> <template> - <svg - :class="avatarSizeClass" - :height="size" - :width="size" - v-html="svg" - /> + <svg :class="avatarSizeClass" :height="size" :width="size" v-html="svg" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue new file mode 100644 index 00000000000..7fbadcc0111 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -0,0 +1,104 @@ +<script> +import { GlPopover, GlSkeletonLoading } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import UserAvatarImage from '../user_avatar/user_avatar_image.vue'; +import { glEmojiTag } from '../../../emoji'; + +export default { + name: 'UserPopover', + components: { + GlPopover, + GlSkeletonLoading, + UserAvatarImage, + }, + props: { + target: { + type: HTMLAnchorElement, + required: true, + }, + user: { + type: Object, + required: true, + default: null, + }, + loaded: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + jobLine() { + if (this.user.bio && this.user.organization) { + return sprintf(__('%{bio} at %{organization}'), { + bio: this.user.bio, + organization: this.user.organization, + }); + } else if (this.user.bio) { + return this.user.bio; + } else if (this.user.organization) { + return this.user.organization; + } + return null; + }, + statusHtml() { + if (this.user.status.emoji && this.user.status.message) { + return `${glEmojiTag(this.user.status.emoji)} ${this.user.status.message}`; + } else if (this.user.status.message) { + return this.user.status.message; + } + return ''; + }, + nameIsLoading() { + return !this.user.name; + }, + jobInfoIsLoading() { + return !this.user.loaded && this.user.organization === null; + }, + locationIsLoading() { + return !this.user.loaded && this.user.location === null; + }, + }, +}; +</script> + +<template> + <gl-popover :target="target" boundary="viewport" placement="top" show> + <div class="user-popover d-flex"> + <div class="p-1 flex-shrink-1"> + <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="mr-2" /> + </div> + <div class="p-1 w-100"> + <h5 class="m-0"> + {{ user.name }} + <gl-skeleton-loading + v-if="nameIsLoading" + :lines="1" + class="animation-container-small mb-1" + /> + </h5> + <div class="text-secondary mb-2"> + <span v-if="user.username">@{{ user.username }}</span> + <gl-skeleton-loading v-else :lines="1" class="animation-container-small mb-1" /> + </div> + <div class="text-secondary"> + {{ jobLine }} + <gl-skeleton-loading + v-if="jobInfoIsLoading" + :lines="1" + class="animation-container-small mb-1" + /> + </div> + <div class="text-secondary"> + {{ user.location }} + <gl-skeleton-loading + v-if="locationIsLoading" + :lines="1" + class="animation-container-small mb-1" + /> + </div> + <div v-if="user.status" class="mt-2"><span v-html="statusHtml"></span></div> + </div> + </div> + </gl-popover> +</template> |