Skip to content

Commit c8ebac0

Browse files
LrxGaelleLrxGaelle
committed
redesign project page blocks
1 parent 504f74f commit c8ebac0

33 files changed

Lines changed: 749 additions & 298 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"@bimdata/bcf-components": "6.7.7",
1717
"@bimdata/components": "1.10.1",
18-
"@bimdata/design-system": "3.0.0-beta.46",
18+
"@bimdata/design-system": "3.0.0-beta.47",
1919
"@bimdata/typescript-fetch-api-client": "10.46.1",
2020
"@bimdata/viewer": "2.18.0-beta.6",
2121
"@paddle/paddle-js": "^1.6.4",

‎src/components/specific/app/app-breadcrumb/AppBreadcrumb.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<div class="app-breadcrumb">
3-
<GoBackButton />
3+
<GoBackButton class="m-r-6" />
44
<template v-if="breadcrumb">
5-
<div class="breadcrumb-separator"></div>
65
<component :is="breadcrumb" />
76
</template>
87
</div>
@@ -20,23 +19,23 @@ import BreadcrumbSpaceSelector from "./breadcrumb-space-selector/BreadcrumbSpace
2019
const BREADCRUMB_COMPONENTS = {
2120
[routeNames.spaceBoard]: "BreadcrumbSpaceSelector",
2221
[routeNames.projectBoard]: "BreadcrumbProjectSelector",
23-
[routeNames.groupBoard]: "BreadcrumbGroupSelector"
22+
[routeNames.groupBoard]: "BreadcrumbGroupSelector",
2423
};
2524
2625
export default {
2726
components: {
2827
GoBackButton,
2928
BreadcrumbGroupSelector,
3029
BreadcrumbProjectSelector,
31-
BreadcrumbSpaceSelector
30+
BreadcrumbSpaceSelector,
3231
},
3332
setup() {
3433
const route = useRoute();
3534
3635
return {
37-
breadcrumb: BREADCRUMB_COMPONENTS[route.name]
36+
breadcrumb: BREADCRUMB_COMPONENTS[route.name],
3837
};
39-
}
38+
},
4039
};
4140
</script>
4241

‎src/components/specific/app/go-back-button/GoBackButton.vue‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
<template>
2-
<BIMDataButton
3-
data-test-id="go-back-button"
4-
class="go-back-button"
5-
ghost
6-
radius
7-
@click="goBack"
8-
>
9-
<BIMDataIconArrow
10-
class="go-back-button__icon"
11-
size="xxs"
12-
margin="0 6px 0 0"
13-
/>
2+
<BIMDataButton data-test-id="go-back-button" class="go-back-button" ghost radius @click="goBack">
3+
<BIMDataIconChevron class="go-back-button__icon" size="xxs" :rotate="180" />
144
<span>
155
{{ $t("t.back") }}
166
</span>
@@ -58,9 +48,9 @@ export default {
5848
};
5949
6050
return {
61-
goBack
51+
goBack,
6252
};
63-
}
53+
},
6454
};
6555
</script>
6656

‎src/components/specific/models/model-location-card/ModelLocationCard.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
height: 100%;
55
border-radius: 20px;
66
background-color: var(--color-white);
7-
box-shadow: var(--box-shadow);
87
overflow: hidden;
98

109
&__header {

‎src/components/specific/models/model-location/ModelLocation.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
.model-location__map__edit-btn {
1414
position: absolute;
1515
z-index: 1;
16-
top: 0;
17-
right: 0;
16+
top: var(--spacing-unit);
17+
right: var(--spacing-unit);
1818
}
1919
}
2020

