wip: Create a style editor #1073

wip: Create a style manager #1072

Author: cnouguier

map/client/components/styles/KStyleEditor.vue

@@ -19,7 +19,7 @@
       <!-- Point editor -->
       <KStyleEditorSection
         v-if="canEditPoint"
-        title="KStyleEditor.SECTION_TITLE_POINT"
+        label="KStyleEditor.POINT_SECTION"
         :style="style"
         type="point"
         :dense="dense"
@@ -30,22 +30,22 @@
         <KStyleProperty v-model="style.point.shape" :name="$t('KStyleEditor.SHAPE')" type="shape" :dense="dense" />
         <KStylePropertiesGroup
           v-if="!is3D"
+          label="KStyleEditor.ICON_GROUP"
           v-model="style.point.icon"
-          label="icon"
           :properties="pointIconProperties"
           :dense="dense"
         />
         <KStylePropertiesGroup
+          label="KStyleEditor.STROKE_GROUP"
           v-model="style.point.stroke"
-          label="stroke"
           :properties="pointStrokeProperties"
           :dense="dense"
         />
       </KStyleEditorSection>
       <!-- Line editor -->
       <KStyleEditorSection
         v-if="canEditLine"
-        title="KStyleEditor.SECTION_TITLE_LINE"
+        label="KStyleEditor.LINE_SECTION"
         :style="style"
         type="line"
         :dense="dense"
@@ -57,16 +57,16 @@
       <!-- Polygon editor -->
       <KStyleEditorSection
         v-if="canEditPolygon"
-        title="KStyleEditor.SECTION_TITLE_POLYGON"
+        label="KStyleEditor.POLYGON_SECTION"
         :style="style"
         type="polygon"
         :dense="dense"
       >
         <KStyleProperty v-model="style.polygon.color" :name="$t('KStyleEditor.FILL_COLOR')" type="color" :dense="dense" />
         <KStyleProperty v-model="style.polygon.opacity" :name="$t('KStyleEditor.FILL_OPACITY')" type="opacity" :dense="dense" />
         <KStylePropertiesGroup
+          label="KStyleEditor.STROKE_GROUP"
           v-model="style.polygon.stroke"
-          label="stroke"
           :properties="polygonStrokeProperties"
           :dense="dense"
         />
@@ -172,7 +172,7 @@ const pointStrokeProperties = computed(() => {
 })
 const pointIconProperties = computed(() => {
   return [
-    { name: 'classes', label: 'KStyleEditor.ICON', type: 'color', default: defaultStyle.value.point.icon.classes },
+    { name: 'classes', label: 'KStyleEditor.ICON', type: 'icon', default: defaultStyle.value.point.icon.classes },
     { name: 'size', label: 'KStyleEditor.ICON_SIZE', type: 'size', min: 8, max: 48, default: defaultStyle.value.point.icon.size }
   ]
 })

map/client/components/styles/KStyleEditorSection.vue

@@ -7,8 +7,8 @@
       :dense="dense"
     >
       <template v-slot:header>
-        <q-item-section v-if="title">
-          {{ $t(title) }}
+        <q-item-section v-if="label">
+          {{ $t(label) }}
         </q-item-section>
         <q-item-section v-if="!isOpened" side>
           <KStylePreview :style="style[type]" :type="type" />
@@ -39,7 +39,7 @@ import KStyleTip from './KStyleTip.vue'
 
 // Props
 defineProps({
-  title: {
+  label: {
     type: String,
     required: true
   },

map/client/components/styles/KStyleManager.vue

@@ -101,6 +101,9 @@ const { getSelectedFeaturesByLayer, CurrentActivity, CurrentActivityContext } =
 const styleEditor = ref(null)
 const style = ref(null)
 const viewMode = ref('list')
+const defaultStyle = _.pick(_.get(CurrentActivityContext.config, 'engine.style'), ['point', 'line', 'polygon'])
+
+console.log(defaultStyle)
 
 // Computed
 const baseQuery = computed(() => {
@@ -109,10 +112,6 @@ const baseQuery = computed(() => {
 const filterQuery = computed(() => {
   return Object.assign({}, Filter.get().query)
 })
-const defaultStyle = computed(() => {
-  const style = _.get(CurrentActivityContext.config, 'engine.style')
-  return _.pick(style, ['point', 'line', 'polygon'])
-})
 const toolbar = computed(() => {
   if (viewMode.value === 'editor') return []
   return [

map/client/components/styles/KStylePropertiesGroup.vue

@@ -3,7 +3,7 @@
     <div class="full-width row items-center no-wrap">
       <q-toggle
         v-model="isActive"
-        :label="label"
+        :label="$t(label)"
         size="sm"
         :dense="dense"
         @update:model-value="onToggled"

map/client/components/styles/KStyleTip.vue

@@ -108,7 +108,6 @@ watch(() => props.modelValue, (value) => {
   showTip.value = value
 }, { immediate: true })
 watch(() => props.style, (value) => {
-  console.log(props.style)
   location.value = refresh()
 }, { immediate: true, deep: true })
 

map/client/i18n/map_en.json

@@ -763,9 +763,11 @@
   "KStyleEditor": {
     "NAME_LABEL": "Enter the name of the style",
     "STYLE_ALREADY_EXISTS": "Style {style} already exists !",
-    "SECTION_TITLE_POINT": "Point",
-    "SECTION_TITLE_LINE": "Line",
-    "SECTION_TITLE_POLYGON": "Polygon",
+    "POINT_SECTION": "Point",
+    "LINE_SECTION": "Line",
+    "POLYGON_SECTION": "Polygon",
+    "STROKE_GROUP": "Stroke",
+    "ICON_GROUP": "Icon",
     "COLOR": "Color",
     "FILL_COLOR": "Fill color",
     "OPACITY": "Opacity",