Merge pull request #57 from sebix/keyboard

GUI Keyboard improvements

doc/docs/Usage/keyboard.md

@@ -1,16 +1,31 @@
 # Keyboard shortcuts
 
 ## Assess
-- ↑-↓: Navigate through list items
-- →: Open detailed item view
-- →/Esc: Close detailed item view
-- `r`: Mark item as read
-- `i`: Mark item as important
-- `l`: Like item
-- `d`: Vote item down
-- `Backspace`: Delete item
+- ↓/↑/j/k: Navigate up/down through list items
+- Home: Jump to first list item
+- End: Jump to last loaded list item
+- →/Enter/l: Open detailed item view
+- ←/Esc/h:
+   - In Show-Item mode: Close detailed item view
+   - With search bar in focus: Unfocus search bar
+- `r`: Mark item as **r**ead
+- `i`: Mark item as **i**mportant
+- `u`: Like news item (**u**pvote)
+- `U`: Vote news item down
+- `Del`: **Del**ete item
 - `s`: Select/Unselect the item. Switches to selection mode automatically
-- `g`: Group item
-- `u`: Ungroup item
-- `n`: Create new product from item
-- `a`: Aggregate item
+- `g`: **G**roup selected items
+- `G`: Ungroup selected item(s)
+- `n`: Create **n**ew product from item
+- `a`: Expand/close **a**ggregated list item
+- `o`: **O**pen active news item source (in non-selection-mode only)
+- `R`: **R**eload news item list
+- `/`: Jump to search bar
+- `f`: Switch to Filter mode
+
+### Filter mode
+- `Esc`: Exit filter mode
+- `r`: Toggle filter read news items and exit filter mode
+- `i`: Toggle filter important news items and exit filter mode
+- `u`: Toggle filter liked (relevant) news items and exit filter mode
+- `n`: Toggle filter news items in analyze and exit filter mode

src/gui/src/assets/keyboard_mixin.js

@@ -113,7 +113,9 @@ const keyboardMixin = targetId => ({
         },
 
         setNewsItem(newPosition) {
+            if (newPosition < 0) newPosition = 0;
             if (newPosition !== undefined) this.pos = newPosition;
+            if (newPosition >= this.card_items.length) this.pos = this.card_items.length - 1
             this.$refs.contentData.checkFocus(this.pos);
             setTimeout(()=>{
                 this.keyRemaper();
@@ -183,6 +185,42 @@ const keyboardMixin = targetId => ({
                                 }, 150);
                             }
                             break;
+
+                        case 'source_group_up': {
+                            let groups = this.$store.getters.getOSINTSourceGroups.items;
+                            let active_group_element = document.querySelector('.v-list-item--active');
+                            let active_group_id = active_group_element.pathname.split('/')[3];
+                            let index;
+                            console.log(groups)// eslint-disable-line
+                            for (index = 0; index < groups.length; index++) {
+                                if (groups[index].id === active_group_id) {
+                                    break
+                                }
+                            }
+                            if (index > 0) {
+                                index -= 1;
+                            }
+                            this.$router.push('/assess/group/' + groups[index].id)
+                            break;
+                        }
+                        case 'source_group_down': {
+                            let groups = this.$store.getters.getOSINTSourceGroups.items;
+                            let active_group_element = document.querySelector('.v-list-item--active');
+                            let active_group_id = active_group_element.pathname.split('/')[3];
+                            let index;
+                            console.log(groups)// eslint-disable-line
+                            for (index = 0; index < groups.length; index++) {
+                                if (groups[index].id === active_group_id) {
+                                    break
+                                }
+                            }
+                            if (index < groups.length) {
+                                index += 1;
+                            }
+                            this.$router.push('/assess/group/' + groups[index].id)
+                            break;
+                        }
+
                         case 'selection':
                             if (!this.multiSelectActive) {
                                 this.card.multi_select.click();
@@ -273,6 +311,12 @@ const keyboardMixin = targetId => ({
 
                         case 'enter_filter_mode':
                             this.keyboard_state = 'FILTER';
+                            this.$root.$emit('notification',
+                                {
+                                    type: 'success',
+                                    loc: 'assess.shortcuts.enter_filter_mode'
+                                }
+                            )
                             break;
 
                         case 'reload':

src/gui/src/i18n/en/messages.js

@@ -820,7 +820,10 @@ const messages_en = {
             like_item: 'Like news item',
             dislike_item: 'Dislike news item',
             delete_item: 'Delete news item',
-        }
+        },
+        shortcuts: {
+            enter_filter_mode: 'Entered filter mode. Exit with Escape.',
+        },
     },
 
     publish: {

src/gui/src/store/settings.js

@@ -3,26 +3,31 @@ import {updateProfile} from "@/api/user";
 
 const state = {
     hotkeys: [
+        // source group navigation
+        {character: 'K', alias: 'source_group_up', icon: 'mdi-arrow-up-bold-box-outline'},
+        {character: 'J', alias: 'source_group_down', icon: 'mdi-arrow-up-bold-box-outline'},
         // new item navigation
         {key_code: 38, key: 'ArrowUp', alias: 'collection_up', icon: 'mdi-arrow-up-bold-box-outline'},
         {key_code: 40, key: 'ArrowDown', alias: 'collection_down', icon: 'mdi-arrow-down-bold-box-outline'},
         {key_code: 37, key: 'ArrowLeft', alias: 'close_item', icon: 'mdi-close-circle-outline'},
         {key_code: 39, key: 'ArrowRight', alias: 'show_item', icon: 'mdi-text-box'},
         {character: 'k', alias: 'collection_up', icon: 'mdi-arrow-up-bold-box-outline'},
         {character: 'j', alias: 'collection_down', icon: 'mdi-arrow-down-bold-box-outline'},
+        {character: 'h', alias: 'close_item', icon: 'mdi-close-circle-outline'},
+        {character: 'l', alias: 'show_item', icon: 'mdi-text-box'},
         {key_code: 13, key: 'Enter', alias: 'show_item', icon: 'mdi-text-box'},
         {key_code: 27, key: 'Escape', alias: 'close_item', icon: 'mdi-close-circle-outline'},
         {key_code: 35, key: 'End', alias: 'end'},
         {key_code: 36, key: 'Home', alias: 'home'},
         // news item actions
         {character: 'r', alias: 'read_item', icon: 'mdi-eye'},
         {character: 'i', alias: 'important_item', icon: 'mdi-star'},
-        {character: 'l', alias: 'like_item', icon: 'mdi-thumb-up'},
-        {character: 'd', alias: 'unlike_item', icon: 'mdi-thumb-down'},
+        {character: 'u', alias: 'like_item', icon: 'mdi-thumb-up'},
+        {character: 'U', alias: 'unlike_item', icon: 'mdi-thumb-down'},
         {key_code: 46, key: 'Delete', alias: 'delete_item', icon: 'mdi-delete'},
         {character: 's', alias: 'selection', icon: 'mdi-checkbox-multiple-marked-outline'},
         {character: 'g', alias: 'group', icon: 'mdi-group'},
-        {character: 'u', alias: 'ungroup', icon: 'mdi-ungroup'},
+        {character: 'G', alias: 'ungroup', icon: 'mdi-ungroup'},
         {character: 'n', alias: 'new_product', icon: 'mdi-file-outline'},
         {character: 'a', alias: 'aggregate_open', icon: 'mdi-arrow-right-drop-circle'},
         {character: 'o', alias: 'open_item_source', icon: 'mdi-open-in-app'},