diff --git a/README.md b/README.md index 7d558ce..eb4248b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CadHub -CadHub aims to be a community website for javascript based code-cad. Currently trying to integrate [cascadeStudio](https://zalo.github.io/CascadeStudio/), but if successful plan to also integrate [jsCad](https://openjscad.org/). +CadHub aims to be a community website for javascript based code-cad. Currently trying to integrate [cascadeStudio](https://zalo.github.io/CascadeStudio/), but if successful plan to also integrate [JSCAD](https://openjscad.org/). OpenScad has proven code-cad a much loved formate for cad-modeling. Joining code-cad to a mature language like javascript that has a package manager (npm) plus a community hub for sharing cad models like CadHub, we're going to build a thriving community. diff --git a/web/src/components/EmojiReaction/EmojiReaction.js b/web/src/components/EmojiReaction/EmojiReaction.js new file mode 100644 index 0000000..0f2d162 --- /dev/null +++ b/web/src/components/EmojiReaction/EmojiReaction.js @@ -0,0 +1,76 @@ +import { useState } from 'react' +import Fab from '@material-ui/core/Fab' +import IconButton from '@material-ui/core/IconButton' +import Popover from '@material-ui/core/Popover' +import Svg from 'src/components/Svg' + +const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌'] + +const EmojiReaction = ({ emotes, callback = () => {} }) => { + const [isOpen, setIsOpen] = useState(false) + const [anchorEl, setAnchorEl] = useState(null) + const [popoverId, setPopoverId] = useState(undefined) + + const openPopover = (target) => { + setAnchorEl(target) + setPopoverId('simple-popover') + setIsOpen(true) + } + + const closePopover = () => { + setAnchorEl(null) + setPopoverId(undefined) + setIsOpen(false) + } + + const togglePopover = ({ currentTarget }) => { + if (isOpen) { + return closePopover() + } + + openPopover(currentTarget) + } + + const handleEmojiClick = (emoji) => { + callback(emoji) + closePopover() + } + + return [ +
+ +
+ +
+ + +
+ {emotes.map((emote, i) => ( + handleEmojiClick(emote.emoji)}> + {emote.emoji} {emote.count} + + ))} +
+
, + + {emojiMenu.map((emoji, i) => ( + handleEmojiClick(emoji)}>{emoji} + ))} + , + ] +} + +export default EmojiReaction diff --git a/web/src/components/EmojiReaction/EmojiReaction.stories.js b/web/src/components/EmojiReaction/EmojiReaction.stories.js new file mode 100644 index 0000000..1f0c8ab --- /dev/null +++ b/web/src/components/EmojiReaction/EmojiReaction.stories.js @@ -0,0 +1,7 @@ +import EmojiReaction from './EmojiReaction' + +export const generated = () => { + return +} + +export default { title: 'Components/EmojiReaction' } diff --git a/web/src/components/EmojiReaction/EmojiReaction.test.js b/web/src/components/EmojiReaction/EmojiReaction.test.js new file mode 100644 index 0000000..f034533 --- /dev/null +++ b/web/src/components/EmojiReaction/EmojiReaction.test.js @@ -0,0 +1,11 @@ +import { render } from '@redwoodjs/testing' + +import EmojiReaction from './EmojiReaction' + +describe('EmojiReaction', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/web/src/components/PartForm/ImageUploader.js b/web/src/components/PartForm/ImageUploader.js index d2dacd3..0314a13 100644 --- a/web/src/components/PartForm/ImageUploader.js +++ b/web/src/components/PartForm/ImageUploader.js @@ -9,7 +9,7 @@ import 'react-image-crop/dist/ReactCrop.css' import Svg from 'src/components/Svg/Svg.js' const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images"; -const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload/?custom_coordinates=10,10,20,20"; +const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload"; export default function ImageUploader({ onImageUpload, imageUrl }) { const [isModalOpen, setIsModalOpen] = useState(false) diff --git a/web/src/components/Parts/Parts.js b/web/src/components/Parts/Parts.js index 511144a..8f49c7b 100644 --- a/web/src/components/Parts/Parts.js +++ b/web/src/components/Parts/Parts.js @@ -53,7 +53,7 @@ const PartsList = ({ parts }) => { } return ( -
+
{parts.map((part) => { return ( { , "pencil": + , + "dots-vertical": + } diff --git a/web/src/components/UserPart/UserPart.js b/web/src/components/UserPart/UserPart.js new file mode 100644 index 0000000..83256b2 --- /dev/null +++ b/web/src/components/UserPart/UserPart.js @@ -0,0 +1,16 @@ +function UserPart({ userName, partName }) { + return ( +

+
.
+ + {userName} + +
.
+ + {partName} + +

+ ) +} + +export default UserPart diff --git a/web/src/index.css b/web/src/index.css index 7852ba6..5b01aec 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -8,6 +8,9 @@ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; + +@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap') /** * END --- TAILWIND GENERATOR EDIT */ @@ -33,7 +36,7 @@ body { /* TODO can I use a tailwind class here? */ - background-color: #4a5568; + background-color: #E5E5E5; } button, input, label, textarea { diff --git a/web/src/layouts/MainLayout/MainLayout.js b/web/src/layouts/MainLayout/MainLayout.js index 5d5dcba..ae55bd0 100644 --- a/web/src/layouts/MainLayout/MainLayout.js +++ b/web/src/layouts/MainLayout/MainLayout.js @@ -11,36 +11,42 @@ const MainLayout = ({ children }) => { return ( <>
-
diff --git a/web/tailwind.config.js b/web/tailwind.config.js index a0a2d0a..c15b6f2 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -16,7 +16,13 @@ module.exports = { minHeight: { 'md': '28rem' }, - + fontFamily: { + 'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'], + 'roboto': ['Roboto', 'Arial', 'sans-serif'], + }, + skew: { + '-20': "-20deg" + } } }, variants: {},