Images in Comments Specs
Images in Comments Specs
JIRA: https://powrtrak.atlassian.net/browse/PM-7633
Juwan Bepo last updated on October 16, 2019
Image thumbnails can now be uploaded to comments
Summary:
Users have periodically written into POWr Support to ask if their customers can post pictures along with their comments. So, here it is!
Scenario: All users should see new features
Given a user had an instance of Comments app before
Or a user created a new app
When the user enters the editor
Then the user sees a new feature
Scenario: Users should be able to enable and disable uploading images in Comments
Given a user opens the Posts drilldown in the Content tab
When a Starter user enables the “Allow images in comments” toggle (1)
And the user clicks into the Comments input
Then the Add Image button should appear in the input (2)
And when the user disables the toggle and clicks into the Comments input (3)
Then the Add Image button should not appear in the input (4)
- https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=41%3A36
- https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=41%3A32
- https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=41%3A3
- https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=1%3A2
Scenario: New Add Image button in Comments
Given a user loads Comments
Then a new Add Image fa-plus-circle button should appear in the bottom right corner of the input of a plugin
And the color of the btn should be the same as the “Comment Font Style” color in the Fonts drilldown
https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=4%3A22
Scenario: Browser file upload should allow upload of images up to 3mb
Given a user loads Comments
When the user selects the Add Image button
Then the browser file upload modal should appear \ And when a user selects an image to upload
Then the image should not exceed 3mb
https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=4%3A34
Scenario: Accepted file types in browser file upload
Given a user opens the browser file window to select an image
Then the user should only be able to add a .png, .jpg, .tif, or .webp file
NEW Scenario: Progress Bar should appear while image is uploading
Given a user opens the browser file window
When the user selects an acceptable image
Then a progress bar should appear on the left of the Add Image button
And the progress bar fill color should be the same as the Post Comment button
https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=70%3A0
Scenario: Successful uploads should load inline as thumbnails in the input
Given the text cursor is visible in the Comments input
When the user successfully uploads an image and closes the file manager
Then the uploaded image should appear as a thumbnail wherever the cursor is at the start of the upload (inline)
And the maximum width of the thumbnail should be 75px
https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=26%3A51
Scenario: Thumbnail should appear once comment is posted
Given a user has successfully uploaded an image to their Comments,
When the user clicks the “Post Comment” button
Then the uploaded image should appear as a thumbnail
And the maximum width of the thumbnail should be 75px
https://www.figma.com/file/VMpPrqqu1V82RfiLqDThDZ/Images-in-Comments?node-id=24%3A4
Scenario: Clicking on the image thumbnail of a posted comment will open it in Lightbox
Given a user has successfully posted a comment with an uploaded image,
When a visitor clicks on the thumbnail,
Then the thumbnail should open the full size image in a Lightbox
And the user should be able to close the Lightbox with the “x” button in the top right corner