diff --git a/package-lock.json b/package-lock.json index 28ebe061b..dd3643fd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@bimdata/bcf-components": "6.7.7", "@bimdata/components": "1.10.1", - "@bimdata/design-system": "2.4.3", + "@bimdata/design-system": "3.0.0-beta.47", "@bimdata/typescript-fetch-api-client": "10.46.1", "@bimdata/viewer": "2.18.0-beta.6", "@paddle/paddle-js": "^1.6.4", @@ -1585,9 +1585,9 @@ } }, "node_modules/@bimdata/design-system": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/@bimdata/design-system/-/design-system-2.4.3.tgz", - "integrity": "sha512-+/d0f62Z8oKKQEOvFHKDr9CHgHgTQkgPoVBAp4St6LNh8B3S/vUWILm5RtUM/f1eFl7aHFt97buRW+lG5xYpcQ==" + "version": "3.0.0-beta.47", + "resolved": "https://registry.npmjs.org/@bimdata/design-system/-/design-system-3.0.0-beta.47.tgz", + "integrity": "sha512-vzTY/H/hGMjFPy8nVTncSH7aEXZr/FPUab1W8nRc0EBrQ4N4V2Y9i3PjVj0jLzwrqZhcqILaxxbz5Aq23I1qLQ==" }, "node_modules/@bimdata/typescript-fetch-api-client": { "version": "10.46.1", @@ -1668,13 +1668,13 @@ } }, "node_modules/@emnapi/core": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz", - "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", + "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==", "license": "MIT", "optional": true, "dependencies": { - "@emnapi/wasi-threads": "1.2.1", + "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, @@ -1686,9 +1686,9 @@ "optional": true }, "node_modules/@emnapi/runtime": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", - "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz", + "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==", "license": "MIT", "optional": true, "dependencies": { @@ -1703,9 +1703,9 @@ "optional": true }, "node_modules/@emnapi/wasi-threads": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", - "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz", + "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==", "license": "MIT", "optional": true, "dependencies": { @@ -3591,44 +3591,6 @@ "node": "^20.19.0 || >=22.12.0" } }, - "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", - "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==", - "license": "MIT", - "optional": true, - "dependencies": { - "@emnapi/wasi-threads": "1.2.2", - "tslib": "^2.4.0" - } - }, - "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz", - "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==", - "license": "MIT", - "optional": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, - "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz", - "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==", - "license": "MIT", - "optional": true, - "dependencies": { - "tslib": "^2.4.0" - } - }, - "node_modules/@rolldown/binding-wasm32-wasi/node_modules/tslib": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", - "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "optional": true - }, "node_modules/@rolldown/binding-win32-arm64-msvc": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz", @@ -4991,6 +4953,48 @@ "node": ">=14.0.0" } }, + "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/core": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz", + "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.2.1", + "tslib": "^2.4.0" + } + }, + "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", + "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", + "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD", + "optional": true + }, "node_modules/@unrs/resolver-binding-win32-arm64-msvc": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz", diff --git a/package.json b/package.json index e1d417bf5..277f8a5a9 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "dependencies": { "@bimdata/bcf-components": "6.7.7", "@bimdata/components": "1.10.1", - "@bimdata/design-system": "2.4.3", + "@bimdata/design-system": "3.0.0-beta.47", "@bimdata/typescript-fetch-api-client": "10.46.1", "@bimdata/viewer": "2.18.0-beta.6", "@paddle/paddle-js": "^1.6.4", diff --git a/src/AppLayout.vue b/src/AppLayout.vue index 20b671b1e..3d95027bf 100644 --- a/src/AppLayout.vue +++ b/src/AppLayout.vue @@ -14,24 +14,29 @@ - -
- -
- -
- + +
+
+ +
+
+
- + +
+ +
+
+
diff --git a/src/components/specific/app/app-header-menu/AppHeaderMenu.scss b/src/components/specific/app/app-header-menu/AppHeaderMenu.scss index 1dd27745b..5bac2d283 100644 --- a/src/components/specific/app/app-header-menu/AppHeaderMenu.scss +++ b/src/components/specific/app/app-header-menu/AppHeaderMenu.scss @@ -1,90 +1,103 @@ .app-header-menu { - .bimdata-dropdown:deep() { - .bimdata-dropdown__content { - padding: 0; - } - - .bimdata-dropdown__elements { - width: 250px; - margin-left: -27px; - } - } + position: relative; + display: flex; + justify-content: center; - &__btn { - display: grid; - grid-template-columns: 36px 135px; - grid-template-rows: 14px 14px; - align-items: center; - gap: 2px 4px; - padding: calc(var(--spacing-unit) / 2); - text-align: left; - width: 190px; - - &__avatar { - grid-row: 1 / span 2; - } + &__trigger { + display: flex; + padding: 2px; + border: none; + border-radius: 50%; + background-color: transparent; + cursor: pointer; + transition: box-shadow 0.2s ease; - &__fullname { - font-weight: bold; + &:hover, + &.active { + box-shadow: 0 0 0 2px var(--color-silver-light); } } - &__container { - position: relative; + &__popover { + position: absolute; + z-index: 200; + bottom: 0; + left: calc(100% + var(--spacing-unit) * 2); + display: flex; flex-direction: column; + width: 231px; + padding: var(--spacing-unit) calc(var(--spacing-unit) * 3 / 2); + border-radius: 20px; + overflow: hidden; + background-color: var(--color-white); + box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.15); font-size: 12px; + } - .user-info { - display: flex; - flex-direction: column; - align-items: center; - gap: var(--spacing-unit); - height: 115px; - - .user-avatar { - margin-top: calc(var(--spacing-unit) / 2); - } + &__user { + display: flex; + align-items: center; + gap: var(--spacing-unit); + padding: var(--spacing-unit) calc(var(--spacing-unit) / 2); - .user-content { - width: 100%; - text-align: center; - .user-name { - font-weight: bold; - } - } + &__content { + min-width: 0; + flex: 1; } - .separator { - height: 1px; - margin: calc(var(--spacing-unit) / 2) var(--spacing-unit); - background-color: var(--color-silver-light); + &__name { + font-weight: bold; + color: var(--color-primary); } - .external-link { - text-decoration: none; - color: inherit; + &__email { + color: var(--color-granite-light); } + } + + &__divider { + height: 1px; + margin: calc(var(--spacing-unit) / 2) 0; + background-color: var(--color-tertiary-lightest, #f7f7f7); + } + + &__item { + display: flex; + align-items: center; + gap: var(--spacing-unit); + width: 100%; + height: 32px; + padding: 0 calc(var(--spacing-unit) / 2); + border: none; + border-radius: 6px; + background-color: transparent; + color: var(--color-primary); + font-size: 12px; + text-align: left; + text-decoration: none; + cursor: pointer; + transition: background-color 0.2s ease; - .bimdata-btn { - justify-content: flex-start; + &:hover { + background-color: var(--color-tertiary-lightest, #f7f7f7); } - .btn-language { + &--language { justify-content: space-between; } + } - .lang-badge { - padding: calc(var(--spacing-unit) / 6) var(--spacing-unit); - font-weight: bold; - border-radius: 2px; - background-color: var(--color-silver); - text-transform: uppercase; - } + &__lang-badge { + padding: calc(var(--spacing-unit) / 6) var(--spacing-unit); + font-weight: 500; + text-transform: uppercase; + border-radius: 2px; + background-color: var(--color-silver); + } - .btn-logout { - margin: calc(var(--spacing-unit) / 2) var(--spacing-unit); - justify-content: center; - } + &__logout { + margin-top: var(--spacing-unit); + justify-content: center; } } diff --git a/src/components/specific/app/app-header-menu/AppHeaderMenu.vue b/src/components/specific/app/app-header-menu/AppHeaderMenu.vue index 8e519a516..2f41ff6c6 100644 --- a/src/components/specific/app/app-header-menu/AppHeaderMenu.vue +++ b/src/components/specific/app/app-header-menu/AppHeaderMenu.vue @@ -1,115 +1,105 @@ @@ -133,16 +123,24 @@ export default { UserAvatar }, setup() { + const router = useRouter(); const { signOut } = useAuth(); const { currentSpace } = useSpaces(); const { user } = useUser(); + const { isOpen, close, toggle } = useToggle(); + const { isOpen: showLanguageSelector, open: openLanguageSelector, close: closeLanguageSelector } = useToggle(); + const goToProfile = () => { + close(); + router.push({ name: routeNames.userProfile }); + }; + const bimdataConnectProfileUrl = ENV.VUE_APP_URL_BIMDATACONNECT + "/profile/"; const documentationUrl = ENV.VUE_APP_URL_DOCUMENTATION; @@ -155,15 +153,19 @@ export default { documentationUrl, marketPlaceUrl, isSubscriptionEnabled: IS_SUBSCRIPTION_ENABLED, + isOpen, routeNames, showLanguageSelector, space: currentSpace, user, userIframeProfile, // Methods + close, + toggle, + goToProfile, closeLanguageSelector, openLanguageSelector, - router: useRouter(), + router, fullName, signOut }; diff --git a/src/components/specific/app/app-sidebar/AppSidebar.scss b/src/components/specific/app/app-sidebar/AppSidebar.scss new file mode 100644 index 000000000..e421cf61d --- /dev/null +++ b/src/components/specific/app/app-sidebar/AppSidebar.scss @@ -0,0 +1,46 @@ +.app-sidebar { + flex-shrink: 0; + height: 100%; + padding: var(--spacing-unit); + + &__rail { + position: relative; + z-index: 100; + display: flex; + flex-direction: column; + align-items: center; + gap: calc(var(--spacing-unit) * 2); + width: 56px; + height: 100%; + padding: calc(var(--spacing-unit) * 2) 0; + border-radius: 13px; + background-color: var(--color-white); + box-shadow: var(--box-shadow); + } + + &__logo { + display: flex; + justify-content: center; + align-items: center; + height: 34px; + margin-bottom: var(--spacing-unit); + } + + &__logo-mark { + width: auto; + height: 26px; + } + + &__nav { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-unit); + } + + &__bottom { + margin-top: auto; + display: flex; + justify-content: center; + } +} diff --git a/src/components/specific/app/app-sidebar/AppSidebar.vue b/src/components/specific/app/app-sidebar/AppSidebar.vue new file mode 100644 index 000000000..b7fa56861 --- /dev/null +++ b/src/components/specific/app/app-sidebar/AppSidebar.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/components/specific/app/app-sidebar/app-sidebar-item/AppSidebarItem.scss b/src/components/specific/app/app-sidebar/app-sidebar-item/AppSidebarItem.scss new file mode 100644 index 000000000..2812983ed --- /dev/null +++ b/src/components/specific/app/app-sidebar/app-sidebar-item/AppSidebarItem.scss @@ -0,0 +1,51 @@ +.app-sidebar-item { + display: flex; + justify-content: center; + + &__target { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + padding: 0; + border: none; + border-radius: 10px; + background-color: transparent; + color: var(--color-granite-light); + cursor: pointer; + text-decoration: none; + transition: + background-color 0.2s ease, + color 0.2s ease; + + &:hover { + background-color: var(--color-tertiary-lightest, #f7f7f7); + color: var(--color-primary); + } + + &.router-link-active { + background-color: var(--color-primary); + color: var(--color-white); + } + } + + &__icon { + position: relative; + display: flex; + justify-content: center; + align-items: center; + line-height: 0; + } + + &__notif { + position: absolute; + top: -4px; + right: -4px; + width: 7px; + height: 7px; + border-radius: 50%; + border: 1px solid var(--color-white); + background-color: var(--color-high); + } +} diff --git a/src/components/specific/app/app-sidebar/app-sidebar-item/AppSidebarItem.vue b/src/components/specific/app/app-sidebar/app-sidebar-item/AppSidebarItem.vue new file mode 100644 index 000000000..120e5b7b0 --- /dev/null +++ b/src/components/specific/app/app-sidebar/app-sidebar-item/AppSidebarItem.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/components/specific/app/go-back-button/GoBackButton.vue b/src/components/specific/app/go-back-button/GoBackButton.vue index a4740779a..5e40aa823 100644 --- a/src/components/specific/app/go-back-button/GoBackButton.vue +++ b/src/components/specific/app/go-back-button/GoBackButton.vue @@ -1,16 +1,6 @@