feat: drawing panel

Geoportail-Luxembourg · Aug 12, 2024 · b67783c · b67783c
1 parent c8b082b
commit b67783c
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 107 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -94,12 +94,11 @@
 
   .lux-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:lux-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .lux-btn-primary {
-    @apply lux-btn bg-primary text-white hover:bg-quaternary;
-    border: 1px solid var(--color-quaternary);
+    @apply lux-btn bg-primary text-white hover:bg-quaternary border-[1px] border-[color:var(--color-quaternary)];
   }
 
   .lux-btn-grey {
@@ -340,14 +339,46 @@
     @apply text-white;
   }
 
+  .lux-drawing-item-label .selected {
+    @apply bg-tertiary;
+  }
+
   .lux-drawing-item-content {
-    @apply bg-secondary mt-1 mb-2 p-3;
+    @apply mt-1 mb-2 p-3;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .lux-drawing-item-content input[type='text'],
+  .lux-drawing-item-content textarea {
+    @apply bg-secondary px-3 py-[6px] text-white;
+  }
+
+  .lux-drawing-item-content input[type='color'],
+  .lux-drawing-item-content input[type='number'] {
+    border: 1px solid rgb(118, 118, 118);
+  }
+
+  .lux-drawing-item-content input[type='number'] {
+    @apply py-[2px] px-1;
   }
 
   .lux-menu-popup-list {
     @apply py-1 z-50 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   }
+
+  .form-control {
+    border: 1px solid var(--color-gray);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  }
+
+  .form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+  }
 }
 
 .fa-solid {
@@ -492,6 +523,6 @@
     --school-secondary: #9e9ac8;
     --school-tertiary: #54278f;
     --school-quaternary: #54278f;
-    --button-bg-color: #ccc;
+    --color-gray: #ccc;
   }
 }
diff --git a/src/assets/ol.css b/src/assets/ol.css
@@ -8,7 +8,7 @@
 
   .ol-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:ol-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .ol-control {

diff --git a/src/components/draw/draw-panel-item-sub.vue → ...omponents/draw/draw-panel-feature-sub.vue b/src/components/draw/draw-panel-item-sub.vue → ...omponents/draw/draw-panel-feature-sub.vue
@@ -114,9 +114,9 @@ function onClickDock() {
 
   <!-- UI when user is modifying feature -->
   <template v-else>
-    <FeatureEditInfo v-if="isEditingInfo" />
+    <FeatureEditInfo v-if="isEditingInfo" :feature="feature" />
     <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
-    <FeatureDelete v-if="isDeleting" />
+    <FeatureDelete v-if="isDeleting" :feature="feature" />
 
     <div class="text-right">
       <button class="lux-btn mr-2" @click="onCancel">{{ t('Cancel') }}</button>

diff --git a/src/components/draw/draw-panel-feature.vue b/src/components/draw/draw-panel-feature.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import DrawPanelFeatureSub from './draw-panel-feature-sub.vue'
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    featureId: number
+    feature: string
+  }>(),
+  {
+    open: true,
+  }
+)
+
+const isOpen = ref(props.open)
+const emit = defineEmits(['closeFeatureItemSub'])
+
+function onClick() {
+  isOpen.value = !isOpen.value
+  emit('closeFeatureItemSub', !isOpen.value)
+}
+</script>
+
+<template>
+  <!-- Drawing type and title -->
+  <button
+    class="lux-drawing-item-label flex items-center gap-1"
+    :aria-expanded="isOpen"
+    :aria-controls="`drawing-item-content-${featureId}`"
+    @click="onClick"
+  >
+    <!-- Dragging button -->
+    <span
+      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
+    ></span>
+    <!-- Type of feat. icon -->
+    <span
+      class="lux-icon"
+      :class="{
+        point: feature === 'Point',
+        line: feature === 'LineString',
+        polygon: feature === 'Polygon' || feature === 'Circle',
+      }"
+    ></span>
+    <!-- Feature label -->
+    <span :class="{ selected: isOpen }">
+      {{ feature }}
+    </span>
+  </button>
+
+  <!-- Drawing details -->
+  <div
+    v-if="isOpen"
+    class="lux-drawing-item-content"
+    :id="`drawing-item-content-${featureId}`"
+  >
+    <DrawPanelFeatureSub :is-editing="false" :feature="feature" />
+  </div>
+</template>
diff --git a/src/components/draw/draw-panel-item.vue b/src/components/draw/draw-panel-item.vue
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
 import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
 import useSortable from '@/composables/sortable'
-import DrawPanelItem from './draw-panel-item.vue'
+import { useDrawStore } from '@/stores/draw.store'
 
-const { t } = useTranslation()
+import DrawPanelFeature from './draw-panel-feature.vue'
+import { storeToRefs } from 'pinia'
 
