Move content

As an editor, I want to move a content block to another position, to change the order of my content.

Mockups

Acceptance criteria

I can easily move an existing content with a drag a drop
I can easily move an existing content with a cut and paste

Acceptance tests

I can easily move an existing content with a drag a drop

If I drag an existing content, then I see the "drop zones" areas available with the orange color at the same position than the add new content buttons
On a "drop zones" drag hover, it change in an active state and become bigger and green with a transition
If I drop the dragged content on the "drop zones", then the dragged content is moved in the target position

I can easily move an existing content with a cut and paste

If I click on the context menu of a content block and chose "cut", then the content is registered in the clipboard.
If a content is in the clipboard, a new "paste" content button is shown aside every add new content buttons
If I click on a "paste" button, the content that was in the clipboard is pasted and the clipboard is empty

Preconditions / boundary conditions

I have editor's permissions
I have permission to move a content block
I have permission to place the content block at the desired location
l

Related Personas

Documentation: Add configuration examples to each field type

It would be nice to have a configuration example per field type, so that the reader won't have to browse the example packages for that.

Simplified page module action buttons

As an editor, I want to access easily the page module action buttons, so that I can edit my pages faster

Mockups

Acceptance criteria

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 action button to edit the page

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, the delete button is not shown anymore, this action will be in the context menu
In the content header right position, I see a new "context menu" action button
this new context menu button has the same behaviour than the icon's context menu

Preconditions / boundary conditions

I have editor's permissions
I have permission to access the page module

Related personas

Refactoring of backend module icons

He have to remove this task, the module bar is outside our scope and will be handle by the UX Initiative team.

According to the mockup the module icons in the module bar should be mono-chome (black-and-white). The icons are fetched from the TYPO3 icons repository which makes it difficult to apply changes without them either being overridden or creating a new version in the icons repository.

Dealing with the icons we also discovered, that they need to be refactored more detailed than just changing the colors. Some icons are used for more purposes than just the module bar (e.g. dashboard,redirects, reports), other icons need to be simplified in the drawing instructions. Currently these are not consistent: outline and blank space vs. stacked shapes and fills.

For proof of concept a hotfix in the Gruntfile.js was implemented, which of course needs to be removed when creating a PR, so that the icons could be changed directly in the Resources/Public/Icons directory of the corresponding extensions.

TODO:

Create a concept for module icons
Refactor the icons in the icons repository and create a version for TYPO3 11
Use new icons version in TYPO3 11 and remove the hotfix (631cb52)

Mockup:

Rachel > finally we handled thing with CSS we don't need anymore to change the icons

New Content Element Wizard filtering

As an editor, I want to filter the content list in the new Content Element Wizard Bar, to find easily the content I want to add.

Mockups

Acceptance criteria

I can easily see and use a newContentBlockWizard bar
I can show/hide the content groups using the accordions
I can use the search input to filter the content list by their title or description

Acceptance tests

If I click on a accordion title I expand/collapse the related contents
If the new ContentBlock Wizard bar is uncollapsed, then I can filter the content list typing character of their title or description in a search input
the filtering of the content as the same behaviour and features than the filtering of the new content wizard modal

Preconditions / boundary conditions

I have editor's permissions
I have permission to create a content block

Related personas

Consider adding option to edit new CE directly

From the edit flow it might make sense to switch into edit view after adding a new CE. (Depends on the way the editor works)

Show simplified page module view

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

Mockups

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, the delete button is not shown anymore, this action will be in the context menu
In the content header right position, I see a new "context menu" action button
this new context menu button has the same behaviour than the icon's context menu
the content icon on the top left doesn't show the context menu anymore but still show the content's "id" on mousehover in a tooltip

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"
The content language is not shown anymore aside the content title box in the column niew of the page module
The content type title is always displayed aside the content icon
The content state icon overlay (hidden, startime, etc.) is now displayed after the content type title

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" button available (in the center middle of the colPos area) with a "+" icon.
On an empty colPos area, On a "add new content" button click, the usual new content wizard is opened
In the content header right position, a "add new content" button is shown
On an existing content's "add new content" button click, the "new content position" buttons are shown
On an existing content's "new content position" button click, the usual new content wizard is opened

I access all the page module areas with the keyboard only (to be validated by accessibility team)

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 directly 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" via keyboard
the add new content button positions are accessible via keyboard like a menu

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.

Related personas

Create content with newContentElementWizard

As an editor, I want to create a new content block in my page with newContentBlockWizard, to add new information.

Mockups

Acceptance criteria

I can easily see and use a newContentBlockWizard bar
I can easily add a new content with a drag and drop from the newContentBlockWizard bar
I can easily add a new content with a click and click with the newContentBlockWizard bar
I can easily add a new content with a click and click with the newContentBlockWizard Contextual menu
I access all the create new content actions with the keyboard only

Acceptance tests

The newContentBlockWizard bar

