Hook mode, media component

Hook mode

Yesterday I've finally figured out how to make the UX/UI for adding components before or after an already existing component. Today is time to polish it a bit.

When the "+" button is clicked, the composer UI goes into what I call a "hook mode". It makes a components menu add a chosen component into a place before or after that active component.

To indicate what happens, the button and components menu changes their colors and animates a bit to indicate that they are related now.

Screenshot shows a new admin ui with enabled hook-mode and components menu

Mobile view

In the mobile view, the default position of the components menu is on the bottom of composer runway.

When it goes into a hook-mode, it pops up from the bottom with fixed positioning.

As an extra, mentioned yesterday as well, now it's also possible to add a "media component", which provides a way to render an image or a video in a "focused" mode. This time, the video element gets controls so it's very usefull for things like screencasts and other media that your reader might want to contemplate in full.

Next steps

I will probablu slow down with adding components for now and focus more on reliability like preventing content removals that's not yet saved to avoid accidental removes, or maybe I will start the analytics topic, with something that's privacy friendly but also provides useful insights.

Over and out.