From 3c9e860f5ee2393c01096337822f2542020c6c23 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Wed, 2 Mar 2016 14:08:03 -0500 Subject: [PATCH] Provide defaults and make sure we everything is container into a parent element --- app/assets/javascripts/user.js.coffee | 5 +- app/assets/javascripts/user_tabs.js.coffee | 28 ++-- app/views/users/show.html.haml | 183 +++++++++++---------- 3 files changed, 113 insertions(+), 103 deletions(-) diff --git a/app/assets/javascripts/user.js.coffee b/app/assets/javascripts/user.js.coffee index dcc2c002997..10ac064f9fc 100644 --- a/app/assets/javascripts/user.js.coffee +++ b/app/assets/javascripts/user.js.coffee @@ -12,4 +12,7 @@ class @User e.preventDefault() initTabs: -> - new UserTabs(@opts) + new UserTabs( + parentEl: '.user-profile' + action: @opts.action + ) diff --git a/app/assets/javascripts/user_tabs.js.coffee b/app/assets/javascripts/user_tabs.js.coffee index 6e990b6c535..5d82f599710 100644 --- a/app/assets/javascripts/user_tabs.js.coffee +++ b/app/assets/javascripts/user_tabs.js.coffee @@ -52,8 +52,15 @@ class @UserTabs actions: ['activity', 'groups', 'contributed', 'projects'], defaultAction: 'activity', + constructor: (opts) -> + { + @action = 'activity' + @parentEl = $(document) + } = opts + + # Make jQuery object if selector is provided + @parentEl = $(@parentEl) if typeof @parentEl is 'string' - constructor: (@opts = {}) -> # Store the `location` object, allowing for easier stubbing in tests @_location = location @loaded = {} @@ -61,19 +68,18 @@ class @UserTabs @bindEvents() @tabStateInit() - action = @opts.action - action = @defaultAction if action == 'show' + currAction = @defaultAction if @action is 'show' # Set active tab - source = $(".#{action}-tab a").attr('href') - @activateTab(action) + source = $(".#{currAction}-tab a").attr('href') + @activateTab(currAction) bindEvents: -> # Turn off existing event listeners - $(document).off 'shown.bs.tab', '.nav-links a[data-toggle="tab"]' + @parentEl.off 'shown.bs.tab', '.nav-links a[data-toggle="tab"]' # Set event listeners - $(document).on 'shown.bs.tab', '.nav-links a[data-toggle="tab"]', @tabShown + @parentEl.on 'shown.bs.tab', '.nav-links a[data-toggle="tab"]', @tabShown tabStateInit: -> for action in @actions @@ -88,7 +94,7 @@ class @UserTabs @setCurrentAction(action) activateTab: (action) -> - $(".nav-links .#{action}-tab a").tab('show') + @parentEl.find(".nav-links .#{action}-tab a").tab('show') setTab: (source, action) -> return if @loaded[action] is true @@ -108,20 +114,20 @@ class @UserTabs url: "#{source}.json" success: (data) => tabSelector = 'div#' + action - document.querySelector(tabSelector).innerHTML = data.html + @parentEl.find(tabSelector).html(data.html) @loaded[action] = true loadActivities: (source) -> return if @loaded['activity'] is true - $calendarWrap = $('.user-calendar') + $calendarWrap = @parentEl.find('.user-calendar') $calendarWrap.load($calendarWrap.data('href')) new Activities() @loaded['activity'] = true toggleLoading: (status) -> - $('.loading-status .loading').toggle(status) + @parentEl.find('.loading-status .loading').toggle(status) setCurrentAction: (action) -> # Remove possible actions from URL diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index 1e193ddb211..bca816f22cb 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -8,106 +8,107 @@ = render 'shared/show_aside' -.cover-block - .cover-controls - - if @user == current_user - = link_to profile_path, class: 'btn btn-gray' do - = icon('pencil') - - elsif current_user - %span.report-abuse - - if @user.abuse_report - %button.btn.btn-danger{ title: 'Already reported for abuse', - data: { toggle: 'tooltip', placement: 'left', container: 'body' }} - = icon('exclamation-circle') - - else - = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray', - title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do - = icon('exclamation-circle') - - if current_user -   - = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do - = icon('rss') +.user-profile + .cover-block + .cover-controls + - if @user == current_user + = link_to profile_path, class: 'btn btn-gray' do + = icon('pencil') + - elsif current_user + %span.report-abuse + - if @user.abuse_report + %button.btn.btn-danger{ title: 'Already reported for abuse', + data: { toggle: 'tooltip', placement: 'left', container: 'body' }} + = icon('exclamation-circle') + - else + = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray', + title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do + = icon('exclamation-circle') + - if current_user +   + = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do + = icon('rss') - .avatar-holder - = link_to avatar_icon(@user, 400), target: '_blank' do - = image_tag avatar_icon(@user, 90), class: "avatar s90", alt: '' - .cover-title - = @user.name + .avatar-holder + = link_to avatar_icon(@user, 400), target: '_blank' do + = image_tag avatar_icon(@user, 90), class: "avatar s90", alt: '' + .cover-title + = @user.name - .cover-desc - %span.middle-dot-divider - @#{@user.username} - %span.middle-dot-divider - Member since #{@user.created_at.to_s(:medium)} - - - if @user.bio.present? .cover-desc - %p.profile-user-bio - = @user.bio + %span.middle-dot-divider + @#{@user.username} + %span.middle-dot-divider + Member since #{@user.created_at.to_s(:medium)} - .cover-desc - - unless @user.public_email.blank? - .profile-link-holder.middle-dot-divider - = link_to @user.public_email, "mailto:#{@user.public_email}" - - unless @user.skype.blank? - .profile-link-holder.middle-dot-divider - = link_to "skype:#{@user.skype}", title: "Skype" do - = icon('skype') - - unless @user.linkedin.blank? - .profile-link-holder.middle-dot-divider - = link_to "https://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do - = icon('linkedin-square') - - unless @user.twitter.blank? - .profile-link-holder.middle-dot-divider - = link_to "https://twitter.com/#{@user.twitter}", title: "Twitter" do - = icon('twitter-square') - - unless @user.website_url.blank? - .profile-link-holder.middle-dot-divider - = link_to @user.short_website_url, @user.full_website_url - - unless @user.location.blank? - .profile-link-holder.middle-dot-divider - = icon('map-marker') - = @user.location + - if @user.bio.present? + .cover-desc + %p.profile-user-bio + = @user.bio - %ul.nav-links.center - %li.activity-tab - = link_to user_calendar_activities_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do - Activity - %li.groups-tab - = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do - Groups - %li.contributed-tab - = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do - Contributed projects - %li.projects-tab - = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do - Personal projects + .cover-desc + - unless @user.public_email.blank? + .profile-link-holder.middle-dot-divider + = link_to @user.public_email, "mailto:#{@user.public_email}" + - unless @user.skype.blank? + .profile-link-holder.middle-dot-divider + = link_to "skype:#{@user.skype}", title: "Skype" do + = icon('skype') + - unless @user.linkedin.blank? + .profile-link-holder.middle-dot-divider + = link_to "https://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do + = icon('linkedin-square') + - unless @user.twitter.blank? + .profile-link-holder.middle-dot-divider + = link_to "https://twitter.com/#{@user.twitter}", title: "Twitter" do + = icon('twitter-square') + - unless @user.website_url.blank? + .profile-link-holder.middle-dot-divider + = link_to @user.short_website_url, @user.full_website_url + - unless @user.location.blank? + .profile-link-holder.middle-dot-divider + = icon('map-marker') + = @user.location -%div{ class: container_class } - .tab-content - #activity.tab-pane - .gray-content-block.white.second-block - %div{ class: container_class } - .user-calendar{data: {href: user_calendar_path}} - %h4.center.light - %i.fa.fa-spinner.fa-spin - .user-calendar-activities + %ul.nav-links.center.user-profile-nav + %li.activity-tab + = link_to user_calendar_activities_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do + Activity + %li.groups-tab + = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do + Groups + %li.contributed-tab + = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do + Contributed projects + %li.projects-tab + = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do + Personal projects - .content_list{ data: {href: user_path} } + %div{ class: container_class } + .tab-content + #activity.tab-pane + .gray-content-block.white.second-block + %div{ class: container_class } + .user-calendar{data: {href: user_calendar_path}} + %h4.center.light + %i.fa.fa-spinner.fa-spin + .user-calendar-activities + + .content_list{ data: {href: user_path} } + = spinner + + #groups.tab-pane + - # This tab is always loaded via AJAX + + #contributed.contributed-projects.tab-pane + - # This tab is always loaded via AJAX + + #projects.tab-pane + - # This tab is always loaded via AJAX + + .loading-status = spinner - #groups.tab-pane - - # This tab is always loaded via AJAX - - #contributed.contributed-projects.tab-pane - - # This tab is always loaded via AJAX - - #projects.tab-pane - - # This tab is always loaded via AJAX - - .loading-status - = spinner - :javascript var userProfile;