I can show/hide the newContentBlockWizard bar clicking on the new content bar button
If the newContentBlockWizard bar is collapsed, then only the content block icons are visible and only my favorite content blocks are listed
If the newContentBlockWizard bar is uncollapsed, then all the content blocks are listed with their icon, title and descriptions, they are grouped by categories like the actual wizard
If the newContentBlockWizard bar is uncollapsed, then I can filter the content list with a search input like the actual wizard

Drag and Drop with the newContentBlockWizard bar

I can drag a content block from the newContentBlockWizard to a position in the page module
If I drag the new content hover an existing content, then I see the "add new content" positions available with a "+" icon with a warning background color
If I drag the new content hover a "add new content" area, it change in a "V" icon with a success background color
After droping the new content in a "add new content" area, I can see the content block in the new position in the page module

Click and Click with the newContentBlockWizard bar

If I click on a content block in the newContentBlockWizard, then an "add this content" overlay-icon (+) appear over the content icon to show it is selected
On a content mouse hover, I see the "add new content" positions available (above and below) with a "+" icon with a warning background color
On a "add new content" area mouse hover, it change in a "V" icon in a green translucent background
After clicking on the "add new content" area, I can see the content block in the new position in the page module

The newContentBlockWizard Contextual menu

On a content mouse hover, I see the "add new content" positions available (above and below) with a "+" icon in an orange translucent background
On a "add new content" area mouse hover, it change in a "V" icon in a green translucent background
After clicking on the "add new content" area, the newContentBlockWizard Contextual menu appears above the mouse
In the newContentBlockWizard Contextual menu, I can filter the content list with a search input
In the newContentBlockWizard Contextual menu, if I click on a content block, then I can see the new content blocl in the new position in the page module

I access all the create new content actions with the keyboard only

I can use a skiplinks menu to access the "add new content bar", "page action buttons", "module action buttons", "page path information", and "page columns positions" areas
I can access the newContentBlockWizard bar, it's parts and subparts with the keyboard
If I select a content type in the newContentBlockWizard bar with the keyboard first, then the focus is on the page content columns area to directly select a column, then a content, then a target position, to add the new content
If I select first a column, then a content, then a target position, with the keyboard, then the newContentBlockWizard Contextual menu appears and the focus is on it
I can access the newContentBlockWizard Contextual menu, it's parts and subparts with the keyboard

Preconditions / boundary conditions

I have editor's permissions
I have permission to create a content block
I have permission to create a content block at the desired location
Mandatory fields of new content block have default / dummie values for the initial creation state

Technical remarks

This step is about page "new content wizard" only. The previous step "simplification page module" must be finished before. In this step, two new wizards are implemented : a side bar with drag and drop or click and click method (content first, position second), and a contextual menu with a click and click (position first, content second). The contextual menu alternative may be usefull for reducing the distance between the two clicks and also for a frontend editing alternative.
All the necessary mockups are here : https://drive.google.com/drive/folders/19fAVoE_WD3HFIg4pP4NzBB_cUNxVZbJ6

Related personas

New content element Wizard favorite contents

As an editor, I want to set my favorite contents, so that I can access them easily when I edit my pages.

Mockups

Wizard bar collapsed

Acceptance criteria

I can easily set my favorite contents
I can easily access my favorite contents in the New content wizard bar
I can easily access my favorite contents in the New content contextual or modal wizard

Acceptance tests

If I go to my user settings module, I can select my favorite contents in the "Edit and Advanced functions" tab
My favorite content elements are listed in a first accordion in the wizard bar
My favorite content elements are also listed in a first tab in the contextual or modal wizard

Preconditions / boundary conditions

I have editor's permissions
I have permission to create a content block
I have permission to edit my user's setting

Technical notes

would first get all content existing CTypes.
then use TYPO3\CMS\Core\Authentication\BackendUserAuthentication;
$backendUser = $this->getBackendUser();
$backendUser->checkAuthMode('tt_content', 'CType', $value, $authMode);
to remove CType not allowed for the user.

Related personas

Simplified page module content element

As an editor, I want to access easily the page module content elements, so that I can edit my pages faster

Mockups

Acceptance criteria

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

Acceptance tests

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"
The content language is not shown anymore aside the content title box in the column niew of the page module
The content type title is always displayed aside the content icon

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

On an empty colPos area, I see the "add new content" button available (in the center middle of the colPos area) with a "+" icon.
On an empty colPos area, On a "add new content" button click, the usual new content wizard is opened

Preconditions / boundary conditions

I have editor's permissions
I have permission to access the page module

Related personas

Copy content

As an editor, I want to copy a content block to another position, to duplicate all it's properties in a new content.

Mockups

Acceptance criteria

I can easily copy an existing content with a drag a drop
I can easily copy an existing content with a copy and paste

Acceptance tests

I can easily copy an existing content with a drag a drop

If I drag an existing content hover another existing content, then I see a "press ctrl to copy" text under the dragged content
If a keep the key "ctrl" pressed during my drag and drop, the behaviour is exactly the same than moving the content, except that the content is copied and not move

I can easily copy an existing content with a copy and paste

