From 509bc3fbe41f2df11189d7e2e9eba1309866d86d Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Sun, 27 Mar 2016 11:04:51 -0400 Subject: [PATCH] Sidebar collapse update issue --- app/assets/javascripts/gl_dropdown.js.coffee | 4 ++ .../javascripts/labels_select.js.coffee | 2 + .../javascripts/milestone_select.js.coffee | 7 ++- .../javascripts/right_sidebar.js.coffee | 53 +++++++++++++++++++ app/assets/javascripts/users_select.js.coffee | 18 +------ app/assets/stylesheets/framework/sidebar.scss | 4 ++ app/views/shared/issuable/_sidebar.html.haml | 1 + 7 files changed, 71 insertions(+), 18 deletions(-) create mode 100644 app/assets/javascripts/right_sidebar.js.coffee diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index dd0465b9358..dbcad9c0514 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -195,6 +195,8 @@ class GitLabDropdown if @options.filterable @dropdown.find(".dropdown-input-field").focus() + @dropdown.trigger('shown.gl.dropdown') + hidden: (e) => if @options.filterable @dropdown @@ -209,6 +211,8 @@ class GitLabDropdown if @options.hidden @options.hidden.call(@,e) + @dropdown.trigger('hidden.gl.dropdown') + # Render the full menu renderMenu: (html) -> diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee index 408cba33cb3..d1fe116397a 100644 --- a/app/assets/javascripts/labels_select.js.coffee +++ b/app/assets/javascripts/labels_select.js.coffee @@ -143,6 +143,7 @@ class @LabelsSelect if not selected.length data[abilityName].label_ids = [''] $loading.fadeIn() + $dropdown.trigger('loading.gl.dropdown') $.ajax( type: 'PUT' url: issueUpdateURL @@ -150,6 +151,7 @@ class @LabelsSelect data: data ).done (data) -> $loading.fadeOut() + $dropdown.trigger('loaded.gl.dropdown') $selectbox.hide() data.issueURLSplit = issueURLSplit labelCount = 0 diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee index 2b292c387a5..e2a7d5fbba2 100644 --- a/app/assets/javascripts/milestone_select.js.coffee +++ b/app/assets/javascripts/milestone_select.js.coffee @@ -18,7 +18,7 @@ class @MilestoneSelect abilityName = $dropdown.data('ability-name') $selectbox = $dropdown.closest('.selectbox') $block = $selectbox.closest('.block') - $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span') + $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon') $value = $block.find('.value') $loading = $block.find('.block-loading').fadeOut() @@ -99,11 +99,13 @@ class @MilestoneSelect data[abilityName].milestone_id = selected $loading .fadeIn() + $dropdown.trigger('loading.gl.dropdown') $.ajax( type: 'PUT' url: issueUpdateURL data: data ).done (data) -> + $dropdown.trigger('loaded.gl.dropdown') $loading.fadeOut() $selectbox.hide() $value.removeAttr('style') @@ -111,7 +113,8 @@ class @MilestoneSelect data.milestone.namespace = _this.currentProject.namespace data.milestone.path = _this.currentProject.path $value.html(milestoneLinkTemplate(data.milestone)) - $sidebarCollapsedValue.text(data.milestone.title) + $sidebarCollapsedValue.find('span').text(data.milestone.title) else $value.html(milestoneLinkNoneTemplate) + $sidebarCollapsedValue.find('span').text('No') ) \ No newline at end of file diff --git a/app/assets/javascripts/right_sidebar.js.coffee b/app/assets/javascripts/right_sidebar.js.coffee new file mode 100644 index 00000000000..4b08c5caf26 --- /dev/null +++ b/app/assets/javascripts/right_sidebar.js.coffee @@ -0,0 +1,53 @@ +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 = $('') + if img.length + img.before($loading) + img.hide() + else if i.length + i.before($loading) + i.hide() + + sidebarDropdownLoaded: (e) -> + console.log 'loaded' + $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') + + sidebarDropdownHidden: (e) -> + $block = $(@).closest('.block') + if $block.hasClass('collapse-after-update') + $block.removeClass('collapse-after-update') + $('aside') + .find('.gutter-toggle') + .trigger('click') \ No newline at end of file diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee index a25836a140a..eee9b6e690e 100644 --- a/app/assets/javascripts/users_select.js.coffee +++ b/app/assets/javascripts/users_select.js.coffee @@ -17,9 +17,6 @@ class @UsersSelect issueURL = $dropdown.data('issueUpdate') $selectbox = $dropdown.closest('.selectbox') $block = $selectbox.closest('.block') - $gutterToggle = $block - .closest('aside') - .find('.gutter-toggle') abilityName = $dropdown.data('ability-name') $value = $block.find('.value') $collapsedSidebar = $block.find('.sidebar-collapsed-user') @@ -30,28 +27,20 @@ class @UsersSelect assignTo(@currentUser.id) ) - $block.on('click', '.author_link', (e) => - e.preventDefault() - $gutterToggle - .trigger('click') - $block - .find('.edit-link') - .trigger('click') - $block.addClass('collapse-after-update') - ) - assignTo = (selected) -> data = {} data[abilityName] = {} data[abilityName].assignee_id = selected $loading .fadeIn() + $dropdown.trigger('loading.gl.dropdown') $.ajax( type: 'PUT' dataType: 'json' url: issueURL data: data ).done (data) -> + $dropdown.trigger('loaded.gl.dropdown') $loading.fadeOut() $selectbox.hide() @@ -67,9 +56,6 @@ class @UsersSelect avatar: '' $value.html(assigneeTemplate(user)) $collapsedSidebar.html(collapsedAssigneeTemplate(user)) - if $block.hasClass('collapse-after-update') - $block.removeClass('collapse-after-update') - $gutterToggle.trigger('click') collapsedAssigneeTemplate = _.template( diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 9d188317783..da844dc11e1 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -288,6 +288,10 @@ @media (min-width: $screen-sm-min) { padding-right: $sidebar_collapsed_width; } + + .sidebar-collapsed-icon { + cursor: pointer; + } } .right-sidebar-expanded { diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 451c64da2c4..47e544acf52 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -150,3 +150,4 @@ new LabelsSelect(); new IssuableContext('#{current_user.to_json(only: [:username, :id, :name])}'); new Subscription('.subscription') + new Sidebar(); \ No newline at end of file