Skip to content

Commit 9034999

Browse files
JulienChampagnolJulienChampagnol
committed
Merge branch 'next' of https://github.com/Geode-solutions/OpenGeodeWeb-Front into fix/graphic_tests
2 parents c86e711 + f94c5a1 commit 9034999

16 files changed

Lines changed: 179 additions & 49 deletions

File tree

‎app/components/FetchingData.vue‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,46 @@
1+
<script setup>
2+
const DEFAULT_SIZE = 22;
3+
const DEFAULT_WIDTH = 3;
4+
5+
const {
6+
text = "Fetching data...",
7+
size = DEFAULT_SIZE,
8+
width = DEFAULT_WIDTH,
9+
} = defineProps({
10+
text: {
11+
type: String,
12+
},
13+
size: {
14+
type: [Number, String],
15+
},
16+
width: {
17+
type: [Number, String],
18+
},
19+
});
20+
</script>
21+
122
<template>
2-
<Transition name="slide-fade" class="pa-0">
3-
<v-row align="center" class="pa-0">
4-
<v-col cols="auto" class="pa-0">
5-
<v-progress-circular :size="22" :width="3" color="primary" indeterminate />
6-
</v-col>
7-
<v-col cols="auto">
8-
<p>Fetching data...</p>
23+
<Transition name="slide-fade">
24+
<v-row align="center" justify="center" class="pa-0 ma-0 fill-height">
25+
<v-col cols="auto" class="pa-0 d-flex flex-column align-center">
26+
<v-progress-circular
27+
:size="size"
28+
:width="width"
29+
color="primary"
30+
indeterminate
31+
class="ma-2"
32+
/>
33+
<p v-if="text" class="text-body-2 text-medium-emphasis">
34+
{{ text }}
35+
</p>
936
</v-col>
1037
</v-row>
1138
</Transition>
1239
</template>
40+
41+
<style scoped>
42+
.fill-height {
43+
height: 100%;
44+
min-height: 100px;
45+
}
46+
</style>