If I click on the context menu of a content block and chose "copy", then the content is registered in the clipboard.
If a content is in the clipboard, a new "paste" content button is shown aside every add new content button
If I click on a "paste" button, a copy of the content that was in the clipboard is pasted, the content is still in the clipboard

Preconditions / boundary conditions

The "move content" user story is done
I have editor's permissions
I have permission to move a content block
I have permission to place the content block at the desired location

Related Personas

simplified page module areas access

As an editor, I want to access easily the page module, so that I can edit my pages faster

Mockups

Acceptance criteria

I find easily any specific sub areas

Acceptance tests

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

Preconditions / boundary conditions

I have editor's permissions
I have permission to access the page module

Related personas

new Content Element Wizard collapsing bar

As an editor, I want to expand and collapse the new Content Block Wizard, to display it according to my screen.

Mockups

Acceptance criteria

I can easily see and display a new Content Element Wizard bar

Acceptance tests

I can expand/collapse the new Content Element Wizard bar clicking on the new content bar button
If the new ContentBlock Wizard bar is collapsed, then only the content block icons are visible
If the newContentBlockWizard bar is uncollapsed, then all the content blocks are listed with their icon, title and descriptions, they are grouped by categories with an accordion system
if I drag and drop a content from any CType, (even the divider) the new content is created with the good CType
if I drag and drop a content from a list Ctype (plugin) and a list_type, the plugin is well added

Preconditions / boundary conditions

I have editor's permissions
I have permission to create a content block

Related personas

simplified page module keyboard accessibility

As an editor, I want to access with keyboard the page module's areas, so that I can edit my pages faster

Acceptance criteria

I access all the page module areas with the keyboard only

Acceptance tests

I can access the "page action buttons", "module action buttons", "page path information", and "page columns positions" areas with the keyboard
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 directly 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

Preconditions / boundary conditions

I have editor's permissions
I have permission to access the page module

Related personas

New Content Element Wizard Drag and Drop

As an editor, I want to drag and drop a new content element in my page with the new Content Element Wizard Bar, to compose my page faster.

Mockups

Acceptance criteria

I can easily add a new content with a drag and drop from the new Content Element Wizard bar

Acceptance tests

I can drag a content block from the new Content Element Wizard to a dropable position in the page module
If I drag the new content hover a dropable position, the dropable area change it's state to indicate that I can drop it
After droping the new content in a dropable position, I can see the content block in the new position in the page module
After droping the new content in a dropable position, the new content is hidden by default

Preconditions / boundary conditions

I have editor's permissions
I have permission to create a content block
I have permission to create a content block at the desired location
Mandatory fields of new content block have default / dummie values for the initial creation state

Related personas

New content element contextual or modal Wizard

As an editor, I want to use a contextual wizard, to add new content element faster.

Mockups

Wizard context menu

Acceptance criteria

I can easily add a new content with a click and click with the new ContentBlock Wizard Contextual menu
I can change the contextual menu in a modal and vice versa

Acceptance tests

The newContentBlockWizard Contextual menu

After clicking on a "add new content" button in a colpos area, the new ContentBlock Wizard Contextual menu appears above the mouse
In the new ContentBlock Wizard Contextual menu, I can filter the content list with a search input
In the new ContentBlock Wizard Contextual menu, if I click on a content block, then I it's directly added in the page without opening the content form
In the new ContentBlock Wizard Contextual menu, if I click on a content block, then I it's directly added and it's hidden by default
In the new ContentBlock Wizard Contextual menu, if I click on the "expand/collapse" button in the bottom right, then the menu is transformed in the modal.
In the new ContentBlock Wizard modal, if I click on the "expand/collapse" button in the bottom right, then the menu is transformed in the contextual menu.

Preconditions / boundary conditions

I have editor's permissions
I have permission to create a content block
I have permission to create a content block at the desired location
Mandatory fields of new content block have default / dummie values for the initial creation state

typo3-initiatives / structured-content-page-module Goto Github PK

structured-content-page-module's People

Contributors

Stargazers

Watchers

Forkers

structured-content-page-module's Issues

As an editor, I want to move a content block to another position, to change the order of my content.

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related Personas

Mockups

Acceptance criteria

Preconditions / boundary conditions

Related personas

As an editor, I want to filter the content list in the new Content Element Wizard Bar, to find easily the content I want to add.

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related personas

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

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Technical remarks

Related personas

As an editor, I want to create a new content block in my page with newContentBlockWizard, to add new information.

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Technical remarks

Related personas

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Technical notes

Related personas

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related personas

As an editor, I want to copy a content block to another position, to duplicate all it's properties in a new content.

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related Personas

As an editor, I want to access easily the page module, so that I can edit my pages faster

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related personas

As an editor, I want to expand and collapse the new Content Block Wizard, to display it according to my screen.

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related personas

As an editor, I want to access with keyboard the page module's areas, so that I can edit my pages faster

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related personas

As an editor, I want to drag and drop a new content element in my page with the new Content Element Wizard Bar, to compose my page faster.

Mockups

Acceptance criteria

Acceptance tests

Preconditions / boundary conditions

Related personas

Mockups

Acceptance criteria

Acceptance tests