Search code examples
dspace

Make advanced filters "Apply" button in DSpace Mirage 2 more prominent

My users think it's too difficult to spot the "Apply" button in the Advanced Filters section on search results pages using DSpace Mirage 2 (XMLUI, DSpace 5.x). They've requested for this button to stand out more and generally improve this part of the DSpace UI as much as possible.

Eg instead of the default (some colours / spacing customised compared to out of the box Mirage 2): enter image description here show something like this: enter image description here

How would I achieve this in Mirage 2?

Solution

  • This can be achieved using a mix of XSL and CSS, as well as changing the button label in messages.xml.

    In the preprocess discovery XSL file, add a new template that intercepts this particular button and adds the Bootstrap btn-primary class:

    <!-- make 'apply filters' and 'go' button on discovery screens a primary button -->
<xsl:template match="dri:field[@id='aspect.discovery.SimpleSearch.field.submit_apply_filter']">
    <field>
        <xsl:call-template name="copy-attributes"/>
        <xsl:attribute name="rend">
            <xsl:value-of select="@rend"/>
            <xsl:text> btn-primary</xsl:text>
        </xsl:attribute>
        <xsl:apply-templates/>
    </field>
</xsl:template>

    Add some styling to the row that holds the buttons, to right-align them. This can be added to the bottom of the _style.scss override file:

    #aspect_discovery_SimpleSearch_row_filter-controls {
  text-align: right;
}

    Finally, change the English label for the Apply button to Search, in the messages file for the Discovery aspect make sure the value for key xmlui.Discovery.AbstractSearch.filters.controls.apply-filters (default: Apply) is whatever you'd like instead:

    <message key="xmlui.Discovery.AbstractSearch.filters.controls.apply-filters">Search</message>

    Note that making changes in [dspace-src]/dspace-xmlui and [dspace-src]/dspace-xmlui-mirage2 will require you to use the "full build option" for DSpace, where you run mvn in the top-level [dspace-src] directory. If you currently use the "quick build option" (where you run mvn in [dspace-src]/dspace), copy those files to the corresponding locations in [dspace-src]/dspace/modules and make the changes to the copies instead.