Workspaceaction animation

Questions
1

I have some workspace actions - but i cant find how to change the animation when clicked.
Any suggestions

image
image264×163 6.78 KB

2

I think this is a UUIButtonElement? In which case you can set it’s state to "waiting":

3

Hi @sebastiaan thanks for replying. Iam adding the action with a manifest. Such as

{
		type: 'workspaceAction',
		kind: 'default',
		name: 'Publish page',
		alias: 'local.publishPage.action',
		weight: 1,
		api: () => import('./publish-page.js'),
		meta: {
			label: 'Synkronisér side',
			look: 'outline',
			color:'positive'

		},
		conditions: [
			{
				alias: 'Umb.Condition.WorkspaceAlias',
				match: 'Umb.Workspace.Document',
			},
		],
	}

Can i add some meta data here?

4

I am not sure what you mean? I assumed that you wanted to update a button you’re making to show a waiting animation? This is something you need to do in javascript / typescript.

If you want to change the animation of our built-in buttons then I really have no idea, I assume that’s not (easily) possible.

But please explain further what you’re trying to do and I’ll see if I can get some help for you.

5

Sorry, I wasn’t very clear earlier. again thank you for replying.
I’ve added an extra workspace action next to the saveAndPublish action. I’ve extended the UmbWorkspaceActionBase class and overridden the execute() function.

However, when the function execute, the button shows a small animation that I want to remove. I suppose I could do this using JavaScript, but I was hoping that I could add some metadata in the manifest file to specify which animation to use or not to use.

This would be a more straightforward approach than having to write custom JavaScript to handle the animation behavior.

6

I’m afraid that’s the exact job of javascript, to be able to customize things. But I’ll ask around!

7

It looks like the issue comes down to how the button’s animation is controlled. Since the execute() method never returns anything, the framework automatically applies the default animation. If you want to remove it, you have a couple of options:

  1. Use a custom element – If you define your own element instead of relying on the default one, you gain full control over its behavior and appearance.
  2. Modify the execution logic – If you still want to use the default button but prevent the animation, you could start your logic within a promise and immediately return a resolved promise. This will still show a checkmark or a cross, so if you don’t want the button to show any animations, or a different one from the defaults then you need to use a custom element.

However, if you go with a custom element, just keep in mind that the default behavior (such as showing a checkmark or cross) won’t apply unless you implement it yourself.

8

Hi Sebastian, it sounds like the custom element way to go.
I tried crating a custom element with inspiration from Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/actions/user-workspace-action-save.element.ts at 85fc189ee86a5731f22271082c49098ce198dfc1 · umbraco/Umbraco-CMS · GitHub

import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

// TODO: This seems like legacy code [NL]
@customElement('gutenberg_custom_workspace_action')
export class Gutenberg_Custom_WorkspaceAction extends UmbLitElement {

	constructor() {
		super();
		console.log("wohoo");

	}

	private async gogo() {
		console.log("gogo");
	}

	override render() {
		return html`<uui-button
			@click=${this.gogo}
			look="primary"
			color="positive"
			label="Gutenberg handlinger"></uui-button>`;
	}
}

export default Gutenberg_Custom_WorkspaceAction;

declare global {
	interface HTMLElementTagNameMap {
		'gutenberg_custom_workspace_action': Gutenberg_Custom_WorkspaceAction;
	}
}

however now i am having issues with manifest file. i tired changing the api: with element but with no success

	{
		type: 'workspaceAction',
		name: 'Gutenberg',
		alias: 'gutenberg_custom_workspace_action',
		weight: 100,
		element: () => import('./gutenberg_element.js'),
		conditions: [
			{
				alias: 'Umb.Condition.WorkspaceAlias',
				match: 'Umb.Workspace.Document',
			},
		],
	},
9

maybe i should just give up and accept the default