Commit e4e86331 authored by Peter Hegman's avatar Peter Hegman Committed by Mayra Cabrera

Refactor Bootstrap utility classes on profile to GitLab UI

parent 3adc1ce0
......@@ -154,12 +154,6 @@
}
}
.cover-desc {
&.username:last-child {
padding-bottom: $gl-padding;
}
}
.cover-controls {
@include media-breakpoint-up(sm) {
position: absolute;
......
......@@ -70,14 +70,6 @@
}
}
.profile-link-holder {
display: inline;
a:not(.text-link) {
text-decoration: none;
}
}
// Middle dot divider between each element in a list of items.
.middle-dot-divider {
@include middle-dot-divider;
......
......@@ -38,6 +38,21 @@ module ProfilesHelper
status&.availability == availability_values[:busy]
end
def middle_dot_divider_classes(stacking, breakpoint)
['gl-mb-3'].tap do |classes|
if stacking
classes.concat(%w(middle-dot-divider-sm gl-display-block gl-sm-display-inline-block))
else
classes << 'gl-display-inline-block'
classes << if breakpoint.nil?
'middle-dot-divider'
else
"middle-dot-divider-#{breakpoint}"
end
end
end
end
# Overridden in EE::ProfilesHelper#ssh_key_expiration_tooltip
def ssh_key_expiration_tooltip(key)
return key.errors.full_messages.join(', ') if key.errors.full_messages.any?
......
- stacking = local_assigns.delete(:stacking)
- breakpoint = local_assigns.delete(:breakpoint)
%div{ class: middle_dot_divider_classes(stacking, breakpoint), **local_assigns }
= yield
%p.mb-1.mb-sm-2.mt-2.mt-sm-3
%span.middle-dot-divider
.gl-text-gray-900.gl-mt-4
= render 'middle_dot_divider' do
@#{@user.username}
- if can?(current_user, :read_user_profile, @user)
%span.middle-dot-divider
= render 'middle_dot_divider' do
= s_('Member since %{date}') % { date: @user.created_at.to_date.to_s(:long) }
......@@ -71,54 +71,54 @@
= emoji_icon(@user.status.emoji, class: 'gl-mr-2')
= markdown_field(@user.status, :message)
= render "users/profile_basic_info"
.cover-desc.cgray.mb-1.mb-sm-2
.gl-text-gray-900.mb-1.mb-sm-2
- unless @user.location.blank?
.profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mb-1.mb-sm-0{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
= render 'middle_dot_divider', stacking: true, itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' do
= sprite_icon('location', css_class: 'fgray')
%span{ itemprop: 'addressLocality' }
= @user.location
.profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mb-1.mb-sm-0
= render 'middle_dot_divider', stacking: true do
= sprite_icon('clock', css_class: 'fgray')
%span
= local_time(@user.timezone)
- unless work_information(@user).blank?
.profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline
= render 'middle_dot_divider', stacking: true do
= sprite_icon('work', css_class: 'fgray')
%span
= work_information(@user, with_schema_markup: true)
.cover-desc.cgray.mb-1.mb-sm-2
.gl-text-gray-900
- unless @user.skype.blank?
.profile-link-holder.middle-dot-divider
= link_to "skype:#{@user.skype}", title: "Skype" do
= render 'middle_dot_divider' do
= link_to "skype:#{@user.skype}", class: 'gl-hover-text-decoration-none', title: "Skype" do
= sprite_icon('skype')
- unless @user.linkedin.blank?
.profile-link-holder.middle-dot-divider
= link_to linkedin_url(@user), title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
= render 'middle_dot_divider' do
= link_to linkedin_url(@user), class: 'gl-hover-text-decoration-none', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow' do
= sprite_icon('linkedin')
- unless @user.twitter.blank?
.profile-link-holder.middle-dot-divider-sm
= link_to twitter_url(@user), title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
= render 'middle_dot_divider', breakpoint: 'sm' do
= link_to twitter_url(@user), class: 'gl-hover-text-decoration-none', title: "Twitter", target: '_blank', rel: 'noopener noreferrer nofollow' do
= sprite_icon('twitter')
- unless @user.website_url.blank?
.profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mt-1.mt-sm-0
= render 'middle_dot_divider', stacking: true do
- if Feature.enabled?(:security_auto_fix) && @user.bot?
= sprite_icon('question', css_class: 'gl-text-blue-600')
= link_to @user.short_website_url, @user.full_website_url, class: 'text-link', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
= link_to @user.short_website_url, @user.full_website_url, target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
- unless @user.public_email.blank?
.profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mt-1.mt-sm-0
= link_to @user.public_email, "mailto:#{@user.public_email}", class: 'text-link', itemprop: 'email'
.cover-desc.gl-text-gray-900.gl-mb-2.mb-sm-2
= render 'middle_dot_divider', stacking: true do
= link_to @user.public_email, "mailto:#{@user.public_email}", itemprop: 'email'
.gl-text-gray-900
= sprite_icon('users', css_class: 'gl-vertical-align-middle gl-text-gray-500')
.profile-link-holder.middle-dot-divider
= link_to user_followers_path, class: 'text-link' do
= render 'middle_dot_divider' do
= link_to user_followers_path do
- count = @user.followers.count
= n_('1 follower', '%{count} followers', count) % { count: count }
.profile-link-holder.middle-dot-divider
= link_to user_following_path, class: 'text-link', data: { qa_selector: 'following_link' } do
= render 'middle_dot_divider' do
= link_to user_following_path, data: { qa_selector: 'following_link' } do
= @user.followees.count
= _('following')
- if @user.bio.present?
.cover-desc.cgray
.gl-text-gray-900
.profile-user-bio
= markdown(@user.bio_html)
......
......@@ -186,7 +186,17 @@ RSpec.describe 'User page' do
end
context 'with blocked profile' do
let_it_be(:user) { create(:user, state: :blocked) }
let_it_be(:user) do
create(
:user,
state: :blocked,
organization: 'GitLab - work info test',
job_title: 'Frontend Engineer',
pronunciation: 'pruh-nuhn-see-ay-shn'
)
end
let_it_be(:status) { create(:user_status, user: user, message: "Working hard!") }
it 'shows no tab' do
subject
......@@ -211,7 +221,10 @@ RSpec.describe 'User page' do
subject
expect(page).not_to have_css(".profile-user-bio")
expect(page).not_to have_css(".profile-link-holder")
expect(page).not_to have_content('GitLab - work info test')
expect(page).not_to have_content('Frontend Engineer')
expect(page).not_to have_content('Working hard!')
expect(page).not_to have_content("Pronounced as: pruh-nuhn-see-ay-shn")
end
it 'shows username' do
......@@ -222,7 +235,17 @@ RSpec.describe 'User page' do
end
context 'with unconfirmed user' do
let_it_be(:user) { create(:user, :unconfirmed) }
let_it_be(:user) do
create(
:user,
:unconfirmed,
organization: 'GitLab - work info test',
job_title: 'Frontend Engineer',
pronunciation: 'pruh-nuhn-see-ay-shn'
)
end
let_it_be(:status) { create(:user_status, user: user, message: "Working hard!") }
shared_examples 'unconfirmed user profile' do
before do
......@@ -240,7 +263,10 @@ RSpec.describe 'User page' do
it 'shows no additional fields' do
expect(page).not_to have_css(".profile-user-bio")
expect(page).not_to have_css(".profile-link-holder")
expect(page).not_to have_content('GitLab - work info test')
expect(page).not_to have_content('Frontend Engineer')
expect(page).not_to have_content('Working hard!')
expect(page).not_to have_content("Pronounced as: pruh-nuhn-see-ay-shn")
end
it 'shows private profile message' do
......
......@@ -152,6 +152,22 @@ RSpec.describe ProfilesHelper do
end
end
describe '#middle_dot_divider_classes' do
using RSpec::Parameterized::TableSyntax
where(:stacking, :breakpoint, :expected) do
nil | nil | %w(gl-mb-3 gl-display-inline-block middle-dot-divider)
true | nil | %w(gl-mb-3 middle-dot-divider-sm gl-display-block gl-sm-display-inline-block)
nil | :sm | %w(gl-mb-3 gl-display-inline-block middle-dot-divider-sm)
end
with_them do
it 'returns CSS classes needed to render the middle dot divider' do
expect(helper.middle_dot_divider_classes(stacking, breakpoint)).to eq expected
end
end
end
def stub_cas_omniauth_provider
provider = OpenStruct.new(
'name' => 'cas3',
......
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