diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
index aa7fc4374a..620148f1ec 100644
--- a/libs/components/src/app-shell/app-shell.scss
+++ b/libs/components/src/app-shell/app-shell.scss
@@ -68,6 +68,7 @@
height: 100vh;
grid-area: main;
overflow: auto;
+ transition: margin-left 200ms ease-in-out;
.main-wrapper {
margin: 0 auto;
@@ -99,6 +100,10 @@
.cov-drawer--open & {
margin-left: 256px;
}
+
+ .cov-help--open & {
+ margin-right: var(--cv-help-width, 320px);
+ }
}
@media only screen and (max-width: 1600px) {
@@ -112,7 +117,7 @@
grid-area: help;
position: fixed;
right: 0;
- width: var(--help-width, 320px);
+ width: var(--cv-help-width, 320px);
height: 100vh;
overflow-y: auto;
@@ -144,6 +149,14 @@
}
}
+ :host([resizing]) .resize-handle {
+ display: block;
+ }
+
+ :host(:not([resizing])) .resize-handle {
+ display: none;
+ }
+
.cov-help--closed & {
width: 0;
border: none;
@@ -291,6 +304,7 @@ nav.navigation {
.mdc-drawer--open {
width: 256px;
+ transition-duration: 200ms;
}
.mdc-drawer--opening {
diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js
index 3a4683c72d..1dc0ee84e5 100644
--- a/libs/components/src/app-shell/app-shell.stories.js
+++ b/libs/components/src/app-shell/app-shell.stories.js
@@ -22,6 +22,7 @@ export default {
args: {
contained: true,
fullWidth: false,
+ resizing: true,
},
argTypes: {
navClick: { action: 'clicked' },
@@ -53,6 +54,7 @@ const Template = ({
forcedOpen = false,
contained = true,
fullWidth = false,
+ resizing = true,
}) => {
document.addEventListener(
'DOMContentLoaded',
@@ -102,6 +104,8 @@ const Template = ({
${forcedOpen ? `forcedOpen open` : ''}
${contained ? `contained` : ''}
${fullWidth ? `fullWidth` : ''}
+ ${resizing ? `resizing` : ''}
+
>
@@ -312,3 +316,8 @@ export const fullWidth = Template.bind({});
fullWidth.args = {
fullWidth: true,
};
+
+export const resizing = Template.bind({});
+resizing.args = {
+ resizing: true,
+};
diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts
index d2717f0b71..f53e65873d 100644
--- a/libs/components/src/app-shell/app-shell.ts
+++ b/libs/components/src/app-shell/app-shell.ts
@@ -60,6 +60,12 @@ export class CovalentAppShell extends DrawerBase {
@property({ type: Boolean, reflect: true })
helpOpen = false;
+ /**
+ * Make help resizable with drag/drop handle
+ */
+ @property({ type: Boolean, reflect: true })
+ helpResizable = false;
+
/**
* Wrap the main area with a contained card surface
*/
@@ -82,13 +88,13 @@ export class CovalentAppShell extends DrawerBase {
constructor() {
super();
+ this.resizeEvent();
this._resize = this._resize.bind(this);
this._stopResize = this._stopResize.bind(this);
this._startResizing = this._startResizing.bind(this);
this._setupEventListeners();
window.addEventListener('DOMContentLoaded', () => {
this.setupHelpPanelListeners();
- this.resizeEvent();
const storedWidth = localStorage.getItem('helpWidth');
if (storedWidth) {
this.helpWidth = parseInt(storedWidth, 10);
@@ -141,27 +147,9 @@ export class CovalentAppShell extends DrawerBase {
});
}
- override firstUpdated() {
- const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
- if (resizeHandle) {
- resizeHandle.addEventListener('mousedown', (event) => {
- if (event instanceof MouseEvent) {
- this._startResizing(event);
- }
- });
-
- resizeHandle.addEventListener('dblclick', () => {
- if (this.helpWidth > 320 || this.helpWidth !== 320) {
- this.helpWidth = 320;
- localStorage.setItem('helpWidth', '320');
- this.updateHelpPanelWidth();
- this.requestUpdate();
- }
- });
- }
- }
-
private _startResizing(event: MouseEvent) {
+ if (!this.helpResizable) return;
+
const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
if (event.target === resizeHandle) {
this._startX = event.clientX;
@@ -170,6 +158,15 @@ export class CovalentAppShell extends DrawerBase {
document.addEventListener('mouseup', this._stopResize);
(event.target as HTMLElement).classList.add('resizing');
}
+
+ resizeHandle?.addEventListener('dblclick', () => {
+ if (this.helpWidth > 320 || this.helpWidth !== 320) {
+ this.helpWidth = 320;
+ localStorage.setItem('helpWidth', '320');
+ this.updateHelpPanelWidth();
+ this.requestUpdate();
+ }
+ });
}
private _resize(event: MouseEvent) {
@@ -213,13 +210,10 @@ export class CovalentAppShell extends DrawerBase {
}
private updateHelpPanelWidth() {
- const helpPanel = this.shadowRoot?.querySelector('.help') as HTMLElement;
- const mainPanel = this.shadowRoot?.querySelector('.main') as HTMLElement;
-
- if (helpPanel && mainPanel) {
- helpPanel.style.setProperty('--help-width', `${this.helpWidth}px`);
- mainPanel.style.marginRight = `${this.helpWidth}px`;
- }
+ const appShell = this.shadowRoot?.querySelector(
+ '.app-shell'
+ ) as HTMLElement;
+ appShell?.style.setProperty('--cv-help-width', `${this.helpWidth}px`);
}
private _handleMenuClick() {
@@ -357,7 +351,9 @@ export class CovalentAppShell extends DrawerBase {
-
+ ${this.helpResizable
+ ? html`
`
+ : nothing}
diff --git a/package-lock.json b/package-lock.json
index 1ff88d78b4..dfeafc700e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,7 +82,7 @@
"@commitlint/cli": "^18.4.3",
"@commitlint/config-angular": "^16.2.1",
"@commitlint/config-conventional": "^16.2.1",
- "@covalent/tokens": "*",
+ "@covalent/tokens": "latest",
"@nx/angular": "17.3.1",
"@nx/cypress": "17.3.1",
"@nx/eslint": "17.3.1",