-const isOpenItemPoint = ref(false)
-const isOpenItemPolygon = ref(false)
-const isOpenItemLineString = ref(false)
+const { t } = useTranslation()
 
+const drawStore = useDrawStore()
+const { drawFeatures: features } = storeToRefs(drawStore)
 const drawingMenuOptions = [
   { label: 'Copier dans ma carte', action: () => console.log('TODO') },
   { label: 'Effacer tous les dessins', action: () => console.log('TODO') },
@@ -53,30 +54,13 @@ onMounted(() => {
       </MenuPopup>
     </div>
 
-    <ul class="mx-1 sortable-features">
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemPoint"
-          :drawing-id="32"
-          :feature="'Point'"
-          @closeFeatureItemSub="val => (isOpenItemPoint = val)"
-        />
-      </li>
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemPolygon"
-          :drawing-id="32"
-          :feature="'Polygon'"
-          @closeFeatureItemSub="val => (isOpenItemPolygon = val)"
-        />
-      </li>
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemLineString"
-          :drawing-id="32"
-          :feature="'LineString'"
-          @closeFeatureItemSub="val => (isOpenItemLineString = val)"
-        />
+    <ul class="mx-1 sortable-features" v-if="features.length">
+      <li
+        class="lux-drawing-item"
+        v-for="(feature, index) in features"
+        :key="index"
+      >
+        <DrawPanelFeature :featureId="30" :feature="feature" />
       </li>
     </ul>
   </div>

diff --git a/src/components/draw/feature-edit-info.vue b/src/components/draw/feature-edit-info.vue
@@ -2,10 +2,15 @@
 import { useTranslation } from 'i18next-vue'
 
 const { t } = useTranslation()
+
+const props = defineProps<{
+  feature: string
+}>()
+const feature = props.feature
 </script>
 
 <template>
   {{ t('Modification des informations') }}
-  <input type="text" class="block mt-2 mb-4" />
-  <textarea rows="3" class="block mb-4 w-full"></textarea>
+  <input type="text" class="form-control block mt-2 mb-4" v-model="feature" />
+  <textarea rows="3" class="form-control block mb-4 w-full"></textarea>
 </template>
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
@@ -12,57 +12,47 @@ defineProps<{
 
   <template v-if="feature === 'Point'">
     <div class="flex items-center">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Color') }}
       </label>
       <div class="md:w-2/3">
-        <input
-          class="leading-tight"
-          id="inline-full-name"
-          type="color"
-          value=""
-        />
+        <input class="cursor-pointer" type="color" value="" />
       </div>
     </div>
 
     <div class="flex items-center mt-1">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Size') }}
       </label>
       <div class="md:w-2/3">
         <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
       </div>
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Angle') }}
       </label>
       <div class="md:w-2/3">
         <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
       </div>
     </div>
   </template>
 
   <template v-if="feature === 'LineString'">
     <div class="flex items-center">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Color') }}
       </label>
       <div class="md:w-2/3">
-        <input
-          class="leading-tight"
-          id="inline-full-name"
-          type="color"
-          value=""
-        />
+        <input class="cursor-pointer" type="color" value="" />
       </div>
     </div>
 
     <div class="flex items-center mt-1">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Stroke width') }}
       </label>
       <div class="md:w-2/3">
@@ -72,7 +62,7 @@ defineProps<{
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Style') }}
       </label>
       <div class="md:w-2/3">
@@ -81,7 +71,7 @@ defineProps<{
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Show orientation') }}
       </label>
       <div class="md:w-2/3">

diff --git a/src/components/theme-selector/theme-selector.service.ts b/src/components/theme-selector/theme-selector.service.ts
@@ -1,7 +1,7 @@
 export class ThemeSelectorService {
   setCurrentThemeColors(themeName: string) {
     const root = document.querySelector(':root') as HTMLElement
-    const colors = ['primary', 'secondary', 'tertiary']
+    const colors = ['primary', 'secondary', 'tertiary', 'quaternary']
     colors.forEach(colorTone => {
       const color = getComputedStyle(root).getPropertyValue(
         `--${themeName}-${colorTone}`

diff --git a/src/components/theme-selector/theme-selector.vue b/src/components/theme-selector/theme-selector.vue
@@ -4,12 +4,11 @@ import { storeToRefs } from 'pinia'
 
 import useThemes from '@/composables/themes/themes.composable'
 import { useThemeStore } from '@/stores/config.store'
+import { useAppStore } from '@/stores/app.store'
 
 import ThemeGrid from './theme-grid.vue'
 import ThemeSelectorButton from './theme-selector-button.vue'
 
-import { useAppStore } from '@/stores/app.store'
-
 const appStore = useAppStore()
 const { setThemeGridOpen } = appStore
 const { themeGridOpen } = storeToRefs(appStore)