UX Enhancements

[gbenejam]

Requirements

In the current filtering panel, there is no logical grouping for elements. This needs to be analysed and improved for a better user experience.

Acceptance criteria

1. Analyse current filtering panel and its elements and provide a better design based on AEM.
2. Apply new design to filtering panel.

Solution Hint

<filterPanel
        granite:class="filter-panel coral-Form--vertical frontify-filter-panel"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        id="components-filter">
    <items jcr:primaryType="nt:unstructured">
        <alternativeGroup
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/well">
            <items jcr:primaryType="nt:unstructured">
                <brand
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                    emptyText="Filter by brand"
                    filterType="General"
                    fieldLabel="Brand"
                    name="frontifyfilter_library_selector"
                    granite:id="frontifyfilter_library_selector">
                    <items jcr:primaryType="nt:unstructured">
                    </items>
                </brand>
                <library
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                    emptyText="Filter by library"
                    filterType="General"
                    fieldLabel="Library"
                    name="frontifyfilter_library_selector"
                    granite:id="frontifyfilter_library_selector">
                    <items jcr:primaryType="nt:unstructured">
                    </items>
                </library>
            </items>
        </alternativeGroup>
        <fulltextsearch
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/form/decoratedtextfield"
                class="search"
                emptyText="Enter keyword(s)"
                icon="coral-Icon--search"
                id="frontifysearch">
            <button
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/button"
                    hideText="{Boolean}true"
                    icon="coral-Icon--close"
                    iconSize="XS"
                    minimal="{Boolean}true"
                    title="clear"
                    class="clearFrontifySearch"
                    variant="quiet"/>
        </fulltextsearch>
        <assetfinder
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
            emptyText="Enter path"
            name="./image"
            rootPath="/content/dam">
        </assetfinder>
        <filter
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/select"
            filterType="General"
            variant="quiet"
            name="frontifyfilter_library_selector"
            granite:id="frontifyfilter_library_selector">
            <items jcr:primaryType="nt:unstructured">
                <manual
                    jcr:primaryType="nt:unstructured"
                    text="Manual"
                    selected="{Boolean}true"
                    value="manual"/>
                <ascending
                    jcr:primaryType="nt:unstructured"
                    text="Ascending"
                    selected="{Boolean}true"
                    value="ascending"/>
            </items>
        </filter>
        <assetType
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/cyclebutton"
            emptyText="Filter by asset type"
            filterType="General"
            displaymode="icontext"
            name="frontifyfilter_type_selector"
            granite:id="frontifyfilter_type_selector">
            <items jcr:primaryType="nt:unstructured">
                <image
                    jcr:primaryType="nt:unstructured"
                    text="Image"
                    icon="image"
                    selected="{Boolean}true"
                    value="IMAGE"/>
                <video
                    jcr:primaryType="nt:unstructured"
                    text="Video"
                    icon="play"
                    value="VIDEO"/>
                <document
                    jcr:primaryType="nt:unstructured"
                    text="Document"
                    icon="filePDF"
                    value="DOCUMENT"/>
                <audio
                    jcr:primaryType="nt:unstructured"
                    text="Audio"
                    icon="volumeTwo"
                    value="AUDIO"/>
                <file
                    jcr:primaryType="nt:unstructured"
                    text="File"
                    icon="file"
                    value="FILE"/>
            </items>
        </assetType>
        <filterResultPanel
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container"
                class="selected-filter-panel">
            <items jcr:primaryType="nt:unstructured"/>
        </filterResultPanel>
    </items>
</filterPanel>