From 27c071f7dcdbcef3cdacfab5a4600445f3c61688 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 8 Dec 2025 20:23:03 +0000 Subject: [PATCH] feat(dees-simple-appdash,dees-simple-login,dees-terminal): Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config --- changelog.md | 11 + package.json | 2 +- pnpm-lock.yaml | 75 ++--- ts_web/00_commitinfo_data.ts | 2 +- .../dees-simple-appdash.demo.ts | 6 +- .../dees-simple-appdash.ts | 279 ++++++++++++------ .../dees-simple-login/dees-simple-login.ts | 82 +++-- .../elements/dees-terminal/dees-terminal.ts | 16 +- 8 files changed, 306 insertions(+), 167 deletions(-) diff --git a/changelog.md b/changelog.md index ee17659..62755f7 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,16 @@ # 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 diff --git a/package.json b/package.json index 2993102..874a5e7 100644 --- a/package.json +++ b/package.json @@ -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.2", + "@git.zone/tswatch": "^2.3.5", "@push.rocks/projectinfo": "^5.0.2", "@push.rocks/tapbundle": "^6.0.3", "@types/node": "^24.10.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6731b79..438c048 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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.2 - version: 2.3.2(@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.2': - resolution: {integrity: sha512-M4B4D7BlfGb3ssgMHFMHc+hhEmxY6WzNd87ihuLReXMD+twjMA99u2hyAvAnboa3lERlixvHz/nN+rdbGH5VlA==} + '@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.1.0': - resolution: {integrity: sha512-vf4yT8F8V+vstnrr0sh64rGF/8Z8dZlLR4T95KcVtm7F0H3dKxLcvZ3HT0xayw0gQow8+CCtDdts9Wgq5ipJTw==} + '@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.1.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.2(@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.1.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.1.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: diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 59952c7..6a4db6b 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.1.2', + version: '3.2.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts index e4a8f1c..0148ec2 100644 --- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts +++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts @@ -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[]} diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts index b0c5a63..3b603d7 100644 --- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts +++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts @@ -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`
-
-
- -
${this.name}
+
+
+
-
-
- ${this.viewTabs.map( - (view) => html` -
this.loadView(view)} - > - ${view.iconName ? html` - - ` : ''} - ${view.name} -
- ` - )} -
+
${this.name}
+
+
+
Navigation
+
+ ${this.viewTabs.map( + (view) => html` +
this.loadView(view)} + > + ${view.iconName ? html` + + ` : html` + + `} + ${view.name} +
+ ` + )}
@@ -264,7 +361,7 @@ export class DeesSimpleAppDash extends DeesElement { this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true })); }}> - Logout + Sign out
@@ -272,11 +369,11 @@ export class DeesSimpleAppDash extends DeesElement {
-
+
Connected
-
+
Terminal
@@ -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; } diff --git a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts index af9fa23..90458ae 100644 --- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts +++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts @@ -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`
diff --git a/ts_web/elements/dees-terminal/dees-terminal.ts b/ts_web/elements/dees-terminal/dees-terminal.ts index 5799893..40e3e80 100644 --- a/ts_web/elements/dees-terminal/dees-terminal.ts +++ b/ts_web/elements/dees-terminal/dees-terminal.ts @@ -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(); 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 { 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);