‎app/components/Launcher.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@ import { Status } from "@ogw_front/utils/status";
55
import { appMode } from "@ogw_front/utils/local/app_mode";
66
import { useInfraStore } from "@ogw_front/stores/infra";
77
8-
const { logo } = defineProps({
8+
const { logo, appName } = defineProps({
99
logo: {
10+
type: String,
11+
required: false,
12+
default: "",
13+
},
14+
appName: {
1015
type: String,
1116
required: true,
1217
},
@@ -31,7 +36,7 @@ if (infraStore.app_mode !== appMode.CLOUD) {
3136
<Recaptcha :button_color="'secondary'" />
3237
</v-col>
3338
<v-col v-else-if="infraStore.status === Status.CREATING">
34-
<Loading :logo="logo" />
39+
<Loading :logo="logo" :app-name="appName" />
3540
</v-col>
3641
</v-row>
3742
</v-container>

‎app/components/Loading.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<script setup>
2-
const { logo } = defineProps({
2+
const { logo, appName } = defineProps({
33
logo: {
44
type: String,
55
default: "",
66
},
7+
appName: {
8+
type: String,
9+
required: true,
10+
},
711
});
812
913
const show = ref(false);
@@ -68,7 +72,7 @@ onUnmounted(() => {
6872
style="max-width: 650px; width: 100%; padding: 0 24px; gap: 1.5rem"
6973
>
7074
<LoadingHeader :logo="logo" />
71-
<LoadingEcoMessages />
75+
<LoadingEcoMessages :app-name="appName" />
7276
<LoadingProgress :progress="progress" />
7377
<LoadingFooter />
7478
</div>

‎app/components/Loading/EcoMessages.vue‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<script setup>
2-
const ecoMessages = [
2+
const { appName } = defineProps({
3+
appName: {
4+
type: String,
5+
required: true,
6+
},
7+
});
8+
9+
const ecoMessages = computed(() => [
310
{
411
icon: "mdi-leaf",
512
title: "Why the wait?",
@@ -13,17 +20,17 @@ const ecoMessages = [
1320
{
1421
icon: "mdi-earth",
1522
title: "Your choice matters",
16-
message: "By using Vease, you're part of a more sustainable way to work with data.",
23+
message: `By using ${appName}, you're part of a more sustainable way to work with data.`,
1724
},
18-
];
25+
]);
1926
20-
const MESSAGE_INTERVAL_MS = 3000;
27+
const MESSAGE_INTERVAL_MS = 5000;
2128
const currentMessage = ref(0);
2229
let interval = undefined;
2330
2431
onMounted(() => {
2532
interval = setInterval(() => {
26-
currentMessage.value = (currentMessage.value + 1) % ecoMessages.length;
33+
currentMessage.value = (currentMessage.value + 1) % ecoMessages.value.length;
2734
}, MESSAGE_INTERVAL_MS);
2835
});
2936

‎app/components/Recaptcha.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const { button_label, button_color, color } = defineProps({
55
button_label: {
66
type: String,
77
required: false,
8-
default: "Launch the app",
8+
default: "Load the app",
99
},
1010
button_color: {
1111
type: String,
@@ -60,16 +60,35 @@ function submit() {
6060
</VRow>
6161
<VRow>
6262
<VCol>
63-
<VCheckbox label="Launch the app" v-model="launch" />
63+
<VCheckbox label="Load the app" v-model="load" />
6464
</VCol>
6565
</VRow>
6666
</VContainer>
6767
</VForm>
6868
</VCol>
6969
</VRow>
7070
<VRow align="center" justify="center">
71-
<VCol cols="4" class="d-flex justify-center align-center">
72-
<VBtn :text="button_label" :color="color || button_color" @click="submit" />
71+
<VCol cols="auto" class="d-flex justify-center align-center">
72+
<VBtn class="load-btn" :text="button_label" :color="color || button_color" @click="submit" />
7373
</VCol>
7474
</VRow>
7575
</template>
76+
77+
<style scoped>
78+
.load-btn {
79+
padding: 0 40px !important;
80+
height: 50px !important;
81+
border-radius: 8px;
82+
text-transform: none !important;
83+
font-weight: 600;
84+
letter-spacing: 0.5px;
85+
transition:
86+
transform 0.2s ease,
87+
box-shadow 0.2s ease !important;
88+
}
89+
90+
.load-btn:hover {
91+
transform: translateY(-2px);
92+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
93+
}
94+
</style>

‎app/components/Stepper.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const { steps, current_step_index } = toRefs(stepper_tree);
2222
@update:model-value="current_step_index = $event - 1"
2323
flat
2424
non-linear
25-
class="pa-0 ma-0 bg-transparent rounded-xl overflow-hidden custom-stepper flex-grow-1"
25+
class="pa-0 ma-0 bg-transparent rounded-xl overflow-y-auto custom-stepper flex-grow-1"
2626
>
2727
<Step
2828
v-for="(step, index) in steps"

‎app/components/Viewer/ObjectTree/Layout.vue‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,17 @@ const GAP_WIDTH = 10;
1111
const PERCENT_100 = 100;
1212
1313
const TOTAL_PERCENT = 100;
14+
const MAX_PANEL_WIDTH_RATIO = 0.8;
15+
16+
const { containerWidth } = defineProps({
17+
containerWidth: { type: Number, required: true },
18+
});
1419
1520
const treeviewStore = useTreeviewStore();
1621
const emit = defineEmits(["show-menu"]);
1722
23+
const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
24+
1825
const mainView = computed(() => treeviewStore.opened_views[0]);
1926
const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
2027
@@ -41,6 +48,28 @@ watch(
4148
{ immediate: true },
4249
);
4350
51+
watch(maxWidth, (newMax) => {
52+
const hasAdditional = additionalViews.value.length > 0;
53+
const gap = hasAdditional ? GAP_WIDTH : 0;
54+
const total =
55+
treeviewStore.panelWidth + (hasAdditional ? treeviewStore.additionalPanelWidth : 0) + gap;
56+
57+
if (total > newMax) {
58+
if (hasAdditional) {
59+
const newAdditionalWidth = newMax - treeviewStore.panelWidth - gap;
60+
if (newAdditionalWidth < WIDTH_MIN) {
61+
treeviewStore.setAdditionalPanelWidth(WIDTH_MIN);
62+
const newMainWidth = newMax - WIDTH_MIN - gap;
63+
treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newMainWidth));
64+
} else {
65+
treeviewStore.setAdditionalPanelWidth(newAdditionalWidth);
66+
}
67+
} else {
68+
treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newMax));
69+
}
70+
}
71+
});
72+
4473
function onDragStart(index) {
4574
draggedIndex.value = index;
4675
}
@@ -61,8 +90,15 @@ function onResizeStart(event) {
6190
const startX = event.clientX;
6291
function resize(move_event) {
6392
const deltaX = move_event.clientX - startX;
64-
const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
65-
treeviewStore.setPanelWidth(newWidth);
93+
let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
94+
const hasAdditional = additionalViews.value.length > 0;
95+
const gap = hasAdditional ? GAP_WIDTH : 0;
96+
const currentTotalWidth =
97+
newWidth + (hasAdditional ? treeviewStore.additionalPanelWidth : 0) + gap;
98+
if (currentTotalWidth > maxWidth.value) {
99+
newWidth = maxWidth.value - (hasAdditional ? treeviewStore.additionalPanelWidth : 0) - gap;
100+
}
101+
treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newWidth));
66102
document.body.style.userSelect = "none";
67103
}
68104
function stopResize() {
@@ -79,8 +115,12 @@ function onAdditionalResizeStart(event) {
79115
const startX = event.clientX;
80116
function resize(move_event) {
81117
const deltaX = move_event.clientX - startX;
82-
const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
83-
treeviewStore.setAdditionalPanelWidth(newWidth);
118+
let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
119+
const currentTotalWidth = treeviewStore.panelWidth + newWidth + GAP_WIDTH;
120+
if (currentTotalWidth > maxWidth.value) {
121+
newWidth = maxWidth.value - treeviewStore.panelWidth - GAP_WIDTH;
122+
}
123+
treeviewStore.setAdditionalPanelWidth(Math.max(WIDTH_MIN, newWidth));
84124
document.body.style.userSelect = "none";
85125
}
86126
function stopResize() {

‎app/components/Viewer/ObjectTree/Views/ModelComponents.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup>
2+
import FetchingData from "@ogw_front/components/FetchingData.vue";
23
import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
34
import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
45
import { compareSelections } from "@ogw_front/utils/treeview";
@@ -63,7 +64,10 @@ async function onSelectionChange(current) {
6364
@toggle-sort="toggleSort"
6465
/>
6566

67+
<FetchingData v-if="items === undefined" :size="48" :width="4" text="" />
68+
6669
<v-treeview
70+
v-else
6771
:selected="mesh_components_selection"
6872
v-model:opened="opened"
6973
:items="processedItems"

‎app/components/Viewer/Ui.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ defineExpose({ get_viewer_id });
4444
</script>
4545

4646
<template>
47-
<ViewerObjectTreeLayout @show-menu="(args) => emit('show-menu', args)" />
47+
<ViewerObjectTreeLayout
48+
:container-width="containerWidth"
49+
@show-menu="(args) => emit('show-menu', args)"
50+
/>
4851
<ViewerContextMenu
4952
v-if="displayMenu"
5053
:id="menuStore.current_id"

‎app/components/Wrapper.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import { useInfraStore } from "@ogw_front/stores/infra";
77
88
const infraStore = useInfraStore();
99
10-
const { versions_schema } = defineProps({
10+
const { versions_schema, appName } = defineProps({
1111
versions_schema: { type: Object, required: true },
12+
appName: { type: String, required: true },
1213
});
1314
</script>
1415

@@ -17,7 +18,7 @@ const { versions_schema } = defineProps({
1718
<v-row class="flex-column">
1819
<template v-if="!infraStore.microservices_connected">
1920
<v-col>
20-
<Launcher />
21+
<Launcher :app-name="appName" />
2122
</v-col>
2223
</template>
2324
<template v-else>

0 commit comments

Comments
 (0)