Merge pull request #4599 from epwinchell/about_modal_cleanup

Update 'About Modal' plugin section styling
ManageIQ · Sep 5, 2018 · f862e53 · f862e53
2 parents 993278d + 17ae799
commit f862e53
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/app/assets/stylesheets/about_modal_background.scss b/app/assets/stylesheets/about_modal_background.scss
@@ -8,7 +8,7 @@
 }
 
 .about-modal-pf.whitelabel {
-  background-image: image-url($img-bg-login-whitelabel);
+ background-image: image-url($img-bg-login-whitelabel);
   background-size: 100% 100%;
 }
 
@@ -17,18 +17,18 @@
 }
 
 /* Track */
-.about-visible-scrollbar-track::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 10px #f5f5f5;
-  border-radius: 10px;
+.about-visible-scrollbar::-webkit-scrollbar-track {
+box-shadow: inset 0 0 10px #f5f5f5;
+border-radius: 10px;
 }
 
 /* Handle */
-.about-visible-scrollbar-thumb::-webkit-scrollbar-thumb {
-  background: #f5f5f5;
-  border-radius: 10px;
+.about-visible-scrollbar::-webkit-scrollbar-thumb {
+background: #f5f5f5;
+border-radius: 10px;
 }
 
 /* Handle on hover */
-.about-visible-scrollbar-hover::-webkit-scrollbar-thumb:hover {
-  background: #b305500;
+.about-visible-scrollbar::-webkit-scrollbar-thumb:hover {
+background: #b305500;
 }
diff --git a/app/views/layouts/_about_modal.html.haml b/app/views/layouts/_about_modal.html.haml
@@ -20,21 +20,38 @@
                 %strong
                   = session_info[0]
                 = session_info[1]
+        %a#collapsePluginsHandle{"role" => "button", "data-toggle" => "collapse", :href => "#collapsePlugins", "aria-expanded" => "false", "aria-controls" => "collapsePlugins", :style => "color: white" }
           %strong
+            %span.fa.fa-angle-right
             = _("Plugins")
-          %ul.list-unstyled.about-visible-scrollbar.about-visible-scrollbar-thumb.about-visible-scrollbar-track.about-visible-scrollbar-hover{:style => "height: 40px;overflow: auto"}
+        .collapse#collapsePlugins
+          %ul.list-unstyled.about-visible-scrollbar{:style => "height: 200px;overflow: auto"}
             - vmdb_plugins_sha.each do |engine, sha|
-              %div
-                = "#{plugin_name(engine)} #{sha}"
-
+              %li
+                %strong
+                  = plugin_name(engine)
+                &nbsp;
+                = sha
+        .spacer
         .trademark-pf
           = I18n.t("product.copyright")
       .modal-footer
         %img{:src => ::Settings.server.custom_logo ? '/upload/custom_logo.png' : image_path("layout/login-screen-logo.png")}
+
 :javascript
   $(function(){
     $("button[data-dismiss='modal']").off('click');
     $("button[data-dismiss='modal']").on('click', function(){
       $('#aboutModal').modal("hide")
     });
+
+    $('#collapsePlugins.collapse').on('show.bs.collapse', function() {
+      $('#collapsePluginsHandle span').removeClass('fa-angle-right');
+      $('#collapsePluginsHandle span').addClass('fa-angle-down');
+    });
+
+    $('#collapsePlugins.collapse').on('hide.bs.collapse', function() {
+      $('#collapsePluginsHandle span').removeClass('fa-angle-down');
+      $('#collapsePluginsHandle span').addClass('fa-angle-right');
+    });
   });