maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make Follow Buttons in User, Org and Tag Embeds "secondary" (#17602)

Browse source 
* complete implementation

* Make PR review changes
This commit is contained in:
Arit Amana 2022-05-10 16:37:39 -04:00 • committed by GitHub
parent d499a3727c
commit 41acd673d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 9 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/assets/stylesheets/ltags/TagTag.scss
View file

@ -28,22 +28,11 @@
margin: 0;
padding: 0;
font-weight: 500;
display: flex;
align-items: center;
.follow-action-button {
visibility: hidden;
min-height: 25px;
display: inline-block;
color: white;
background: $green;
border-radius: 5px;
font-size: 0.6em;
vertical-align: 0.1em;
padding: 2px 20px;
border: 1px solid $green;
cursor: pointer;
&.following-butt {
background: $green;
color: white;
}
margin: 0.2em 0.5em;
&.showing {
visibility: visible;
}

16
app/assets/stylesheets/ltags/UserTag.scss
View file

@ -49,23 +49,11 @@
margin: 0;
padding: 0;
font-weight: 500;
display: flex;
align-items: center;
.follow-action-button {
visibility: hidden;
min-height: 25px;
display: inline-block;
color: white;
background: $green;
border-radius: 5px;
font-size: 0.6em;
vertical-align: 0.3em;
padding: 2px 20px;
border: 1px solid $green;
margin: 0.2em 0.5em;
cursor: pointer;
&.following-butt {
background: $green;
color: white;
}
&.showing {
visibility: visible;
}

2
app/helpers/application_helper.rb
View file

@ -198,7 +198,7 @@ module ApplicationHelper
data: {
info: DataInfo.to_json(object: followable, className: followable_type, style: style)
},
class: "crayons-btn follow-action-button whitespace-nowrap #{classes} #{user_follow}",
class: "c-btn follow-action-button whitespace-nowrap #{classes} #{user_follow}",
aria: {
label: I18n.t("helpers.application_helper.follow.aria_label.#{followable_type}",
name: followable_name,

9
app/views/organizations/_liquid.html.erb
View file

@ -1,11 +1,4 @@
<div class="<%= "ltag__user ltag__user__id__#{organization.id}" %>" style="<%= "border-color:#{organization.darker_color};box-shadow: 3px 3px 0px #{organization.darker_color};" %>">
<style>
.ltag__user__id__<%= organization.id %> .follow-action-button {
background-color: <%= organization_colors[:bg] %> !important;
color: <%= organization_colors[:text] %> !important;
border-color: <%= organization_colors[:bg].casecmp("#ffffff").zero? ? organization_colors[:text] : organization_colors[:bg] %> !important;
}
</style>
<a href="<%= organization.path %>" class="ltag__user__link profile-image-link">
<div class="ltag__user__pic">
<img src="<%= organization.profile_image_url_for(length: 150) %>" alt="<%= "#{organization.slug} image" %>" />
@ -14,7 +7,7 @@
<div class="ltag__user__content">
<h2>
<a href="/<%= organization.slug %>" class="ltag__user__link"><%= organization.name %></a>
<%= follow_button(organization) %>
<%= follow_button(organization, "full", "c-btn--secondary fs-base") %>
</h2>
<div class="ltag__user__summary">
<a href="/<%= organization.slug %>" class="ltag__user__link">

9
app/views/tags/_liquid.html.erb
View file

@ -1,13 +1,6 @@
<div class="ltag__tag ltag__tag__id__<%= tag.id %>" style="border-color:<%= dark_color %>;box-shadow: 3px 3px 0px <%= dark_color %>;">
<style>
.ltag__tag__id__<%= tag.id %> .follow-action-button{
background-color: <%= tag.bg_color_hex %> !important;
color: <%= tag.text_color_hex %> !important;
border-color: <%= tag.bg_color_hex.to_s.casecmp("#ffffff").zero? ? tag.text_color_hex : tag.bg_color_hex %> !important;
}
</style>
<div class="ltag__tag__content">
<h2>#<a href="<%= URL.tag tag %>" class="ltag__tag__link"><%= tag.name %></a> <%= follow_btn %></h2>
<h2>#<a href="<%= URL.tag tag %>" class="ltag__tag__link"><%= tag.name %></a> <%= follow_button(tag, "full", "c-btn--secondary fs-base") %></h2>
<div class="ltag__tag__summary">
<%= tag.short_summary %>
</div>

9
app/views/users/_liquid.html.erb
View file

@ -1,11 +1,4 @@
<div class="<%= "ltag__user ltag__user__id__#{user.id}" %>" style="<%= "border-color:#{user.darker_color};box-shadow: 3px 3px 0px #{user.darker_color};" %>">
<style>
.ltag__user__id__<%= user.id %> .follow-action-button {
background-color: <%= user_colors[:bg] %> !important;
color: <%= user_colors[:text] %> !important;
border-color: <%= user_colors[:bg].casecmp("#ffffff").zero? ? user_colors[:text] : user_colors[:bg] %> !important;
}
</style>
<% if user_path.present? %>
<a href="<%= user_path %>" class="ltag__user__link profile-image-link">
<div class="ltag__user__pic">
@ -18,7 +11,7 @@
</div>
<% end %>
<div class="ltag__user__content">
<h2><%= link_to_if user_path.present?, user.name, user_path, class: "ltag__user__link" %><%= follow_button(user) %></h2>
<h2><%= link_to_if user_path.present?, user.name, user_path, class: "ltag__user__link" %><%= follow_button(user, "full", "c-btn--secondary fs-base") %></h2>
<div class="ltag__user__summary">
<%= link_to_if user_path.present?, user.tag_line, user_path, class: "ltag__user__link" %>
</div>