scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
scratch-www/static/svgs/project/comment-reply.svg

11 lines
2.5 KiB
XML
Raw Normal View History

Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title>comment-reply</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="comment-reply" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
feat: use purple accent color for accessibility
2023-05-08 12:48:22 -04:00
<path d="M9.4379644,9.95564876 C9.4397719,9.83000629 9.4365177,9.69150012 9.42535762,9.54182983 C9.39320024,9.16970313 9.30581606,8.72820912 9.12405695,8.26937328 C9.07512181,8.1566514 9.02758481,8.03887149 8.96746449,7.92470447 C8.89406178,7.78886016 8.89825622,7.75634423 8.7905989,7.59665491 C8.62352034,7.33435977 8.47531676,7.14143195 8.29006229,6.92104623 C7.92234964,6.50701011 7.47144725,6.15222524 6.99467914,5.89065268 C6.51441566,5.63486073 6.01387905,5.47228111 5.5671711,5.38846228 C5.12465758,5.30464345 4.71639867,5.29597253 4.48150998,5.29741768 C4.35847305,5.29452738 4.20677411,5.32270785 4.12917695,5.32632073 C4.04388999,5.33571422 3.99845021,5.34004968 3.99845021,5.34004968 C3.50070989,5.39279773 3.05540009,5.0185033 3.0050668,4.5040291 C2.96242332,4.07337373 3.20989533,3.68173747 3.58180242,3.53433194 C3.58180242,3.53433194 3.62514497,3.51771269 3.70553842,3.48591934 C3.79501983,3.454126 3.88310309,3.40571339 4.07395015,3.34862988 C4.46403315,3.22506936 4.96317161,3.09789597 5.6119118,3.03286412 C6.25575847,2.96999999 7.02893374,2.9880644 7.85034507,3.16076009 C8.66826104,3.33851382 9.53091772,3.67740202 10.3222689,4.17525697 C10.7053612,4.422378 11.1087266,4.72441482 11.4247078,5.00910981 C11.5596289,5.12183169 11.8001102,5.36533984 11.9385268,5.51708083 C12.1000127,5.68616364 12.2468182,5.86536252 12.3922255,6.04311624 C12.9591741,6.76424721 13.37722,7.545352 13.6547522,8.2534766 C13.9134224,8.91884719 14.055538,9.51573832 14.1351159,9.95564876 L15.4897593,9.95564876 C16.1024852,9.95564876 16.6500676,10.3333021 16.8842064,10.9178352 C17.1192892,11.5033442 16.9908905,12.1708245 16.5575451,12.6187388 L12.7603439,16.5426249 C12.4752234,16.8373311 12.0956921,17.0002978 11.6935022,17.0002978 C11.2903682,17.0002978 10.9108369,16.8373311 10.6266605,16.5426249 L6.82851524,12.6187388 C6.39611391,12.1708245 6.26677115,11.5033442 6.50185397,10.9178352 C6.73693679,10.3333021 7.28451925,9.95564876 7.89630104,9.95564876 L9.4379644,9.95564876 Z" fill="#855CD6" transform="translate(10.000298, 10.000000) scale(-1, 1) rotate(-90.000000) translate(-10.000298, -10.000000) "></path>
Initial implementation for displaying comments on project page (#1997) * Create Comment component, start styling it * Restructure PreviewPresentation to better match mockup * Add padding, border to comment bubble * add padding to bottom row of comment * Tweak alignment of avatar and comment content * Add margin to lower project page container * Use border-box box sizing for comment bubble * Make user avatar a link * Add initial implementation of comment tail * Align username row properly, fix comment bubble width * Use ::before pseudoelement for comment tail * Remove unused props to Comment component * Add CommentContainer to handle comment replies * Use CommentContainer instead of Comment in PreviewPresentation * Remove debug data from CommentContainer * Fetch top level comments from the API * Force comment container to stretch to bottom of view div * Remove unused api import in CommentContainer * Long words in comments should not overflow page * Remove @ before username in comment title * Fix word wrapping on Firefox * Refactor CommentContainer into a class * Properly export CommentContainer component * Make replies column take up proper width * Pass project ID to CommentContainer * Fetch comment replies in CommentContainer * Initial implementation for loading more comments * Add "Load More" button to Presentation * Initial implementation of collapsing threads longer than 3 replies * Remove console log from preview.js redux * Tweak last comment gradient color * Only show three total replies in collapsed state * Match scratchr2 behavior for thread collapsing * Use width calc instead of margin and width 100% * Fix styling for load more button * Make comment border gray to match the wireframe * Allow clicking through comment fade gradient * Add comment compose component * style comment compose box * Style post, cancel buttons on comment compose component * Add margin to create comment container * Tweak styling for characters remaining text * Tweak placeholder text * Add more margin to comment avatar * Add icons and styling to delete, report text * Refactor px -> rem where possible in comment styles * Change comment time color to dark gray * Tweak margin and border radius * Add reply icon to preview comments * Clean up unused imports, console.log in compose-comment component * Remove console statement in preview.jsx * Add some clarifying comments to unfinished parts of comments * Remove direct passing of comment api response to CommentContainer * CommentContainer should not pass api response directly * Rename CommentContainer to TopLevelComment * First pass at getReplies for comments in redux * Move reply fetching into redux actions instead of in TopLevelComment * Refactor getReplies logic to behave better * Remove components not directly related to reading comments * Hide load more button if all comments are loaded This uses the project info returned by the API * Use same gradient as add to studio modal on comment thread
2018-08-06 11:52:18 -04:00
</g>
feat: use purple accent color for accessibility
2023-05-08 12:48:22 -04:00
</svg>
Reference in a new issue Copy permalink