Skip to content

Commit

Permalink
feat(shell-panel): adds utility class for properly setting the height…
Browse files Browse the repository at this point in the history 
… of external elements and adds related demo apps (#2028)

* feat: adds utility class for properly setting the height of external elements. adds related demo apps. (#1927)

* moves match-height class into ShellPanel. updates demo apps (#1927)

* removes unneeded style. adds readme and usage doc. (#1927)

* doc update.
  • Loading branch information
@asangma
asangma authored Apr 23, 2021
1 parent 5c28273 commit 4ed609a
Show file tree
Hide file tree
Showing 6 changed files with 868 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/components/calcite-shell-panel/calcite-shell-panel.scss
View file
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
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
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
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

0 comments on commit 4ed609a

Please sign in to comment.