diff options
5 files changed, 128 insertions, 68 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 3ce9d8dc26a..3b851770bd9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -54,8 +54,11 @@ export default { }; </script> <template> - <div class="mr-source-target"> + <div class="mr-source-target append-bottom-default"> <div class="normal"> + <div class="git-merge-icon-container d-inline-block append-right-8"> + <icon name="git-merge" /> + </div> <strong> {{ s__("mrWidget|Request to merge") }} <span @@ -91,27 +94,27 @@ export default { </a> </span> </strong> - <span +<!-- <span v-if="shouldShowCommitsBehindText" class="diverged-commits-count" > (<a :href="mr.targetBranchPath">{{ commitsText }}</a>) - </span> + </span> --> </div> <div v-if="mr.isOpen"> <a v-if="!mr.sourceBranchRemoved" :href="webIdePath" - class="btn btn-sm btn-default inline js-web-ide" + class="btn btn-default inline js-web-ide d-sm-none d-md-inline-block" > - {{ s__("mrWidget|Web IDE") }} + {{ s__("mrWidget|Open in Web IDE") }} </a> <button :disabled="mr.sourceBranchRemoved" data-target="#modal_merge_info" data-toggle="modal" - class="btn btn-sm btn-default inline js-check-out-branch" + class="btn btn-default inline js-check-out-branch" type="button" > {{ s__("mrWidget|Check out branch") }} @@ -119,7 +122,7 @@ export default { <span class="dropdown prepend-left-10"> <button type="button" - class="btn btn-sm inline dropdown-toggle" + class="btn inline dropdown-toggle" data-toggle="dropdown" aria-label="Download as" aria-haspopup="true" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 2f0b5e12c12..68b85602e5e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -54,11 +54,11 @@ export default { <template> <div v-if="hasPipeline || hasCIError" - class="mr-widget-heading" + class="mr-widget-heading append-bottom-default" > <div class="ci-widget media"> <template v-if="hasCIError"> - <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10"> + <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-default"> <icon name="status_failed" /> </div> <div class="media-body"> @@ -66,34 +66,42 @@ export default { </div> </template> <template v-else-if="hasPipeline"> - <a - :href="status.details_path" - class="append-right-10" - > - <ci-icon :status="status" /> - </a> - - <div class="media-body"> - Pipeline + <div class="ci-widget-content"> <a - :href="pipeline.path" - class="pipeline-id" + :href="status.details_path" + class="append-right-10" > - #{{ pipeline.id }} + <ci-icon :status="status" :size="32" /> </a> - {{ pipeline.details.status.label }} + <div class="media-body font-weight-bold"> + <div> + Pipeline + <a + :href="pipeline.path" + class="pipeline-id font-weight-normal" + > + #{{ pipeline.id }} + </a> - <template v-if="hasCommitInfo"> - for + {{ pipeline.details.status.label }} - <a - :href="pipeline.commit.commit_path" - class="commit-sha js-commit-link" - > - {{ pipeline.commit.short_id }}</a>. - </template> + <template v-if="hasCommitInfo"> + for + <a + :href="pipeline.commit.commit_path" + class="commit-sha js-commit-link font-weight-normal" + > + {{ pipeline.commit.short_id }}</a>. + </template> + </div> + <div v-if="pipeline.coverage"> + Coverage {{ pipeline.coverage }}% + </div> + </div> + </div> + <div> <span class="mr-widget-pipeline-graph"> <span v-if="hasStages" @@ -108,10 +116,6 @@ export default { </div> </span> </span> - - <template v-if="pipeline.coverage"> - Coverage {{ pipeline.coverage }}% - </template> </div> </template> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue index 1fdc3218671..a25a7f03a13 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue @@ -43,6 +43,7 @@ <ci-icon v-else :status="statusObj" + :size="24" /> <button diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index 09477da40b5..036a20ff734 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -258,35 +258,37 @@ export default { :key="deployment.id" :deployment="deployment" /> - <div class="mr-widget-section"> - <component - :is="componentName" - :mr="mr" - :service="service" - /> + <div style="border-radius: 2px;border: 1px solid #e5e5e5;border-top: none;"> + <div class="mr-widget-section"> + <component + :is="componentName" + :mr="mr" + :service="service" + /> - <section - v-if="mr.allowCollaboration" - class="mr-info-list mr-links" - > - {{ s__("mrWidget|Allows commits from members who can merge to the target branch") }} - </section> + <section + v-if="mr.allowCollaboration" + class="mr-info-list mr-links" + > + {{ s__("mrWidget|Allows commits from members who can merge to the target branch") }} + </section> - <mr-widget-related-links - v-if="shouldRenderRelatedLinks" - :state="mr.state" - :related-links="mr.relatedLinks" - /> + <mr-widget-related-links + v-if="shouldRenderRelatedLinks" + :state="mr.state" + :related-links="mr.relatedLinks" + /> - <source-branch-removal-status - v-if="shouldRenderSourceBranchRemovalStatus" - /> - </div> - <div - v-if="shouldRenderMergeHelp" - class="mr-widget-footer" - > - <mr-widget-merge-help /> + <source-branch-removal-status + v-if="shouldRenderSourceBranchRemovalStatus" + /> + </div> + <div + v-if="shouldRenderMergeHelp" + class="mr-widget-footer" + > + <mr-widget-merge-help /> + </div> </div> </div> </template> diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index ccf5d632614..9a18fdd2bb1 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -15,16 +15,51 @@ } } +.mr-source-target { + position: relative; + + .git-merge-icon-container { + border: 2px solid #BABABA; + border-radius: 50%; + height: 32px; + width: 32px; + color: #707070; + + .ic-git-merge { + vertical-align: middle; + width: 28px; + } + } + + &::after { + content: ''; + border-left: 1px solid #DFDFDF; + position: absolute; + left: 32px; + top: 100%; + height: 16px; + } +} + +.mr-widget-heading { + border: 1px solid $border-color; + border-radius: 4px; +} + .mr-state-widget { color: $gl-text-color; - border: 1px solid $border-color; - border-radius: 2px; + // border: 1px solid $border-color; + // border-radius: 2px; line-height: 28px; .mr-widget-heading, .mr-widget-section, .mr-widget-footer { padding: $gl-padding; + } + + .mr-widget-section, + .mr-widget-footer { border-top: solid 1px $border-color; } @@ -124,10 +159,17 @@ .ci-widget { color: $gl-text-color; display: flex; + align-items: center; + justify-content: space-between; @include media-breakpoint-down(xs) { flex-wrap: wrap; } + + .ci-widget-content { + display: flex; + align-items: center; + } } .mr-widget-icon { @@ -136,8 +178,8 @@ } .ci-status-icon svg { - width: $status-icon-size; - height: $status-icon-size; + // width: $status-icon-size; + // height: $status-icon-size; margin: 3px 0; position: relative; overflow: visible; @@ -168,7 +210,7 @@ @extend .ref-name; color: $gl-text-color; - font-weight: $gl-font-weight-bold; + font-weight: normal; overflow: hidden; word-break: break-all; @@ -474,14 +516,22 @@ } } +.merge-request-details .content-block { + border-bottom: none; +} + .mr-source-target { display: flex; flex-wrap: wrap; justify-content: space-between; - align-items: center; - background-color: $gray-light; - border-radius: $border-radius-default $border-radius-default 0 0; + // align-items: center; + // background-color: $gray-light; + border-radius: $border-radius-default $border-radius-default; padding: $gl-padding / 2 $gl-padding; + border: 1px solid $border-color; + + min-height: 69px; + align-items: center; .dropdown-toggle .fa { color: $gl-text-color; |