Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3616bbb9a7 | |||
| 27c071f7dc | |||
| ac1ef4e497 | |||
| 9c61c0542b | |||
| 5c099c8057 | |||
| 82b4afa95a | |||
| 888430d55a | |||
| 85424d07cd |
36
changelog.md
36
changelog.md
@@ -1,5 +1,41 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-08 - 3.2.0 - feat(dees-simple-appdash,dees-simple-login,dees-terminal)
|
||||
Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config
|
||||
|
||||
- Standardize icon usage to Lucide prefixes in dees-simple-appdash; add fallback handling for legacy icon names
|
||||
- Revamped dees-simple-appdash sidebar: updated spacing, typography, header icon wrapper, scrollbar styling, section labels, hover/selected states, and visual indicators
|
||||
- Change 'Logout' label to 'Sign out' in dees-simple-appdash and add explicit status classes for controlbar (connected, terminal)
|
||||
- Improve terminal UX: smoother launch/close animations, updated shadow and sizing logic in dees-simple-appdash
|
||||
- Add background property to dees-terminal, sync it to a CSS variable and apply it to xterm theme for configurable terminal background
|
||||
- Redesign dees-simple-login: new header/subheader, card layout, spacing, and updated submit text to 'Sign in'
|
||||
- Bump devDependency @git.zone/tswatch to ^2.3.5
|
||||
|
||||
## 2025-12-08 - 3.1.2 - fix(DeesAppuiMainmenu, DeesAppuiSecondarymenu)
|
||||
Add position: relative to main and secondary app UI menus to fix positioning of overlays and tooltips
|
||||
|
||||
- ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts: add `position: relative` to host styles
|
||||
- ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts: add `position: relative` to host styles
|
||||
- Fixes incorrect positioning for absolutely positioned children (tooltips, overlays, badges) inside the main and secondary menus
|
||||
|
||||
## 2025-12-08 - 3.1.1 - fix(dees-appui)
|
||||
Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency
|
||||
|
||||
- Extracted inline demo markup into separate demo files: ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts and ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts and wired them up via imported demoFunc to reduce component size.
|
||||
- Moved collapse toggle button markup in both dees-appui-mainmenu and dees-appui-secondarymenu templates to after the main container to improve layout/stacking and focus behavior.
|
||||
- Adjusted collapsed logo/heading styles: removed extra padding/gap and hide logo text using display:none for a cleaner collapsed state.
|
||||
- Bumped devDependency @git.zone/tswatch from ^2.3.1 to ^2.3.2 in package.json.
|
||||
|
||||
## 2025-12-08 - 3.1.0 - feat(dees-appui)
|
||||
Add collapsible/compact mode to AppUI sidebars (mainmenu & secondarymenu) with toggles, tooltips and improved z-index stacking
|
||||
|
||||
- Add collapsed property to dees-appui-mainmenu and dees-appui-secondarymenu (reflect: true) to enable compact horizontal mode.
|
||||
- Add floating collapse toggle buttons and public toggleCollapse() methods on mainmenu and secondarymenu; these dispatch 'collapse-change' events (bubbles & composed).
|
||||
- Expose and track collapse state in dees-appui-base via mainmenuCollapsed and secondarymenuCollapsed properties; bind states to child components and re-emit collapse-change events as mainmenu-collapse-change and secondarymenu-collapse-change.
|
||||
- Implement collapsed styles and animations: reduced sidebar widths, hide/compact labels and headers, center icons, hide badges, and add smooth width/opacity transitions.
|
||||
- Add tooltips that appear for tabs/items when sidebars are collapsed to preserve discoverability.
|
||||
- Adjust layout grid in DeesAppuiBase (use auto columns) and add explicit z-index layering to ensure proper stacking order of mainmenu, secondarymenu, maincontent and activitylog.
|
||||
|
||||
## 2025-12-08 - 3.0.1 - fix(dees-appui)
|
||||
Normalize header heights and box-sizing for App UI components
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "3.0.1",
|
||||
"version": "3.2.0",
|
||||
"private": false,
|
||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@@ -48,7 +48,7 @@
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbundle": "^2.6.3",
|
||||
"@git.zone/tstest": "^3.1.3",
|
||||
"@git.zone/tswatch": "^2.3.1",
|
||||
"@git.zone/tswatch": "^2.3.5",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/tapbundle": "^6.0.3",
|
||||
"@types/node": "^24.10.1"
|
||||
|
||||
75
pnpm-lock.yaml
generated
75
pnpm-lock.yaml
generated
@@ -98,10 +98,10 @@ importers:
|
||||
version: 2.6.3
|
||||
'@git.zone/tstest':
|
||||
specifier: ^3.1.3
|
||||
version: 3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)
|
||||
version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)
|
||||
'@git.zone/tswatch':
|
||||
specifier: ^2.3.1
|
||||
version: 2.3.1(@tiptap/pm@2.27.1)
|
||||
specifier: ^2.3.5
|
||||
version: 2.3.5(@tiptap/pm@2.27.1)
|
||||
'@push.rocks/projectinfo':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
@@ -126,8 +126,8 @@ packages:
|
||||
'@api.global/typedserver@3.0.80':
|
||||
resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}
|
||||
|
||||
'@api.global/typedserver@7.11.0':
|
||||
resolution: {integrity: sha512-DHB3oGRgiLbAeRRFAlXIbjvNACw9YqsfOtLVCPq0nUcGMGSsUQ4SNrJ5OGk9GhVF8bl/jn8SF8w08rnApmZ0uw==}
|
||||
'@api.global/typedserver@7.11.1':
|
||||
resolution: {integrity: sha512-1vQUJ2/DszDFHVkCmqqBy/qNiIP/jltFN3KxHtoNLxjbdBZYfw1Zd1Odjs6YSPalAD0p8wQ/alJblJEAewNQVg==}
|
||||
|
||||
'@api.global/typedsocket@3.1.1':
|
||||
resolution: {integrity: sha512-Wkz3NlhmfdZMKqXXI2c2dMtGGmSmhdOegZiziL+9b2mqPYdc7Gd8AZRdEOKvbSoIvc9G22/5BEadIWHrfq66TA==}
|
||||
@@ -316,6 +316,9 @@ packages:
|
||||
'@borewit/text-codec@0.1.1':
|
||||
resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
|
||||
|
||||
'@cfworker/json-schema@4.1.1':
|
||||
resolution: {integrity: sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==}
|
||||
|
||||
'@cloudflare/workers-types@4.20251205.0':
|
||||
resolution: {integrity: sha512-7pup7fYkuQW5XD8RUS/vkxF9SXlrGyCXuZ4ro3uVQvca/GTeSa+8bZ8T4wbq1Aea5lmLIGSlKbhl2msME7bRBA==}
|
||||
|
||||
@@ -329,8 +332,8 @@ packages:
|
||||
'@dabh/diagnostics@2.0.8':
|
||||
resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
|
||||
|
||||
'@design.estate/dees-catalog@2.0.7':
|
||||
resolution: {integrity: sha512-rshv71LqA2PXaEEf6C1/hv6Yu2ovRuWaZhdnUznCDpjdYgxBq7PHkiHCNvg/m6wJ9Ue/03HcuuPqtj2bksgAag==}
|
||||
'@design.estate/dees-catalog@3.1.2':
|
||||
resolution: {integrity: sha512-T4ZhoZzl6NAWGhrz00MDFla5syeMz53euZ+QcBftRMmHuqPHDU/JlBi+K2SmILtnRfWH/lGYWBKugYop6q0chg==}
|
||||
|
||||
'@design.estate/dees-comms@1.0.30':
|
||||
resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
|
||||
@@ -552,8 +555,8 @@ packages:
|
||||
resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
|
||||
hasBin: true
|
||||
|
||||
'@git.zone/tswatch@2.3.1':
|
||||
resolution: {integrity: sha512-KjJRXs+XkXXXDUqmEb1tZuDM1IEVI/RzAo3wS2bFv/UhOY7iYAxPL+eKl55FxBFftB4ecAfxeBhbhijTbklAMA==}
|
||||
'@git.zone/tswatch@2.3.5':
|
||||
resolution: {integrity: sha512-wYekG7Q/wg5uptXHPHhVi7dHq19QnLoevQpcpAzF6hMiNbOozN3+4zxOktyJBl6EHUYcFvHXA4fZ4bkJpo5TcA==}
|
||||
hasBin: true
|
||||
|
||||
'@hapi/bourne@3.0.0':
|
||||
@@ -981,8 +984,8 @@ packages:
|
||||
'@push.rocks/smarts3@3.0.3':
|
||||
resolution: {integrity: sha512-Y9nXMwurthJ9Z7yi0RwjhPFUC58aY8Mhia8kFo6Xj1tBM4LE8Oxg/ydejF7otHqQGr3QyqV5C4YrDEG17rUuzg==}
|
||||
|
||||
'@push.rocks/smartserve@1.3.0':
|
||||
resolution: {integrity: sha512-4ZR9uKVWXVAPzU5wtCQ1mA9jNmOlUl3oGr50EceLT6803UwbNcst7Ek/BhzSaZ0qb2pz0jO5T/V+icgvZ1/5ww==}
|
||||
'@push.rocks/smartserve@1.4.0':
|
||||
resolution: {integrity: sha512-cEoXZQSBX3pOv9AyhxRPkrMAWzs2XQhTBmW95BFtTSNzZdji0XgqUu92p7iuF+NVuTFX1QZ8+dbCClLCoRRW7g==}
|
||||
|
||||
'@push.rocks/smartshell@3.3.0':
|
||||
resolution: {integrity: sha512-m0w618H6YBs+vXGz1CgS4nPi5CUAnqRtckcS9/koGwfcIx1IpjqmiP47BoCTbdgcv0IPUxQVBG1IXTHPuZ8Z5g==}
|
||||
@@ -1020,8 +1023,8 @@ packages:
|
||||
'@push.rocks/smartversion@3.0.5':
|
||||
resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}
|
||||
|
||||
'@push.rocks/smartwatch@5.0.0':
|
||||
resolution: {integrity: sha512-uuWUlTo0l5LWOWoOuTMG7zzxpUNKBcyqoB+zyQ24NHTtSYNcaUJtaQzTO2gxMXr5sqiZDkohlThS0KvsBc3g7w==}
|
||||
'@push.rocks/smartwatch@6.1.1':
|
||||
resolution: {integrity: sha512-wmhLKu9bdpvRcjOfitJOi4jsNKD7S2hVlVq6fAv3IhB2ZbRlSB+Hai4DwOlrdUZaWrg+dFIZU+/ifTOozOPiMg==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
|
||||
'@push.rocks/smartxml@2.0.0':
|
||||
@@ -4656,11 +4659,11 @@ snapshots:
|
||||
'@push.rocks/webrequest': 3.0.37
|
||||
'@push.rocks/webstream': 1.0.10
|
||||
|
||||
'@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.3.0)':
|
||||
'@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.4.0)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.4.0)
|
||||
'@cloudflare/workers-types': 4.20251205.0
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
'@push.rocks/lik': 6.2.2
|
||||
@@ -4704,13 +4707,13 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedserver@7.11.0(@tiptap/pm@2.27.1)':
|
||||
'@api.global/typedserver@7.11.1(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.4.0)
|
||||
'@cloudflare/workers-types': 4.20251205.0
|
||||
'@design.estate/dees-catalog': 2.0.7(@tiptap/pm@2.27.1)
|
||||
'@design.estate/dees-catalog': 3.1.2(@tiptap/pm@2.27.1)
|
||||
'@design.estate/dees-comms': 1.0.30
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -4731,11 +4734,11 @@ snapshots:
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrequest': 5.0.1
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smartserve': 1.3.0
|
||||
'@push.rocks/smartserve': 1.4.0
|
||||
'@push.rocks/smartsitemap': 2.0.4
|
||||
'@push.rocks/smartstream': 3.2.5
|
||||
'@push.rocks/smarttime': 4.1.1
|
||||
'@push.rocks/smartwatch': 5.0.0
|
||||
'@push.rocks/smartwatch': 6.1.1
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
'@push.rocks/webrequest': 4.0.1
|
||||
'@push.rocks/webstore': 2.0.20
|
||||
@@ -4750,7 +4753,7 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.3.0)':
|
||||
'@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.4.0)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
@@ -4761,7 +4764,7 @@ snapshots:
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smarturl': 3.1.0
|
||||
optionalDependencies:
|
||||
'@push.rocks/smartserve': 1.3.0
|
||||
'@push.rocks/smartserve': 1.4.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- bufferutil
|
||||
@@ -4770,7 +4773,7 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.3.0)':
|
||||
'@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.4.0)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
@@ -4779,7 +4782,7 @@ snapshots:
|
||||
'@push.rocks/smartjson': 5.2.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smartserve': 1.3.0
|
||||
'@push.rocks/smartserve': 1.4.0
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smarturl': 3.1.0
|
||||
|
||||
@@ -5274,6 +5277,8 @@ snapshots:
|
||||
|
||||
'@borewit/text-codec@0.1.1': {}
|
||||
|
||||
'@cfworker/json-schema@4.1.1': {}
|
||||
|
||||
'@cloudflare/workers-types@4.20251205.0': {}
|
||||
|
||||
'@colors/colors@1.6.0': {}
|
||||
@@ -5288,7 +5293,7 @@ snapshots:
|
||||
enabled: 2.0.0
|
||||
kuler: 2.0.0
|
||||
|
||||
'@design.estate/dees-catalog@2.0.7(@tiptap/pm@2.27.1)':
|
||||
'@design.estate/dees-catalog@3.1.2(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@design.estate/dees-domtools': 2.3.6
|
||||
'@design.estate/dees-element': 2.1.3
|
||||
@@ -5564,9 +5569,9 @@ snapshots:
|
||||
'@push.rocks/smartshell': 3.3.0
|
||||
tsx: 4.21.0
|
||||
|
||||
'@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)':
|
||||
'@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
|
||||
'@git.zone/tsbundle': 2.6.3
|
||||
'@git.zone/tsrun': 2.0.0
|
||||
'@push.rocks/consolecolor': 2.0.3
|
||||
@@ -5613,9 +5618,9 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@git.zone/tswatch@2.3.1(@tiptap/pm@2.27.1)':
|
||||
'@git.zone/tswatch@2.3.5(@tiptap/pm@2.27.1)':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 7.11.0(@tiptap/pm@2.27.1)
|
||||
'@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1)
|
||||
'@git.zone/tsbundle': 2.6.3
|
||||
'@git.zone/tsrun': 2.0.0
|
||||
'@push.rocks/early': 4.0.4
|
||||
@@ -5626,7 +5631,7 @@ snapshots:
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
'@push.rocks/smartlog-destination-local': 9.0.2
|
||||
'@push.rocks/smartshell': 3.3.0
|
||||
'@push.rocks/smartwatch': 5.0.0
|
||||
'@push.rocks/smartwatch': 6.1.1
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
@@ -6555,9 +6560,10 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- aws-crt
|
||||
|
||||
'@push.rocks/smartserve@1.3.0':
|
||||
'@push.rocks/smartserve@1.4.0':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.2.5
|
||||
'@cfworker/json-schema': 4.1.1
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartenv': 6.0.0
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
@@ -6588,7 +6594,7 @@ snapshots:
|
||||
'@push.rocks/smartsocket@2.1.0':
|
||||
dependencies:
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.3.0)
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
|
||||
'@push.rocks/isohash': 2.0.1
|
||||
'@push.rocks/isounique': 1.0.5
|
||||
'@push.rocks/lik': 6.2.2
|
||||
@@ -6672,7 +6678,7 @@ snapshots:
|
||||
'@types/semver': 7.7.1
|
||||
semver: 7.7.3
|
||||
|
||||
'@push.rocks/smartwatch@5.0.0':
|
||||
'@push.rocks/smartwatch@6.1.1':
|
||||
dependencies:
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartenv': 6.0.0
|
||||
@@ -6715,20 +6721,17 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- '@aws-sdk/credential-providers'
|
||||
- '@mongodb-js/zstd'
|
||||
- '@nuxt/kit'
|
||||
- aws-crt
|
||||
- bare-abort-controller
|
||||
- bufferutil
|
||||
- gcp-metadata
|
||||
- kerberos
|
||||
- mongodb-client-encryption
|
||||
- react
|
||||
- react-native-b4a
|
||||
- snappy
|
||||
- socks
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@push.rocks/taskbuffer@3.5.0':
|
||||
dependencies:
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.0.1',
|
||||
version: '3.2.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -89,6 +89,13 @@ export class DeesAppuiBase extends DeesElement {
|
||||
@property({ type: Array })
|
||||
accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
|
||||
|
||||
// Collapse states
|
||||
@property({ type: Boolean })
|
||||
accessor mainmenuCollapsed: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor secondarymenuCollapsed: boolean = false;
|
||||
|
||||
// Properties for maincontent
|
||||
@property({ type: Array })
|
||||
accessor maincontentTabs: interfaces.ITab[] = [];
|
||||
@@ -124,9 +131,30 @@ export class DeesAppuiBase extends DeesElement {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 240px 1fr 240px;
|
||||
grid-template-columns: auto auto 1fr 240px;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
/* Z-index layering for proper stacking (position: relative required for z-index to work) */
|
||||
.maingrid > dees-appui-mainmenu {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.maingrid > dees-appui-secondarymenu {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.maingrid > dees-appui-maincontent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.maingrid > dees-appui-activitylog {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -156,14 +184,18 @@ export class DeesAppuiBase extends DeesElement {
|
||||
.bottomTabs=${this.mainmenuBottomTabs}
|
||||
.tabs=${this.mainmenuTabs}
|
||||
.selectedTab=${this.mainmenuSelectedTab}
|
||||
.collapsed=${this.mainmenuCollapsed}
|
||||
@tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
|
||||
@collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
|
||||
></dees-appui-mainmenu>
|
||||
<dees-appui-secondarymenu
|
||||
.heading=${this.secondarymenuHeading}
|
||||
.groups=${this.secondarymenuGroups}
|
||||
.selectionOptions=${this.secondarymenuOptions}
|
||||
.selectedItem=${this.secondarymenuSelectedItem}
|
||||
.collapsed=${this.secondarymenuCollapsed}
|
||||
@item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
|
||||
@collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
|
||||
></dees-appui-secondarymenu>
|
||||
<dees-appui-maincontent
|
||||
.tabs=${this.maincontentTabs}
|
||||
@@ -244,4 +276,23 @@ export class DeesAppuiBase extends DeesElement {
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
// Event handlers for collapse state changes
|
||||
private handleMainmenuCollapseChange(e: CustomEvent) {
|
||||
this.mainmenuCollapsed = e.detail.collapsed;
|
||||
this.dispatchEvent(new CustomEvent('mainmenu-collapse-change', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleSecondarymenuCollapseChange(e: CustomEvent) {
|
||||
this.secondarymenuCollapsed = e.detail.collapsed;
|
||||
this.dispatchEvent(new CustomEvent('secondarymenu-collapse-change', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<style>
|
||||
.demo-mainmenu-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.demo-mainmenu-container .spacer {
|
||||
flex: 1;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-mainmenu-container">
|
||||
<dees-appui-mainmenu
|
||||
.logoIcon=${'lucide:box'}
|
||||
.logoText=${'Acme App'}
|
||||
.menuGroups=${[
|
||||
{
|
||||
tabs: [
|
||||
{ key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
|
||||
{ key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Workspace',
|
||||
tabs: [
|
||||
{ key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
|
||||
{ key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
|
||||
{ key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
tabs: [
|
||||
{ key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
|
||||
{ key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
|
||||
]
|
||||
}
|
||||
]}
|
||||
.bottomTabs=${[
|
||||
{ key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
|
||||
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
|
||||
]}
|
||||
></dees-appui-mainmenu>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import { demoFunc } from './dees-appui-mainmenu.demo.js';
|
||||
|
||||
/**
|
||||
* the most left menu
|
||||
@@ -19,49 +20,7 @@ import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
*/
|
||||
@customElement('dees-appui-mainmenu')
|
||||
export class DeesAppuiMainmenu extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.demo-mainmenu-container {
|
||||
height: 500px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-mainmenu-container">
|
||||
<dees-appui-mainmenu
|
||||
.logoIcon=${'lucide:box'}
|
||||
.logoText=${'Acme App'}
|
||||
.menuGroups=${[
|
||||
{
|
||||
tabs: [
|
||||
{ key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
|
||||
{ key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Workspace',
|
||||
tabs: [
|
||||
{ key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
|
||||
{ key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
|
||||
{ key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
tabs: [
|
||||
{ key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
|
||||
{ key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
|
||||
]
|
||||
}
|
||||
]}
|
||||
.bottomTabs=${[
|
||||
{ key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
|
||||
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
|
||||
]}
|
||||
></dees-appui-mainmenu>
|
||||
</div>
|
||||
`;
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@@ -87,27 +46,75 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
@property()
|
||||
accessor selectedTab: interfaces.ITab;
|
||||
|
||||
@property({ type: Boolean, reflect: true })
|
||||
accessor collapsed: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
--menu-width-expanded: 200px;
|
||||
--menu-width-collapsed: 56px;
|
||||
--tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
--tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
--menuWidth: 200px;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
z-index: ${zIndexLayers.fixed.appBar};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: var(--menuWidth);
|
||||
width: var(--menu-width-expanded);
|
||||
height: 100%;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
user-select: none;
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
:host([collapsed]) .mainContainer {
|
||||
width: var(--menu-width-collapsed);
|
||||
}
|
||||
|
||||
/* Floating collapse toggle button */
|
||||
.collapse-toggle {
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
top: 24px;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, background 0.15s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapse-toggle:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
:host(:hover) .collapse-toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapse-toggle dees-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Logo Section */
|
||||
@@ -122,18 +129,31 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logoSection dees-icon {
|
||||
.logoSection .logoIcon {
|
||||
font-size: 22px;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logoSection .logoText {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: opacity 0.2s ease, width 0.25s ease;
|
||||
}
|
||||
|
||||
:host([collapsed]) .logoSection {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
:host([collapsed]) .logoSection .logoText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Middle Section (scrollable) */
|
||||
@@ -178,6 +198,17 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#737373', '#737373')};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.2s ease, max-height 0.25s ease;
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
:host([collapsed]) .groupHeader {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.groupTabs {
|
||||
@@ -186,6 +217,10 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
:host([collapsed]) .menuGroup {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* Tab Item */
|
||||
.tab {
|
||||
position: relative;
|
||||
@@ -242,6 +277,60 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: opacity 0.2s ease, width 0.25s ease;
|
||||
}
|
||||
|
||||
/* Collapsed tab styles */
|
||||
:host([collapsed]) .tab {
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
:host([collapsed]) .tab .tabLabel {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
:host([collapsed]) .tab.selectedTab::before {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
/* Tooltip for collapsed state */
|
||||
.tab-tooltip {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 12px;
|
||||
padding: 6px 12px;
|
||||
background: var(--tooltip-bg);
|
||||
color: var(--tooltip-fg);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.tab-tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-right-color: var(--tooltip-bg);
|
||||
}
|
||||
|
||||
:host([collapsed]) .tab:hover .tab-tooltip {
|
||||
opacity: 1;
|
||||
transition-delay: 1s;
|
||||
}
|
||||
|
||||
/* Bottom Section */
|
||||
@@ -253,6 +342,10 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
:host([collapsed]) .bottomSection {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -270,7 +363,7 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
}}>
|
||||
${this.logoIcon || this.logoText ? html`
|
||||
<div class="logoSection">
|
||||
${this.logoIcon ? html`<dees-icon .icon="${this.logoIcon}"></dees-icon>` : ''}
|
||||
${this.logoIcon ? html`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>` : ''}
|
||||
${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
@@ -285,6 +378,9 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
|
||||
<dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -321,6 +417,7 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
>
|
||||
<dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
|
||||
<span class="tabLabel">${tabArg.key}</span>
|
||||
<span class="tab-tooltip">${tabArg.key}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -351,4 +448,13 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
this.updateTab(allTabs[0]);
|
||||
}
|
||||
}
|
||||
|
||||
public toggleCollapse(): void {
|
||||
this.collapsed = !this.collapsed;
|
||||
this.dispatchEvent(new CustomEvent('collapse-change', {
|
||||
detail: { collapsed: this.collapsed },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import type * as interfaces from '../../interfaces/index.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<style>
|
||||
.demo-secondarymenu-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.demo-secondarymenu-container .spacer {
|
||||
flex: 1;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-secondarymenu-container">
|
||||
<dees-appui-secondarymenu
|
||||
.heading=${'Projects'}
|
||||
.groups=${[
|
||||
{
|
||||
name: 'Active',
|
||||
iconName: 'lucide:folder',
|
||||
items: [
|
||||
{ key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
|
||||
{ key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
|
||||
{ key: 'Database', iconName: 'database', action: () => console.log('Database') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Archived',
|
||||
iconName: 'lucide:archive',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
|
||||
{ key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
items: [
|
||||
{ key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
|
||||
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
|
||||
]
|
||||
}
|
||||
] as interfaces.ISecondaryMenuGroup[]}
|
||||
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
|
||||
></dees-appui-secondarymenu>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import { demoFunc } from './dees-appui-secondarymenu.demo.js';
|
||||
|
||||
/**
|
||||
* Secondary navigation menu for sub-navigation within MainMenu views
|
||||
@@ -21,51 +22,7 @@ import {
|
||||
*/
|
||||
@customElement('dees-appui-secondarymenu')
|
||||
export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.demo-container {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<dees-appui-secondarymenu
|
||||
.heading=${'Projects'}
|
||||
.groups=${[
|
||||
{
|
||||
name: 'Active',
|
||||
iconName: 'lucide:folder',
|
||||
items: [
|
||||
{ key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
|
||||
{ key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
|
||||
{ key: 'Database', iconName: 'database', action: () => console.log('Database') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Archived',
|
||||
iconName: 'lucide:archive',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
|
||||
{ key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
items: [
|
||||
{ key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
|
||||
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
|
||||
]
|
||||
}
|
||||
] as interfaces.ISecondaryMenuGroup[]}
|
||||
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
|
||||
></dees-appui-secondarymenu>
|
||||
</div>
|
||||
`;
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@@ -89,11 +46,16 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
@state()
|
||||
accessor collapsedGroups: Set<string> = new Set();
|
||||
|
||||
/** Horizontal collapse state */
|
||||
@property({ type: Boolean, reflect: true })
|
||||
accessor collapsed: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-width-expanded: 240px;
|
||||
--sidebar-width-collapsed: 56px;
|
||||
--sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
--sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
|
||||
--sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
|
||||
@@ -102,6 +64,8 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
--sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
|
||||
--sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
|
||||
--sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
--tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
--tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
|
||||
/* Badge colors */
|
||||
--badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
@@ -113,13 +77,19 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
--badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
|
||||
--badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: var(--sidebar-width);
|
||||
width: var(--sidebar-width-expanded);
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
user-select: none;
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
:host([collapsed]) {
|
||||
width: var(--sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
@@ -127,6 +97,43 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Floating collapse toggle button */
|
||||
.collapse-toggle {
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
top: 24px;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, background 0.15s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.collapse-toggle:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
:host(:hover) .collapse-toggle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapse-toggle dees-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
@@ -142,12 +149,25 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
}
|
||||
|
||||
.header .heading {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--sidebar-fg-active);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: opacity 0.2s ease, width 0.25s ease;
|
||||
}
|
||||
|
||||
:host([collapsed]) .header {
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
:host([collapsed]) .header .heading {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Scrollable Menu Section */
|
||||
@@ -181,6 +201,10 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
:host([collapsed]) .menuGroup {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.groupHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -188,7 +212,8 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
padding: 8px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s ease;
|
||||
transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.groupHeader:hover {
|
||||
@@ -204,6 +229,8 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
color: var(--sidebar-fg-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.groupHeader .groupTitle dees-icon {
|
||||
@@ -221,6 +248,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Hide group headers when horizontally collapsed */
|
||||
:host([collapsed]) .groupHeader {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Group Items Container */
|
||||
.groupItems {
|
||||
overflow: hidden;
|
||||
@@ -234,6 +270,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Always show items when horizontally collapsed (regardless of group collapse state) */
|
||||
:host([collapsed]) .groupItems {
|
||||
max-height: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Menu Item */
|
||||
.menuItem {
|
||||
position: relative;
|
||||
@@ -292,6 +334,60 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: opacity 0.2s ease, width 0.25s ease;
|
||||
}
|
||||
|
||||
/* Collapsed menu item styles */
|
||||
:host([collapsed]) .menuItem {
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
:host([collapsed]) .menuItem .itemLabel {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
:host([collapsed]) .menuItem.selected::before {
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
/* Tooltip for collapsed state */
|
||||
.item-tooltip {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 12px;
|
||||
padding: 6px 12px;
|
||||
background: var(--tooltip-bg);
|
||||
color: var(--tooltip-fg);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.item-tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-right-color: var(--tooltip-bg);
|
||||
}
|
||||
|
||||
:host([collapsed]) .menuItem:hover .item-tooltip {
|
||||
opacity: 1;
|
||||
transition-delay: 1s;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
@@ -328,6 +424,10 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
color: var(--badge-error-fg);
|
||||
}
|
||||
|
||||
:host([collapsed]) .badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
height: 1px;
|
||||
@@ -354,6 +454,9 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
: this.renderLegacyOptions()}
|
||||
</div>
|
||||
</div>
|
||||
<button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
|
||||
<dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -392,6 +495,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
${item.badge !== undefined ? html`
|
||||
<span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
|
||||
` : ''}
|
||||
<span class="item-tooltip">${item.key}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -424,6 +528,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
this.collapsedGroups = newCollapsed;
|
||||
}
|
||||
|
||||
public toggleCollapse(): void {
|
||||
this.collapsed = !this.collapsed;
|
||||
this.dispatchEvent(new CustomEvent('collapse-change', {
|
||||
detail: { collapsed: this.collapsed },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private selectItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): void {
|
||||
this.selectedItem = item;
|
||||
item.action();
|
||||
|
||||
@@ -266,17 +266,17 @@ export const demoFunc = () => html`
|
||||
.viewTabs=${[
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'home',
|
||||
iconName: 'lucide:home',
|
||||
element: DemoViewDashboard,
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
iconName: 'lineChart',
|
||||
iconName: 'lucide:lineChart',
|
||||
element: DemoViewAnalytics,
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'settings',
|
||||
iconName: 'lucide:settings',
|
||||
element: DemoViewSettings,
|
||||
}
|
||||
] as IView[]}
|
||||
|
||||
@@ -51,7 +51,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
user-select: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@@ -75,109 +75,188 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
left: 0px;
|
||||
height: calc(100% - 24px);
|
||||
width: 240px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#000')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
font-size: 12px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
font-size: 13px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-rows: auto min-content;
|
||||
grid-template-rows: auto 1fr min-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.header-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme(
|
||||
'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
|
||||
'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
|
||||
)};
|
||||
box-shadow: ${cssManager.bdTheme(
|
||||
'0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
|
||||
'0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
|
||||
)};
|
||||
}
|
||||
|
||||
.header-icon-wrapper dees-icon {
|
||||
font-size: 18px;
|
||||
color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
|
||||
}
|
||||
|
||||
.appName {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
|
||||
.viewTabs-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
padding: 12px 8px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.viewTabs-container::-webkit-scrollbar-thumb:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
||||
padding: 8px 12px 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.viewTabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.viewTab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: default;
|
||||
transition: background 0.1s;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.viewTab:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
.viewTab:active {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
|
||||
.viewTab.selected {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.viewTab.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
|
||||
}
|
||||
|
||||
.viewTab dees-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
|
||||
}
|
||||
|
||||
.viewTab dees-icon {
|
||||
font-size: 16px;
|
||||
opacity: 0.55;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.viewTab:hover dees-icon {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.viewTab.selected dees-icon {
|
||||
opacity: 0.9;
|
||||
color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
|
||||
}
|
||||
|
||||
.viewTab span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.appActions {
|
||||
padding: 12px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: default;
|
||||
transition: background 0.1s;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
|
||||
}
|
||||
|
||||
|
||||
.action:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 84% 60% / 0.08)', 'hsl(0 84% 60% / 0.12)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
|
||||
}
|
||||
|
||||
|
||||
.action dees-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
font-size: 16px;
|
||||
opacity: 0.6;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.action:hover dees-icon {
|
||||
opacity: 0.9;
|
||||
color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
|
||||
}
|
||||
|
||||
.appcontent {
|
||||
@@ -189,46 +268,61 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
bottom: 24px;
|
||||
width: calc(100% - 240px);
|
||||
overflow: auto;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#000')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
|
||||
.controlbar {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#00000020', '#ffffff20')};
|
||||
height: 24px;
|
||||
background: ${cssManager.bdTheme('#2196f3', '#1565c0')};
|
||||
background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-right: 16px;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.control dees-icon {
|
||||
font-size: 14px;
|
||||
color: hsl(0 0% 70%);
|
||||
transition: all 0.15s ease;
|
||||
border-left: 1px solid hsl(0 0% 100% / 0.08);
|
||||
}
|
||||
|
||||
.control:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
background: hsl(0 0% 100% / 0.06);
|
||||
color: hsl(0 0% 95%);
|
||||
}
|
||||
|
||||
.control dees-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.control.status-connected dees-icon {
|
||||
color: hsl(142 70% 50%);
|
||||
}
|
||||
|
||||
.control.status-terminal dees-icon {
|
||||
color: hsl(45 90% 55%);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -236,27 +330,30 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<div class="appbar">
|
||||
<div>
|
||||
<div class="sidebar-header">
|
||||
<dees-icon .icon="${'lucide:grid3x3'}" style="font-size: 18px;"></dees-icon>
|
||||
<div class="appName">${this.name}</div>
|
||||
<div class="sidebar-header">
|
||||
<div class="header-icon-wrapper">
|
||||
<dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
|
||||
</div>
|
||||
<div class="viewTabs-container">
|
||||
<div class="viewTabs">
|
||||
${this.viewTabs.map(
|
||||
(view) => html`
|
||||
<div
|
||||
class="viewTab ${this.selectedView === view ? 'selected' : ''}"
|
||||
@click=${() => this.loadView(view)}
|
||||
>
|
||||
${view.iconName ? html`
|
||||
<dees-icon .icon="${`${view.iconName}`}"></dees-icon>
|
||||
` : ''}
|
||||
<span style="flex: 1;">${view.name}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<div class="appName">${this.name}</div>
|
||||
</div>
|
||||
<div class="viewTabs-container">
|
||||
<div class="section-label">Navigation</div>
|
||||
<div class="viewTabs">
|
||||
${this.viewTabs.map(
|
||||
(view) => html`
|
||||
<div
|
||||
class="viewTab ${this.selectedView === view ? 'selected' : ''}"
|
||||
@click=${() => this.loadView(view)}
|
||||
>
|
||||
${view.iconName ? html`
|
||||
<dees-icon .icon="${view.iconName.includes(':') ? view.iconName : `lucide:${view.iconName}`}"></dees-icon>
|
||||
` : html`
|
||||
<dees-icon .icon="${'lucide:file'}"></dees-icon>
|
||||
`}
|
||||
<span>${view.name}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="appActions">
|
||||
@@ -264,7 +361,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
|
||||
}}>
|
||||
<dees-icon .icon="${'lucide:logOut'}"></dees-icon>
|
||||
<span>Logout</span>
|
||||
<span>Sign out</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,11 +369,11 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
<!-- Content goes here -->
|
||||
</div>
|
||||
<div class="controlbar">
|
||||
<div class="control">
|
||||
<div class="control status-connected">
|
||||
<dees-icon .icon="${'lucide:wifi'}"></dees-icon>
|
||||
<span>Connected</span>
|
||||
</div>
|
||||
<div class="control" @click=${this.launchTerminal}>
|
||||
<div class="control status-terminal" @click=${this.launchTerminal}>
|
||||
<dees-icon .icon="${'lucide:terminal'}"></dees-icon>
|
||||
<span>Terminal</span>
|
||||
</div>
|
||||
@@ -315,10 +412,10 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
terminal.style.right = '0px';
|
||||
terminal.style.bottom = '24px';
|
||||
terminal.style.opacity = '0';
|
||||
terminal.style.transform = 'translateY(20px)';
|
||||
terminal.style.transition = 'all 0.2s';
|
||||
terminal.style.background = '#000';
|
||||
terminal.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||||
terminal.style.transform = 'translateY(8px) scale(0.99)';
|
||||
terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
terminal.background = 'hsl(220 13% 8%)';
|
||||
terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
|
||||
terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
|
||||
terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
|
||||
|
||||
@@ -327,7 +424,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
terminal.style.opacity = '1';
|
||||
terminal.style.transform = 'translateY(0px)';
|
||||
terminal.style.transform = 'translateY(0) scale(1)';
|
||||
return terminal;
|
||||
}
|
||||
|
||||
@@ -335,8 +432,8 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
if (this.currentTerminal) {
|
||||
this.currentTerminal.style.opacity = '0';
|
||||
this.currentTerminal.style.transform = 'translateY(20px)';
|
||||
await domtools.convenience.smartdelay.delayFor(200);
|
||||
this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
|
||||
await domtools.convenience.smartdelay.delayFor(250);
|
||||
this.currentTerminal.remove();
|
||||
this.currentTerminal = null;
|
||||
}
|
||||
|
||||
@@ -29,14 +29,14 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
|
||||
user-select: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.loginContainer {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@@ -46,7 +46,7 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#000')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
}
|
||||
|
||||
.slotContainer {
|
||||
@@ -56,43 +56,56 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login {
|
||||
min-width: 320px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#111')};
|
||||
box-shadow: ${cssManager.bdTheme(
|
||||
'0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
'0 4px 12px rgba(0, 0, 0, 0.3)'
|
||||
)};
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
padding: 24px;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
letter-spacing: -0.025em;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
|
||||
}
|
||||
|
||||
.login dees-form {
|
||||
|
||||
.subheader {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-card dees-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.login dees-input-text {
|
||||
|
||||
.login-card dees-input-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login dees-form-submit {
|
||||
margin-top: 4px;
|
||||
|
||||
.login-card dees-form-submit {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
@@ -102,12 +115,17 @@ export class DeesSimpleLogin extends DeesElement {
|
||||
return html`
|
||||
<div class="loginContainer">
|
||||
<div class="login">
|
||||
<div class="header">Login to ${this.name}</div>
|
||||
<dees-form>
|
||||
<dees-input-text key="username" label="Username" required></dees-input-text>
|
||||
<dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
|
||||
<dees-form-submit>Login</dees-form-submit>
|
||||
</dees-form>
|
||||
<div class="login-header">
|
||||
<div class="header">Sign in</div>
|
||||
<div class="subheader">Enter your credentials to access ${this.name}</div>
|
||||
</div>
|
||||
<div class="login-card">
|
||||
<dees-form>
|
||||
<dees-input-text key="username" label="Username" required></dees-input-text>
|
||||
<dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
|
||||
<dees-form-submit>Sign in</dees-form-submit>
|
||||
</dees-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slotContainer">
|
||||
|
||||
@@ -38,6 +38,9 @@ export class DeesTerminal extends DeesElement {
|
||||
@property()
|
||||
accessor environment: {[key: string]: string} = {};
|
||||
|
||||
@property()
|
||||
accessor background: string = '#000000';
|
||||
|
||||
// exposing webcontainer
|
||||
private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
|
||||
public webcontainerPromise = this.webcontainerDeferred.promise;
|
||||
@@ -58,7 +61,7 @@ export class DeesTerminal extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
padding: 20px;
|
||||
background: #000;
|
||||
background: var(--dees-terminal-background, #000000);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -153,7 +156,7 @@ export class DeesTerminal extends DeesElement {
|
||||
|
||||
.xterm .composition-view {
|
||||
/* TODO: Composition position got messed up somewhere */
|
||||
background: #000;
|
||||
background: var(--dees-terminal-background, #000000);
|
||||
color: #fff;
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -167,7 +170,7 @@ export class DeesTerminal extends DeesElement {
|
||||
|
||||
.xterm .xterm-viewport {
|
||||
/* On OS X this is required in order for the scroll bar to appear fully opaque */
|
||||
background-color: #000;
|
||||
background-color: var(--dees-terminal-background, #000000);
|
||||
overflow-y: scroll;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
@@ -261,11 +264,18 @@ export class DeesTerminal extends DeesElement {
|
||||
): Promise<void> {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
super.firstUpdated(_changedProperties);
|
||||
|
||||
// Sync CSS variable with background property
|
||||
this.style.setProperty('--dees-terminal-background', this.background);
|
||||
|
||||
const container = this.shadowRoot.getElementById('container');
|
||||
|
||||
const term = new Terminal({
|
||||
convertEol: true,
|
||||
cursorBlink: true,
|
||||
theme: {
|
||||
background: this.background,
|
||||
},
|
||||
});
|
||||
this.fitAddon = new FitAddon();
|
||||
term.loadAddon(this.fitAddon);
|
||||
|
||||
Reference in New Issue
Block a user