Commit cd007ba5 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'polish-sidebar-toggle' into 'master'

Polish sidebar toggle

Closes #28046

See merge request !12242
parents ad3843ae 28c45b04
......@@ -14,6 +14,11 @@ export default {
type: Boolean,
required: true,
},
showToggle: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
assigneeTitle() {
......@@ -36,6 +41,19 @@ export default {
>
Edit
</a>
<a
v-if="showToggle"
aria-label="Toggle sidebar"
class="gutter-toggle pull-right js-sidebar-toggle"
href="#"
role="button"
>
<i
aria-hidden="true"
data-hidden="true"
class="fa fa-angle-double-right"
/>
</a>
</div>
`,
};
......@@ -64,6 +64,7 @@ export default {
},
beforeMount() {
this.field = this.$el.dataset.field;
this.signedIn = typeof this.$el.dataset.signedIn !== 'undefined';
},
template: `
<div>
......@@ -71,6 +72,7 @@ export default {
:number-of-assignees="store.assignees.length"
:loading="loading || store.isFetching.assignees"
:editable="store.editable"
:show-toggle="!signedIn"
/>
<assignees
v-if="!store.isFetching.assignees"
......
......@@ -228,6 +228,12 @@
padding-top: 10px;
}
&:not(.issue-boards-sidebar):not([data-signed-in]) {
.issuable-sidebar-header {
display: none;
}
}
.assign-yourself .btn-link {
padding-left: 0;
}
......@@ -249,6 +255,10 @@
border-left: 1px solid $border-gray-normal;
}
.title .gutter-toggle {
margin-top: 0;
}
.assignee .avatar {
float: left;
margin-right: 10px;
......
......@@ -3,7 +3,7 @@
= page_specific_javascript_bundle_tag('common_vue')
= page_specific_javascript_bundle_tag('sidebar')
%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix", signed: { in: current_user.present? } }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
.issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } }
- can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.block.issuable-sidebar-header
......@@ -20,7 +20,7 @@
.block.todo.hide-expanded
= render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
.block.assignee
= render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable
= render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present?
.block.milestone
.sidebar-collapsed-icon
= icon('clock-o', 'aria-hidden': 'true')
......
- if issuable.is_a?(Issue)
#js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]" } }
#js-vue-sidebar-assignees{ data: { field: "#{issuable.to_ability_name}[assignee_ids]", signed_in: signed_in } }
.title.hide-collapsed
Assignee
= icon('spinner spin')
......@@ -14,6 +14,9 @@
= icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
- if can_edit_issuable
= link_to 'Edit', '#', class: 'edit-link pull-right'
- if !signed_in
%a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
= sidebar_gutter_toggle_icon
.value.hide-collapsed
- if issuable.assignee
= link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do
......
---
title: Remove unused space in sidebar todo toggle when not signed in
merge_request:
author:
......@@ -33,6 +33,31 @@ describe('AssigneeTitle component', () => {
});
});
describe('gutter toggle', () => {
it('does not show toggle by default', () => {
component = new AssigneeTitleComponent({
propsData: {
numberOfAssignees: 2,
editable: false,
},
}).$mount();
expect(component.$el.querySelector('.gutter-toggle')).toBeNull();
});
it('shows toggle when showToggle is true', () => {
component = new AssigneeTitleComponent({
propsData: {
numberOfAssignees: 2,
editable: false,
showToggle: true,
},
}).$mount();
expect(component.$el.querySelector('.gutter-toggle')).toEqual(jasmine.any(Object));
});
});
it('does not render spinner by default', () => {
component = new AssigneeTitleComponent({
propsData: {
......
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