Skip to content

Commit

Permalink
Merge pull request #839 from contiamo/fix/page-without-title
Browse files Browse the repository at this point in the history 
**Fix:** Support Layout cases where Page has no title
  • Loading branch information
@fabien0102
fabien0102 authored Nov 21, 2018
2 parents 729ad5f + f0f8faf commit 845fbd1
Show file tree
Hide file tree
Showing 2 changed files with 220 additions and 8 deletions.
209 changes: 209 additions & 0 deletions src/Layout/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,215 @@ Revealing the layers to my soul
</div>
```

### Without a Page Title

This is an example of a basic layout _without_ a page title. Content at the bottom should be correctly visible.

```jsx
const sidebar = (
<Sidenav>
<SidenavHeader condensed icon="Home" label="Project Home" />
<SidenavHeader label="The Prize" active>
<SidenavItem label="The First Prize" icon="Settings" />
<SidenavItem label="The Second Prize" icon="Settings" />
<SidenavItem label="The Third Prize" icon="Settings" />
</SidenavHeader>
<SidenavHeader label="Let It Snow" active>
<SidenavItem label="The First Prize" icon="Settings" />
<SidenavItem label="The Second Prize" icon="Settings" />
<SidenavItem label="The Third Prize" icon="Settings" />
</SidenavHeader>
<SidenavHeader label="Let It Snow" active>
<SidenavItem label="The First Prize" icon="Settings" />
<SidenavItem label="The Second Prize" icon="Settings" />
<SidenavItem label="The Third Prize" icon="Settings" />
</SidenavHeader>
</Sidenav>
)

// Container must set the height explicitly.
// This component will set height to 100%.
;<div style={{ height: 600 }}>
<Layout
sidenav={sidebar}
header={
<HeaderBar
logo={<Logo name="Contiamo" />}
main={
<HeaderMenu
withCaret
items={[
{ key: "project1", label: "Project 1" },
{ key: "project2", label: "Project 2" },
{ key: "project3", label: "Project 3" },
]}
>
Project 1
</HeaderMenu>
}
end={
<HeaderMenu
items={[{ key: "account", label: "My account" }, { key: "log-out", label: "Log out" }]}
align="right"
>
Imogen Mason <Avatar name="Imogen Mason" />
</HeaderMenu>
}
/>
}
main={
<Page
actions={
<Button condensed color="ghost">
Help
</Button>
}
>
{({ confirm, modal }) => (
<>
{Array(10)
.fill("Hello!!!!")
.map((value, i) => (
<Card key={i}>{value}</Card>
))}

<Card title="Partial Kanye Lyrics">
<div>
<Button
color="#314865"
textColor="#2bda64"
onClick={() => {
confirm({
title: "Yikes",
body: (
<Form>
<Body>You can only add users who are already in your organization.</Body>
<Autocomplete
onResultClick={result => alert("Thanks for choosing " + result.label)}
value="Click me for results..."
results={[
{ label: "Tweakin', tweakin' off that 2CB, huh?" },
{ label: "Is he gon' make it? TBD, huh" },
{ label: "Thought I was gon' run, DMC, huh?" },
{ label: "I done died and lived again on DMT, huh" },
]}
fullWidth
label="Sometimes I scare myself, myself"
/>
</Form>
),
})
}}
>
Open a Confirm
</Button>
<Button
color="#f89663"
onClick={() => {
confirm({
fullSize: true,
title: "Waves",
body: `Turn it up!
Waves don't die
Let me crash here for the moment
I don't need to own it
No lie
Waves don't die
Let me crash here for a moment
I don't, I don't need to own...
Sun don't shine in the shade (turn it up!)
Bird can't fly in a cage (turn it up!)
Even when somebody go away (turn it up!)
The feelings don't really go away
That's just the wave (yeah)`
.split("\n")
.map(line => (
<>
{line}
<br />
</>
)),
})
}}
>
Open a full-size Confirm
</Button>
<Button
color="#613f90"
textColor="#fb059e"
onClick={() => {
modal({
title: "Stronger",
body: `N-now th-that that don't kill me
Can only make me stronger
I need you to hurry up now
'Cause I can't wait much longer
I know I got to be right now
'Cause I can't get much wronger
Man I've been waiting all night now
That's how long I been on ya
I need you right now
Let's get lost tonight`
.split("\n")
.map(line => (
<>
{line}
<br />
</>
)),
})
}}
>
Open a Modal
</Button>
<Button
color="#f89663"
onClick={() => {
modal({
fullSize: true,
title: "FML",
body: `I been waiting for a minute
For my lady
I been living without limits
As far as my business
I'm the only one that's in control
I been feeling all I've given
For my children
I will die for those I love
God, I'm willing
To make this my mission
Give up the women
Before I lose half of what I own
I been thinking
About my vision
Pour out my feelings
Revealing the layers to my soul, my soul
The layers to my soul
Revealing the layers to my soul
`
.split("\n")
.map(line => (
<>
{line}
<br />
</>
)),
})
}}
>
Open a full-size Modal
</Button>
</div>
</Card>
</>
)}
</Page>
}
/>
</div>
```

### Example with Compact Sidenav

```jsx
Expand Down
19 changes: 11 additions & 8 deletions src/Page/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,15 @@ const TitleContainer = styled("div")(({ theme }) => ({
fontWeight: theme.font.weight.medium,
}))

const ViewContainer = styled("div")<{ isInTab?: boolean; isTitleCondensed?: boolean }>(
({ theme, isInTab, isTitleCondensed }) => ({
height: `calc(100% - ${isInTab && !isTitleCondensed ? theme.titleHeight + tabsBarHeight : theme.titleHeight}px)`,
overflow: "hidden",
position: "relative",
}),
const ViewContainer = styled("div")<{ isInTab?: boolean; isTitleCondensed?: boolean; hasTitle?: boolean }>(
({ theme, isInTab, isTitleCondensed, hasTitle }) => {
const calculatedTitleOffset = isInTab && !isTitleCondensed ? theme.titleHeight + tabsBarHeight : theme.titleHeight
return {
height: hasTitle ? `calc(100% - ${calculatedTitleOffset}px)` : "100%",
overflow: "hidden",
position: "relative",
}
},
)

const ActionsContainer = styled("div")<{ actionPosition: PageProps["actionsPosition"] }>(
Expand Down Expand Up @@ -162,7 +165,7 @@ class Page extends React.Component<PageProps, Readonly<typeof initialState>> {
{!condensedTitle && tabsBar}
</TitleBar>
)}
<ViewContainer isInTab isTitleCondensed={condensedTitle}>
<ViewContainer isInTab isTitleCondensed={condensedTitle} hasTitle={Boolean(title)}>
{activeChildren}
</ViewContainer>
</>
Expand All @@ -184,7 +187,7 @@ class Page extends React.Component<PageProps, Readonly<typeof initialState>> {
</TitleContainer>
</TitleBar>
)}
<ViewContainer>
<ViewContainer hasTitle={Boolean(title)}>
<PageContent areas={areas} fill={fill}>
{modalConfirmContext => {
const resolvedChildren = typeof children === "function" ? children(modalConfirmContext) : children
Expand Down

0 comments on commit 845fbd1

Please sign in to comment.