Skip to content

Commit

Permalink
fix: show external field modal when using custom interfaces
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisvxd
chrisvxd committed May 30, 2024
1 parent 2e8936e commit 6e97a0e
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 48 deletions.
44 changes: 26 additions & 18 deletions packages/core/components/Puck/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import { DragDropContext } from "../DragDropContext";
import { IframeConfig } from "../../types/IframeConfig";

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

export function Puck<UserConfig extends Config = Config>({
children,
Expand Down Expand Up @@ -369,7 +370,7 @@ export function Puck<UserConfig extends Config = Config>({
}, []);

return (
<div className="Puck">
<div className={`Puck ${getClassName()}`}>
<AppProvider
value={{
state: appState,
Expand Down Expand Up @@ -467,14 +468,14 @@ export function Puck<UserConfig extends Config = Config>({
<CustomPuck>
{children || (
<div
className={getClassName({
className={getLayoutClassName({
leftSideBarVisible,
menuOpen,
mounted,
rightSideBarVisible,
})}
>
<div className={getClassName("layout")}>
<div className={getLayoutClassName("inner")}>
<CustomHeader
actions={
<>
Expand All @@ -491,10 +492,14 @@ export function Puck<UserConfig extends Config = Config>({
</>
}
>
<header className={getClassName("header")}>
<div className={getClassName("headerInner")}>
<div className={getClassName("headerToggle")}>
<div className={getClassName("leftSideBarToggle")}>
<header className={getLayoutClassName("header")}>
<div className={getLayoutClassName("headerInner")}>
<div className={getLayoutClassName("headerToggle")}>
<div
className={getLayoutClassName(
"leftSideBarToggle"
)}
>
<IconButton
onClick={() => {
toggleSidebars("left");
Expand All @@ -504,7 +509,11 @@ export function Puck<UserConfig extends Config = Config>({
<PanelLeft focusable="false" />
</IconButton>
</div>
<div className={getClassName("rightSideBarToggle")}>
<div
className={getLayoutClassName(
"rightSideBarToggle"
)}
>
<IconButton
onClick={() => {
toggleSidebars("right");
Expand All @@ -515,21 +524,23 @@ export function Puck<UserConfig extends Config = Config>({
</IconButton>
</div>
</div>
<div className={getClassName("headerTitle")}>
<div className={getLayoutClassName("headerTitle")}>
<Heading rank={2} size="xs">
{headerTitle || rootProps.title || "Page"}
{headerPath && (
<>
{" "}
<code className={getClassName("headerPath")}>
<code
className={getLayoutClassName("headerPath")}
>
{headerPath}
</code>
</>
)}
</Heading>
</div>
<div className={getClassName("headerTools")}>
<div className={getClassName("menuButton")}>
<div className={getLayoutClassName("headerTools")}>
<div className={getLayoutClassName("menuButton")}>
<IconButton
onClick={() => {
return setMenuOpen(!menuOpen);
Expand Down Expand Up @@ -567,7 +578,7 @@ export function Puck<UserConfig extends Config = Config>({
</div>
</header>
</CustomHeader>
<div className={getClassName("leftSideBar")}>
<div className={getLayoutClassName("leftSideBar")}>
<SidebarSection title="Components" noBorderTop>
<Components />
</SidebarSection>
Expand All @@ -576,7 +587,7 @@ export function Puck<UserConfig extends Config = Config>({
</SidebarSection>
</div>
<Canvas />
<div className={getClassName("rightSideBar")}>
<div className={getLayoutClassName("rightSideBar")}>
<SidebarSection
noPadding
noBorderTop
Expand All @@ -592,16 +603,13 @@ export function Puck<UserConfig extends Config = Config>({
</SidebarSection>
</div>
</div>
<div
id="puck-portal-root"
className={getClassName("portal")}
/>
</div>
)}
</CustomPuck>
</DropZoneProvider>
</DragDropContext>
</AppProvider>
<div id="puck-portal-root" className={getClassName("portal")} />
</div>
);
}
Expand Down
67 changes: 37 additions & 30 deletions packages/core/components/Puck/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,25 @@

.Puck {
--puck-space-px: 16px;
bottom: 0;
font-family: var(--puck-font-family);
}

.Puck-portal {
position: relative;
z-index: 2;
}

/* Puck Layout */

.PuckLayout {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}

.Puck-layout {
.PuckLayout-inner {
--puck-frame-width: auto;
--puck-side-bar-width: 0px;
display: grid;
Expand All @@ -38,71 +48,72 @@
z-index: 0;
}

.Puck--mounted .Puck-layout {
.PuckLayout--mounted .PuckLayout-inner {
--puck-side-bar-width: 186px;
}

.Puck--leftSideBarVisible .Puck-layout {
.PuckLayout--leftSideBarVisible .PuckLayout-inner {
grid-template-columns:
var(--puck-side-bar-width) var(--puck-frame-width)
0;
}

.Puck--rightSideBarVisible .Puck-layout {
.PuckLayout--rightSideBarVisible .PuckLayout-inner {
grid-template-columns:
0 var(--puck-frame-width)
var(--puck-side-bar-width);
}

.Puck--leftSideBarVisible.Puck--rightSideBarVisible .Puck-layout {
.PuckLayout--leftSideBarVisible.PuckLayout--rightSideBarVisible
.PuckLayout-inner {
grid-template-columns:
var(--puck-side-bar-width) var(--puck-frame-width)
var(--puck-side-bar-width);
}

@media (min-width: 458px) {
.Puck-mounted .Puck-layout {
.PuckLayout-mounted .PuckLayout-inner {
--puck-frame-width: minmax(266px, auto);
}
}

@media (min-width: 638px) {
.Puck .Puck-layout {
.PuckLayout .PuckLayout-inner {
--puck-side-bar-width: minmax(186px, 250px);
}
}

@media (min-width: 766px) {
.Puck .Puck-layout {
.PuckLayout .PuckLayout-inner {
--puck-frame-width: auto;
}
}

@media (min-width: 990px) {
.Puck .Puck-layout {
.PuckLayout .PuckLayout-inner {
--puck-side-bar-width: 256px;
}
}

@media (min-width: 1198px) {
.Puck .Puck-layout {
.PuckLayout .PuckLayout-inner {
--puck-side-bar-width: 274px;
}
}

@media (min-width: 1398px) {
.Puck .Puck-layout {
.PuckLayout .PuckLayout-inner {
--puck-side-bar-width: 290px;
}
}

@media (min-width: 1598px) {
.Puck .Puck-layout {
.PuckLayout .PuckLayout-inner {
--puck-side-bar-width: 320px;
}
}

.Puck-header {
.PuckLayout-header {
background: var(--puck-color-white);
border-bottom: 1px solid var(--puck-color-grey-09);
color: var(--puck-color-black);
Expand All @@ -111,7 +122,7 @@
max-width: 100vw;
}

.Puck-headerInner {
.PuckLayout-headerInner {
align-items: end;
display: grid;
gap: var(--puck-space-px);
Expand All @@ -121,51 +132,51 @@
padding: var(--puck-space-px);
}

.Puck-headerToggle {
.PuckLayout-headerToggle {
color: var(--puck-color-grey-05);
display: flex;
margin-left: -4px;
padding-top: 2px;
}

.Puck--rightSideBarVisible .Puck-rightSideBarToggle,
.Puck--leftSideBarVisible .Puck-leftSideBarToggle {
.PuckLayout--rightSideBarVisible .PuckLayout-rightSideBarToggle,
.PuckLayout--leftSideBarVisible .PuckLayout-leftSideBarToggle {
color: var(--puck-color-black);
}

.Puck-headerTitle {
.PuckLayout-headerTitle {
align-self: center;
}

.Puck-headerPath {
.PuckLayout-headerPath {
font-family: var(--puck-font-family-monospaced);
font-size: var(--puck-font-size-xxs);
font-weight: normal;
word-break: break-all;
}

.Puck-headerTools {
.PuckLayout-headerTools {
display: flex;
gap: 16px;
justify-content: flex-end;
}

.Puck-menuButton {
.PuckLayout-menuButton {
color: var(--puck-color-grey-05);
margin-left: -4px;
}

.Puck--menuOpen .Puck-menuButton {
.PuckLayout--menuOpen .PuckLayout-menuButton {
color: var(--puck-color-black);
}

@media (min-width: 638px) {
.Puck-menuButton {
.PuckLayout-menuButton {
display: none;
}
}

.Puck-leftSideBar {
.PuckLayout-leftSideBar {
background: var(--puck-color-grey-12);
border-right: 1px solid var(--puck-color-grey-09);
display: flex;
Expand All @@ -174,15 +185,11 @@
overflow-y: auto;
}

.Puck-rightSideBar {
.PuckLayout-rightSideBar {
background: var(--puck-color-white);
border-left: 1px solid var(--puck-color-grey-09);
display: flex;
flex-direction: column;
grid-area: right;
overflow-y: auto;
}

.Puck-portal {
z-index: 2;
}

0 comments on commit 6e97a0e

Please sign in to comment.