Floating Action Button extensions

Extension Type FloatingActionButton

This extension type allows apps to register actions either displayed within the left sidebar (for desktop resolutions) or as a floating action button (for mobile resolutions). The extension point for this extension type is app.${appId}.floating-action-button.

warnung

You need to take care of the visibility of your floating action button extension via the isVisible property, otherwise you might end up overwriting other extensions' action buttons. In most cases, it makes sense to only display the button when your app is currently active.

Configuration

To define a floating action button extension, you implement the FloatingActionButtonExtension interface. Here's what it looks like:

interface FloatingActionButtonExtension {
  id: string
  type: 'floatingActionButton'
  extensionPointIds?: string[]
  label: () => string
  isVisible?: () => boolean
  isDisabled?: () => boolean
  color?: string
  icon?: string
  mode: () => 'drop' | 'handler'
  handler?: () => Promise<void> | void
  dropComponent?: Component
}

For id, type, and extensionPointIds, please see base configuration section in the extensions docs.

The mode property determines whether the floating action button triggers a handler function or renders a dropComponent when clicked. If mode returns handler, the click handler function is executed, if it returns drop, the specified dropComponent is shown instead.

isDisabled controls the disabled state of the button whereas isVisible determines if the button is showing at all.

icon is an icon name string that can be picked from Remix Icon.

Example

The following example shows how the files app is registering a floating action button extension for creating new files or folders. Note that the example assumes you're in a Vue injection context (e.g. within the setup method of your app's defineWebApplication call).

src/extensions.ts

import { useGettext } from 'vue3-gettext'
import CreateOrUploadMenu from './components/CreateOrUploadMenu.vue'
import { markRaw } from 'vue'
import { useIsFilesAppActive, useResourcesStore } from '@opencloud-eu/web-pkg'

const { $gettext } = useGettext()
const isFilesAppActive = useIsFilesAppActive()
const resourcesStore = useResourcesStore()

const extension = {
  id: 'com.github.opencloud-eu.web.files.floating-action-button',
  extensionPointIds: ['app.files.floating-action-button'],
  type: 'floatingActionButton',
  icon: 'add',
  label: () => $gettext('New'),
  isVisible: () => {
    return unref(isFilesAppActive)
  },
  isDisabled: () => {
    return !resourcesStore.currentFolder?.canUpload()
  },
  mode: () => 'drop',
  dropComponent: markRaw(CreateOrUploadMenu)
}