Updated horizontal ellipsis icon for text-expander
This commit is contained in:
parent
f7b59b9f14
commit
3df04bd17f
|
@ -1,5 +1,7 @@
|
||||||
<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';
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'ExpandButton',
|
name: 'ExpandButton',
|
||||||
|
components: {
|
||||||
|
Icon,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isCollapsed: true,
|
isCollapsed: true,
|
||||||
|
@ -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 {
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 @@
|
||||||
.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 @@
|
||||||
.generic_commit_status {
|
.generic_commit_status {
|
||||||
a,
|
a,
|
||||||
button {
|
button {
|
||||||
color: $gl-text-color;
|
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 @@
|
||||||
= 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")
|
||||||
|
|
|
@ -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', () => {
|
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 => {
|
||||||
|
|
Loading…
Reference in New Issue