Parent group implementation for issue #302

.gitignore

@@ -9,3 +9,5 @@
 /addon/dist/
 /addon/dist-zip/
 /addon/package-lock.json
+
+*.DS_Store

addon/package.json

@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "vue": "^2.7.14",
+        "vue-simple-accordion": "^0.1.0",
         "vue-swatches": "^2.1.0"
     },
     "devDependencies": {

addon/src/_locales/en/messages.json

@@ -23,6 +23,14 @@
         "message": "Move tab to group",
         "description": "Move tab to group title"
     },
+    "transcendGroup": {
+        "message": "Transcend",
+        "description": "Transcend group"
+    },
+    "moveGroupToParentDisabledTitle": {
+        "message": "Move group to parent group",
+        "description": "Move group to parent title"
+    },
     "moveTabToGroupMessage": {
         "message": "Tab \"$tabtitle$\" was moved to group \"$grouptitle$\".\n\nClick here to show this tab.",
         "description": "Tab moved popup title",
@@ -53,6 +61,14 @@
         "message": "Save",
         "description": "Save"
     },
+    "rename": {
+        "message": "Rename",
+        "description": "Rename"
+    },
+    "renameParent": {
+        "message": "Rename Parent Group",
+        "description": "Rename Parent Group"
+    },
     "delete": {
         "message": "Delete",
         "description": "Delete"
@@ -157,6 +173,16 @@
             }
         }
     },
+    "newParentTitle": {
+        "message": "Parent $id$",
+        "description": "parent id",
+        "placeholders": {
+            "id": {
+                "content": "$1",
+                "example": "1"
+            }
+        }
+    },
     "searchNotFoundTitle": {
         "message": "No results found for \"$search$\"",
         "description": "No results found",
@@ -197,6 +223,20 @@
             }
         }
     },
+    "deleteParent": {
+        "message": "Delete parent group",
+        "description": "Delete parent group"
+    },
+    "confirmDeleteParent": {
+        "message": "Do you want to delete parent group \"$parenttitle$\" ?<br>Removing parent group also removes all its tab groups!",
+        "description": "Delete parent group?",
+        "placeholders": {
+            "parenttitle": {
+                "content": "$1",
+                "example": "Parent Group #4"
+            }
+        }
+    },
     "groupTabsCount": {
         "message": "$count$ tabs",
         "description": "Group tabs count",
@@ -221,6 +261,30 @@
             }
         }
     },
+    "parentGroupsCount": {
+        "message": "$count$ groups",
+        "description": "Parent group count",
+        "placeholders": {
+            "count": {
+                "content": "$1",
+                "example": "4"
+            }
+        }
+    },
+    "parentGroupsCountActive": {
+        "message": "$active$/$count$ groups active",
+        "description": "Parent groups count active",
+        "placeholders": {
+            "active": {
+                "content": "$1",
+                "example": "2"
+            },
+            "count": {
+                "content": "$2",
+                "example": "4"
+            }
+        }
+    },
     "deleteTab": {
         "message": "Delete tab",
         "description": "Delete tab"
@@ -233,6 +297,10 @@
         "message": "Create new group",
         "description": "Create new group"
     },
+    "createNewParent": {
+        "message": "Create new parent group",
+        "description": "Create new parent group"
+    },
     "goBackButtonTitle": {
         "message": "Go back",
         "description": "Go back"
@@ -469,6 +537,14 @@
         "message": "Open group in new window",
         "description": "Open group in new window"
     },
