Sidebar panel extension (#10111)

* feat: introduce sidebar panels as extension point --------- Co-authored-by: Dominik Schmidt <dev@dominik-schmidt.de> Co-authored-by: Jannik Stehle <jannik.stehle@gmail.com>
owncloud · Dec 12, 2023 · 673783c · 673783c
1 parent 73cfcae
commit 673783c
Show file tree

Hide file tree

Showing 107 changed files with 2,018 additions and 1,832 deletions.
diff --git a/changelog/unreleased/enhancement-extensions-sidebar-panels b/changelog/unreleased/enhancement-extensions-sidebar-panels
@@ -0,0 +1,7 @@
+Enhancement: Registering right sidebar panels as extension
+
+Right sidebar panels can now be registered as extensions via our extension registry. They need to be of type `sidebarPanel`.
+The benefit of this is that any app can register additional panels to be shown in the right sidebar while previously the
+available panels were hardcoded.
+
+https://github.com/owncloud/web/pull/10111
diff --git a/changelog/unreleased/enhancement-file-sidebar b/changelog/unreleased/enhancement-file-sidebar
@@ -0,0 +1,6 @@
+Enhancement: File sidebar in viewer and editor apps
+
+Viewer and editor apps now have the same right sidebar available like the `files` app.
+This makes in place viewing file details, tagging, sharing, and much more possible.
+
+https://github.com/owncloud/web/pull/10111
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -22,17 +22,6 @@
                 :per-page-default="perPageDefault"
                 per-page-storage-prefix="admin-settings"
               />
-              <oc-button
-                v-if="sideBarAvailablePanels.length"
-                id="files-toggle-sidebar"
-                v-oc-tooltip="toggleSidebarButtonLabel"
-                :aria-label="toggleSidebarButtonLabel"
-                appearance="raw"
-                class="oc-my-s oc-p-xs"
-                @click.stop="toggleSideBar"
-              >
-                <oc-icon name="side-bar-right" :fill-type="toggleSidebarButtonIconFillType" />
-              </oc-button>
             </div>
           </div>
           <div
@@ -51,12 +40,12 @@
         <slot name="mainContent" />
       </div>
       <side-bar
-        v-if="sideBarOpen"
+        v-if="isSideBarOpen"
         :active-panel="sideBarActivePanel"
         :available-panels="sideBarAvailablePanels"
+        :panel-context="sideBarPanelContext"
         :loading="sideBarLoading"
-        :open="sideBarOpen"
-        :is-header-compact="isSideBarHeaderCompact"
+        :is-open="isSideBarOpen"
         @select-panel="selectPanel"
         @close="closeSideBar"
       >
@@ -70,7 +59,7 @@
 
 <script lang="ts">
 import { perPageDefault, paginationOptions } from 'web-app-admin-settings/src/defaults'
-import { AppLoadingSpinner, SideBar, BatchActions } from '@ownclouders/web-pkg'
+import { AppLoadingSpinner, SideBar, BatchActions, SideBarPanelContext } from '@ownclouders/web-pkg'
 import {
   defineComponent,
   inject,
@@ -84,7 +73,7 @@ import {
 } from 'vue'
 import { eventBus, useAppDefaults } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
-import { Panel } from '@ownclouders/web-pkg'
+import { SideBarPanel } from '@ownclouders/web-pkg'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { ViewOptions } from '@ownclouders/web-pkg'
 
@@ -100,16 +89,21 @@ export default defineComponent({
       required: true,
       type: Array as PropType<BreadcrumbItem[]>
     },
-    sideBarOpen: {
+    isSideBarOpen: {
       required: false,
       type: Boolean,
       default: false
     },
     sideBarAvailablePanels: {
       required: false,
-      type: Array as PropType<Panel[]>,
+      type: Array as PropType<SideBarPanel<unknown, unknown, unknown>[]>,
       default: () => []
     },
+    sideBarPanelContext: {
+      required: false,
+      type: Object as PropType<SideBarPanelContext<unknown, unknown, unknown>>,
+      default: () => ({})
+    },
     sideBarActivePanel: {
       required: false,
       type: [String, null],
@@ -125,11 +119,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    isSideBarHeaderCompact: {
-      required: false,
-      type: Boolean,
-      default: false
-    },
     showViewOptions: {
       type: Boolean,
       required: false,
@@ -160,7 +149,7 @@ export default defineComponent({
     const appBarRef = ref<VNodeRef>()
     const limitedScreenSpace = ref(false)
     const onResize = () => {
-      limitedScreenSpace.value = props.sideBarOpen
+      limitedScreenSpace.value = props.isSideBarOpen
         ? window.innerWidth <= 1600
         : window.innerWidth <= 1200
     }
@@ -169,9 +158,6 @@ export default defineComponent({
     const closeSideBar = () => {
       eventBus.publish(SideBarEventTopics.close)
     }
-    const toggleSideBar = () => {
-      eventBus.publish(SideBarEventTopics.toggle)
-    }
     const selectPanel = (panel) => {
       eventBus.publish(SideBarEventTopics.setActivePanel, panel)
     }
@@ -197,24 +183,13 @@ export default defineComponent({
       appBarRef,
       limitedScreenSpace,
       closeSideBar,
-      toggleSideBar,
       selectPanel,
       ...useAppDefaults({
         applicationId: 'admin-settings'
       }),
       perPageDefault,
       paginationOptions
     }
-  },
-  computed: {
-    toggleSidebarButtonLabel() {
-      return this.sideBarOpen
-        ? this.$gettext('Close sidebar to hide details')
-        : this.$gettext('Open sidebar to view details')
-    },
-    toggleSidebarButtonIconFillType() {
-      return this.sideBarOpen ? 'fill' : 'line'
-    }
   }
 })
 </script>
@@ -234,15 +209,6 @@ export default defineComponent({
   top: 0;
 }
 
-#files-toggle-sidebar {
-  vertical-align: middle;
-  border: 3px solid transparent;
-  &:hover {
-    background-color: var(--oc-color-background-hover);
-    border-radius: 3px;
-  }
-}
-
 .admin-settings-app-bar-controls {
   height: 52px;