Updated horizontal ellipsis icon for text-expander
This commit is contained in:
parent
f7b59b9f14
commit
3df04bd17f
|
@ -1,5 +1,7 @@
|
|||
<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")
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Updated the icon for expand buttons to ellipsis
|
||||
merge_request: 18793
|
||||
author: Constance Okoghenun
|
||||
type: changed
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in New Issue