Skip to content

Percentage sizes #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 24, 2019
Merged

Percentage sizes #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1392e3
WIP to allow percentage sizes to be specified on anchored spaces
aeagle Jul 24, 2019
ac79b08
Added package locks for npm
aeagle Jul 24, 2019
f0ebbee
Added support for percentage sizing
aeagle Jul 24, 2019
4eb8fd7
v0.1.4
aeagle Jul 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15,470 changes: 15,470 additions & 0 deletions demo/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions demo/src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ pre {
display: none;
}

.all-content {
top: 0px !important;
}

.main {
position: fixed;
left: inherit !important;
Expand Down
120 changes: 94 additions & 26 deletions demo/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,9 @@ const App: React.FC = () => {
<Anchor.Link href="#non-resizable" title="Non-resizable" />
<Anchor.Link href="#resizable" title="Resizable" />
<Anchor.Link href="#nested" title="Nested" />
<Anchor.Link href="#stacked" title="Stacked" />
<Anchor.Link href="#scrollable" title="Scrollable" />
<Anchor.Link href="#percent" title="Percent sizing" />
<Anchor.Link href="#stacked" title="Stacked" />
<Anchor.Link href="#sizeinfo" title="Sizing information" />
<Anchor.Link href="#changes" title="Version history" />
</Anchor>
Expand Down Expand Up @@ -146,13 +147,13 @@ const App: React.FC = () => {
</SyntaxHighlighter>

<Space.Fixed height={400}>
<Space.Left size={100} style={{ backgroundColor: '#e0eae0' }}>
<Space.Left size="20%" style={{ backgroundColor: '#e0eae0' }}>
{Description("Left")}
</Space.Left>
<Space.Fill style={{ backgroundColor: '#eee0e0' }}>
{Description("Fill")}
</Space.Fill>
<Space.Right size={200} style={{ backgroundColor: '#e0eee0' }}>
<Space.Right size="20%" style={{ backgroundColor: '#e0eee0' }}>
{Description("Right")}
</Space.Right>
</Space.Fixed>
Expand Down Expand Up @@ -186,7 +187,7 @@ const App: React.FC = () => {

</Tabs.TabPane>
</Tabs>

<h2 id="resizable">Resizable spaces</h2>

<p>
Expand Down Expand Up @@ -376,6 +377,75 @@ const App: React.FC = () => {

</Tabs.TabPane>
</Tabs>

<h2 id="scrollable">Scrollable spaces</h2>

<p>
By default, all spaces hide content that overflows the space. To make a particular space scrollable,
set the scrollable property to true. The space will then be scrollable horizontally or vertically if
the content overflows the space.
</p>

<h2 id="percent">Percentage sizing</h2>

<p>
Anchored spaces support sizes as percentages. The specified percentage will be used as the initial size
of the space. Resizing a space will still adjust the space size.
</p>

<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Percentage left" key="1">

<SyntaxHighlighter language="html">
{
"const App = () => (\r\n" +
" <Space.Fixed height={400}>\r\n" +
" <Space.LeftResizable size=\"50%\" />\r\n" +
" <Space.Fill />\r\n" +
" </Space.Fixed>\r\n" +
")"
}
</SyntaxHighlighter>

<Space.Fixed height={400}>
<Space.LeftResizable trackSize={true} size="50%" style={{ backgroundColor: '#e0eee0' }}>
{Description("Left 50%")}
</Space.LeftResizable>
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
{Description("Fill")}
</Space.Fill>
</Space.Fixed>

</Tabs.TabPane>

<Tabs.TabPane tab="Percentage left / right" key="2">

<SyntaxHighlighter language="html">
{
"const App = () => (\r\n" +
" <Space.Fixed height={400}>\r\n" +
" <Space.LeftResizable size=\"25%\" />\r\n" +
" <Space.Fill />\r\n" +
" <Space.RightResizable size=\"25%\" />\r\n" +
" </Space.Fixed>\r\n" +
")"
}
</SyntaxHighlighter>

<Space.Fixed height={400}>
<Space.LeftResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
{Description("Left 25%")}
</Space.LeftResizable>
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
{Description("Fill")}
</Space.Fill>
<Space.RightResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
{Description("Right 25%")}
</Space.RightResizable>
</Space.Fixed>

</Tabs.TabPane>
</Tabs>

<h2 id="stacked">Stacked spaces</h2>

Expand All @@ -392,45 +462,37 @@ const App: React.FC = () => {
{
"const App = () => (\r\n" +
" <Space.Fixed height={400}>\r\n" +
" <Space.LeftResizable size={75} order={1} />\r\n" +
" <Space.LeftResizable size={75} order={2} />\r\n" +
" <Space.LeftResizable size=\"10%\" order={1} />\r\n" +
" <Space.LeftResizable size=\"10%\" order={2} />\r\n" +
" <Space.Fill />\r\n" +
" <Space.RightResizable size={75} order={2} />\r\n" +
" <Space.RightResizable size={75} order={1} />\r\n" +
" <Space.RightResizable size=\"10%\" order={2} />\r\n" +
" <Space.RightResizable size=\"10%\" order={1} />\r\n" +
" </Space.Fixed>\r\n" +
")"
}
</SyntaxHighlighter>

<Space.Fixed height={400}>
<Space.LeftResizable trackSize={true} size={75} order={1} style={{ backgroundColor: '#e0eee0' }}>
<Space.LeftResizable trackSize={true} size="10%" order={1} style={{ backgroundColor: '#e0eee0' }}>
{Description("Left 1")}
</Space.LeftResizable>
<Space.LeftResizable trackSize={true} size={75} order={2} style={{ backgroundColor: '#e0eeee' }}>
<Space.LeftResizable trackSize={true} size="10%" order={2} style={{ backgroundColor: '#e0eeee' }}>
{Description("Left 2")}
</Space.LeftResizable>
<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
{Description("Fill")}
</Space.Fill>
<Space.RightResizable trackSize={true} size={75} order={2} style={{ backgroundColor: '#e0eeee' }}>
<Space.RightResizable trackSize={true} size="10%" order={2} style={{ backgroundColor: '#e0eeee' }}>
{Description("Right 2")}
</Space.RightResizable>
<Space.RightResizable trackSize={true} size={75} order={1} style={{ backgroundColor: '#e0eee0' }}>
<Space.RightResizable trackSize={true} size="10%" order={1} style={{ backgroundColor: '#e0eee0' }}>
{Description("Right 1")}
</Space.RightResizable>
</Space.Fixed>

</Tabs.TabPane>
</Tabs>

<h2 id="scrollable">Scrollable spaces</h2>

<p>
By default, all spaces hide content that overflows the space. To make a particular space scrollable,
set the scrollable property to true. The space will then be scrollable horizontally or vertically if
the content overflows the space.
</p>

<h2 id="sizeinfo">Getting size information for a space</h2>

<p>
Expand All @@ -454,27 +516,33 @@ const App: React.FC = () => {

<h2 id="changes">Version history</h2>

<p>
<div>
<strong>0.1.4</strong>
<ul>
<li>Add support for percentage sizing on anchored spaces</li>
</ul>
</div>
<div>
<strong>0.1.3</strong>
<ul>
<li>Added readme</li>
<li>Updated documentation</li>
</ul>
</p>
<p>
</div>
<div>
<strong>0.1.2</strong>
<ul>
<li>Removed ResizeSensor from spaces by default and now optionally allow live size updates with <strong>trackSize</strong> property</li>
<li>Added <strong>VerticallyCentered</strong> component to vertically centre content within space</li>
<li>Allow class names to be specified on top-level spaces <strong>ViewPort</strong> and <strong>Fixed</strong></li>
</ul>
</p>
<p>
</div>
<div>
<strong>0.1.0 - 0.1.1</strong>
<ul>
<li>Initial version</li>
</ul>
</p>
</div>

</Space.Fill>

Expand Down
2 changes: 1 addition & 1 deletion demo/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9184,7 +9184,7 @@ react-slick@~0.24.0:
resize-observer-polyfill "^1.5.0"

"react-spaces@file:../react-spaces":
version "0.1.2"
version "0.1.3"
dependencies:
css-element-queries "^1.2.1"
guid-typescript "^1.0.9"
Expand Down
Loading