Skip to content
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

feat(shell-panel): adds utility class for properly setting the height of external elements and adds related demo apps #2028

Merged
merged 5 commits into from
Apr 23, 2021
Merged

feat(shell-panel): adds utility class for properly setting the height of external elements and adds related demo apps #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1fd66da
feat: adds utility class for properly setting the height of external …
asangma Apr 7, 2021
a234256
moves match-height class into ShellPanel. updates demo apps (#1927)
asangma Apr 12, 2021
e983770
removes unneeded style. adds readme and usage doc. (#1927)
asangma Apr 12, 2021
0db4603
Merge branch 'master' into asangma/global-class-match-height-1927
asangma Apr 23, 2021
84b1e4a
doc update.
asangma Apr 23, 2021
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
6 changes: 6 additions & 0 deletions src/components/calcite-shell-panel/calcite-shell-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@
max-width: unset;
}

::slotted(.calcite-match-height) {
@apply flex
flex-auto
overflow-hidden;
}

.content {
@apply items-stretch
self-stretch
Expand Down
5 changes: 5 additions & 0 deletions src/components/calcite-shell-panel/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ Renders a panel with an action bar.
| | A slot for adding content to the shell panel. |
| `"action-bar"` | A slot for adding a `calcite-action-bar` to the panel. |

## Utility class
| Class | Description |
| ---------------------- | --------------------------------------------------------------------------------------------- |
| `calcite-match-height` | Provides correct height and scrolling behavior for non-Calcite elements in the generic slot. |

---

_Built with [StencilJS](https://stenciljs.com/)_
52 changes: 52 additions & 0 deletions src/components/calcite-shell-panel/usage/basic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,55 @@ Renders a panel with an action bar.
</calcite-action-bar>
</calcite-shell-panel>
```

#### With a CalcitePanel.

```html
<calcite-shell-panel>
<calcite-action-bar slot="action-bar">
<calcite-action text="Add" icon="plus"></calcite-action>
<calcite-action text="Save" icon="save"></calcite-action>
<calcite-action text="Layers" icon="layers"></calcite-action>
</calcite-action-bar>
<calcite-panel>
...
</calcite-panel>
</calcite-shell-panel>
```
#### With a CalciteFlow.

```html
<calcite-shell-panel>
<calcite-action-bar slot="action-bar">
<calcite-action text="Add" icon="plus"></calcite-action>
<calcite-action text="Save" icon="save"></calcite-action>
<calcite-action text="Layers" icon="layers"></calcite-action>
</calcite-action-bar>
<calcite-flow>
<calcite-panel>
...
</calcite-panel>
<calcite-panel>
...
</calcite-panel>
</calcite-flow>
</calcite-shell-panel>
```
#### With a custom element wrapping a CalcitePanel.

Add `calcite-match-height` to a wrapping element to ensure proper height, scrolling, and sticky behavior (header, footer, fab). Note that multiple levels of nesting is not supported.

```html
<calcite-shell-panel>
<calcite-action-bar slot="action-bar">
<calcite-action text="Add" icon="plus"></calcite-action>
<calcite-action text="Save" icon="save"></calcite-action>
<calcite-action text="Layers" icon="layers"></calcite-action>
</calcite-action-bar>
<your-custom-element class="calcite-match-height">
<calcite-panel>
...
</calcite-panel>
</your-custom-element>
</calcite-shell-panel>
```
250 changes: 250 additions & 0 deletions src/demos/shell/demo-app-advanced-2-shell-header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />

<title>Calcite Components: calcite-shell</title>

<script src="../_assets/head.js"></script>

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
main,
.shell-container {
position: relative;
width: 100%;
height: 100%;
}
</style>
<style>
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<script>
require(["esri/WebMap", "esri/views/MapView", "esri/widgets/LayerList"], function (WebMap, MapView, LayerList) {
const webmap = new WebMap({
portalItem: {
id: "cc316ca9e0824970ad29ac558161d42d"
}
});
const view = new MapView({
container: "viewDiv",
map: webmap
});
view.when(function () {
var layerList = new LayerList({
view: view,
selectionEnabled: true,
container: "layerlist-container"
});
});
});
</script>
</head>
<body>
<main>
<div class="shell-container">
<calcite-shell content-behind>
<calcite-shell-panel slot="primary-panel" position="start" detached>
<calcite-panel
id="shell-floating-panel"
slot="shell-floating-panel"
heading="Anchored Shell Floating Panel"
placement="anchor"
hidden
><span> Shell Floating Panel Content </span>
</calcite-panel>
<calcite-panel
id="shell-floating-panel-over"
slot="shell-floating-panel"
heading="Over Shell Floating Panel"
placement="over"
hidden
><span> Shell Floating Panel Content </span>
</calcite-panel>

<calcite-action-bar slot="action-bar" theme="dark">
<calcite-action-group>
<calcite-action text="Add">
<calcite-icon icon="plus" scale="s"></calcite-icon>
</calcite-action>
<calcite-action text="Save" disabled>
<calcite-icon icon="save" scale="s"></calcite-icon>
</calcite-action>
<calcite-action text="Layers" active>
<calcite-icon icon="layers" scale="s"></calcite-icon>
</calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action text="An unbelievably long title">
<calcite-icon icon="plus" scale="s"></calcite-icon>
</calcite-action>
<calcite-action text="Save" disabled>
<calcite-icon icon="save" scale="s"></calcite-icon>
</calcite-action>
<calcite-action text="Layers">
<calcite-icon icon="layers" scale="s"></calcite-icon>
</calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-panel heading="Layers" height-scale="l">
<div id="layerlist-container"></div>
</calcite-panel>
</calcite-shell-panel>

<calcite-shell-panel slot="contextual-panel" position="end">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
<calcite-tooltip slot="menu-tooltip">Bits and bobs.</calcite-tooltip>
<calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
<calcite-action text="Styles" icon="shapes"> </calcite-action>
<calcite-action text="Filter" icon="layer-filter"> </calcite-action>
<calcite-action text="Configure pop-ups" icon="popup"> </calcite-action>
<calcite-action text="Configure attributes" icon="feature-details"> </calcite-action>
<calcite-action text="Labels" icon="label" active> </calcite-action>
<calcite-action text="Table" icon="table"> </calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" disabled>
<calcite-icon icon="save" scale="s"></calcite-icon>
</calcite-action>
<calcite-action text="Layers">
<calcite-icon icon="layers" scale="s"></calcite-icon>
</calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action text="Tips" id="tip-manager-button">
<calcite-icon icon="lightbulb" scale="s"></calcite-icon>
</calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-button
slot="header"
color="inverse"
alignment="icon-end-space-between"
icon-end="caret-down"
width="full"
>
It's a header button with really long text that should wrap, you know?
</calcite-button>
<something class="calcite-match-height">
<calcite-panel
heading="Panel with Header"
summary="Popular Demographics in the United States (Beta) - County"
>
<calcite-action slot="menu-actions" text="Switch layer" icon="caret-down"></calcite-action>

<section class="enable-label">
<span class="enable-label__text">Enable labels</span>
<calcite-switch scale="s" switched></calcite-switch>
</section>
<calcite-block heading="2018 Total Population (Esri)" summary="County - Town" open collapsible>
<calcite-icon icon="label" scale="m" slot="icon"></calcite-icon>
<calcite-action label="ellipsis" slot="control" icon="ellipsis" scale="s"></calcite-action>
<section class="form-section">
<calcite-label scale="s" for="">
Label attribute
<calcite-input type="text" value="2018 Total Population (Esri)" />
</calcite-label>
</section>
<section class="form-section">
<calcite-button
width="full"
scale="s"
appearance="clear"
color="inverse"
class="combo-button__main"
text="Edit label style"
icon-end="pencil"
>
Edit label
</calcite-button>
</section>
</calcite-block>
<calcite-block heading="NAME" summary="Continent - State province" open collapsible>
<calcite-icon icon="label" scale="m" slot="icon"></calcite-icon>
<calcite-action label="ellipsis" slot="control" icon="ellipsis" scale="s"></calcite-action>
<section class="form-section">
<section class="form-section">
<calcite-label scale="s" for="">
Label attribute
<calcite-input type="text" value="NAME" />
</calcite-label>
</section>
<section class="form-section">
<calcite-button
width="full"
scale="s"
appearance="clear"
color="inverse"
class="combo-button__main"
text="Edit label style"
icon-end="pencil"
>
Edit label
</calcite-button>
</section>
</section>
</calcite-block>
<calcite-block
heading="2018 Total Households (Esri)"
summary="Streets - Small building"
open
collapsible
>
<calcite-icon icon="label" scale="m" slot="icon"></calcite-icon>
<calcite-action label="ellipsis" slot="control" icon="ellipsis" scale="s"></calcite-action>
<section class="form-section">
<section class="form-section">
<calcite-label scale="s" for="">
Label attribute
<calcite-input type="text" value="2018 Total Households (Esri)" />
</calcite-label>
</section>
<section class="form-section">
<calcite-button
width="full"
scale="s"
appearance="clear"
color="inverse"
class="combo-button__main"
text="Edit label style"
icon-end="pencil"
>
Edit label
</calcite-button>
</section>
</section>
</calcite-block>
<calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
<calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
Add label class
</calcite-tooltip>
<calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
<calcite-button slot="footer-actions" width="half">Done</calcite-button>
</calcite-panel>
</something>
</calcite-shell-panel>
<div slot="shell-header">
<header class="header">
<h2 class="heading">My App</h2>
</header>
</div>

<div id="viewDiv"></div>

<footer slot="shell-footer">Footer</footer>
</calcite-shell>
</div>
</main>
</body>
</html>
Loading