properly design nested variants for operations arrays, remove unneede…

…d provide/inject state for FormOperations, design more obvious visual feedback for deleting and moving operations
AlexVipond · May 21, 2021 · 2afa076 · 2afa076
1 parent 12486fd
commit 2afa076
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 37 deletions.
diff --git a/src/interface/components/BaseListbox.vue b/src/interface/components/BaseListbox.vue
@@ -66,7 +66,7 @@ import {
   ListboxOption,
 } from '@headlessui/vue'
 import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
-import { OPERATIONS_NESTED_STATUS_SYMBOL } from '../state'
+import { NESTED_STATUS_SYMBOL } from '../state'
 
 export default defineComponent({
   components: {
@@ -86,7 +86,7 @@ export default defineComponent({
               emit('update:modelValue', newValue)
             }
           }),
-          isNestedVariant = inject<boolean>(OPERATIONS_NESTED_STATUS_SYMBOL)
+          isNestedVariant = inject<boolean>(NESTED_STATUS_SYMBOL)
 
     return { selectedOption, isNestedVariant }
   }

diff --git a/src/interface/components/BaseRadioGroup.vue b/src/interface/components/BaseRadioGroup.vue
@@ -35,7 +35,7 @@ import {
   RadioGroupLabel,
   RadioGroupOption,
 } from '@headlessui/vue'
-import { OPERATIONS_NESTED_STATUS_SYMBOL } from '../state'
+import { NESTED_STATUS_SYMBOL } from '../state'
 
 export default defineComponent({
   components: {
@@ -51,7 +51,7 @@ export default defineComponent({
               emit('update:modelValue', newValue)
             }
           }),
-          isNestedVariant = inject<boolean>(OPERATIONS_NESTED_STATUS_SYMBOL)
+          isNestedVariant = inject<boolean>(NESTED_STATUS_SYMBOL)
 
     return { selectedOption, isNestedVariant }
   }

diff --git a/src/interface/components/FormArg.vue b/src/interface/components/FormArg.vue
@@ -47,7 +47,7 @@ import {
   attributeOperators,
   directionalities
 } from '../options'
-import { OPERATIONS_NESTED_STATUS_SYMBOL } from '../state'
+import { NESTED_STATUS_SYMBOL } from '../state'
 
 export default defineComponent({
   components: {
@@ -96,7 +96,7 @@ export default defineComponent({
             }
           })(),
           modelledOption = ref(optionDefault),
-          isNestedVariant = inject<boolean>(OPERATIONS_NESTED_STATUS_SYMBOL)
+          isNestedVariant = inject<boolean>(NESTED_STATUS_SYMBOL)
 
 
     watch(

diff --git a/src/interface/components/FormOperation.vue b/src/interface/components/FormOperation.vue
@@ -1,5 +1,12 @@
 <template>
-  <section class="flex flex-col gap-3">
+  <section
+    class="flex flex-col gap-3 rounded-md ring-offset-4"
+    :class="[
+      status === 'ready to delete' ? 'ring-2 ring-cranberry-700' : '',
+      status === 'ready to move' ? 'ring-2 ring-denim-500' : '',
+      isNestedVariant ? 'ring-offset-denim-600' : 'ring-offset-denim-800'
+    ]"
+  >
     <label class="input-label text-violet-denim-300">{{ label }}</label>
     <div class="flex items-center gap-3">
       <div class="flex w-full min-w-0">
@@ -14,25 +21,37 @@
         name="Delete condition"
         class="my-auto flex-shrink-0 p-1 btn--raised btn--grows bg-cranberry-700 text-cranberry-300  rounded-full"
         @click="emitDelete"
+        @mouseenter="() => readyToDelete()"
+        @focus="() => readyToDelete()"
+        @mouseleave="() => notReady()"
+        @blur="() => notReady()"
       >
         <TrashIcon class="h-5 w-5" />
       </button>
       <div class="flex flex-col gap-1">
         <button
           type="button"
-          name="Delete condition"
+          name="Move condition up"
           class="my-auto flex-shrink-0 p-1 btn--raised btn--grows rounded-full"
           :class="isNestedVariant ? 'bg-denim-500 text-denim-100' : 'bg-denim-600 text-denim-200'"
           @click="emitMoveUp"
+          @mouseenter="() => readyToMove()"
+          @focus="() => readyToMove()"
+          @mouseleave="() => notReady()"
+          @blur="() => notReady()"
         >
           <ChevronUpIcon class="h-3 w-3" />
         </button>
         <button
           type="button"
-          name="Delete condition"
+          name="Move condition down"
           class="my-auto flex-shrink-0 p-1 btn--raised btn--grows rounded-full"
           :class="isNestedVariant ? 'bg-denim-500 text-denim-100' : 'bg-denim-600 text-denim-200'"
           @click="emitMoveDown"
+          @mouseenter="() => readyToMove()"
+          @focus="() => readyToMove()"
+          @mouseleave="() => notReady()"
+          @blur="() => notReady()"
         >
           <ChevronDownIcon class="h-3 w-3" />
         </button>
@@ -56,12 +75,11 @@
         @update:modelValue="newArg => operation = ({ ...operation, args: createReplace({ index, item: newArg })(operation.args) })"
       />
     </template>
-  <!-- Arg repetition should be handled here -->
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, inject } from 'vue'
+import { defineComponent, ref, computed, inject } from 'vue'
 import { createReplace } from '@baleada/logic'
 import {
   TrashIcon,
@@ -72,7 +90,7 @@ import type { Operation } from '../toOperated'
 import InputPipe from './InputPipe.vue'
 import FormArg from './FormArg.vue'
 import { pipeMetadata } from '../pipeMetadata'
-import { OPERATIONS_NESTED_STATUS_SYMBOL } from '../state'
+import { NESTED_STATUS_SYMBOL } from '../state'
 
 export default defineComponent({
   components: {
@@ -109,7 +127,17 @@ export default defineComponent({
           emitMoveDown = () => {
             emit('moveDown', operation.value)
           },
-          isNestedVariant = inject<boolean>(OPERATIONS_NESTED_STATUS_SYMBOL)
+          isNestedVariant = inject<boolean>(NESTED_STATUS_SYMBOL),
+          status = ref('not ready'),
+          readyToDelete = () => {
+            status.value = 'ready to delete'
+          },
+          readyToMove = () => {
+            status.value = 'ready to move'
+          },
+          notReady = () => {
+            status.value = 'not ready'
+          }
     
     return {
       operation,
@@ -122,6 +150,10 @@ export default defineComponent({
       emitMoveDown,
       toDefaultValues,
       isNestedVariant,
+      status,
+      readyToDelete,
+      readyToMove,
+      notReady,
     }
   }
 })

diff --git a/src/interface/components/FormOperations.vue b/src/interface/components/FormOperations.vue
@@ -71,15 +71,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, inject, shallowRef } from 'vue'
+import { computed, defineComponent, inject } from 'vue'
 import type { Ref } from 'vue'
 import { nanoid } from 'nanoid'
 import { createReorder } from '@baleada/logic'
 import { PlusIcon } from '@heroicons/vue/solid'
 import type { Operation } from '../toOperated'
 import FormOperation from './FormOperation.vue'
 import { pipeMetadata } from '../pipeMetadata'
-import { OPERATIONS_NESTING_LEVEL_SYMBOL, OPERATIONS_NESTED_STATUS_SYMBOL } from '../state'
+import { NESTING_LEVEL_SYMBOL, NESTED_STATUS_SYMBOL } from '../state'
 
 export default defineComponent({
   name: 'FormOperations',
@@ -130,11 +130,8 @@ export default defineComponent({
             const index = findOperationIndex({ id: operation.id, operations })
             operations.value = createReorder<Operation>({ from: index, to })(operations.value)
           },
-          nestingLevel = shallowRef(props.isTopLevel ? 0 : inject<number>(OPERATIONS_NESTING_LEVEL_SYMBOL) + 1),
-          isNestedVariant = shallowRef(nestingLevel.value % 2 !== 0)
-    
-    provide(OPERATIONS_NESTING_LEVEL_SYMBOL, nestingLevel.value)
-    provide(OPERATIONS_NESTED_STATUS_SYMBOL, isNestedVariant.value)
+          nestingLevel = inject<number>(NESTING_LEVEL_SYMBOL),
+          isNestedVariant = inject<boolean>(NESTED_STATUS_SYMBOL)
 
     return {
       operations,

diff --git a/src/interface/components/FormOperationsArrays.vue b/src/interface/components/FormOperationsArrays.vue
@@ -1,5 +1,18 @@
 <template>
-  <section class="flex flex-col gap-8">
+  <section class="relative flex flex-col gap-8">
+    <div
+      v-if="!isTopLevel"
+      class="
+        absolute top-0 left-1/2 transform -translate-x-1/2
+        h-full w-full
+        px-7 sm:px-24
+      "
+    >
+      <div
+        class="h-full w-full border-l-[.5rem] border-r-[.5rem]"
+        :class="!isNestedVariant ? 'border-denim-800' : 'border-denim-600'"
+      ></div>
+    </div>
     <transition-group
       enter-active-class="transition duration-100 ease-in"
       enter-from-class="opacity-0"
@@ -12,11 +25,14 @@
       <div
         v-for="(operations, index) in operationsArrays"
         :key="index"
-        class="flex flex-col gap-14"
+        class="relative flex flex-col gap-14"
       > 
         <div
           class="relative rounded-md transition duration-75"
-          :class="statuses[index] === 'ready to delete' ? 'ring ring-cranberry-700 ring-offset-4 ring-offset-denim-1000' : ''"
+          :class="[
+            statuses[index] === 'ready to delete' ? 'ring ring-cranberry-700 ring-offset-4' : '',
+            (isTopLevel && 'ring-offset-denim-1000') || (!isNestedVariant && 'ring-offset-denim-600') || 'ring-offset-denim-800'
+          ]"
         >
           <FormOperations
             :modelValue="operations"
@@ -42,11 +58,20 @@
           v-if="index !== operationsArrays.length - 1"
           class="flex items-center justify-center gap-3 font-mono"
         >
-          <div class="h-px w-16 bg-denim-500" />
-          <h3 class="uppercase text-xl tracking-[0.2em] flex-shrink-0 text-denim-500" >
+          <div
+            class="h-px w-16"
+            :class="(isTopLevel  && 'bg-denim-500') || (!isNestedVariant && 'bg-denim-400') || 'bg-denim-600'"
+          />
+          <h3
+            class="uppercase text-xl tracking-[0.2em] flex-shrink-0 "
+            :class="(isTopLevel  && 'text-denim-500') || (!isNestedVariant && 'text-denim-200') || 'text-denim-300'"
+          >
             or
           </h3>
-          <div class="h-px w-16 bg-denim-500" />
+          <div
+            class="h-px w-16"
+            :class="(isTopLevel  && 'bg-denim-500') || (!isNestedVariant && 'bg-denim-400') || 'bg-denim-600'"
+          />
         </div>
       </div>
     </transition-group>
@@ -66,7 +91,7 @@ import { computed, ref, shallowRef, provide, inject } from 'vue'
 import { TrashIcon } from '@heroicons/vue/outline'
 import { createReplace, createDelete } from '@baleada/logic'
 import FormOperations from './FormOperations.vue'
-import { OPERATIONS_ARRAYS_NESTED_STATUS_SYMBOL, OPERATIONS_ARRAYS_NESTING_LEVEL_SYMBOL } from '../state'
+import { NESTED_STATUS_SYMBOL, NESTING_LEVEL_SYMBOL } from '../state'
 import type { Operation } from '../toOperated'
 
 import { defineComponent } from 'vue'
@@ -102,11 +127,11 @@ export default defineComponent({
           operationsArrayUpdate = (index: number, operations: Operation[]) => {
             operationsArrays.value = createReplace<Operation[]>({ index, item: operations })(operationsArrays.value)
           },
-          nestingLevel = shallowRef(props.isTopLevel ? 0 : inject<number>(OPERATIONS_ARRAYS_NESTING_LEVEL_SYMBOL) + 1),
+          nestingLevel = shallowRef(props.isTopLevel ? 0 : inject<number>(NESTING_LEVEL_SYMBOL) + 1),
           isNestedVariant = shallowRef(nestingLevel.value % 2 !== 0)
     
-    provide(OPERATIONS_ARRAYS_NESTING_LEVEL_SYMBOL, nestingLevel.value)
-    provide(OPERATIONS_ARRAYS_NESTED_STATUS_SYMBOL, isNestedVariant.value)
+    provide(NESTING_LEVEL_SYMBOL, nestingLevel.value)
+    provide(NESTED_STATUS_SYMBOL, isNestedVariant.value)
 
     return {
       operationsArrays,

diff --git a/src/interface/components/InputNthPattern.vue b/src/interface/components/InputNthPattern.vue
@@ -181,7 +181,7 @@ import {
   ListboxOption,
 } from '@headlessui/vue'
 import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
-import { OPERATIONS_NESTED_STATUS_SYMBOL } from '../state'
+import { NESTED_STATUS_SYMBOL } from '../state'
 
 export default defineComponent({
   components: {
@@ -214,7 +214,7 @@ export default defineComponent({
           ]),
           stopPropagation = (event: KeyboardEvent | MouseEvent) => event.stopPropagation(),
           enterHandle = (index: number) => selectedOption.value = options.value[index],
-          isNestedVariant = inject<boolean>(OPERATIONS_NESTED_STATUS_SYMBOL)
+          isNestedVariant = inject<boolean>(NESTED_STATUS_SYMBOL)
 
     return {
       options,

diff --git a/src/interface/entry.ts b/src/interface/entry.ts
@@ -1,11 +1,13 @@
 import { createApp } from 'vue'
 import CssSelectorBuilder from './CssSelectorBuilder.vue'
+import FormOperations from './components/FormOperations.vue'
 import FormOperationsArrays from './components/FormOperationsArrays.vue'
 import './index.css'
 import '@fontsource/inconsolata/400.css'
 import '@fontsource/inter/400.css'
 import '@fontsource/inter/700.css'
 
 createApp(CssSelectorBuilder)
+.component('FormOperations', FormOperations)
 .component('FormOperationsArrays', FormOperationsArrays)
 .mount('#app')
diff --git a/src/interface/state.ts b/src/interface/state.ts
@@ -1,5 +1,2 @@
-export const OPERATIONS_NESTED_STATUS_SYMBOL = Symbol('operations nested status')
-export const OPERATIONS_NESTING_LEVEL_SYMBOL = Symbol('operations nested level')
-
-export const OPERATIONS_ARRAYS_NESTED_STATUS_SYMBOL = Symbol('operations arrays nested status')
-export const OPERATIONS_ARRAYS_NESTING_LEVEL_SYMBOL = Symbol('operations arrays nested level')
+export const NESTED_STATUS_SYMBOL = Symbol('operations nested status')
+export const NESTING_LEVEL_SYMBOL = Symbol('nesting level')