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

Polish tag UI (#20038)

Browse source 
* feat: update the buttons

* chore: update the buttons to use c-btn

* feat: update the following tag to be crayons-btn crayons-btn--outlined

* feat: update the gap between the buttons

* feat: style for moile

* Empty commit
This commit is contained in:
Ridhwana 2023-09-07 10:32:53 +02:00 • committed by GitHub
parent 0f4e0300e0
commit 5951beebcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/initializers/initScrolling.js
View file

@ -145,14 +145,14 @@ function buildTagsHTML(tag) {
if (tag.explicit_points < 0) {
unhideButtonContainer = `<div>
<button class="crayons-btn crayons-btn--danger unhide-button">Unhide</button>
<button class="c-btn c-btn--primary c-btn--destructive unhide-button">Unhide</button>
</div>`;
}
if (tag.explicit_points >= 0) {
followingButtonContainer = `<div class="flex justify-between">
<div>
<button class="c-btn c-btn--secondary follow-button" aria-label="Following tag:${tag.name}">Following</button>
<button class="crayons-btn crayons-btn--outlined follow-button" aria-label="Following tag:${tag.name}">Following</button>
</div>
<div class="dropdown-trigger-container relative">
<button type="button" aria-label="Unhide tag: ${tag.name}" class="c-btn c-btn--icon-alone dropdown-trigger" id="options-dropdown-trigger-${tag.tag_id}" aria-haspopup="true" aria-expanded="false" aria-controls="options-dropdown">

20
app/assets/stylesheets/components/tags.scss
View file

@ -54,3 +54,23 @@
height: 48px;
}
}
@media (max-width: $breakpoint-s) {
.tags-index {
.crayons-page-header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.tags-interaction-container {
justify-content: space-between;
width: 100%;
grid-gap: 4px;
}
.tags-interaction-container__buttons > :first-child {
padding-left: 0;
}
}
}

12
app/javascript/tags/Tag.jsx
View file

@ -62,8 +62,10 @@ export const Tag = ({ id, name, isFollowing, isHidden }) => {
followingButton = (
<button
onClick={toggleFollowButton}
className={`crayons-btn ${
following ? 'crayons-btn--outlined' : 'crayons-btn--primary'
className={`${
following
? 'crayons-btn crayons-btn--outlined'
: 'c-btn c-btn--primary'
}`}
aria-pressed={following}
aria-label={`${followButtonLabel} tag: ${name}`}
@ -74,13 +76,11 @@ export const Tag = ({ id, name, isFollowing, isHidden }) => {
}
return (
<div>
<div className="flex gap-2">
{followingButton}
<button
onClick={toggleHideButton}
className={`crayons-btn ${
hidden ? 'crayons-btn--danger' : 'crayons-btn--ghost'
}`}
className={`c-btn ${hidden ? 'c-btn--primary c-btn--destructive' : ''}`}
aria-label={`${hideButtonLabel} tag: ${name}`}
>
{hideButtonLabel}

5
app/views/dashboards/_tags.html.erb
View file

@ -16,11 +16,10 @@
<% end %>
<div class="dashboard__tag__buttons-container">
<%# we could use positive explicit points %>
<% if page === "following" %>
<div class="flex justify-between">
<div>
<button class="c-btn c-btn--secondary follow-button" aria-label="Following tag: <%= tag.name %>"><%= t("views.dashboard.tags.following_button") %></button>
<button class="crayons-btn crayons-btn--outlined follow-button" aria-label="Following tag: <%= tag.name %>"><%= t("views.dashboard.tags.following_button") %></button>
</div>
<div class="dropdown-trigger-container relative">
<button type="button" class="c-btn c-btn--icon-alone dropdown-trigger" id="options-dropdown-trigger-<%= tag.id %>" aria-haspopup="true" aria-expanded="false" aria-controls="options-dropdown">
@ -41,7 +40,7 @@
<% if page === "hidden" %>
<div>
<button class="crayons-btn crayons-btn--danger unhide-button" aria-label="Unhide tag: <%= tag.name %>"><%= t("views.dashboard.tags.unhide_button") %></button>
<button class="c-btn c-btn--primary c-btn--destructive unhide-button" aria-label="Unhide tag: <%= tag.name %>"><%= t("views.dashboard.tags.unhide_button") %></button>
</div>
<% end %>
</div>

28
app/views/tags/index.html.erb
View file

@ -28,18 +28,22 @@
<%= t("views.tags.heading.default") %>
<% end %>
</h1>
<form accept-charset="UTF-8" method="get" action="<%= tags_path %>" role="search">
<div class="crayons-fields crayons-fields--horizontal">
<div class="tags-interaction-container flex flex-col m:flex-row">
<div class="tags-interaction-container__buttons">
<%= link_to t("views.tags.following_tags"), dashboard_following_tags_path, class: "crayons-btn crayons-btn--ghost" %>
<%= link_to t("views.tags.hidden_tags"), dashboard_hidden_tags_path, class: "crayons-btn crayons-btn--ghost" %>
<div class="crayons-field flex-1 relative">
<input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" aria-label="<%= t("views.tags.search.aria_labels.search_input") %>" name="q" placeholder="<%= t("views.tags.search.placeholder") %>" autocomplete="off" />
<button type="submit" aria-label="<%= t("views.tags.search.aria_labels.submit") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
<%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
</button>
</div>
</div>
</form>
<form accept-charset="UTF-8" method="get" action="<%= tags_path %>" role="search">
<div class="crayons-fields crayons-fields--horizontal">
<div class="crayons-field flex-1 relative">
<input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" aria-label="<%= t("views.tags.search.aria_labels.search_input") %>" name="q" placeholder="<%= t("views.tags.search.placeholder") %>" autocomplete="off" />
<button type="submit" aria-label="<%= t("views.tags.search.aria_labels.submit") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
<%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
</button>
</div>
</div>
</form>
</div>
</header>
<% if @tags.empty? %>
<div class="articles-list crayons-layout__content" id="articles-list" data-follow-button-container="true">
@ -62,14 +66,14 @@
<% end %>
</div>
<div id="tag-buttons-<%= tag.id %>" class="mt-auto flex items-end justify-between">
<div>
<div class="flex gap-2">
<button
class="crayons-btn crayons-btn--primary follow-action-button"
class="c-btn c-btn--primary follow-action-button"
aria-label="<%= t("views.tags.aria_labels.follow", tag_name: tag.name) %>">
<%= t("views.tags.follow") %>
</button>
<button
class="crayons-btn crayons-btn--ghost hide-action-button"
class="c-btn hide-action-button"
aria-label="<%= t("views.tags.aria_labels.hide", tag_name: tag.name) %>">
<%= t("views.tags.hide") %>
</button>