Floating Action Button extensions

Extension Type FloatingActionButton

This extension type allows apps to register a global action that is 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 global.floating-action-button.

warnung

You need to take care of the visibility of your floating action button extension via the isActive 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;
  isActive: () => boolean;
  isDisabled?: () => boolean;
  color?: string;
  icon?: string;
  mode: () => 'drop' | 'handler';
  handler?: () => Promise<void> | void;
  dropComponent?: Component;
}

For id, type, and extensionPointIds, please see extension base section in the top level 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 isActive 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).

import { useGettext } from 'vue3-gettext';
import CreateOrUploadMenu from './components/CreateOrUploadMenu.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: ['global.floating-action-button'],
  type: 'floatingActionButton',
  icon: 'add',
  label: () => $gettext('New'),
  isActive: () => {
    return unref(isFilesAppActive);
  },
  isDisabled: () => {
    return !resourcesStore.currentFolder?.canUpload();
  },
  dropComponent: CreateOrUploadMenu
};