Merge branch '2024.11'

tine-groupware · Nov 25, 2024 · 65f96b8 · 65f96b8
2 parents fd7c6b9 + cd6053e
commit 65f96b8
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 9 deletions.
diff --git a/tine20/Tinebase/js/TineBar/TApplicationMenu.vue b/tine20/Tinebase/js/TineBar/TApplicationMenu.vue
@@ -13,19 +13,24 @@
     :visible="visibleInternal"
     :placement="placement"
     @hide="hide($event)"
+    @keydown.esc="hide($event)"
+    @keydown.enter="selectAppInFocus($event)"
+    @keydown.up.down.left.right.stop="moveFocusAround($event)"
   >
     <div class="tine-application-menu">
       <div class="container">
         <BFormInput class="mb-3 mt-2" v-model="searchTerm" ref="searchField"/>
         <hr class="my-1">
         <div class="row row-cols-3">
           <div
-            v-for="item in menuItemsInternal"
+            v-for="(item, idx) in menuItemsInternal"
             :key="item.name"
             class="col application-menu-item"
-            @click="emits('itemClicked', item.name)"
-            tabindex="0"
             role="button"
+            @click="emits('itemClicked', item.name)"
+            :class="{
+                'application-menu-item__active': appInFocus === idx,
+              }"
           >
             <div class="d-flex align-items-center flex-column p-2 cursor-pointer">
               <div class="application-menu-item__icon" :class="item.iconCls"/>
@@ -85,19 +90,56 @@ const visibleInternal = ref(false)
 
 const searchField = ref()
 watch(() => props.visible, newVal => {
-  visibleInternal.value = newVal
   if (newVal) {
+    appInFocus.value = 0
+    searchTerm.value = ''
     nextTick(() => {
       searchField.value.focus()
     })
   }
+  visibleInternal.value = newVal
 }, { immediate: true })
 
 const hide = (e) => {
   visibleInternal.value = false
-  searchTerm.value = ''
   emits('hide', e)
 }
+
+const appInFocus = ref(0)
+
+watch(menuItemsInternal, (newVal) => {
+  if (appInFocus.value > newVal.length) appInFocus.value = newVal.length - 1
+})
+
+const selectAppInFocus = (e) => {
+  const app = menuItemsInternal.value[appInFocus.value]
+  emits('itemClicked', app.name)
+  hide(e)
+}
+
+const moveFocusAround = (e) => {
+  function moveFocusToIdx (idx) {
+    if (idx < 0 || idx > menuItemsInternal.value.length - 1) return
+    appInFocus.value = idx
+  }
+
+  switch (e.key) {
+    case 'ArrowLeft':
+      moveFocusToIdx(appInFocus.value - 1)
+      break
+    case 'ArrowRight':
+      moveFocusToIdx(appInFocus.value + 1)
+      break
+    case 'ArrowUp':
+      moveFocusToIdx(appInFocus.value - 3)
+      break
+    case 'ArrowDown':
+      moveFocusToIdx(appInFocus.value + 3)
+      break
+    default:
+  }
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -117,7 +159,7 @@ const hide = (e) => {
     }
 
     &__active{
-      // todo
+      background-color: var(--selection-color);
     }
 
     @media (hover: hover){

diff --git a/tine20/Tinebase/js/TineBar/TineBar.vue b/tine20/Tinebase/js/TineBar/TineBar.vue
@@ -105,7 +105,6 @@ const activeApp = computed(() => {
 
 const appMenuVisible = ref(false)
 const hideApplicationMenu = (e) => {
-  console.warn('hide')
   appMenuVisible.value = false
   e.__skip_toggle = true
 }

diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue b/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue
@@ -11,6 +11,7 @@
           :noCloseOnBackdrop="true"
           :noCloseOnEsc="true"
           @close="closeBox" :style="{'z-index': otherConfigs.zIndex}"
+          @keydown.esc="props.opt.closable ? reject() : null"
   >
     <template #default>
       <div class="container">
@@ -22,10 +23,14 @@
             <div class="pb-1 mb-1">
               <span v-html="props.opt.msg"></span>
             </div>
-            <div class="pb-1 mb-1 ext-mb-textarea" v-if="textAreaElVisiblity">
+            <div
+              class="pb-1 mb-1 ext-mb-textarea" v-if="textAreaElVisiblity"
+              @keyup.enter="confirm">
               <BFormTextarea v-model="textElValue" :rows="textAreaHeight" ref="textAreaField"/>
             </div>
-            <div class="pb-1 mb-1" v-if="textBoxElVisibility">
+            <div
+              class="pb-1 mb-1" v-if="textBoxElVisibility"
+              @keyup.enter="confirm">
               <BFormInput v-model="textElValue" ref="inputField"/>
             </div>
             <div v-if="progressBarVisibility">
@@ -109,6 +114,20 @@ const closeBox = () => {
 
 const buttonOrder = ['cancel', 'no', 'yes', 'ok']
 
+const confirm = () => {
+  buttonToShow.value.find((btnCfg) => {
+    const clsName = btnCfg.class
+    return clsName.startsWith('yes') || clsName.startsWith('ok')
+  }).clickHandler()
+}
+
+const reject = () => {
+  buttonToShow.value.find((btnCfg) => {
+    const clsName = btnCfg.class
+    return clsName.startsWith('cancel') || clsName.startsWith('no')
+  })?.clickHandler() || closeBox()
+}
+
 const buttonToShow = computed(() => {
   if (props.opt.buttons) {
     return buttonOrder.filter( el => Object.keys(props.opt.buttons).includes(el)).map(buttonName => {