fix: embed actions z-index

packages/design-system/src/components/OcNotifications/OcNotifications.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-notification z-1040 mb-2 w-md max-w-full"
+    class="oc-notification z-1040 w-md max-w-full"
     :class="{
       fixed: position !== 'default',
       'top-2 left-2': position === 'top-left',

packages/web-app-files/src/components/EmbedActions/EmbedActions.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="relative z-[calc(var(--z-index-modal)+2)] w-full flex flex-wrap items-center justify-between my-2 text-role-on-chrome gap-2"
+    class="relative w-full flex flex-wrap items-center justify-between my-2 text-role-on-chrome gap-2"
   >
     <oc-text-input
       v-if="chooseFileName"
@@ -55,13 +55,12 @@
   </section>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, unref } from 'vue'
+<script setup lang="ts">
+import { computed, ref, unref } from 'vue'
 import {
   embedModeLocationPickMessageData,
   FileAction,
   routeToContextQuery,
-  useAbility,
   useEmbedMode,
   useFileActionsCreateLink,
   useResourcesStore,
@@ -72,97 +71,62 @@ import { Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 
-export default defineComponent({
-  setup() {
-    const ability = useAbility()
-    const { $gettext } = useGettext()
-    const {
-      isLocationPicker,
-      isFilePicker,
-      postMessage,
-      chooseFileName,
-      chooseFileNameSuggestion
-    } = useEmbedMode()
-    const spacesStore = useSpacesStore()
-    const router = useRouter()
-    const { currentSpace: space } = storeToRefs(spacesStore)
-    const resourcesStore = useResourcesStore()
-    const { currentFolder, selectedResources } = storeToRefs(resourcesStore)
-    const fileName = ref(unref(chooseFileNameSuggestion))
+const { $gettext } = useGettext()
+const { isLocationPicker, isFilePicker, postMessage, chooseFileName, chooseFileNameSuggestion } =
+  useEmbedMode()
+const spacesStore = useSpacesStore()
+const router = useRouter()
+const { currentSpace: space } = storeToRefs(spacesStore)
+const resourcesStore = useResourcesStore()
+const { currentFolder, selectedResources } = storeToRefs(resourcesStore)
+const fileName = ref(unref(chooseFileNameSuggestion))
 
-    const selectedFiles = computed<Resource[]>(() => {
-      if (isLocationPicker.value) {
-        return [unref(currentFolder)]
-      }
-
-      return unref(selectedResources)
-    })
+const selectedFiles = computed<Resource[]>(() => {
+  if (isLocationPicker.value) {
+    return [unref(currentFolder)]
+  }
 
-    const { actions: createLinkActions } = useFileActionsCreateLink({ enforceModal: true })
-    const createLinkAction = computed<FileAction>(() => unref(createLinkActions)[0])
+  return unref(selectedResources)
+})
 
-    const isAttachAsCopyButtonDisabled = computed<boolean>(() => selectedFiles.value.length < 1)
+const { actions: createLinkActions } = useFileActionsCreateLink({ enforceModal: true })
+const createLinkAction = computed<FileAction>(() => unref(createLinkActions)[0])
 
-    const isShareLinksButtonDisabled = computed<boolean>(
-      () =>
-        selectedFiles.value.length < 1 ||
-        !unref(createLinkAction).isVisible({
-          resources: unref(selectedFiles),
-          space: unref(space)
-        })
-    )
+const isAttachAsCopyButtonDisabled = computed<boolean>(() => selectedFiles.value.length < 1)
 
-    const isChooseButtonDisabled = computed<boolean>(() => {
-      return (
-        selectedFiles.value.length < 1 ||
-        !unref(currentFolder) ||
-        !unref(currentFolder)?.canCreate()
-      )
+const isShareLinksButtonDisabled = computed<boolean>(
+  () =>
+    selectedFiles.value.length < 1 ||
+    !unref(createLinkAction).isVisible({
+      resources: unref(selectedFiles),
+      space: unref(space)
     })
+)
 
-    const canCreatePublicLinks = computed<boolean>(() => ability.can('create-all', 'PublicLink'))
-
-    const fileNameInputSelectionRange = computed(() => {
-      return [0, unref(fileName).split('.')[0].length] as [number, number]
-    })
+const isChooseButtonDisabled = computed<boolean>(() => {
+  return (
+    selectedFiles.value.length < 1 || !unref(currentFolder) || !unref(currentFolder)?.canCreate()
+  )
+})
 
-    const emitSelect = (): void => {
-      if (unref(chooseFileName)) {
-        postMessage<embedModeLocationPickMessageData>('opencloud-embed:select', {
-          resources: JSON.parse(JSON.stringify(selectedFiles.value)),
-          fileName: unref(fileName),
-          locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))
-        })
-      }
+const fileNameInputSelectionRange = computed(() => {
+  return [0, unref(fileName).split('.')[0].length] as [number, number]
+})
 
-      // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
-      postMessage<Resource[]>(
-        'opencloud-embed:select',
-        JSON.parse(JSON.stringify(selectedFiles.value))
-      )
-    }
+const emitSelect = (): void => {
+  if (unref(chooseFileName)) {
+    postMessage<embedModeLocationPickMessageData>('opencloud-embed:select', {
+      resources: JSON.parse(JSON.stringify(selectedFiles.value)),
+      fileName: unref(fileName),
+      locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))
+    })
+  }
 
-    const emitCancel = (): void => {
-      postMessage<null>('opencloud-embed:cancel', null)
-    }
+  // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
+  postMessage<Resource[]>('opencloud-embed:select', JSON.parse(JSON.stringify(selectedFiles.value)))
+}
 
-    return {
-      chooseFileName,
-      chooseFileNameSuggestion,
-      selectedFiles,
-      isAttachAsCopyButtonDisabled,
-      isShareLinksButtonDisabled,
-      isChooseButtonDisabled,
-      canCreatePublicLinks,
-      isLocationPicker,
-      isFilePicker,
-      emitCancel,
-      emitSelect,
-      space,
-      createLinkAction,
-      fileName,
-      fileNameInputSelectionRange
-    }
-  }
-})
+const emitCancel = (): void => {
+  postMessage<null>('opencloud-embed:cancel', null)
+}
 </script>

packages/web-runtime/src/components/MessageBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <oc-notifications>
+  <oc-notifications :class="{ 'mb-2': limitedMessages.length }">
     <oc-notification-message
       v-for="item in limitedMessages"
       :key="item.id"