Skip to content

Latest commit

 

History

History
114 lines (78 loc) · 3.53 KB

README.md

File metadata and controls

114 lines (78 loc) · 3.53 KB
Raw

🐰 Directus extension: Text action display & interface

💡 A directus interface + display adding copy to clipboard and link actions to your values.

The actions can be performed by a button next to the items or by clicking on the value.


↑ Add copy-to-clipboard and link functions to your data


✨ Supports

📋 Copy action

Each value can be copied by a custom button. If enabled it's also possible to copy a value by just clickung on it (click-action)

➡️ Links

When using the link-option it supports ➡️ HTTP-, 📧 mail-, and 📞 phone- links. Each link can be opened by the custom button. If enabled it's also possible to open the link by just clicking on the value (click-action).

Note: The extensions currently won't parse invalid links into valid ones!

🖱 Click-Action

Displays and disabled interfaces (== readonly) support a custom click-action. This can be one of:

  • default action (does nothing custom)
  • Copy-action (copied the value)
  • Link-action (openes the link in a new tab)

⚙ Settings

Icon position

  • The icons can be placed before or after the content
  • The setting can be set for the interface and display, as well as the copy and link button indipendently
  • Example in the screenshots below

Custom prefix

  • You can set custom prefixes for copy-/ and link-actions.
  • Prefixes can be entered manually or use a defined variable (Project URL setting)
  • The setting can be set for the interface and display, as well as the copy and link button indipendently
  • Example in the screenshots below

Link target

  • Set the link-target to the same, or a new tab

Hide field value (display only)

  • Hides the field value for a button only mode
  • Mostly to be used in combinaiton with button labels

Button labels (display only)

  • Add custom labels to the copy-/ and link icons for the display
  • Mostly to be used in combinaiton with the "Hide field value" option for a button only mode

⚙️ Installation (npm)

npm i directus-extension-field-actions

or

pnpm i directus-extension-field-actions

⚙️ Installation (manually)

  1. Download the app.js, api.js and package.json from the latest release

  2. Create a folder named directus-extension-field-actions in your extension folder (e.g /extensions/directus-extension-field-actions) and a /dist folder inside.

  3. Move the package.json to the created extension folder and the app.js and api.js into the /dist folder.

  4. Restart directus

The result should look like this:

├── extensions
│   ├── directus-extension-field-actions
│   │   ├── dist
│   │   │   ├── app.js
│   │   │   ├── api.js
│   │   ├── package.json

🖼 Screenshots

↑ Copy values from table views directly by clicking on them or an icon (configurable)

↑ Copy field-values by clicking on it (only for readonly-fields and displays)

↑ Add link- and copy-to-clipboard buttons to each field

↑ Interfaces settings

↑ Displays settings