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

Updated horizontal ellipsis icon for text-expander

parent f7b59b9f
<script>
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
/**
* Port of detail_behavior expand button.
*
......@@ -12,6 +14,9 @@ import { __ } from '~/locale';
*/
export default {
name: 'ExpandButton',
components: {
Icon,
},
data() {
return {
isCollapsed: true,
......@@ -22,6 +27,9 @@ export default {
return __('Click to expand text');
},
},
destroyed() {
this.isCollapsed = true;
},
methods: {
onClick() {
this.isCollapsed = !this.isCollapsed;
......@@ -37,7 +45,10 @@ export default {
type="button"
class="text-expander btn-blank"
@click="onClick">
...
<icon
:size="12"
name="ellipsis_h"
/>
</button>
<span v-if="!isCollapsed">
<slot name="expanded"></slot>
......
......@@ -135,10 +135,10 @@
}
.text-expander {
display: inline-block;
display: inline-flex;
background: $white-light;
color: $gl-text-color-secondary;
padding: 0 4px;
padding: 1px $gl-padding-4;
cursor: pointer;
border: 1px solid $border-gray-dark;
border-radius: $border-radius-default;
......@@ -180,6 +180,11 @@
.commit-content {
padding-right: 10px;
white-space: normal;
.commit-title {
display: flex;
align-items: center;
}
}
.commit-actions {
......@@ -253,7 +258,6 @@
.generic_commit_status {
a,
button {
color: $gl-text-color;
vertical-align: baseline;
}
......
......@@ -34,7 +34,8 @@
.d-block.d-sm-none
= render_commit_status(commit, ref: ref)
- 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
- commit_author_link = commit_author_link(commit, avatar: false, size: 24)
......
......@@ -29,7 +29,7 @@
= 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
%span.text-expander
\...
= sprite_icon('ellipsis_h', size: 12)
%span.js-details-content.hide
= 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")
---
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', () => {
});
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 => {
......
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