Commit 4a01b5e2 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'functional-closed-sidebar' into 'master'

Functional closed sidebar

Adds functionality to include the closed sidebar.

When sidebar is closed the details will be visible once changed in open sidebar.

This MR fixes some bugs and adds some features from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3175

Fixes: #13594  

See merge request !3411
parents 7b2af874 b4ce4e6f
...@@ -195,6 +195,8 @@ class GitLabDropdown ...@@ -195,6 +195,8 @@ class GitLabDropdown
if @options.filterable if @options.filterable
@dropdown.find(".dropdown-input-field").focus() @dropdown.find(".dropdown-input-field").focus()
@dropdown.trigger('shown.gl.dropdown')
hidden: (e) => hidden: (e) =>
if @options.filterable if @options.filterable
@dropdown @dropdown
...@@ -209,6 +211,8 @@ class GitLabDropdown ...@@ -209,6 +211,8 @@ class GitLabDropdown
if @options.hidden if @options.hidden
@options.hidden.call(@,e) @options.hidden.call(@,e)
@dropdown.trigger('hidden.gl.dropdown')
# Render the full menu # Render the full menu
renderMenu: (html) -> renderMenu: (html) ->
......
...@@ -9,7 +9,7 @@ class @IssuableContext ...@@ -9,7 +9,7 @@ class @IssuableContext
$(".issuable-sidebar .inline-update").on "change", ".js-assignee", -> $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
$(this).submit() $(this).submit()
$(document).on "click",".edit-link", (e) -> $(document).off("click", ".edit-link").on "click",".edit-link", (e) ->
$block = $(@).parents('.block') $block = $(@).parents('.block')
$selectbox = $block.find('.selectbox') $selectbox = $block.find('.selectbox')
if $selectbox.is(':visible') if $selectbox.is(':visible')
......
...@@ -16,6 +16,7 @@ class @LabelsSelect ...@@ -16,6 +16,7 @@ class @LabelsSelect
abilityName = $dropdown.data('ability-name') abilityName = $dropdown.data('ability-name')
$selectbox = $dropdown.closest('.selectbox') $selectbox = $dropdown.closest('.selectbox')
$block = $selectbox.closest('.block') $block = $selectbox.closest('.block')
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
$value = $block.find('.value') $value = $block.find('.value')
$loading = $block.find('.block-loading').fadeOut() $loading = $block.find('.block-loading').fadeOut()
...@@ -142,6 +143,7 @@ class @LabelsSelect ...@@ -142,6 +143,7 @@ class @LabelsSelect
if not selected.length if not selected.length
data[abilityName].label_ids = [''] data[abilityName].label_ids = ['']
$loading.fadeIn() $loading.fadeIn()
$dropdown.trigger('loading.gl.dropdown')
$.ajax( $.ajax(
type: 'PUT' type: 'PUT'
url: issueUpdateURL url: issueUpdateURL
...@@ -149,15 +151,20 @@ class @LabelsSelect ...@@ -149,15 +151,20 @@ class @LabelsSelect
data: data data: data
).done (data) -> ).done (data) ->
$loading.fadeOut() $loading.fadeOut()
$dropdown.trigger('loaded.gl.dropdown')
$selectbox.hide() $selectbox.hide()
data.issueURLSplit = issueURLSplit data.issueURLSplit = issueURLSplit
if not data.labels.length labelCount = 0
template = labelNoneHTMLTemplate() if data.labels.length
else
template = labelHTMLTemplate(data) template = labelHTMLTemplate(data)
href = $value labelCount = data.labels.length
.show() else
template = labelNoneHTMLTemplate()
$value
.removeAttr('style')
.html(template) .html(template)
$sidebarCollapsedValue.text(labelCount)
$value $value
.find('a') .find('a')
.each((i) -> .each((i) ->
...@@ -226,7 +233,8 @@ class @LabelsSelect ...@@ -226,7 +233,8 @@ class @LabelsSelect
hidden: -> hidden: ->
$selectbox.hide() $selectbox.hide()
$value.show() # display:block overrides the hide-collapse rule
$value.removeAttr('style')
if $dropdown.hasClass 'js-multiselect' if $dropdown.hasClass 'js-multiselect'
saveLabelData() saveLabelData()
......
...@@ -18,6 +18,7 @@ class @MilestoneSelect ...@@ -18,6 +18,7 @@ class @MilestoneSelect
abilityName = $dropdown.data('ability-name') abilityName = $dropdown.data('ability-name')
$selectbox = $dropdown.closest('.selectbox') $selectbox = $dropdown.closest('.selectbox')
$block = $selectbox.closest('.block') $block = $selectbox.closest('.block')
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon')
$value = $block.find('.value') $value = $block.find('.value')
$loading = $block.find('.block-loading').fadeOut() $loading = $block.find('.block-loading').fadeOut()
...@@ -80,18 +81,14 @@ class @MilestoneSelect ...@@ -80,18 +81,14 @@ class @MilestoneSelect
milestone.name is selectedMilestone milestone.name is selectedMilestone
hidden: -> hidden: ->
$selectbox.hide() $selectbox.hide()
$value.show()
clicked: (selected) -> # display:block overrides the hide-collapse rule
$value.removeAttr('style')
clicked: (e) ->
if $dropdown.hasClass 'js-filter-bulk-update' if $dropdown.hasClass 'js-filter-bulk-update'
return return
if $dropdown.hasClass('js-filter-submit') if $dropdown.hasClass 'js-filter-submit'
if selected.name?
selectedMilestone = selected.name
else if selected.title?
selectedMilestone = selected.title
else
selectedMilestone = ''
$dropdown.parents('form').submit() $dropdown.parents('form').submit()
else else
selected = $selectbox selected = $selectbox
...@@ -102,20 +99,22 @@ class @MilestoneSelect ...@@ -102,20 +99,22 @@ class @MilestoneSelect
data[abilityName].milestone_id = selected data[abilityName].milestone_id = selected
$loading $loading
.fadeIn() .fadeIn()
$dropdown.trigger('loading.gl.dropdown')
$.ajax( $.ajax(
type: 'PUT' type: 'PUT'
url: issueUpdateURL url: issueUpdateURL
data: data data: data
).done (data) -> ).done (data) ->
$dropdown.trigger('loaded.gl.dropdown')
$loading.fadeOut() $loading.fadeOut()
$selectbox.hide() $selectbox.hide()
$milestoneLink = $value $value.removeAttr('style')
.show()
.find('a')
if data.milestone? if data.milestone?
data.milestone.namespace = _this.currentProject.namespace data.milestone.namespace = _this.currentProject.namespace
data.milestone.path = _this.currentProject.path data.milestone.path = _this.currentProject.path
$value.html(milestoneLinkTemplate(data.milestone)) $value.html(milestoneLinkTemplate(data.milestone))
$sidebarCollapsedValue.find('span').text(data.milestone.title)
else else
$value.html(milestoneLinkNoneTemplate) $value.html(milestoneLinkNoneTemplate)
$sidebarCollapsedValue.find('span').text('No')
) )
\ No newline at end of file
class @Sidebar
constructor: (currentUser) ->
@addEventListeners()
addEventListeners: ->
$('aside').on('click', '.sidebar-collapsed-icon', @sidebarCollapseClicked)
$('.dropdown').on('hidden.gl.dropdown', @sidebarDropdownHidden)
$('.dropdown').on('loading.gl.dropdown', @sidebarDropdownLoading)
$('.dropdown').on('loaded.gl.dropdown', @sidebarDropdownLoaded)
sidebarDropdownLoading: (e) ->
$sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
img = $sidebarCollapsedIcon.find('img')
i = $sidebarCollapsedIcon.find('i')
$loading = $('<i class="fa fa-spinner fa-spin"></i>')
if img.length
img.before($loading)
img.hide()
else if i.length
i.before($loading)
i.hide()
sidebarDropdownLoaded: (e) ->
$sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
img = $sidebarCollapsedIcon.find('img')
$sidebarCollapsedIcon.find('i.fa-spin').remove()
i = $sidebarCollapsedIcon.find('i')
if img.length
img.show()
else
i.show()
sidebarCollapseClicked: (e) ->
e.preventDefault()
$block = $(@).closest('.block')
$('aside')
.find('.gutter-toggle')
.trigger('click')
$editLink = $block.find('.edit-link')
if $editLink.length
$editLink.trigger('click')
$block.addClass('collapse-after-update')
$('.page-with-sidebar').addClass('with-overlay')
sidebarDropdownHidden: (e) ->
$block = $(@).closest('.block')
if $block.hasClass('collapse-after-update')
$block.removeClass('collapse-after-update')
$('.page-with-sidebar').removeClass('with-overlay')
$('aside')
.find('.gutter-toggle')
.trigger('click')
\ No newline at end of file
...@@ -19,6 +19,7 @@ class @UsersSelect ...@@ -19,6 +19,7 @@ class @UsersSelect
$block = $selectbox.closest('.block') $block = $selectbox.closest('.block')
abilityName = $dropdown.data('ability-name') abilityName = $dropdown.data('ability-name')
$value = $block.find('.value') $value = $block.find('.value')
$collapsedSidebar = $block.find('.sidebar-collapsed-user')
$loading = $block.find('.block-loading').fadeOut() $loading = $block.find('.block-loading').fadeOut()
$block.on('click', '.js-assign-yourself', (e) => $block.on('click', '.js-assign-yourself', (e) =>
...@@ -32,12 +33,14 @@ class @UsersSelect ...@@ -32,12 +33,14 @@ class @UsersSelect
data[abilityName].assignee_id = selected data[abilityName].assignee_id = selected
$loading $loading
.fadeIn() .fadeIn()
$dropdown.trigger('loading.gl.dropdown')
$.ajax( $.ajax(
type: 'PUT' type: 'PUT'
dataType: 'json' dataType: 'json'
url: issueURL url: issueURL
data: data data: data
).done (data) -> ).done (data) ->
$dropdown.trigger('loaded.gl.dropdown')
$loading.fadeOut() $loading.fadeOut()
$selectbox.hide() $selectbox.hide()
...@@ -51,11 +54,22 @@ class @UsersSelect ...@@ -51,11 +54,22 @@ class @UsersSelect
name: 'Unassigned' name: 'Unassigned'
username: '' username: ''
avatar: '' avatar: ''
$value.html(assigneeTemplate(user))
$collapsedSidebar.html(collapsedAssigneeTemplate(user))
$value.html(noAssigneeTemplate(user))
$value.find('a').attr('href')
noAssigneeTemplate = _.template( collapsedAssigneeTemplate = _.template(
'<% if( avatar ) { %>
<a class="author_link" href="/u/<%= username %>">
<img width="24" class="avatar avatar-inline s24" alt="" src="<%= avatar %>">
<span class="author">Toni Boehm</span>
</a>
<% } else { %>
<i class="fa fa-user"></i>
<% } %>'
)
assigneeTemplate = _.template(
'<% if (username) { %> '<% if (username) { %>
<a class="author_link " href="/u/<%= username %>"> <a class="author_link " href="/u/<%= username %>">
<% if( avatar ) { %> <% if( avatar ) { %>
...@@ -131,7 +145,8 @@ class @UsersSelect ...@@ -131,7 +145,8 @@ class @UsersSelect
hidden: (e) -> hidden: (e) ->
$selectbox.hide() $selectbox.hide()
$value.show() # display:block overrides the hide-collapse rule
$value.removeAttr('style')
clicked: (user) -> clicked: (user) ->
page = $('body').data 'page' page = $('body').data 'page'
......
...@@ -288,6 +288,10 @@ ...@@ -288,6 +288,10 @@
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
padding-right: $sidebar_collapsed_width; padding-right: $sidebar_collapsed_width;
} }
.sidebar-collapsed-icon {
cursor: pointer;
}
} }
.right-sidebar-expanded { .right-sidebar-expanded {
...@@ -300,4 +304,8 @@ ...@@ -300,4 +304,8 @@
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {
padding-right: $gutter_width; padding-right: $gutter_width;
} }
&.with-overlay {
padding-right: $sidebar_collapsed_width;
}
} }
...@@ -154,7 +154,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController ...@@ -154,7 +154,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
@merge_request.target_project, @merge_request]) @merge_request.target_project, @merge_request])
end end
format.json do format.json do
render json: @merge_request.to_json(include: [:milestone, :labels, :assignee]) render json: @merge_request.to_json(include: [:milestone, :labels, assignee: { methods: :avatar_url }])
end end
end end
else else
......
...@@ -150,3 +150,4 @@ ...@@ -150,3 +150,4 @@
new LabelsSelect(); new LabelsSelect();
new IssuableContext('#{current_user.to_json(only: [:username, :id, :name])}'); new IssuableContext('#{current_user.to_json(only: [:username, :id, :name])}');
new Subscription('.subscription') new Subscription('.subscription')
new Sidebar();
\ No newline at end of file
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