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

Part 1 of top bar UI refresh (#603)

Browse Source 
* Hitting enter should rename project title

* Part 1 of topbar styling refresh
This commit was merged in pull request #603.
This commit is contained in:
Todd Medema
2022-01-24 15:46:00 -05:00
committed by GitHub
parent 0a6439161e
commit f30eeb2b95
3 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
View File

@@ -53,14 +53,14 @@ const EditableProjectTitle = ({
<> <>
{!inEditMode && ( {!inEditMode && (
<> <>
<Link /<Link
className="underline-hovered"
to={routes.project({ to={routes.project({
userName, userName,
projectTitle, projectTitle,
})} })}
className="pl-4"
> >
/{projectTitle} {projectTitle}
</Link> </Link>
{canEdit && ( {canEdit && (
<button <button

20
app/web/src/components/IdeHeader/IdeHeader.tsx
View File

@@ -102,9 +102,9 @@ export default function IdeHeader({
<div className="flex h-full items-center text-gray-300"> <div className="flex h-full items-center text-gray-300">
{project?.id && ( {project?.id && (
<> <>
<span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4"> <span className="h-full grid grid-flow-col-dense items-center gap-2 ml-4">
<Gravatar image={project?.user?.image} className="w-10" />
<Link <Link
className="underline-hovered"
to={routes.user({ to={routes.user({
userName: projectOwner, userName: projectOwner,
})} })}
@@ -129,7 +129,7 @@ export default function IdeHeader({
<TopButton <TopButton
onClick={onClick} onClick={onClick}
name="Save Project Image" name="Save Project Image"
className=" bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
> >
<Svg name="camera" className="w-6 h-6 text-ch-blue-400" /> <Svg name="camera" className="w-6 h-6 text-ch-blue-400" />
</TopButton> </TopButton>
@@ -138,19 +138,19 @@ export default function IdeHeader({
)} )}
{!isProfile && ( {!isProfile && (
<TopButton <TopButton
className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
onClick={handleRender} onClick={handleRender}
name={canEdit ? 'Save' : 'Preview'} name={canEdit ? 'Save' : 'Preview'}
> >
<Svg <Svg
name={canEdit ? 'floppy-disk' : 'photograph'} name={canEdit ? 'floppy-disk' : 'photograph'}
className="w-6 h-6 text-ch-pink-500" className="w-6 h-6 text-ch-blue-400"
/> />
</TopButton> </TopButton>
)} )}
{isProfile && ( {isProfile && (
<TopButton <TopButton
className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
onClick={() => onClick={() =>
navigate( navigate(
routes.ide({ routes.ide({
@@ -161,7 +161,7 @@ export default function IdeHeader({
} }
name="Editor" name="Editor"
> >
<Svg name="terminal" className="w-6 h-6 text-ch-pink-500" /> <Svg name="terminal" className="w-6 h-6 text-ch-blue-400" />
</TopButton> </TopButton>
)} )}
<Popover className="relative outline-none w-full h-full"> <Popover className="relative outline-none w-full h-full">
@@ -172,11 +172,11 @@ export default function IdeHeader({
<TopButton <TopButton
Tag="div" Tag="div"
name="Share" name="Share"
className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300" className="bg-ch-blue-650 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
> >
<Svg <Svg
name="share" name="share"
className="w-6 h-6 text-ch-purple-500 mt-1" className="w-6 h-6 text-ch-blue-400 mt-1"
/> />
</TopButton> </TopButton>
</Popover.Button> </Popover.Button>
@@ -221,7 +221,7 @@ export default function IdeHeader({
<div className="fixed bg-white w-60 h-10 top-16 right-24 z-10 rounded-md text-sm flex p-2 items-center"> <div className="fixed bg-white w-60 h-10 top-16 right-24 z-10 rounded-md text-sm flex p-2 items-center">
<Svg <Svg
name="exclamation-circle" name="exclamation-circle"
className="w-8 h-8 mx-2 text-ch-blue-500" className="w-8 h-8 mx-2 text-ch-blue-400"
/>{' '} />{' '}
Fork to save your work Fork to save your work
</div> </div>

3
app/web/src/index.css
View File

@@ -144,3 +144,6 @@ label {
input.error, textarea.error { input.error, textarea.error {
border: 1px solid red; border: 1px solid red;
} }
a.underline-hovered:hover {
text-decoration: underline;
}