Commit df567ddb authored by Paul Slaughter's avatar Paul Slaughter

Update MR header and pipeline to use .label-truncate with .label-branch

Also:
- Renamed .label-truncated to .label-truncate
- Removed length checking in JS to let the CSS handle this
- Improve IE11 compatibility of MR headers
parent 243a2093
<script>
import tooltip from '~/vue_shared/directives/tooltip';
import { n__ } from '~/locale';
import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
import Icon from '~/vue_shared/components/icon.vue';
import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
export default {
name: 'MRWidgetHeader',
directives: {
tooltip,
},
components: {
Icon,
clipboardButton,
TooltipOnTruncate,
},
props: {
mr: {
......@@ -36,12 +34,6 @@ export default {
gfm: `\`${this.mr.sourceBranch}\``,
});
},
isSourceBranchLong() {
return this.isBranchTitleLong(this.mr.sourceBranch);
},
isTargetBranchLong() {
return this.isBranchTitleLong(this.mr.targetBranch);
},
webIdePath() {
return mergeUrlParams({
target_project: this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath ?
......@@ -49,11 +41,6 @@ export default {
}, webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`));
},
},
methods: {
isBranchTitleLong(branchTitle) {
return branchTitle.length > 32;
},
},
};
</script>
<template>
......@@ -65,30 +52,21 @@ export default {
<div class="normal">
<strong>
{{ s__("mrWidget|Request to merge") }}
<span
:class="{ 'label-truncated': isSourceBranchLong }"
:title="isSourceBranchLong ? mr.sourceBranch : ''"
:v-tooltip="isSourceBranchLong"
class="label-branch js-source-branch"
data-placement="bottom"
<tooltip-on-truncate
:title="mr.sourceBranch"
truncate-target="child"
class="label-branch label-truncate js-source-branch"
v-html="mr.sourceBranchLink"
>
</span>
<clipboard-button
/><clipboard-button
:text="branchNameClipboardData"
:title="__('Copy branch name to clipboard')"
css-class="btn-default btn-transparent btn-clipboard"
/>
{{ s__("mrWidget|into") }}
<span
:v-tooltip="isTargetBranchLong"
:class="{ 'label-truncatedtooltip': isTargetBranchLong }"
:title="isTargetBranchLong ? mr.targetBranch : ''"
class="label-branch"
data-placement="bottom"
<tooltip-on-truncate
:title="mr.targetBranch"
truncate-target="child"
class="label-branch label-truncate"
>
<a
:href="mr.targetBranchTreePath"
......@@ -96,7 +74,7 @@ export default {
>
{{ mr.targetBranch }}
</a>
</span>
</tooltip-on-truncate>
</strong>
<div
v-if="shouldShowCommitsBehindText"
......
......@@ -3,6 +3,7 @@
import PipelineStage from '~/pipelines/components/stage.vue';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
export default {
name: 'MRWidgetPipeline',
......@@ -10,6 +11,7 @@ export default {
PipelineStage,
CiIcon,
Icon,
TooltipOnTruncate,
},
props: {
pipeline: {
......@@ -30,6 +32,10 @@ export default {
type: String,
required: false,
},
sourceBranch: {
type: String,
required: false,
},
},
computed: {
hasPipeline() {
......@@ -107,11 +113,12 @@ export default {
>
{{ pipeline.commit.short_id }}</a>
on
<span
class="label-branch"
<tooltip-on-truncate
:title="sourceBranch"
truncate-target="child"
class="label-branch label-truncate"
v-html="sourceBranchLink"
>
</span>
/>
</template>
</div>
<div
......
......@@ -254,6 +254,7 @@ export default {
:pipeline="mr.pipeline"
:ci-status="mr.ciStatus"
:has-ci="mr.hasCI"
:source-branch="mr.sourceBranch"
:source-branch-link="mr.sourceBranchLink"
/>
<deployment
......
......@@ -195,6 +195,7 @@
.ci-widget-content {
display: flex;
align-items: center;
flex: 1;
}
}
......@@ -222,6 +223,7 @@
.normal {
flex: 1;
flex-basis: auto;
}
.capitalize {
......@@ -236,21 +238,19 @@
overflow: hidden;
word-break: break-all;
&.label-truncated {
position: relative;
&.label-truncate {
// NOTE: This selector targets its children because some of the HTML comes from
// 'source_branch_link'. Once this external HTML is no longer used, we could
// simplify this.
> a,
> span {
display: inline-block;
width: 250px;
max-width: 12.5em;
margin-bottom: -3px;
white-space: nowrap;
text-overflow: clip;
text-overflow: ellipsis;
line-height: 14px;
&::after {
position: absolute;
content: '...';
right: 0;
font-family: $regular-font;
background-color: $gray-light;
overflow: hidden;
}
}
}
......@@ -582,7 +582,7 @@
@include media-breakpoint-down(md) {
flex-direction: column;
align-items: flex-start;
align-items: stretch;
.branch-actions {
margin-top: 16px;
......@@ -593,6 +593,7 @@
.branch-actions {
align-self: center;
margin-left: $gl-padding;
white-space: nowrap;
}
}
}
......@@ -918,7 +919,7 @@
flex: 1;
flex-direction: row;
@include media-breakpoint-down(md) {
@include media-breakpoint-down(sm) {
flex-direction: column;
.stage-cell .stage-container {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment