Skip to content

Commit

Permalink
feat(panel): add "floating" panel + tweak styles for material 3
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Aug 5, 2022
1 parent 1d5aff7 commit 0511aba
Show file tree
Hide file tree
Showing 9 changed files with 276 additions and 12 deletions.
88 changes: 86 additions & 2 deletions kitchen-sink/react/pages/SidePanels.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
Navbar,
NavbarBackLink,
Panel,
BlockTitle,
Block,
Link,
Button,
Expand All @@ -13,6 +14,10 @@ export default function SidePanelsPage() {
const isPreview = document.location.href.includes('examplePreview');
const [leftPanelOpened, setLeftPanelOpened] = useState(false);
const [rightPanelOpened, setRightPanelOpened] = useState(false);

const [leftFloatingPanelOpened, setLeftFloatingPanelOpened] = useState(false);
const [rightFloatingPanelOpened, setRightFloatingPanelOpened] =
useState(false);
return (
<Page>
<Navbar
Expand All @@ -28,8 +33,21 @@ export default function SidePanelsPage() {
</p>
</Block>
<Block strong className="flex space-x-4">
<Button onClick={() => setLeftPanelOpened(true)}>Left Panel</Button>
<Button onClick={() => setRightPanelOpened(true)}>Right Panel</Button>
<Button rounded onClick={() => setLeftPanelOpened(true)}>
Left Panel
</Button>
<Button rounded onClick={() => setRightPanelOpened(true)}>
Right Panel
</Button>
</Block>
<BlockTitle>Floating Panels</BlockTitle>
<Block strong className="flex space-x-4">
<Button rounded onClick={() => setLeftFloatingPanelOpened(true)}>
Left Panel
</Button>
<Button rounded onClick={() => setRightFloatingPanelOpened(true)}>
Right Panel
</Button>
</Block>

<Panel
Expand Down Expand Up @@ -95,6 +113,72 @@ export default function SidePanelsPage() {
</Block>
</Page>
</Panel>

<Panel
side="left"
floating
opened={leftFloatingPanelOpened}
onBackdropClick={() => setLeftFloatingPanelOpened(false)}
>
<Page>
<Navbar
title="Left Panel"
right={
<Link navbar onClick={() => setLeftFloatingPanelOpened(false)}>
Close
</Link>
}
/>
<Block className="space-y-4">
<p>Here comes left panel.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut
leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in
lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam
lacinia venenatis dignissim. Suspendisse non nisl semper tellus
malesuada suscipit eu et eros. Nulla eu enim quis quam elementum
vulputate. Mauris ornare consequat nunc viverra pellentesque.
Aenean semper eu massa sit amet aliquam. Integer et neque sed
libero mollis elementum at vitae ligula. Vestibulum pharetra sed
libero sed porttitor. Suspendisse a faucibus lectus.
</p>
</Block>
</Page>
</Panel>

<Panel
side="right"
floating
opened={rightFloatingPanelOpened}
onBackdropClick={() => setRightFloatingPanelOpened(false)}
>
<Page>
<Navbar
title="Right Panel"
right={
<Link navbar onClick={() => setRightFloatingPanelOpened(false)}>
Close
</Link>
}
/>
<Block className="space-y-4">
<p>Here comes right panel.</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula.
Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor
nibh, suscipit in consequat vel, feugiat sed quam. Nam risus
libero, auctor vel tristique ac, malesuada ut ante. Sed molestie,
est in eleifend sagittis, leo tortor ullamcorper erat, at
vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis
bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at
urna. Pellentesque tempor congue massa quis faucibus. Vestibulum
nunc eros, convallis blandit dui sit amet, gravida adipiscing
libero.
</p>
</Block>
</Page>
</Panel>
</Page>
);
}
Expand Down
78 changes: 78 additions & 0 deletions kitchen-sink/svelte/pages/SidePanels.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@
NavbarBackLink,
Panel,
Block,
BlockTitle,
Link,
Button,
} from 'konsta/svelte';
const isPreview = document.location.href.includes('examplePreview');
let leftPanelOpened = false;
let rightPanelOpened = false;
let leftFloatingPanelOpened = false;
let rightFloatingPanelOpened = false;
</script>

<Page>
Expand All @@ -35,6 +38,14 @@
<Button onClick={() => (rightPanelOpened = true)}>Right Panel</Button>
</Block>

<BlockTitle>Floating Panels</BlockTitle>
<Block strong class="flex space-x-4">
<Button onClick={() => (leftFloatingPanelOpened = true)}>Left Panel</Button>
<Button onClick={() => (rightFloatingPanelOpened = true)}
>Right Panel</Button
>
</Block>

<Panel
side="left"
opened={leftPanelOpened}
Expand Down Expand Up @@ -91,4 +102,71 @@
</Block>
</Page>
</Panel>

<Panel
side="left"
floating
opened={leftFloatingPanelOpened}
onBackdropClick={() => (leftFloatingPanelOpened = false)}
>
<Page>
<Navbar title="Left Panel">
<Link
slot="right"
navbar
onClick={() => (leftFloatingPanelOpened = false)}
>
Close
</Link>
</Navbar>
<Block class="space-y-4">
<p>Here comes left panel.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris,
eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis
dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et
eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare
consequat nunc viverra pellentesque. Aenean semper eu massa sit amet
aliquam. Integer et neque sed libero mollis elementum at vitae ligula.
Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus
lectus.
</p>
</Block>
</Page>
</Panel>

<Panel
side="right"
floating
opened={rightFloatingPanelOpened}
onBackdropClick={() => (rightFloatingPanelOpened = false)}
>
<Page>
<Navbar title="Right Panel">
<Link
slot="right"
navbar
onClick={() => (rightFloatingPanelOpened = false)}
>
Close
</Link>
</Navbar>
<Block class="space-y-4">
<p>Here comes right panel.</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula.
Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh,
suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor
vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend
sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec
libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem,
suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue
massa quis faucibus. Vestibulum nunc eros, convallis blandit dui sit
amet, gravida adipiscing libero.
</p>
</Block>
</Page>
</Panel>
</Page>
79 changes: 79 additions & 0 deletions kitchen-sink/vue/pages/SidePanels.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@
<k-button @click="() => (rightPanelOpened = true)">Right Panel</k-button>
</k-block>

<k-block-title>Floating Panels</k-block-title>
<k-block strong class="flex space-x-4">
<k-button @click="() => (leftFloatingPanelOpened = true)"
>Left Panel</k-button
>
<k-button @click="() => (rightFloatingPanelOpened = true)"
>Right Panel</k-button
>
</k-block>

<k-panel
side="left"
:opened="leftPanelOpened"
Expand Down Expand Up @@ -78,6 +88,69 @@
</k-block>
</k-page>
</k-panel>

<k-panel
side="left"
floating
:opened="leftFloatingPanelOpened"
@backdropclick="() => (leftFloatingPanelOpened = false)"
>
<k-page>
<k-navbar title="Left Panel">
<template #right>
<k-link navbar @click="() => (leftFloatingPanelOpened = false)">
Close
</k-link>
</template>
</k-navbar>
<k-block class="space-y-4">
<p>Here comes left panel.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris,
eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis
dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu
et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare
consequat nunc viverra pellentesque. Aenean semper eu massa sit amet
aliquam. Integer et neque sed libero mollis elementum at vitae
ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a
faucibus lectus.
</p>
</k-block>
</k-page>
</k-panel>

<k-panel
side="right"
floating
:opened="rightFloatingPanelOpened"
@backdropclick="() => (rightFloatingPanelOpened = false)"
>
<k-page>
<k-navbar title="Right Panel">
<template #right>
<k-link navbar @click="() => (rightFloatingPanelOpened = false)">
Close
</k-link>
</template>
</k-navbar>
<k-block class="space-y-4">
<p>Here comes right panel.</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula.
Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh,
suscipit in consequat vel, feugiat sed quam. Nam risus libero,
auctor vel tristique ac, malesuada ut ante. Sed molestie, est in
eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros
sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce
dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque
tempor congue massa quis faucibus. Vestibulum nunc eros, convallis
blandit dui sit amet, gravida adipiscing libero.
</p>
</k-block>
</k-page>
</k-panel>
</k-page>
</template>
<script>
Expand All @@ -88,6 +161,7 @@
kNavbarBackLink,
kPanel,
kBlock,
kBlockTitle,
kLink,
kButton,
} from 'konsta/vue';
Expand All @@ -101,15 +175,20 @@
kNavbarBackLink,
kPanel,
kBlock,
kBlockTitle,
kLink,
kButton,
},
setup() {
const leftPanelOpened = ref(false);
const rightPanelOpened = ref(false);
const leftFloatingPanelOpened = ref(false);
const rightFloatingPanelOpened = ref(false);
return {
leftPanelOpened,
rightPanelOpened,
leftFloatingPanelOpened,
rightFloatingPanelOpened,
isPreview: document.location.href.includes('examplePreview'),
history: window.history,
};
Expand Down
3 changes: 2 additions & 1 deletion src/react/components/Panel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const Panel = forwardRef((props, ref) => {
side = 'left',
opened,
backdrop = true,
floating = false,
onBackdropClick,

ios,
Expand Down Expand Up @@ -49,7 +50,7 @@ const Panel = forwardRef((props, ref) => {
};

const c = themeClasses(
PanelClasses({ ...props, size }, colors, className),
PanelClasses({ ...props, size, floating }, colors, className),
className
);

Expand Down
27 changes: 19 additions & 8 deletions src/shared/classes/PanelClasses.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,38 @@ import { cls } from '../cls.js';
import { positionClass } from '../position-class.js';

export const PanelClasses = (props, colors, classes) => {
const { size } = props;
const { size, floating } = props;
return {
base: {
common: cls(
'top-0 transition-transform transform duration-400 z-40 max-w-full max-h-full overflow-hidden',
'transition-transform transform duration-400 z-40 max-w-full overflow-hidden',
floating ? 'top-2-safe bottom-2-safe h-auto' : 'top-0 max-h-full',
colors.bg,
positionClass('fixed', classes),
size
),
ios: '',
material: 'shadow-2xl',
material: '',
},
left: {
common: cls('no-safe-areas-right left-0'),
opened: 'translate-x-0',
closed: '-translate-x-full',
common: cls(
'no-safe-areas-right',
floating ? 'right-full -mr-2' : 'right-full'
),
ios: floating ? 'rounded-2xl' : '',
material: floating ? 'rounded-2xl' : 'rounded-r-2xl',
opened: 'translate-x-full',
closed: '-translate-x-2',
},
right: {
common: cls('no-safe-areas-left left-full'),
common: cls(
'no-safe-areas-left',
floating ? 'left-full -ml-2' : 'left-full'
),
ios: floating ? 'rounded-2xl' : '',
material: floating ? 'rounded-2xl' : 'rounded-l-2xl',
opened: '-translate-x-full',
closed: 'translate-x-0',
closed: 'translate-x-2',
},
backdrop: {
common:
Expand Down
Loading

0 comments on commit 0511aba

Please sign in to comment.