SAP
FEATURE - Create separate toolbox with action icons for Control Property Editor
User Story *As a developer, while I am using Control Property Editor to work over an existing Adaptation Project, *I want to see separate toolbox with action items and NOT have the RTA toolbar over the project preview, *So that I have just the tools that I need and can use and not get mixed up with the key user tools.
Status Quo Currently, the Control Property Editor looks like this:
Proposed improvement The RTA toolbar gets removed and a separate toolbox is added containing buttons for the following actions - Save, Undo, Redo, Reset , Adapt UI and Navigation (Adapt Ui and Navigation are called Edit and Preview in the current implementation of the Visual Editor that will be phased out).
Top toolbar:
Edit mode | Navigate → segmented button which we already have a concept for in the form factor switcher. We should rename the editing side so that it coincides with the name of the tool. Since the name of the tool is CP-Editor, then the button should say Edit. It's strange if the tool is an Editor but the mode is called Adaptation. Two different words. Hence, Edit Mode.
Undo | Redo | Save are up there left aligned with the mode switcher. Those buttons will most likely be used all together. Users will change modes to see if their app works, they will undo, they will save if happy with the work.
On the right side we have the "visual" cluster as we have today, as that functionality is completely different from undo/redo cluster. Please note, we should change the theme switcher button back to paintbrush.
I've also changed the logo just in case. Maybe it's OK, maybe it's not, but hey, let's have it.
Reset:
At the bottom left, below the changes panel, we should add a floating little strip that nukes all changes.
This strip only appears (well, if API is present) if there are some saved changes. So when users come to the app for the first time, the strip should not be there. When there's saved changes, we show it, and it's just floating above everything at the bottom. It makes logical sense to put it there with all of the other changes, since you can granularly delete changes anyway, so let's have an option to just ☢️ nuke all of the changes. It's not good to have this be in the toolbar all the time, it's too dangerous, and too rarely pressed to need space up there.
On hover whole background goes input-validation-error-background and text goes button-foreground for contrast.
@gpeuc Currently the UI Adaptation/Navigation switch is transformed from the buttons with text to the buttons with icons when the user switches to the phone preview mode. Do we need the same here? What would be the UI? Also, the new button text might need to be updated to represent the same part of speech, i.e. either verbs or nouns. I'm not sure if there are any UI guidelines on verbs/nouns, but it should be consistent, e.g. Edit/Navigate
@MN-public They transform because we shrink the container that holds everything, including the toolbar. But once we remove the toolbar outside of the app viewport, then clicking tablet/mobile formats won't affect our UI, so it's not necessary to do this.
I agree about the actual words on the buttons. Edit | Navigate is consistent. But that's something we can always easily tweak. The main point is that if our tool is called Editor, then the mode should be Edit, not Adaptation.