Commit 28c45b04 authored by Clement Ho's avatar Clement Ho Committed by Phil Hughes

Polish sidebar toggle

parent ad3843ae
...@@ -14,6 +14,11 @@ export default { ...@@ -14,6 +14,11 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
showToggle: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { computed: {
assigneeTitle() { assigneeTitle() {
...@@ -36,6 +41,19 @@ export default { ...@@ -36,6 +41,19 @@ export default {
> >
Edit Edit
</a> </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> </div>
`, `,
}; };
...@@ -64,6 +64,7 @@ export default { ...@@ -64,6 +64,7 @@ export default {
}, },
beforeMount() { beforeMount() {
this.field = this.$el.dataset.field; this.field = this.$el.dataset.field;
this.signedIn = typeof this.$el.dataset.signedIn !== 'undefined';
}, },
template: ` template: `
<div> <div>
...@@ -71,6 +72,7 @@ export default { ...@@ -71,6 +72,7 @@ export default {
:number-of-assignees="store.assignees.length" :number-of-assignees="store.assignees.length"
:loading="loading || store.isFetching.assignees" :loading="loading || store.isFetching.assignees"
:editable="store.editable" :editable="store.editable"
:show-toggle="!signedIn"
/> />
<assignees <assignees
v-if="!store.isFetching.assignees" v-if="!store.isFetching.assignees"
......
...@@ -228,6 +228,12 @@ ...@@ -228,6 +228,12 @@
padding-top: 10px; padding-top: 10px;
} }
&:not(.issue-boards-sidebar):not([data-signed-in]) {
.issuable-sidebar-header {
display: none;
}
}
.assign-yourself .btn-link { .assign-yourself .btn-link {
padding-left: 0; padding-left: 0;
} }
...@@ -249,6 +255,10 @@ ...@@ -249,6 +255,10 @@
border-left: 1px solid $border-gray-normal; border-left: 1px solid $border-gray-normal;
} }
.title .gutter-toggle {
margin-top: 0;
}
.assignee .avatar { .assignee .avatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
= page_specific_javascript_bundle_tag('common_vue') = page_specific_javascript_bundle_tag('common_vue')
= page_specific_javascript_bundle_tag('sidebar') = 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)}" } } .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } }
- can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
.block.issuable-sidebar-header .block.issuable-sidebar-header
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.block.todo.hide-expanded .block.todo.hide-expanded
= render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
.block.assignee .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 .block.milestone
.sidebar-collapsed-icon .sidebar-collapsed-icon
= icon('clock-o', 'aria-hidden': 'true') = icon('clock-o', 'aria-hidden': 'true')
......
- if issuable.is_a?(Issue) - 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 .title.hide-collapsed
Assignee Assignee
= icon('spinner spin') = icon('spinner spin')
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
= icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true') = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
- if can_edit_issuable - if can_edit_issuable
= link_to 'Edit', '#', class: 'edit-link pull-right' = 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 .value.hide-collapsed
- if issuable.assignee - if issuable.assignee
= link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do = 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', () => { ...@@ -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', () => { it('does not render spinner by default', () => {
component = new AssigneeTitleComponent({ component = new AssigneeTitleComponent({
propsData: { 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