Skip to content

Commit

Permalink
feat: improve responsive behaviour
Browse files Browse the repository at this point in the history
  • Loading branch information
@monospaced @chrisvxd
monospaced authored and chrisvxd committed Nov 17, 2023
1 parent a331786 commit 889b4c7
Show file tree
Hide file tree
Showing 11 changed files with 221 additions and 134 deletions.
2 changes: 1 addition & 1 deletion packages/core/components/ComponentList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ComponentListItem = ({
>
{() => (
<>
{component}
<div className={getClassNameItem("name")}>{component}</div>
<div className={getClassNameItem("icon")}>
<DragIcon />
</div>
Expand Down
7 changes: 4 additions & 3 deletions packages/core/components/ComponentList/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,14 @@
font-size: var(--puck-font-size-xxs);
justify-content: space-between;
align-items: center;
gap: 12px;
cursor: grab;
margin-bottom: 12px;
}

.ComponentListItemIcon {
color: var(--puck-color-grey-4);
.ComponentListItem-name {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.ComponentList:not(.ComponentList--isDraggingFrom)
Expand Down
9 changes: 5 additions & 4 deletions packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,11 @@
color: var(--puck-color-grey-3);
display: flex;
align-items: center;
gap: 2px;
justify-content: space-between;
font-size: var(--puck-font-size-xxs);
list-style: none;
padding: 12px 16px;
padding: 12px 15px;
position: relative;
overflow: hidden;
}
Expand Down Expand Up @@ -114,18 +115,18 @@
border: none;
border-top: 1px solid var(--puck-color-grey-8);
margin: 0;
padding: 16px;
padding: 16px 15px;
}

.ArrayFieldItem-rhs {
display: flex;
gap: 8px;
gap: 4px;
align-items: center;
}

.ArrayFieldItem-actions {
display: flex;
gap: 8px;
gap: 4px;
opacity: 0;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/core/components/InputOrGroup/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
border-color: var(--puck-color-grey-8);
border-radius: 4px;
font-family: inherit;
padding: 12px 16px;
padding: 12px 15px;
width: 100%;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/core/components/LayerTree/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const LayerTree = ({
<Grid size="16" />
)}
</div>
{item.type}
<div className={getClassNameLayer("name")}>{item.type}</div>
</div>
</div>
</div>
Expand Down
19 changes: 13 additions & 6 deletions packages/core/components/LayerTree/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@
}

.Layer-inner {
padding-left: 20px;
padding-right: 8px;
border-radius: 3px;
padding-left: 12px;
padding-right: 4px;
border-radius: 4px;
}

.Layer--containsZone > .Layer-inner {
padding-left: 8px;
padding-left: 0;
}

.Layer-clickable {
Expand Down Expand Up @@ -69,7 +69,7 @@

.Layer-zones {
display: none;
margin-left: 20px;
margin-left: 12px;
}

.Layer--isSelected > .Layer-zones,
Expand All @@ -78,7 +78,7 @@
}

.Layer-zones > .LayerTree {
margin-left: 16px;
margin-left: 12px;
}

.Layer-title,
Expand All @@ -87,6 +87,13 @@
gap: 8px;
align-items: center;
margin: 8px 4px;
overflow-x: hidden;
}

.Layer-name {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.Layer-icon {
Expand Down
3 changes: 1 addition & 2 deletions packages/core/components/OutlineList/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
color: var(--puck-color-grey-2);
font-family: var(--puck-font-stack);
margin: 0;
margin-left: 16px;
padding-left: 16px;
position: relative;
list-style: none;
Expand Down Expand Up @@ -39,5 +38,5 @@
}

.OutlineListItem > .OutlineList {
margin: 8px;
margin: 8px 0;
}
154 changes: 39 additions & 115 deletions packages/core/components/Puck/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,14 @@ import { LayerTree } from "../LayerTree";
import { findZonesForArea } from "../../lib/find-zones-for-area";
import { areaContainsZones } from "../../lib/area-contains-zones";
import { flushZones } from "../../lib/flush-zones";
import getClassNameFactory from "../../lib/get-class-name-factory";
import { usePuckHistory } from "../../lib/use-puck-history";
import { AppProvider, defaultAppState } from "./context";
import { useComponentList } from "../../lib/use-component-list";
import { useResolvedData } from "../../lib/use-resolved-data";
import styles from "./styles.module.css";

const getClassName = getClassNameFactory("Puck", styles);

const Field = () => {};

Expand Down Expand Up @@ -270,7 +274,7 @@ export function Puck({
}, []);

return (
<div className="puck">
<div>
<AppProvider
value={{ state: appState, dispatch, config, componentState }}
>
Expand Down Expand Up @@ -354,31 +358,8 @@ export function Puck({
<dropZoneContext.Consumer>
{(ctx) => {
return (
<div
style={{
display: "grid",
gridTemplateAreas:
'"header header header" "left editor right"',
gridTemplateColumns: `${
leftSideBarVisible ? "288px" : "0px"
} auto 288px`,
gridTemplateRows: "min-content auto",
height: "100vh",
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
>
<header
style={{
gridArea: "header",
color: "var(--puck-color-black)",
background: "var(--puck-color-white)",
borderBottom: "1px solid var(--puck-color-grey-8)",
}}
>
<div className={getClassName({ leftSideBarVisible })}>
<header className={getClassName("header")}>
{renderHeader ? (
renderHeader({
children: (
Expand All @@ -395,21 +376,8 @@ export function Puck({
state: appState,
})
) : (
<div
style={{
display: "grid",
padding: 16,
gridTemplateAreas: '"left middle right"',
gridTemplateColumns: "344px auto 344px",
gridTemplateRows: "auto",
}}
>
<div
style={{
display: "flex",
gap: 16,
}}
>
<div className={getClassName("headerInner")}>
<div className={getClassName("headerToggle")}>
<IconButton
onClick={() =>
dispatch({
Expand All @@ -424,31 +392,20 @@ export function Puck({
<Sidebar />
</IconButton>
</div>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div className={getClassName("headerTitle")}>
<Heading rank={2} size="xs">
{headerTitle || rootProps.title || "Page"}
{headerPath && (
<small
style={{ fontWeight: 400, marginLeft: 4 }}
>
<code>{headerPath}</code>
</small>
<>
{" "}
<code className={getClassName("headerPath")}>
{headerPath}
</code>
</>
)}
</Heading>
</div>
<div
style={{
display: "flex",
gap: 16,
justifyContent: "flex-end",
}}
>
<div className={getClassName("headerTools")}>
<div style={{ display: "flex" }}>
<IconButton
title="undo"
Expand Down Expand Up @@ -479,33 +436,28 @@ export function Puck({
/>
</IconButton>
</div>
{renderHeaderActions &&
renderHeaderActions({
state: appState,
dispatch,
})}
<Button
onClick={() => {
onPublish(data);
}}
icon={<Globe size="14px" />}
>
Publish
</Button>
<div>
{renderHeaderActions &&
renderHeaderActions({
state: appState,
dispatch,
})}
</div>
<div>
<Button
onClick={() => {
onPublish(data);
}}
icon={<Globe size="14px" />}
>
Publish
</Button>
</div>
</div>
</div>
)}
</header>
<div
style={{
gridArea: "left",
background: "var(--puck-color-grey-11)",
borderRight: "1px solid var(--puck-color-grey-8)",
overflowY: "auto",
display: "flex",
flexDirection: "column",
}}
>
<div className={getClassName("leftSideBar")}>
<SidebarSection title="Components">
<ComponentListWrapper>
{componentList ? (
Expand Down Expand Up @@ -549,30 +501,12 @@ export function Puck({
</SidebarSection>
</div>
<div
style={{
overflowY: "auto",
gridArea: "editor",
position: "relative",
display: "flex",
flexDirection: "column",
}}
className={getClassName("frame")}
onClick={() => setItemSelector(null)}
id="puck-frame"
>
<div
className="puck-root"
style={{
boxShadow:
"0px 0px 0px 32px var(--puck-color-grey-10)",
margin: 32,
zoom: 0.75,
}}
>
<div
style={{
border: "1px solid var(--puck-color-grey-8)",
}}
>
<div className={getClassName("root")}>
<div className={getClassName("page")}>
<Page
dispatch={dispatch}
state={appState}
Expand All @@ -591,17 +525,7 @@ export function Puck({
}}
></div>
</div>
<div
style={{
borderLeft: "1px solid var(--puck-color-grey-8)",
overflowY: "auto",
gridArea: "right",
fontFamily: "var(--puck-font-stack)",
display: "flex",
flexDirection: "column",
background: "var(--puck-color-white)",
}}
>
<div className={getClassName("rightSideBar")}>
<FieldWrapper dispatch={dispatch} state={appState}>
<SidebarSection
noPadding
Expand Down
Loading

0 comments on commit 889b4c7

Please sign in to comment.