+    "openParentInNewWindows": {
+        "message": "Open group in new windows",
+        "description": "Open parent group in new windows"
+    },
+    "switchToContext": {
+        "message": "Switch to Context",
+        "description": "Switch to this parent group"
+    },
     "muteTabsWhenGroupCloseAndRestoreWhenOpen": {
         "message": "Mute tabs when group close and restore when open",
         "description": "Mute tabs when group close and restore when open"

addon/src/components/context-menu-group.vue

@@ -1,5 +1,6 @@
 <script>
 import contextMenu from './context-menu.vue';
+import * as Parents from '/js/parents.js';
 
 export default {
     props: {
@@ -11,6 +12,10 @@ export default {
             type: Array,
             required: true,
         },
+        parents: {
+            type: Array,
+            required: true,
+        },
         openedWindows: {
             type: Array,
             required: true,
@@ -108,6 +113,14 @@ export default {
                     <img src="/icons/edit.svg" class="size-16" />
                     <span v-text="lang('hotkeyActionTitleRenameGroup') + ' (F2)'"></span>
                 </li>
+                <li
+                  v-if="menu.includes('transcend-group')"
+                  @click="$emit('transcend-group', data.group)">
+                    <img src="/icons/check-square.svg" class="size-16"/>
+                    <span v-text="lang('transcendGroup')"></span>
+                    <img :src="data.group.isTranscend === true && '/icons/check.svg'" class="size-16 ml-2"/>
+                </li>
+
 
                 <template v-if="menu.includes('reload-all-tabs') && !data.group.isArchive">
                     <hr>
@@ -118,6 +131,35 @@ export default {
                     </li>
                 </template>
 
+                <template v-if="menu.includes('move-group-to-parent')">
+                    <hr>
+
+                    <li class="is-disabled">
+                        <img class="size-16" />
+                        <span v-text="lang('moveGroupToParentDisabledTitle') + ':'"></span>
+                    </li>
+
+                    <li
+                      v-for="parent in parents"
+                      v-if="parent.id !== data.group.parentId"
+                      :key="parent.id"
+                      @click="$emit('move-group',       data.group, parent, $event.ctrlKey || $event.metaKey)"
+                      @contextmenu="$emit('move-group', data.group, parent, true)"
+                    >
+                        <figure :class="['image is-16x16']">
+                            <img src="/icons/parent-new.svg" />
+                        </figure>
+                        <span v-text="parent.title"></span>
+                    </li>
+
+<!--                    <li-->
+<!--                      @click="$emit('move-group-new-parent', data.tab.id, !data.group)"-->
+<!--                      @contextmenu="$emit('move-group-new-parent', data.tab.id, !data.group, true)">-->
+<!--                        <img src="/icons/new.svg" class="size-16" />-->
+<!--                        <span v-text="lang('createNewParent')"></span>-->
+<!--                    </li>-->
+                </template>
+
                 <template v-if="showSettings || showRemove">
                     <hr>
 

addon/src/components/context-menu-parent.vue

@@ -0,0 +1,59 @@
+<script>
+import contextMenu from './context-menu.vue';
+import * as Parents from '/js/parents.js';
+
+export default {
+    props: {
+        menu: {
+            type: Array,
+            required: true,
+        },
+    },
+    components: {
+        'context-menu': contextMenu,
+    },
+    methods: {
+        lang: browser.i18n.getMessage,
+        open(...args) {
+            this.$refs.contextMenu.open(...args);
+        },
+        isOpened({id}) {
+            return this.openedWindows.some(win => win.groupId === id);
+        },
+    },
+};
+
+</script>
+
+<template>
+    <context-menu ref="contextMenu">
+        <template v-slot="{data}">
+            <ul v-if="data" class="is-unselectable">
+                <li
+                  v-if="menu.includes('open-in-new-windows') && !data.parent.isArchive"
+                  @click="$emit('open-in-new-windows', data.parent)">
+                    <img src="/icons/window-new.svg" class="size-16" />
+                    <span v-text="lang('openParentInNewWindows')"></span>
+                </li>
+                <li
+                    v-if="menu.includes('switch-to-context') && !data.parent.isArchive"
+                    @click="$emit('switch-to-context', data.parent)">
+                    <img src="/icons/settings.svg" class="size-16" />
+                    <span v-text="lang('switchToContext')"></span>
+                </li>
+                <li
+                    v-if="menu.includes('rename') && !data.parent.isArchive"
+                    @click="$emit('rename', data.parent)">
+                    <img src="/icons/edit.svg" class="size-16" />
+                    <span v-text="lang('rename')"></span>
+                </li>
+                <li
+                    v-if="menu.includes('remove') && !data.parent.isArchive"
+                    @click="$emit('remove', data.parent)">
+                    <img src="/icons/delete.svg" class="size-16" />
+                    <span v-text="lang('delete')"></span>
+                </li>
+            </ul>
+        </template>
+    </context-menu>
+</template>