‎src/components/specific/models/model-location/ModelLocation.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@
2424
width="36px"
2525
height="36px"
2626
fill
27-
square
27+
radius
2828
icon
29+
color="white"
2930
@click="openLocationForm"
3031
>
3132
<BIMDataIconEdit size="s" />
@@ -64,22 +65,19 @@ import { onActivated, provide, ref, watch } from "vue";
6465
import { useToggle } from "../../../../composables/toggle.js";
6566
import { useModels } from "../../../../state/models.js";
6667
import { useUser } from "../../../../state/user.js";
67-
import {
68-
DMS2DD,
69-
getCoordinatesFromAddress
70-
} from "../../../../utils/location.js";
68+
import { DMS2DD, getCoordinatesFromAddress } from "../../../../utils/location.js";
7169
// Components
7270
import MaplibreWrapper from "../../../generic/maplibre-wrapper/MaplibreWrapper.vue";
7371
import ModelLocationForm from "../model-location-form/ModelLocationForm.vue";
7472
7573
const props = defineProps({
7674
project: {
7775
type: Object,
78-
required: true
76+
required: true,
7977
},
8078
model: {
81-
type: Object
82-
}
79+
type: Object,
80+
},
8381
});
8482
8583
const { isProjectAdmin } = useUser();
@@ -88,11 +86,7 @@ const { fetchModelLocation } = useModels();
8886
const loading = ref(false);
8987
provide("loading", loading);
9088
91-
const {
92-
isOpen: isOpenForm,
93-
open: openLocationForm,
94-
close: closeLocationForm
95-
} = useToggle();
89+
const { isOpen: isOpenForm, open: openLocationForm, close: closeLocationForm } = useToggle();
9690
9791
const site = ref(null);
9892
const address = ref("");
@@ -144,7 +138,7 @@ watch(
144138
reset();
145139
if (props.model) setLocation();
146140
},
147-
{ immediate: true }
141+
{ immediate: true },
148142
);
149143
150144
onActivated(() => {

‎src/components/specific/models/models-manager/ModelsManager.scss‎

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,75 @@
11
.models-manager {
2+
display: flex;
3+
flex-direction: column;
24
box-shadow: var(--box-shadow);
35
background-color: var(--color-white);
46
border-radius: 20px;
57
overflow: hidden;
68

79
&__head {
8-
height: 44px;
10+
flex: 0 0 auto;
911
display: flex;
1012
align-items: center;
11-
padding: 0 var(--spacing-unit);
12-
background-color: var(--color-silver-light);
13+
gap: var(--spacing-unit);
14+
padding: var(--spacing-unit);
15+
background-color: var(--color-white);
16+
}
17+
18+
&__tabs {
19+
display: flex;
20+
align-items: center;
21+
gap: calc(var(--spacing-unit) / 2);
22+
flex-wrap: wrap;
23+
flex: 1 1 auto;
24+
min-width: 0;
1325
}
1426

1527
&__body {
16-
height: calc(100% - 44px);
28+
flex: 1 1 auto;
29+
min-height: 0;
1730
background-color: var(--color-white);
31+
display: flex;
32+
flex-direction: column;
1833
}
1934

2035
&__tab {
21-
width: 215px;
22-
height: 100%;
23-
padding: 0 var(--spacing-unit);
24-
display: flex;
25-
justify-content: center;
36+
display: inline-flex;
2637
align-items: center;
27-
gap: calc(var(--spacing-unit) * 0.5);
38+
justify-content: center;
39+
gap: calc(var(--spacing-unit) / 2);
40+
height: 40px;
41+
padding: 0 calc(var(--spacing-unit) * 3 / 2);
42+
border: none;
43+
border-radius: 50px;
44+
background-color: transparent;
45+
color: var(--color-granite-light);
46+
font-family: inherit;
47+
font-size: 13px;
48+
line-height: 1;
2849
cursor: pointer;
50+
transition:
51+
background-color 0.2s ease,
52+
color 0.2s ease;
2953

30-
opacity: 0.6;
31-
background-color: transparent;
32-
border-radius: 12px 12px 0 0;
54+
&:hover:not(.models-manager__tab--active) {
55+
background-color: rgba(47, 55, 74, 0.04);
56+
}
3357

34-
&.selected {
35-
opacity: 1;
36-
background-color: var(--color-white);
58+
&--active {
59+
background-color: var(--color-neutral-lighter);
60+
color: var(--color-primary);
61+
font-weight: bold;
3762
}
3863

3964
&__text {
4065
white-space: nowrap;
4166
}
4267

4368
&__icon {
44-
width: 22px;
45-
height: 22px;
69+
display: inline-flex;
70+
align-items: center;
71+
justify-content: center;
72+
flex: 0 0 auto;
4673
}
4774

4875
.beta-badge {
@@ -56,26 +83,30 @@
5683
}
5784

5885
&__count {
59-
min-width: 18px;
60-
height: 18px;
61-
padding: 0 4px;
62-
line-height: 16px;
63-
text-align: center;
64-
border-radius: calc(18px / 2);
65-
font-size: 12px;
86+
display: inline-flex;
87+
align-items: center;
88+
justify-content: center;
89+
min-width: 20px;
90+
height: 20px;
91+
padding: 0 6px;
92+
border-radius: 10px;
6693
background-color: var(--color-primary);
6794
color: var(--color-white);
95+
font-size: 12px;
96+
font-weight: 500;
97+
line-height: 1;
6898
}
6999
}
70100

71101
&__menu {
72102
position: relative;
73103
margin-left: auto;
104+
flex: 0 0 auto;
74105

75106
&__container {
76107
position: absolute;
77108
z-index: 5;
78-
top: 30px;
109+
top: calc(100% + var(--spacing-unit) / 2);
79110
right: 0;
80111
padding: calc(var(--spacing-unit) / 2) 0;
81112
}
@@ -86,6 +117,7 @@
86117
align-items: center;
87118
gap: var(--spacing-unit);
88119
white-space: nowrap;
120+
padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
89121

90122
.bimdata-checkbox {
91123
width: 100%;

‎src/components/specific/models/models-manager/ModelsManager.vue‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
11
<template>
22
<div class="models-manager">
33
<div class="models-manager__head">
4-
<template v-for="tab of tabs" :key="tab.id">
5-
<div
6-
v-if="tab.displayed"
7-
class="models-manager__tab"
8-
:class="{ selected: tab.id === currentTab.id }"
9-
:style="{ width: isLG ? 'auto' : '' }"
10-
@click="selectTab(tab)"
11-
>
12-
<span class="models-manager__tab__icon">
13-
<BIMDataIcon :name="tab.icon" size="m" />
14-
</span>
15-
<span v-if="!isMD" class="models-manager__tab__text">
16-
{{ tab.text }}
17-
</span>
18-
<span v-if="tab.beta" class="beta-badge">BETA</span>
19-
<span class="models-manager__tab__count" v-if="tab.models.length > 0">
20-
{{ tab.models.length }}
21-
</span>
22-
</div>
23-
</template>
4+
<div class="models-manager__tabs">
5+
<template v-for="tab of tabs" :key="tab.id">
6+
<button
7+
v-if="tab.displayed"
8+
type="button"
9+
class="models-manager__tab"
10+
:class="{ 'models-manager__tab--active': tab.id === currentTab.id }"
11+
@click="selectTab(tab)"
12+
>
13+
<BIMDataIcon
14+
class="models-manager__tab__icon"
15+
:name="tab.icon"
16+
size="m"
17+
/>
18+
<span v-if="!isMD" class="models-manager__tab__text">
19+
{{ tab.text }}
20+
</span>
21+
<span v-if="tab.beta" class="beta-badge">BETA</span>
22+
<span v-if="tab.models.length > 0" class="models-manager__tab__count">
23+
{{ tab.models.length }}
24+
</span>
25+
</button>
26+
</template>
27+
</div>
2428

2529
<div class="models-manager__menu" v-click-away="closeMenu">
26-
<BIMDataButton>
27-
<BIMDataIconEllipsis
28-
color="granite-light"
29-
size="l"
30-
fill
31-
:rotate="90"
32-
@click="toggleMenu"
33-
/>
30+
<BIMDataButton ghost rounded icon @click="toggleMenu">
31+
<BIMDataIconEllipsis color="granite-light" size="m" :rotate="90" />
3432
</BIMDataButton>
3533

3634
<BIMDataMenu

0 commit comments

Comments
 (0)