Added custom css to request access dropdown link to apply bootstrap u…

…i theme styles [ref #7406]
IQSS · Dec 4, 2020 · 09b3c05 · 09b3c05
1 parent 9a8e27a
commit 09b3c05
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/src/main/webapp/file-download-button-fragment.xhtml b/src/main/webapp/file-download-button-fragment.xhtml
@@ -175,31 +175,48 @@
     <!-- Download Options -->
 
     <!-- Request Access Options -->
-    <!-- Output panel makes the "Request Access" button label pull left Access Requested looks OK -->
-    <p:outputPanel layout="#{fileMetadata.dataFile.fileAccessRequesters.contains(dataverseSession.user) ? 'block' : 'inline'}" id="requestPanel">
     <ui:fragment rendered="#{!fileMetadata.datasetVersion.deaccessioned and !fileDownloadHelper.canDownloadFile(fileMetadata)
-                             and fileMetadata.dataFile.owner.fileAccessRequest}" >
+                             and fileMetadata.dataFile.owner.fileAccessRequest}">
         <li class="dropdown-header">#{bundle['file.accessBtn.header.download']} <span class="glyphicon glyphicon-download-alt"/></li>
-        <li class="#{fileMetadata.dataFile.fileAccessRequesters.contains(dataverseSession.user) ? 'disabled' : ''}">
-
-            <p:commandLink styleClass="btn-request" rendered="#{fileDownloadHelper.session.user.authenticated}"                         
+
+       <style type="text/css">
+            div[id$="requestPanel"].iq-dropdown-list-item {display:list-item !important;}
+            div[id$="requestPanel"].iq-dropdown-list-item>a.ui-commandlink{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}
+            div[id$="requestPanel"].iq-dropdown-list-item>a.ui-commandlink:focus,
+            div[id$="requestPanel"].iq-dropdown-list-item>a.ui-commandlink:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}
+            div[id$="requestPanel"].iq-dropdown-list-item>a.ui-commandlink.active,
+            div[id$="requestPanel"].iq-dropdown-list-item>a.ui-commandlink.active:focus,
+            div[id$="requestPanel"].iq-dropdown-list-item>a.ui-commandlink.active:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}
+
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;white-space:nowrap}
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled,
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled:focus,
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled:hover{background-color:transparent;color:#777;}
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled:focus,
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled:hover{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled{cursor:not-allowed;}
+            div[id$="requestPanel"].iq-dropdown-list-item.disabled>span.ui-commandlink.ui-state-disabled{pointer-events:none;}
+        </style>
+
+        <p:outputPanel id="requestPanel" styleClass="iq-dropdown-list-item #{fileMetadata.dataFile.fileAccessRequesters.contains(dataverseSession.user) ? 'disabled' : ''}"
+                       rendered="#{fileDownloadHelper.session.user.authenticated}">
+            <p:commandLink styleClass="btn-request"
                         actionListener="#{fileDownloadHelper.handleCommandLinkClick(fileMetadata)}"
-                        update="@([id$=requestAccessConsolidated]), @([id$=requestPanel])" 
+                        update="@([id$=requestAccessConsolidated]), @([id$=requestPanel])"
                         id="requestAccessConsolidated"
                         disabled="#{fileMetadata.dataFile.fileAccessRequesters.contains(dataverseSession.user)}">
-
-                <!-- TODO fix disabled styling span vs a -->
-
                 #{fileMetadata.dataFile.fileAccessRequesters.contains(dataverseSession.user) ? bundle['file.accessRequested'] : bundle['file.requestAccess']}
             </p:commandLink>
-            <p:commandLink styleClass="btn-request" rendered="#{!fileDownloadHelper.session.user.authenticated }"
+        </p:outputPanel>
+
+        <li jsf:rendered="#{!fileDownloadHelper.session.user.authenticated}">
+            <p:commandLink styleClass="btn-request" 
                         process="@this"
                         onclick="PF('accessSignUpLogIn_popup').show()">
                 #{bundle['file.requestAccess']}
             </p:commandLink>
         </li>
     </ui:fragment>
-    </p:outputPanel>
     <!-- END: Request Access Options -->
 
     <!-- Explore Options -->