Commit 3df04bd1 authored by Constance Okoghenun's avatar Constance Okoghenun Committed by Tim Zallmann

Updated horizontal ellipsis icon for text-expander

parent f7b59b9f
<script> <script>
import { __ } from '~/locale'; import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
/** /**
* Port of detail_behavior expand button. * Port of detail_behavior expand button.
* *
...@@ -12,6 +14,9 @@ import { __ } from '~/locale'; ...@@ -12,6 +14,9 @@ import { __ } from '~/locale';
*/ */
export default { export default {
name: 'ExpandButton', name: 'ExpandButton',
components: {
Icon,
},
data() { data() {
return { return {
isCollapsed: true, isCollapsed: true,
...@@ -22,6 +27,9 @@ export default { ...@@ -22,6 +27,9 @@ export default {
return __('Click to expand text'); return __('Click to expand text');
}, },
}, },
destroyed() {
this.isCollapsed = true;
},
methods: { methods: {
onClick() { onClick() {
this.isCollapsed = !this.isCollapsed; this.isCollapsed = !this.isCollapsed;
...@@ -37,7 +45,10 @@ export default { ...@@ -37,7 +45,10 @@ export default {
type="button" type="button"
class="text-expander btn-blank" class="text-expander btn-blank"
@click="onClick"> @click="onClick">
... <icon
:size="12"
name="ellipsis_h"
/>
</button> </button>
<span v-if="!isCollapsed"> <span v-if="!isCollapsed">
<slot name="expanded"></slot> <slot name="expanded"></slot>
......
...@@ -135,10 +135,10 @@ ...@@ -135,10 +135,10 @@
} }
.text-expander { .text-expander {
display: inline-block; display: inline-flex;
background: $white-light; background: $white-light;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
padding: 0 4px; padding: 1px $gl-padding-4;
cursor: pointer; cursor: pointer;
border: 1px solid $border-gray-dark; border: 1px solid $border-gray-dark;
border-radius: $border-radius-default; border-radius: $border-radius-default;
...@@ -180,6 +180,11 @@ ...@@ -180,6 +180,11 @@
.commit-content { .commit-content {
padding-right: 10px; padding-right: 10px;
white-space: normal; white-space: normal;
.commit-title {
display: flex;
align-items: center;
}
} }
.commit-actions { .commit-actions {
...@@ -253,7 +258,6 @@ ...@@ -253,7 +258,6 @@
.generic_commit_status { .generic_commit_status {
a, a,
button { button {
color: $gl-text-color;
vertical-align: baseline; vertical-align: baseline;
} }
......
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
.d-block.d-sm-none .d-block.d-sm-none
= render_commit_status(commit, ref: ref) = render_commit_status(commit, ref: ref)
- if commit.description? - if commit.description?
%button.text-expander.d-none.d-sm-inline-block.js-toggle-button{ type: "button" } ... %button.text-expander.js-toggle-button
= sprite_icon('ellipsis_h', size: 12)
.commiter .commiter
- commit_author_link = commit_author_link(commit, avatar: false, size: 24) - commit_author_link = commit_author_link(commit, avatar: false, size: 24)
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
= link_to @commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short" = link_to @commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short"
= link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do = link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do
%span.text-expander %span.text-expander
\... = sprite_icon('ellipsis_h', size: 12)
%span.js-details-content.hide %span.js-details-content.hide
= link_to @pipeline.sha, project_commit_path(@project, @pipeline.sha), class: "commit-sha commit-hash-full" = link_to @pipeline.sha, project_commit_path(@project, @pipeline.sha), class: "commit-sha commit-hash-full"
= clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard") = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
---
title: Updated the icon for expand buttons to ellipsis
merge_request: 18793
author: Constance Okoghenun
type: changed
\ No newline at end of file
...@@ -19,7 +19,7 @@ describe('expand button', () => { ...@@ -19,7 +19,7 @@ describe('expand button', () => {
}); });
it('renders a collpased button', () => { it('renders a collpased button', () => {
expect(vm.$el.textContent.trim()).toEqual('...'); expect(vm.$children[0].iconTestClass).toEqual('ic-ellipsis_h');
}); });
it('hides expander on click', done => { it('hides expander on click', done => {
......
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