h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Kurt Hutten
2021-09-18 16:47:17 +10:00
parent d94645d381
commit f3201cfd97
7 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/web/src/components/Hero/AssetWithGooey.tsx
View File

@@ -76,8 +76,8 @@ function Gooey() {
const z = randomSign(Math.random() * 2)
const position: [number, number, number] = [x, z, y]
const size = Math.random() * 0.8 + 0.1
const distort = (size > .1) ? Math.random() * .6 * size + 0.2 : 0
const speed = (size > .1) ? (Math.random() * 0.8) / size / size + 0.1 : 0
const distort = size > 0.1 ? Math.random() * 0.6 * size + 0.2 : 0
const speed = size > 0.1 ? (Math.random() * 0.8) / size / size + 0.1 : 0
return { position, size, distort, speed }
})
const secondSet = Array.from({ length: 5 }).map((_, index) => {
@@ -87,8 +87,8 @@ function Gooey() {
const z = randomSign(Math.random() * 2)
const position: [number, number, number] = [x, z, y]
const size = Math.random() * 0.2 + 0.05
const distort = (size > .1) ? Math.random() * .8 * size + 0.2 : 0
const speed = (size > .1) ? (Math.random() * 0.5) / size / size + 0.1 : 0
const distort = size > 0.1 ? Math.random() * 0.8 * size + 0.2 : 0
const speed = size > 0.1 ? (Math.random() * 0.5) / size / size + 0.1 : 0
return { position, size, distort, speed }
})
return [...firstSet, ...secondSet]

12
app/web/src/components/IdeSideBar/sidebarConfig.tsx
View File

@@ -53,7 +53,8 @@ export const sidebarTopConfig: SidebarConfigType[] = [
]
const DiscordLink = () => (
<a className="underline text-ch-pink-300"
<a
className="underline text-ch-pink-300"
href="https://discord.gg/SD7zFRNjGH"
target="_blank"
rel="noreferrer"
@@ -74,7 +75,8 @@ const settingsConfig = [
</p>
<hr className="my-2" />
<p className="p-2">
We're building configuration settings for the Viewer pane now. Join us on <DiscordLink/> if you want to lend a hand!
We're building configuration settings for the Viewer pane now. Join us
on <DiscordLink /> if you want to lend a hand!
</p>
</div>
),
@@ -90,7 +92,8 @@ const settingsConfig = [
</p>
<hr className="my-2" />
<p className="p-2">
We're building configuration settings for the Viewer pane now. Join us on <DiscordLink/> if you want to lend a hand!
We're building configuration settings for the Viewer pane now. Join us
on <DiscordLink /> if you want to lend a hand!
</p>
</div>
),
@@ -106,7 +109,8 @@ const settingsConfig = [
</p>
<hr className="my-2" />
<p className="p-2">
We're building configuration settings for the Viewer pane now. Join us on <DiscordLink/> if you want to lend a hand!
We're building configuration settings for the Viewer pane now. Join us
on <DiscordLink /> if you want to lend a hand!
</p>
</div>
),

13
app/web/src/components/KeyValue/KeyValue.tsx
View File

@@ -7,10 +7,12 @@ interface EditToggleType {
}
const EditToggle = ({
onEdit = () => { console.error('Field declared editable without edit action.') },
onEdit = () => {
console.error('Field declared editable without edit action.')
},
isEditing = false,
} : EditToggleType) => (
(isEditing ? (
}: EditToggleType) =>
isEditing ? (
<button
className="font-fira-sans text-ch-gray-300 items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-blue-500 bg-opacity-50 hover:bg-opacity-70 rounded-sm"
id="rename-button"
@@ -23,8 +25,7 @@ const EditToggle = ({
<button onClick={onEdit}>
<Svg name="pencil-solid" className="h-4 w-4 ml-4 mb-2" />
</button>
))
)
)
interface KeyValueType {
keyName: string
@@ -51,7 +52,7 @@ const KeyValue = ({
}
>
<span className={edit ? 'text-ch-blue-300' : ''}>{keyName}</span>
{edit && edit.hasPermissionToEdit && <EditToggle {...edit} /> }
{edit && edit.hasPermissionToEdit && <EditToggle {...edit} />}
</div>
<div className={'text-ch-gray-300 ' + (bottom ? 'mb-1' : 'mt-1')}>
{children}

5
app/web/src/components/ProjectCard/ProjectCard.tsx
View File

@@ -32,10 +32,7 @@ const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
</div>
<div className="flex items-center mt-1">
<div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
<ImageFallback
imageId={user?.image}
width={80}
/>
<ImageFallback imageId={user?.image} width={80} />
</div>
<div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
<div className="">{title}</div>

16
app/web/src/components/ProjectProfile/ProjectProfile.tsx
View File

@@ -102,7 +102,8 @@ const ProjectProfile = ({
className="px-3 py-2 rounded"
/>
</div>
{ (project?.description || hasPermissionToEdit) && <KeyValue
{(project?.description || hasPermissionToEdit) && (
<KeyValue
keyName="Description"
edit={{
hasPermissionToEdit,
@@ -136,7 +137,8 @@ const ProjectProfile = ({
onChange={onDescriptionChange}
/>
</div>
</KeyValue> }
</KeyValue>
)}
<div className="grid grid-flow-col-dense gap-6">
<KeyValue keyName="Created on">
{new Date(project?.createdAt).toDateString()}
@@ -154,7 +156,8 @@ const ProjectProfile = ({
className=""
/>
</KeyValue>
{ currentUser && <KeyValue keyName="Comments">
{currentUser && (
<KeyValue keyName="Comments">
{!isEditing && (
<>
{currentUser && (
@@ -190,7 +193,9 @@ const ProjectProfile = ({
<div className="flex justify-between">
<Link
className="flex items-center"
to={routes.user({ userName: user?.userName })}
to={routes.user({
userName: user?.userName,
})}
>
<Gravatar
image={user?.image}
@@ -211,7 +216,8 @@ const ProjectProfile = ({
</ul>
</>
)}
</KeyValue> }
</KeyValue>
)}
{hasPermissionToEdit && (
<>
<h4 className="mt-10 text-red-600">Danger Zone</h4>

17
app/web/src/components/UserProfile/UserProfile.tsx
View File

@@ -13,15 +13,18 @@ import {
// This function initializes the state management object for each of the fields
function buildFieldsConfig(fieldsConfig, user, hasPermissionToEdit) {
return Object.fromEntries(Object.keys(fieldsConfig).map(
(key: string): [string, FieldType] => ([key, {
return Object.fromEntries(
Object.keys(fieldsConfig).map((key: string): [string, FieldType] => [
key,
{
name: key,
currentValue: user[key],
newValue: user[key],
isEditing: false,
hasPermissionToEdit,
}])
))
},
])
)
}
const UserProfile = ({
@@ -39,7 +42,11 @@ const UserProfile = ({
navigate(routes.user({ userName: user.userName }))
}, [currentUser])
const initializedFields = buildFieldsConfig(fieldComponents, user, hasPermissionToEdit)
const initializedFields = buildFieldsConfig(
fieldComponents,
user,
hasPermissionToEdit
)
const [fields, fieldDispatch] = useReducer(fieldReducer, initializedFields)
const {
name: NameField,

18
app/web/src/components/UserProfile/userProfileConfig.tsx
View File

@@ -51,9 +51,11 @@ const ProfileKeyValue = ({
hasPermissionToEdit,
children,
bottom = false,
} : ProfileKeyValueType) => {
}: ProfileKeyValueType) => {
return (
(user[field.name] && hasPermissionToEdit) && <KeyValue
user[field.name] &&
hasPermissionToEdit && (
<KeyValue
keyName={field.name}
edit={{
hasPermissionToEdit,
@@ -75,6 +77,7 @@ const ProfileKeyValue = ({
{children}
</KeyValue>
)
)
}
function BioField(props) {
@@ -110,7 +113,7 @@ function BioField(props) {
)
}
function MemberSinceField(props : FieldComponentPropsType) {
function MemberSinceField(props: FieldComponentPropsType) {
return (
<KeyValue keyName="Member Since">
<p className="text-ch-gray-300">
@@ -120,7 +123,7 @@ function MemberSinceField(props : FieldComponentPropsType) {
)
}
function ImageField(props : FieldComponentPropsType) {
function ImageField(props: FieldComponentPropsType) {
const { field, user, save, hasPermissionToEdit } = props
return (
<ImageUploader
@@ -138,7 +141,7 @@ function ImageField(props : FieldComponentPropsType) {
)
}
function NameField(props : FieldComponentPropsType) {
function NameField(props: FieldComponentPropsType) {
const { user, dispatch, field } = props
return (
@@ -162,7 +165,7 @@ function NameField(props : FieldComponentPropsType) {
)
}
function UserNameField(props : FieldComponentPropsType) {
function UserNameField(props: FieldComponentPropsType) {
const { dispatch, field } = props
return (
@@ -196,7 +199,8 @@ export function fieldReducer(state, action) {
[action.payload]: {
...state[action.payload],
isEditing:
state[action.payload].hasPermissionToEdit && !state[action.payload].isEditing
state[action.payload].hasPermissionToEdit &&
!state[action.payload].isEditing
? true
: false,
},