Commit graph

25 commits

Author SHA1 Message Date
Daniel Uber
c5a90173bd
handle getElementById failures in articlePage (#16743)
* when there is no div for it, don't render CommentSubscription

* Retrigger CI

* Retrigger CI

* don't write an error to the comment div if its gone

This fixes an issue seen in tests, where the page transitioned while
we were running the articlePage async handler, so the article-body
element was gone (can't access dataset of null), and the error handler
catch block tried to access the innerHTML of another getElementById.

* Use existing found element `root` when setting the error message

No need to find a new comment-subscription div to write the error to,
we already named the one we're interested in at the beginning of the function
2022-03-02 09:56:53 -06:00
Suzanne Aitchison
3982b389f1
Rework user subscription liquid tag to avoid errors (#16460)
* move script to packs, strip ids

* make sure userdata is available before determining ui

* stop working around old html, fix duplicate ID errors

* skip login modal

* remove DEV hard coding

* replace system spec with cypress spec

* update base_data to include apple auth info, add to cypress tests

* add initial version of DUS to resave HTML

* remove data update script
2022-02-15 09:14:03 +00:00
Suzanne Aitchison
1b98b03bde
Allow users to pause gifs in a post (#16314)
* working POC

* refactors and styling

* add some comments

* css tweaks to keep sizes in step

* add cypress test

* comment added to css
2022-02-02 13:45:55 +00:00
Papu Kumar(ReX)
6da90073f6
Fix Prop Types Error #14837 (#14889)
* Fix Prop Types Error #14837

Fixed prop types errors for Button, ButtonGroup, Modal and articlePage

* #added some checks into default children props

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>
2021-10-05 10:58:48 +02:00
ludwiczakpawel
096cf18b10
Article layout (#14753)
* style updates

* author and tools

* overflow hidden for avatars because geeeez

* font smoothing

* reverting little change

* specs

* preview

* css fix

* avatar fix'

* No longer eager load user profile when showing articles.

articles show view no longer needs user profile, as it no longer
renders the user profile preview.

* tags

* tags

* tags reverts

* typo

* dropping initializer for user cards previews on article page

* spec

* remove spec

* revert

* Update app/decorators/article_decorator.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update spec/requests/stories_show_spec.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* yoloing outline change on buttons because i couldn't see any visual difference

Co-authored-by: Dan Uber <dan@forem.com>
Co-authored-by: Michael Kohl <me@citizen428.net>
2021-09-30 19:08:06 +02:00
Andy Zhao
e1606bcb0c
Move pin post to admin ✂️ (#14739)
* Update pin post button to be an admin articles button instead

* Rename file since we don't pin posts on show page

* Don't use instant click for admin link

* Update tests to visit the article from the start
2021-09-17 14:25:39 -04:00
Fernando Valverde
5d4475549b
Remove ahoy from Share Post dropdown (#14537) 2021-08-19 08:37:58 -06:00
Suzanne Aitchison
5efd72040b
change preview card dropdown position depending on viewport (#14473) 2021-08-11 18:40:11 +01:00
Suzanne Aitchison
1adf66260d
Delay the hover appearance of preview card (#14222)
* delay the hover appearance of preview card

* don't run animation if the dropdown is already held open by click

* wake up travis

* Trigger Travis CI

* remove unncessary document queries
2021-07-21 11:15:10 +01:00
zeotuan
9dcb332f4a
Fix Bugs in the "Copy article URL to clipboard" feature #14242 (#14243)
* change readonly input to p tag

* add pointer cursor and focus on copy post url option

* add Enter keypress eventListener to copy post url option

* add test for enter press event, refractor some test to click on copy post url option instead of just the image

* make copy post url font bold

* add scss class sidebar for dropdown && fix sidebar dropdown reaching under topheader in large screen resolution

* resolve conflict with main

* Update _actions.html.erb

* changin markup to improve accessibility

* make variable name appropriate, switch cypress to imitate user interaction

* remove dump file, fix test to use alias
2021-07-20 15:09:24 +01:00
Suzanne Aitchison
1a417174c3
Profile Preview Cards (RFC #222): Article page author byline (#13990)
* move current profile card content to shared view, create profile preview card shared view

* article page: show link in small screens, button with preview card in larger

* initialize the hover and click functionality

* tweak class names

* make sure modals sit at highest elevation level

* add cypress tests

* add a test to make sure mobile view unaffected

* make sure follow buttons initialized in test before asserting on them
2021-06-21 08:38:47 +01:00
Fernando Valverde
c347efd11b
Use navigator.share on mobile devices (#13809)
* First commit

* Standardize Runtime Filters to use -only suffix

* Always present native share option if available

* Reorder native share option

* Remove unused Desktop-only CSS rule

* Adding ahoy (first commit)

* Add Ahoy stats

* Trigger Travis

* Add optional chaining

* Move ahoy stat collection to different component

* Coverage threshold update

* Add missing Desktop-only CSS rule that was missing

* Add assert in Cypress test

* Apply review feedback

* Isolate navigator.share related assertions

* Fix tests

* Test

* Update app/javascript/packs/articlePage.jsx

Co-authored-by: Nick Taylor <nick@forem.com>

* Isolate tests in separate spec

* Fix tests (fingers crossed)

* Remove changes to unchanged spec

Co-authored-by: Nick Taylor <nick@forem.com>
2021-06-15 06:39:33 -06:00
Suzanne Aitchison
af517bc5aa
Optimise dropdowns for accessibility: Preact component usages (#13948)
* use the dropdown initializer in post editor options

* use dropdown initializer in comment subs dropdown

* use Dropdown component in listings

* show the dropdown button when it's focused

* update storybook notes and components

* add cypress tests for post options dropdown

* add comment subscription tests

* make sure page is properly initialized before setting button functionality

* add jsdoc comments, props types, rely on optional chaining

* Update app/javascript/crayons/Dropdown/__stories__/dropdowns.md

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/javascript/crayons/Dropdown/__stories__/dropdowns.md

Co-authored-by: rhymes <github@rhymes.dev>

Co-authored-by: rhymes <github@rhymes.dev>
2021-06-15 12:06:27 +01:00
Julien Maury
a2677cc0a9
Remove defer attributes from inline scripts - gist embeds (#13407)
* replace inline attribute defer with external js - show.html.erb

* fix typo in filename

* disable no-undef and bail if not defined

* put js on subfolder utilities

* refactor jsx instead of loading chunk with defer

* fix typo in desc

* better name for global gist helper

* use InstantClick

* working script on preview AND single view, not dynamic import, though

* embed only if gists

* combine all approaches to make dynamic import work

* make gist embeds work on submit comment form

* make gist embeds work on preview comment

* refactor - preview comments and submit

* add pack editComment + helper embedGistsInComments

* comment gist helper

* delete useless file utility

* use new syntax for events

* put code in method embedGistsInComments

* delete older pack gist

* handle edge case 'view full discussion'

* resolve conflict with package ibm-openapi-validator

* resolve conflict with package husky

* empty commit to test random error travis

* better name for class dismiss

* handle future events submit

* delete test code on click toggle form

* delete unused file

* rename pack as js file, not jsx

* Added POC using MutationObserver.

* missing case: notification page

* use custom pack notification page

* add e2e test for comment with embed gist

* add e2e test for preview post with embed gist

* add an extra step in tests to check gist is present

Co-authored-by: Nick Taylor <nick@dev.to>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
2021-06-11 08:22:50 +01:00
rhymes
99ddd31058
Pin posts to feed (#13807)
* Add SiteConfig.feed_pinned_article and validation

* Display pinned article at the top of feed

* Add (basic) functionality to pin/unpin post

* Admins can pin other users posts as well

* Hide the button if looking at the non pinned post

* Add pinned/unpinned snackbar message

* Rename SiteConfig usage to Settings::General

* Add pinned article to the Admin articles index

* Show the pin post button when there's no pinned article

* Move pinning to a separate controller

* Fix SiteConfig reference

* Hide PinController actions to unauthorized users

* PinnedArticlesController#show action and refactor some of the code

* Add Modal interaction

* Fix modal-pinned checkbox interaction

* Fixed pin/unpin post

* Add ArticleDecorator#pinned? specs

* Add PinnedArticlePolicy and PinnedArticlesController specs

* Add ability to actually pin an article from the admin after submit

* Add partial Cypress pin/unpin spec

* Fix pinned article and add basic Cypress interaction tests

* Add Crayons styling to modal

* Only render the pinned article on the default Feed page

* Use persisted?

* Add some comments

* Update app/javascript/articles/Article.jsx

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/javascript/packs/homePageFeed.jsx

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Fix Cypress tests

* Update app/javascript/admin/controllers/article_controller.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Fix pinning in article show page

* Used PinnedArticle domain model

* Fix spec

* Update cypress/integration/adminFlows/articles/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/adminFlows/articles/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/adminFlows/articles/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/adminFlows/articles/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/adminFlows/articles/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/articleFlows/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/articleFlows/pinArticle.spec.js

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/admin/articles/index.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Fix merge woes

* Add missing article pin post flows

* Add missing admin article flows

* Add Unpin to Admin as well

* Add Audit::Log entries for pin/unpin actions

* Update app/controllers/stories/feeds_controller.rb

Co-authored-by: Michael Kohl <citizen428@dev.to>

* Do not rate limit in E2E tests

* Use .find instead of .filter

* Rename ArticleIdValidator to ExistingArticleIdValidator

* Treat draft and deleted articles the same

* Make sure posts can be pinned after the pinned article is unpublished or deleted

* Use .get directly

* Fix spec and fix PinnedArticlesController#show

* Strengthen pinArticle Cypress tests

* Add Cypress test heading guard

* Add another Cypress test heading guard

* Remove duplicate validator

* Try using the Tools: header instead of the article title

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
Co-authored-by: Michael Kohl <citizen428@dev.to>
2021-06-04 10:54:53 +02:00
Suzanne Aitchison
7e322e4f7b
Optimise dropdowns for accessibility - Post comments and share (#13868)
* WIP - basic init of comment dropdowns with open and close on click

* WIP - initialize the share dropdown

* initialize all post dropdowns within packs, init copy to clipboard announcer

* refactor and add JSDocs to helper

* undo changes to base jsx

* update accessible name of post actions button in cypress test

* make sure dropdowns pack loaded on comment index page

* undo prettier changes in base jsx

* undo prettier changes in base jsx

* initialize comment dropdowns in podcasts

* add test for the post actions

* add article comment tests

* add cypress tests for comment dropdowns
2021-06-03 09:13:17 +01:00
Miguel Guardia
364c3a8252
Fix subscribe to discussion button when user is not logged in (#12837)
* Add logic to subscribe button that shows login modal if user is not logged in
Pass in userstatus to CommentSubscription
Remove logic that loads comment subscription button for logged-in users only

* Modify test to account for new userStatus input in CommentSubscription

* Change UserStatus to isLoggedIn
Add propType to isLoggedIn
Remove preventDefault from click event

* Fix indentation and input on commentSubscription test
Create new isLoggedIn variable that returns boolean
Replace all instances of userStatus to isLoggedIn
Create test for showLoginModal when subscribing
2021-03-03 18:50:29 -06:00
Katie Davis
76453b41fb
Updates ESLint rules to error on default imports (#12512)
* add rule

* add named imports

* more missed files

* so many files
2021-02-02 10:24:03 -05:00
rhymes
f9506affb5
Use faster JS selection methods (#11409)
* Add JS tips section to frontend documentation

* Replace document.getElementsByTagName('body') with document.body

* Replace querySelectorAll with faster selecting methods where appropriate

* Replace querySelector with faster selecting methods where appropriate

* Fix typo

* Fix forEach and getElementsByClassName

* Change querySelector* to faster methods in erb files

* Change querySelector* to faster methods in ruby files

* Fix runkit tag

* Various fixes

* Update app/assets/javascripts/initializers/initializeEllipsisMenu.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Update app/assets/javascripts/utilities/slideSidebar.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Commenting out flaky spec

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
2020-11-16 17:35:50 +01:00
Ivan
4f79da26c3
add fullscreen to code blocks (#10784)
* add fullscreen to code blocks

* add review fixes

* remove extra import

* fix approved tests

* code review - paddings

* fix padding to make highlight code scrollable
within  padded area

* add fullscreen to existing webpack entrypoint

* fixed aria: true generated extra ids

* fix tests
2020-10-14 12:01:35 +02:00
Ben Halpern
e9a60d9f77
[deploy] Check for snackbar (#8783) 2020-06-18 19:51:21 -04:00
Nick Taylor
e117c7b766
nickytonline/comment subscription fix (#8768) 2020-06-18 11:26:48 -04:00
Nick Taylor
653ec12300
Upgrade to Preact 10.4.4 (#8739)
Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
2020-06-18 10:07:17 -04:00
Andy Zhao
885e042d31
[deploy] New Feature: Mod Actions Panel (#7777)
* db

* Add an iframe to host mod actions menu

This iframe is probably the fastest way to get a working mod actions
menu without rewriting existing code. We may eventually re-write this,
but based on Ben's recommendation we are going to go with an iframe
because it gets us a working feature quickly and it seems to be serving
us well in other parts of the application.

* Add the mod actions menu button to articles

When the user is "trusted" they will see a small badge on the lower
right-hand side of the screen. Clicking the icon reveals the mod actions
menu.

* Add header to actions panel (#7395)

* Update iframe border

* Add 'Moderate Post' header and button

* Use inline SVG over <img src='svg'>

* Use Crayons variables for units

* Use flexbox to center chevron

* Add accidentally deleted positioning

* Add chevron-right.svg

* Use a partial for actions panel and revert /mod page

* Load actions panel in iframe and not /mod

* Style UpVote, DownVote and Vomit buttons (#7421)

* Add a iframe to host mod actions menu

* Up and Downvote Icons

* Starting with vomit button

* Completed UI; interactions pending

* Incorporated Andy changes; making mod action-panel

* space reactions away from header

* UI tweaks and corrections 1

* Fixing styles to match crayons

* choose pure white color css variable

* Add thumbs-up emoji; address Lisa comments

* Trying to fix reactions interactions

* remove clearThumbReactions function

Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>

* Add bottom layout for actions panel (#7501)

* WIP for Lisa

* Finalize mod actions bottom section

* Use showing instead of hidden for transition

* Add new optimized SVGs

* Fix weird height issues for actions panel

* Move hover styles below the cascade, yo

* Use margin-top for sticky footer over height: 100%

* Move initialize actions panel button to Webpack (#7506)

* Move actions panel JS code to webpack

* Refactor and use destructuring

Thanks @nickytonline!

Co-Authored-By: Nick Taylor <nick@iamdeveloper.com>

* Rename file

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Configure Experience Level options for Mod Action Panel (#7507)

* Add a iframe to host mod actions menu

* Click interactions (no toggle of dropdowns yet)

Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>

* Fix the iframe's path (#7509)

* Toggle the 'Set Experience Level' menu on button-click (#7529)

* Add a iframe to host mod actions menu

* Add set-exp dropdown functionality

* WIP: making exp level updates async

* Completes async implementation

* Fix controller for "actions_panel" and "/mod"

Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>

* Add close button interaction (#7552)

* Rename actions panel pack file

* Add close button toggle to actions panel

* DB update

* Move more code to Webpack and add conditional tag adjustments section (#7652)

* Move JS code to Webpack

* Clean up a few style issues

* Add styling for tag adjustments

* Add active/inactive functionality

* Add conditional rendering for tag adjustments section

* Add missing variable oops (#7673)

* update with upstream

* Add missing subtract svg (#7695)

* Create 'Flag User' modal (#7626)

* Add a iframe to host mod actions menu

* Starting task

* Phase 1

* Fix "Close Modal" icon

* Implement open modal

* Working on all "Close Modal" actions

* Almost-complete implementation

* Remove Abuse Report snackbar

* Delete unneeded JS code

* Remove "How does this work?" links

* Link to Community Moderation page

* Addressing code review corrections

* Update api call to use "request" method

* Make else path clearer in api call

Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>

* Mod Actions Panel: Prevent nonsensical reaction pairs (#7699)

* Still implementing

* Completed Implementation

* Address code review feednack; refactor "create" method

* Move scss variables to native-css (for ModPanel code only)

* Correct missing native css

* update to native-css again

* More sccs -> native-css fixes

* Adjust ModPanel Button position on mobile (#7744)

* Adjusted ModPanel position on mobile

* Better adjustment

* Fix phantom schema.rb changes

* Fix phantom schema.rb changes

* Finalize tag adjustments (#7740)

* Finalize tag adjustments and flow

* Fix logic for rendering adjust tags options

* Clean up alert response

* Rename user to trusted user

* Use new CSS variables

* Add/remove tag on article's tag section after adjusting

* Fix logic for admin tag input and some other niceties

* Final bug fixes mod panel (#7772)

* Use correct boolean statement

* Clear the value of the textarea not div

* Use the correct attribute

* Use actions panel for /mod page (#7775)

* Fix loading logic with tag adjust button conditional render

* Link to tag moderation for adjust tags section

* Use top over window.parent

Thanks @nickytonline!

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Use Webpack alias to import

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Use place-items shorthand over align-items + justify-content

Thanks @nickytonline!

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Fix typo for utilities

* Add new line to end of file

* Disable linter for use for top function

* Use align-items and justify-content center

* Update SVGs to spec

* Remove unnecessary height and use spacing units for open button

* Remove accidentally added comment

* Error handling when selecting reactions; optimize "reactions.each" loop

* Add comment about clearing innerHTML

* Revert schema back to master

* Use each since there should only be two reactions

* Fix typo oops

* Add missing height oops

* Return if there are no reactions to be destroyed

* Center path with GUI tool shrug

* chose more appropriate name for JS pack; rewrote api calls using async-await

* Rename variables and methods and check categories before clearing

* Use addSnackbarItem instead of hardcoded version

* Place articleModerationTools pack behind user_signed_in

* Correct omission

* Implement dynamic imports for ModPanel tools

* Implemented async/await; added snackbar message for null response use-case

* Fix the "/article/mod" page; make sure all reactions, vomit-user and exp-level working as expected

* Update language to reflect new UI

* Close the modal after the "Confirm Action" button is clicked

* Change text for Spam/Abuse button

* Fix schema to use with master

* Update schema to master again

* Use crayons button for actions panel button

* UI tweak to play nicer with site themes

* Make actions panel work for dev.to/mod

* Add snackbar for reactions

* Update how does this work links

* Add "thumbsup" reactions to logging

* Add thumbsup to categories

* Add external link icon

* Changes to reflect "Privileged" and not "Negative" reactions; spec changes pending

* Updated instance variable

* Starting to update the specs

* Update "thumbsup" points from 10 to 5

* Still working on both requests

* Embracing an easier implemantation (thanks Andy!)

* Add tests for actions panel

* Add some basic tests for actions panel

* Change to flag to admins

* Indicate that 'Reason for Tag adjust' is required

Co-authored-by: Mac Siri <krairit.siri@gmail.com>

* Rename negative_reactions to privileged

* Update rating level to use correct values

* Use a different display value than backend value

* Don't show adjust tags for trusted users

* Add specs for moderation_routes for admin and super_admin

Co-authored-by: Arit Amana <msarit@gmail.com>
Co-authored-by: jacobherrington <jacobherringtondeveloper@gmail.com>
Co-authored-by: Arit Amana <32520970+msarit@users.noreply.github.com>
Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
Co-authored-by: Mac Siri <krairit.siri@gmail.com>
2020-06-08 13:24:18 -04:00
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