docbrown/app/views/articles/_actions.html.erb
Nick Taylor a71d78df6e
[deploy] Add comment subscription component to article page (#7205)
* wip

* Right aligned the comment subscription panel.

* Cleaned up the comment area on the article page so it uses crayon margin classes.

* Updated tests

* Removed old UI for comment subscriptions.

* Made Discussion text bigger and bolder.

* Fixed some layout issues as per PR comments.

* Fixed some layout issues as per PR comments.

* Updated Storybook stories, tests and snapshots

* wip

* Everything works now, just need to integrate snackbar.

* Removed setTimeout I was debugging with.

* Using the new utilities/http/request utility now.

* Added the <SnackbarPoller />

* Now when unsubscribed, the subscription type resets to all comments.

* Removed overflow hidden from .home CSS class so comment subscription component displays properly.

* Now unsuccessful subscribes/unsubscribes error properly.

* Changed button text from Done to Subscribe

* Merged the <SnackbarPoller /> component into the <Snackbar /> component.

* Fixed a propType issue.

* Fixed a test.

* Removed snackbar tests for now. Need to figure out polling in tests.

* Now comment subscription component is only loaded for logged on users.

* Added a comment.

* Updated some storybook stories.

* Fixed a small formatting issue.

* Reduced snackbar item lifespans to 3 seconds.

* Extracted <CogIcon /> to it's own file because other features are going to need it.

* Added some Storybook stories and tests for the <CogIcon /> component.

* Revert "Extracted <CogIcon /> to it's own file because other features are going to need it."

This reverts commit b30406a50e491c53c3dce5be03bcdf8112b043df.

* Put back <CogIcon /> component.

* Added some error handling if the component doesn't load.

* Moving some things around.

* Rename the article pack file.

* Changed wording from "article" to "post".

* Fixed false negative CSS issue. It was a dangling div tag.

* Add the option to add an optional close button to snackbar items.

* Fixed z-index of subscription type options panel so it is always visible on mobile.

* Reworked the comment subsciption utilities a bit.

* Added test for comment subscription utilities.

* Fixed a broken test from a refactor.

* Added more tests for comment subscription utiltities.

* Fixed comments footer bottom padding.

* Fixed issue with stale find in comment subscription test.

* Update app/javascript/packs/articlePage.jsx

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>

* Update app/assets/stylesheets/article-show.scss

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>

* Changed close button wording to Dismiss.

* Fixed padding to use utility variable instead.

* Added missing import for SASS file.

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
2020-05-05 12:50:30 -04:00

110 lines
4.8 KiB
Text

<div class="article-actions" id="article-reaction-actions">
<% if @article.published? %>
<%= render partial: "articles/reaction_button",
locals: {
category: :like,
description: "heart",
image_path: "emoji/emoji-one-heart.png"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :unicorn,
description: "unicorn",
image_path: "emoji/emoji-one-unicorn.png"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :readinglist,
description: "reading list",
image_path: "emoji/emoji-one-bookmark.png"
} %>
<% display_name = @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %>
<a
class="article-actions-tweet-button"
rel="noopener"
target="_blank"
href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= display_name %> %23DEVcommunity <%= article_url(@article) %>'>
<img src="<%= asset_path("twitter.svg") %>" alt="twitter logo">
</a>
<% end %>
<a class="article-actions-comments-count" href="#comments" id="jump-to-comments">
DISCUSS
<% if @article.comments_count.positive? %>
<span class="article-actions-comments-count-number">(<%= @article.comments_count %>)</span>
<% else %>
<% end %>
</a>
<div class="article-share-action-block">
<button id="article-show-more-button" class="dropbtn" aria-label="Toggle dropdown menu">
<img src="<%= asset_path("three-dots.svg") %>" class="dropdown-icon" alt="dropdown menu icon">
</button>
<div class="dropdown-content">
<div>
<div class="dropdown-link-row">
<clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer">
<input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" readonly />
<img id="article-copy-icon" src="<%= asset_path("content-copy.svg") %>" alt="Copy to Clipboard" />
<span id="article-copy-link-announcer" role="alert" hidden>Copied to Clipboard</span>
</clipboard-copy>
</div>
<web-share-wrapper shareurl="<%= article_url(@article) %>" sharetext="<%= @article.title %>" template="web-share-button">
<div class="dropdown-link-row">
<a
target="_blank"
rel="noopener"
href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> %23DEVcommunity <%= article_url(@article) %>'>
Share to Twitter
</a>
</div>
<div class="dropdown-link-row">
<a
target="_blank"
rel="noopener"
href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
Share to LinkedIn
</a>
</div>
<div class="dropdown-link-row">
<a
target="_blank"
rel="noopener"
href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
Share to Reddit
</a>
</div>
<div class="dropdown-link-row">
<a
target="_blank"
rel="noopener"
href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
Share to Hacker News
</a>
</div>
<div class="dropdown-link-row">
<a
target="_blank"
rel="noopener"
href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
Share to Facebook
</a>
</div>
</web-share-wrapper>
<template id="web-share-button">
<div class="dropdown-link-row"><a href="#">Share Post</a></div>
</template>
<div class="dropdown-link-row"><a href="/report-abuse">Report Abuse</a></div>
</div>
</div>
</div>
</div>
<% if @variant_number.to_i == 0 && !user_signed_in? && @article.body_markdown.size > 900 %>
<% cache("below-article-html-variant-#{rand(20)}", expires_in: 8.hours) do %>
<% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array, "article_show_below_article_cta") %>
<% if @html_variant %>
<div class="html-variant-wrapper" id="html-variant-article-show-below-article" data-variant-id="<%= @html_variant.id %>">
<%= @html_variant.html.html_safe %>
</div>
<% end %>
<% end %>
<% end %>