Show simplified page module view

[rfoucard]

As an editor, I want to see a simplified page module view, so that I see page content important informations faster.

Mockups

• Before the simplification
• After the simplification
• After the simplification hover
• After the simplification empty colPos

Acceptance criteria

• I see the page module as a unique area
• I find easily any action button to edit the page
• I find easily any action button to edit an existing content
• I find easily any specific area
• I find and use easily any existing content
• I find and use easily any action button to create a new content
• I access all the page module areas with the keyboard only

Acceptance tests

I see the page module as a unique area

• the module docheader area and the module body area are visually unified

I find easily any action button to edit the page

• I see the header informations in the good order : the module docheader-bar-buttons comes before the module docheader-bar-navigation
• buttons have a simplified visual representation in their normal hover and focus states
• I don't see any colPos edit button anymore

I find easily any action button to edit an existing content

• In the content header right position, I see a new "context menu" action button (even if the icon still act as a context menu button).
• this new context menu buttonhas the same behaviour than the icon's context menu

I find easily any specific area

• the colpos area are visually simplified
• the not assigned colPos area have still a different background
• I can easily read the title of a assigned or not assigned colPos area

I find and use easily any existing content

• the existing content block are visually simplified in its normal and hover state
• I see that the title of the unused elements area is now "Unused elements"
• I can easily copy or cut and paste existing content

I find and use easily any action button to create a new content

• I don't see all the "create new content" buttons in each possible colPos targets anymore but only in empty colPos
• On an empty colPos area, I see the "add new content" position available (in the center middle of the colPos area) with a "+" icon with neutral color, on colPos hover, with a warning background color.
• In colPos with existing content, on a content hover, I see the "add new content" positions available with a "+" icon with a warning color
• On a touch screen, if I click somewhere (tbd) on a content, I get the same behaviours than on a content hover
• On a "add new content" area hover, it change in a "V" icon with a success color
• On a "add new content" area click, the usual new content wizard is opened

I access all the page module areas with the keyboard only

• I can use a skiplinks menu to access the "page action buttons", "module action buttons", "page path information", and "page columns positions" areas
• When I access the page columns area, I can navigate from one column to another and select a colPos via keyboard
• When I am in an empty colPos the focus is drectly in the add new content area and I can add a new content pressing enter
• When I am in a colPos with existing contents I can navigate from one content to another and select a content via keyboard
• When I am in a content, I can access the "content action buttons", "new content target positions" via a skiplink menu
• When I access the new content target positions, I can navigate from one to another and select a target via keyboard

Preconditions / boundary conditions

• I have editor's permissions
• I have permission to access the (new?) page module

Technical remarks

• This step is about page module simplification only. It's necessary to finish this step before coding the next step : "new content wizard". That's the reason why in this step, we still have the "old" wizard.
• The new context menu action button icon is https://typo3.github.io/TYPO3.Icons/icons/actions/actions-menu-alternative.html
• The "add new content" area "+" icon is https://typo3.github.io/TYPO3.Icons/icons/actions/actions-add.html
• The "add new content" area "v" icon is https://typo3.github.io/TYPO3.Icons/icons/actions/actions-check.html

Related personas

• ENFJ-theGiver-Sarah-Smith
• ENTJ-theCommander-Regina-Rule
• ENTP-theVisionary-OtavioCastilhoFurtado
• ESFJ-theProvider-XavierBernhard
• ESTP-theDoer-Jamie-Johnson
• INTJ-theMasterminde-Razmus-Ractangle
• ISTJ-theInspector-ThomasFeng
• ISFJ-theNurturer-NickPeters