[TASK] Update module to use TYPO3 styles

mikestreety commented 3 years ago

Utilised table styles
Updated button classes

Related to #425

Still to do: The "indexed content" page

ste101 commented 3 years ago

With the new backend viewhelper the Default.html would look like this:

<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
    data-namespace-typo3-fluid="true">

<be:moduleLayout>

    <be:moduleLayout.menu identifier="BackendUserModuleMenu">
        <be:moduleLayout.menuItem label="{f:translate(key: 'LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:function1')}" uri="{f:uri.action(controller: 'BackendModule', action: 'startIndexing')}" />
        <be:moduleLayout.menuItem label="{f:translate(key: 'LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:function2')}" uri="{f:uri.action(controller: 'BackendModule', action: 'indexedContent')}" />
        <be:moduleLayout.menuItem label="{f:translate(key: 'LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:function3')}" uri="{f:uri.action(controller: 'BackendModule', action: 'indexTableInformation')}" />
        <be:moduleLayout.menuItem label="{f:translate(key: 'LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:function4')}" uri="{f:uri.action(controller: 'BackendModule', action: 'searchwordStatistics')}" />
        <be:moduleLayout.menuItem label="{f:translate(key: 'LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:function5')}" uri="{f:uri.action(controller: 'BackendModule', action: 'clearSearchIndex')}" />
        <be:moduleLayout.menuItem label="{f:translate(key: 'LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:function6')}" uri="{f:uri.action(controller: 'BackendModule', action: 'lastIndexingReport')}" />
    </be:moduleLayout.menu>

    <be:moduleLayout.button.shortcutButton />

    <div id="beuser-main-content">
        <h1>
            <f:translate key="LLL:EXT:ke_search/Resources/Private/Language/locallang_mod.xml:title" />
        </h1>
        <f:render section="content" />
    </div>

</be:moduleLayout>

</html>

mikestreety commented 3 years ago

Thanks @ste101 - will have a look over the next couple of days 👍

mikestreety commented 3 years ago

Faceted search information is now styled, with the content and extra information behind an expanding icon (copying Recycler UX)

mikestreety commented 3 years ago

The only issue I can see is that @ste101's new dropdown (which fixes the styling) doesn't remember what View you are on, whereas the content does.

E.g. Click on a page -> change to "indexed content" -> click on another page in the page tree

The content shows the indexed content but "Start indexing" is selected in the drop down. I couldn't work out how to make it select

ste101 commented 3 years ago

The only issue I can see is that @ste101's new dropdown (which fixes the styling) doesn't remember what View you are on, whereas the content does.

E.g. Click on a page -> change to "indexed content" -> click on another page in the page tree

The content shows the indexed content but "Start indexing" is selected in the drop down. I couldn't work out how to make it select

I copied the code from the 'Backend User' module. Same behaviour there. The info module keeps the selected option. There is a '$this->generateMenu();' in main function. Maybe this is a solution.

christianbltr commented 3 years ago

Thanks for the PR. The re-styled module looks good and is a nice improvement in my eyes.

I found two issues:

As already mentioned the function dropdown should remember the function selected when the user changes pages (as in the "Info" module). The "Backend User" module does not show a pagetree, so I think that's why it isn't a problem if the dropdown used there does not remember the selected function when the user switches to another page.
The icon used to expand the rows is not shown in my test installation (TYPO3 10.4.17). The src attribute points to 'typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-document-info.svg' but the file isn't there

Auswahl_002

Auswahl_003

mikestreety commented 3 years ago

Thanks for the feedback @christianbltr - I'll look at the dropdown when I get a minute.

As for the icon, looks like they renamed "actions-document-info" to "action" info between 9 and 10. For now I'll embed the SVG code

mikestreety commented 3 years ago

Seems if you want to use the updated menu you need to utilise the module template and such, which would require a re-write of the module (from what I can see).

$this->moduleTemplate->getDocHeaderComponent()->getMenuRegistry()->addMenu($menu);

I don't want that to be a blocker, so will revert the menu change for now and work on a seperate PR for that

christianbltr commented 3 years ago

Thanks!

teaminmedias-pluswerk / ke_search

[TASK] Update module to use TYPO3 styles #427