Page 1 of 1

p:commandLink not visible on light backgrounds

Posted: 15 Oct 2020, 15:32
by undermensch
The p:commandLink is not visible on light theme on light background as it has color set to #ffffff. I have noticed this on rain-cyan-light when using p:commandLink with icons in Exporters facet in table.

Re: p:commandLink not visible on light backgrounds

Posted: 19 Oct 2020, 10:25
by mert.sincan
Hi,

Unfortunately, I couldn't replicate it. Could you please try it on our sample project? My test;

Code: Select all

<p:dataTable widgetVar="customersDT" var="customer" value="#{dataTableDemoView.customers1}" reflow="true"
                                    selection="#{dataTableDemoView.selectedCustomers}" rowKey="#{customer.id}" 
                                    paginator="true" rows="10" paginatorPosition="both" rowSelectMode="add" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
                                   >
                    
                           <f:facet name="{Exporters}">
                               <div style="float:right;padding-top: 5px;">
                                   <h:commandLink>
                                       Test
                                       <p:dataExporter type="xls" target="tbl" fileName="cars" />
                                   </h:commandLink>
                                    
                                   <p:commandLink value="AAA">
                                       test
                                       <p:dataExporter type="xlsxstream" target="tbl" fileName="cars" />
                                    </p:commandLink>                     
                               </div>
                           </f:facet>
                           
                           ...

Re: p:commandLink not visible on light backgrounds

Posted: 19 Oct 2020, 15:10
by undermensch
When I try this using the sample project, I can see the first "Test" that uses h:commandLink, but the second "test" using p:commandLink is white. When I inspect the element, I see the following style applied:

Code: Select all

body .ui-commandlink, body .ui-link {
  color: #ffffff;
}
Thanks.

Re: p:commandLink not visible on light backgrounds

Posted: 19 Oct 2020, 16:20
by mert.sincan
Interesting! Could you please attach your sample code block? Also, could you please check the value of $buttonBg variables in your app?

Code: Select all

//_buttons.scss
   .ui-commandlink, .ui-link {
        color: $buttonBg;
    }
Best Regards,

Re: p:commandLink not visible on light backgrounds

Posted: 21 Oct 2020, 14:55
by undermensch
I have a _button.scss file in rain-layout-1.0.0\sass\theme\designer that has the following value:

Code: Select all

.ui-commandlink, .ui-link {
        color: $secondaryButtonTextColor;
    }
I used the code block you provided to modify the sample project that comes with the theme:

Code: Select all

<p:dataTable widgetVar="customersDT" var="customer" value="#{dataTableDemoView.customers1}" reflow="true"
                                    selection="#{dataTableDemoView.selectedCustomers}" rowKey="#{customer.id}" 
                                    paginator="true" rows="10" paginatorPosition="bottom"
									paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
									rowSelectMode="add">
                            <f:facet name="header">
                                <div class="customers-table-header">
                                    <span style="font-weight: bold">CUSTOMERS</span>
                                
                                    <span class="ui-input-icon-left filter-container">
                                        <i class="pi pi-search"></i>
                                        <p:inputText id="globalFilter" onkeyup="PF('customersDT').filter()" placeholder="Search"/>
                                    </span>
                                </div>
                            </f:facet>
							 <f:facet name="{Exporters}">
                               <div style="float:right;padding-top: 5px;">
                                   <h:commandLink>
                                       Test
                                       <p:dataExporter type="xls" target="tbl" fileName="cars" />
                                   </h:commandLink>
                                    
                                   <p:commandLink value="AAA">
                                       test
                                       <p:dataExporter type="xlsxstream" target="tbl" fileName="cars" />
                                    </p:commandLink>                     
                               </div>
                           </f:facet>
                            <p:column selectionMode="multiple"></p:column>
                            <p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}">
                                <h:outputText value="#{customer.name}" />
                            </p:column>
                            <p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
                                <span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px"></span>
                                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country.name}" />
                            </p:column>
                            <p:column headerText="Representative" sortBy="#{customer.representative.name}" filterBy="#{customer.representative.name}">
                                <p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo" width="32" style="vertical-align: middle" />
                                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.representative.name}" />
                            </p:column>
                            <p:column headerText="Join Date" sortBy="#{customer.date}" filterBy="#{customer.date}">
                                <h:outputText value="#{customer.date}" />
                            </p:column>
                            <p:column headerText="Status" sortBy="#{customer.status}" filterBy="#{customer.status}">
                                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
                            </p:column>
                            <p:column headerText="Activity" sortBy="#{customer.activity}">
                                <p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem"/>
                            </p:column>
                        </p:dataTable>
When I replace the value ($secondaryButtonTextColor) in the _button.scss with the one you supplied ($buttonBg), then it works, the link is visible. Is this a change since the release? I did not modify the sass files, the $secondaryButtonTextColor value is the one in the Rain version 1.0.0 that I downloaded.

Thanks.

Re: p:commandLink not visible on light backgrounds

Posted: 09 Nov 2020, 09:36
by mert.sincan
Hi,

Thanks a lot for the update! This issue is fixed for the next version.

Best Regards,