Skip to content

Commit c6bd3bc

Browse files
hynes-dialpadhynes-dialpad
authored
feat(resizable): DLT-2097 add DtResizable panel layout component (#1162)
1 parent 546677b commit c6bd3bc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+10293
-2826
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,4 @@ SKILLS_TODO*.md
8080
*.bak
8181
*.old
8282
*.deprecated
83+
.claude/scheduled_tasks.lock

‎apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizable.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="d-w100p" style="height: 300px;">
3+
<dt-resizable>
4+
<dt-resizable-panel id="ex-sidebar" initial-size="25p" user-min-size="825">
5+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-purple-100">
6+
<span class="d-fs-200 d-fw-bold d-fc-purple-400">Sidebar</span>
7+
</dt-stack>
8+
</dt-resizable-panel>
9+
<dt-resizable-handle />
10+
<dt-resizable-panel id="ex-content">
11+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-gold-100">
12+
<span class="d-fs-200 d-fw-bold d-fc-gold-400">Content</span>
13+
</dt-stack>
14+
</dt-resizable-panel>
15+
</dt-resizable>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default { name: 'ExampleResizable' };
21+
</script>

‎apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableCollapsible.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="d-w100p" style="height: 300px;">
3+
<dt-resizable @panel-collapse="onPanelCollapse">
4+
<dt-resizable-panel
5+
id="exc-sidebar"
6+
initial-size="25p"
7+
user-min-size="825"
8+
collapsible
9+
:collapsed="isCollapsed"
10+
>
11+
<dt-stack class="d-w100p d-h100p d-bgc-purple-100">
12+
<dt-stack direction="row" align="center" justify="end" class="d-px16 d-py8 d-bb d-bc-default">
13+
<button class="d-btn d-btn--sm" @click="isCollapsed = true">
14+
Close sidebar
15+
</button>
16+
</dt-stack>
17+
<dt-stack align="center" justify="center" class="d-fl1">
18+
<span class="d-fs-200 d-fw-bold d-fc-purple-400">Sidebar</span>
19+
</dt-stack>
20+
</dt-stack>
21+
</dt-resizable-panel>
22+
<dt-resizable-handle />
23+
<dt-resizable-panel id="exc-content">
24+
<dt-stack class="d-w100p d-h100p d-bgc-gold-100">
25+
<dt-stack
26+
v-if="isCollapsed"
27+
direction="row"
28+
align="center"
29+
class="d-px16 d-py8 d-bb d-bc-default"
30+
>
31+
<button class="d-btn d-btn--sm" @click="isCollapsed = false">
32+
Open sidebar
33+
</button>
34+
</dt-stack>
35+
<dt-stack align="center" justify="center" class="d-fl1">
36+
<span class="d-fs-200 d-fw-bold d-fc-gold-400">Content</span>
37+
</dt-stack>
38+
</dt-stack>
39+
</dt-resizable-panel>
40+
</dt-resizable>
41+
</div>
42+
</template>
43+
44+
<script>
45+
export default {
46+
name: 'ExampleResizableCollapsible',
47+
data () {
48+
return { isCollapsed: false };
49+
},
50+
51+
methods: {
52+
onPanelCollapse (panelId, collapsed) {
53+
if (panelId === 'exc-sidebar') {
54+
this.isCollapsed = collapsed;
55+
}
56+
},
57+
},
58+
};
59+
</script>

‎apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableOffset.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="d-w100p" style="height: 300px;">
3+
<dt-resizable offset-element="#doc-demo-toolbar">
4+
<div
5+
id="doc-demo-toolbar"
6+
class="d-ps-absolute d-t0 d-l0 d-r0 d-zi-base1 d-d-flex d-ai-center
7+
d-px16 d-bgc-secondary d-bb d-bc-default d-bgo50"
8+
style="height: 48px;"
9+
>
10+
<span class="d-fs-100">Fixed Toolbar (48px)</span>
11+
</div>
12+
<dt-resizable-panel id="exo-left" initial-size="50p" class="d-bgc-purple-100">
13+
<span class="d-fs-200 d-fw-bold d-fc-purple-400">Left Panel</span>
14+
</dt-resizable-panel>
15+
<dt-resizable-handle />
16+
<dt-resizable-panel id="exo-right" initial-size="50p" class="d-bgc-gold-100">
17+
<span class="d-fs-200 d-fw-bold d-fc-gold-400">Right Panel</span>
18+
</dt-resizable-panel>
19+
</dt-resizable>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default { name: 'ExampleResizableOffset' };
25+
</script>

‎apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableThreePanel.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="d-w100p" style="height: 300px;">
3+
<dt-resizable>
4+
<dt-resizable-panel id="ex3-sidebar" initial-size="20p" user-min-size="825">
5+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-purple-100">
6+
<span class="d-fs-200 d-fw-bold d-fc-purple-400">Sidebar</span>
7+
</dt-stack>
8+
</dt-resizable-panel>
9+
<dt-resizable-handle />
10+
<dt-resizable-panel id="ex3-content">
11+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-gold-100">
12+
<span class="d-fs-200 d-fw-bold d-fc-gold-400">Content</span>
13+
</dt-stack>
14+
</dt-resizable-panel>
15+
<dt-resizable-handle />
16+
<dt-resizable-panel id="ex3-details" initial-size="25p" user-min-size="825">
17+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-green-100">
18+
<span class="d-fs-200 d-fw-bold d-fc-green-400">Details</span>
19+
</dt-stack>
20+
</dt-resizable-panel>
21+
</dt-resizable>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default { name: 'ExampleResizableThreePanel' };
27+
</script>

‎apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableVertical.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="d-w100p" style="height: 300px;">
3+
<dt-resizable direction="column">
4+
<dt-resizable-panel id="exv-top" initial-size="40p">
5+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-purple-100">
6+
<span class="d-fs-200 d-fw-bold d-fc-purple-400">Top Panel</span>
7+
</dt-stack>
8+
</dt-resizable-panel>
9+
<dt-resizable-handle />
10+
<dt-resizable-panel id="exv-bottom">
11+
<dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-gold-100">
12+
<span class="d-fs-200 d-fw-bold d-fc-gold-400">Bottom Panel</span>
13+
</dt-stack>
14+
</dt-resizable-panel>
15+
</dt-resizable>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default { name: 'ExampleResizableVertical' };
21+
</script>

‎apps/dialtone-documentation/docs/_data/site-nav.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -733,6 +733,10 @@
733733
"text": "Radio Group",
734734
"link": "/components/radio-group.html"
735735
},
736+
{
737+
"text": "Resizable",
738+
"link": "/components/resizable.html"
739+
},
736740
{
737741
"text": "Rich Text Editor",
738742
"link": "/components/rich-text-editor.html"

0 commit comments

Comments
 (0)