FE2 UI minor improvements (#1905)

* FE2 Fixes. WIP Description

* Reorder Options. Fix cookie expiry

* added ability to edit model description in backend

* Add Description to "Add Model" WIP

* Update Radio component so icons are part of label

* Fix to disable measure mode when user navigates to another control

* Add Description WIP

* Fix description returning null

* Add Header to versions page

* Checks for PR

* Fix build error

* Changes from CR

* Use ProjectPageProjectHeaderFragment

* Remove description from handleSubmit

---------

Co-authored-by: Kristaps Fabians Geikins <fabis94@live.com>

packages/ui-components/src/components/form/Radio.vue

@@ -19,11 +19,15 @@
         @change="onChange"
       />
     </div>
-    <div v-if="icon" class="text-sm">
-      <component :is="icon" class="h-10 w-10"></component>
-    </div>
-    <div class="text-sm">
-      <label :for="finalId" class="text-foreground" :class="{ 'sr-only': hideLabel }">
+    <div class="text-sm" :class="inlineDescription ? 'flex gap-2 items-center' : ''">
+      <label
+        :for="finalId"
+        class="text-foreground flex gap-2 items-center"
+        :class="{ 'sr-only': hideLabel }"
+      >
+        <div v-if="icon" class="text-sm">
+          <component :is="icon" class="h-10 w-10"></component>
+        </div>
         <span>{{ title }}</span>
         <span v-if="showRequired" class="text-danger ml-1">*</span>
       </label>
@@ -181,12 +185,6 @@ const descriptionId = computed(() => `${props.name}-description`)
 const descriptionClasses = computed((): string => {
   const classParts: string[] = []
 
-  if (props.inlineDescription) {
-    classParts.push('inline ml-2')
-  } else {
-    classParts.push('block')
-  }
-
   if (errorMessage.value) {
     classParts.push('text-danger')
   } else {

packages/ui-components/src/components/layout/GridListToggle.vue

@@ -1,14 +1,32 @@
 <template>
   <button
-    class="flex items-center justify-center rounded bg-foundation h-8 w-8 shadow cursor-pointer text-foreground"
+    class="max-w-max transition flex justify-center items-center gap-2 outline-none select-none h-8 text-foreground border-2 bg-foundation border-foundation-2 rounded-md hover:ring-2 active:scale-[0.97] grow"
     @click="onClick"
   >
-    <Component :is="currentIcon" class="h-5 w-5" />
+    <div class="relative flex bg-foundation rounded-md">
+      <div
+        class="absolute -top-[2px] -left-[2px] transition"
+        :class="{
+          'translate-x-7': value !== GridListToggleValue.Grid
+        }"
+      >
+        <div
+          :class="value !== GridListToggleValue.Grid ? 'rounded-r-md' : 'rounded-l-md'"
+          class="w-8 h-8 bg-primary-muted shadow-inner transition"
+        />
+      </div>
+      <div class="relative z-10 flex gap-1 items-center p-1 rounded-l">
+        <Squares2X2Icon class="h-5 w-5" />
+      </div>
+      <div class="relative z-10 flex gap-1 items-center p-1 rounded-r">
+        <Bars3Icon class="h-5 w-5" />
+      </div>
+    </div>
   </button>
 </template>
+
 <script setup lang="ts">
-import { Bars3Icon } from '@heroicons/vue/24/solid'
-import { Squares2X2Icon } from '@heroicons/vue/24/outline'
+import { Bars3Icon, Squares2X2Icon } from '@heroicons/vue/24/solid'
 import { computed } from 'vue'
 import { GridListToggleValue } from '~~/src/helpers/layout/components'
 
@@ -26,10 +44,6 @@ const value = computed({
   set: (newVal) => emit('update:modelValue', newVal)
 })
 
-const currentIcon = computed(() =>
-  value.value === GridListToggleValue.Grid ? Bars3Icon : Squares2X2Icon
-)
-
 const onClick = (e: MouseEvent) => {
   emit('click', e)
 

packages/ui-components/src/components/layout/Menu.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import LayoutMenu from '~~/src/components/layout/Menu.vue'
 import type { LayoutMenuItem } from '~~/src/helpers/layout/components'
 import FormButton from '~~/src/components/form/Button.vue'
-import { EllipsisVerticalIcon } from '@heroicons/vue/24/solid'
+import { EllipsisVerticalIcon, StarIcon } from '@heroicons/vue/24/solid'
 import { action } from '@storybook/addon-actions'
 import { ref } from 'vue'
 
@@ -40,7 +40,8 @@ const defaultItems = (
     {
       title: 'First Group Item - #1',
       id: 'a',
-      disabled: false
+      disabled: false,
+      icon: StarIcon
     },
     {
       title: 'First Group Item - #2 (Disabled)',
@@ -53,7 +54,8 @@ const defaultItems = (
     {
       title: 'Second Group Item - #1',
       id: 'c',
-      disabled: false
+      disabled: false,
+      color: 'info'
     }
   ]
 ]

packages/ui-components/src/components/layout/Menu.vue

@@ -18,23 +18,25 @@
       <MenuItems
         ref="menuItems"
         :class="[
-          'absolute mt-2 w-56 origin-top-right divide-y divide-outline-3 rounded-md bg-foundation shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-40',
+          'absolute mt-2 w-48 origin-top-right divide-y divide-outline-3 rounded-md bg-foundation shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-40',
           menuDirection === HorizontalDirection.Left ? 'right-0' : ''
         ]"
       >
-        <div v-for="(group, i) in items" :key="i" class="px-1 py-1">
+        <div v-for="(group, i) in items" :key="i" class="p-1">
           <MenuItem
             v-for="item in group"
             v-slot="{ active, disabled }"
             :key="item.id"
             :disabled="item.disabled"
+            :color="item.color"
           >
             <span v-tippy="item.disabled && item.disabledTooltip">
               <button
-                :class="buildButtonClassses({ active, disabled })"
+                :class="buildButtonClassses({ active, disabled, color: item.color })"
                 :disabled="disabled"
                 @click="chooseItem(item, $event)"
               >
+                <Component :is="item.icon" v-if="item.icon" class="h-5 w-5" />
                 <slot name="item" :item="item">{{ item.title }}</slot>
               </button>
             </span>
@@ -84,14 +86,28 @@ const finalOpen = computed({
   set: (newVal) => emit('update:open', newVal)
 })
 
-const buildButtonClassses = (params: { active?: boolean; disabled?: boolean }) => {
-  const { active, disabled } = params
-  const classParts = ['group flex w-full items-center rounded-md px-2 py-2 text-sm']
+const buildButtonClassses = (params: {
+  active?: boolean
+  disabled?: boolean
+  color?: 'danger' | 'info'
+}) => {
+  const { active, disabled, color } = params
+  const classParts = [
+    'group flex gap-3 w-full items-center rounded-md px-2 py-1.5 text-sm'
+  ]
 
-  if (active) {
+  if (active && !color) {
     classParts.push('bg-primary text-foreground-on-primary')
   } else if (disabled) {
     classParts.push('text-foreground-disabled')
+  } else if (color === 'danger' && active) {
+    classParts.push('text-foreground-on-primary bg-danger')
+  } else if (color === 'danger' && !active) {
+    classParts.push('text-danger')
+  } else if (color === 'info' && active) {
+    classParts.push('text-foreground-on-primary bg-info')
+  } else if (color === 'info' && !active) {
+    classParts.push('text-info')
   } else {
     classParts.push('text-foreground')
   }