From 823ac3cc6172db54c35fdae43553af304a6a162b Mon Sep 17 00:00:00 2001
From: Evgeny Anatskiy <evgeny.anatskiy@gmail.com>
Date: Sat, 11 Feb 2017 16:18:45 +0100
Subject: [PATCH] add new Search plugin styles

---
 .../webhooks/demo/search/static/script.js     |  89 +++++++-----
 .../webhooks/demo/search/static/styles.css    | 135 ++++++++++++------
 2 files changed, 142 insertions(+), 82 deletions(-)

diff --git a/config/plugins/webhooks/demo/search/static/script.js b/config/plugins/webhooks/demo/search/static/script.js
index 0d1f95a2986..8e7b684543d 100644
--- a/config/plugins/webhooks/demo/search/static/script.js
+++ b/config/plugins/webhooks/demo/search/static/script.js
@@ -3,7 +3,7 @@ $(document).ready(function() {
     var ToolForm = window.toolform;
     /** Display search overlay and search */
     var OverlaySearchView = Backbone.View.extend({
-         
+
         parentElement: $('.full-content'),
 
         initialize: function () {
@@ -37,10 +37,10 @@ $(document).ready(function() {
             });
 
             // Register events for search textbox
-            $el_search_text.on( 'keyup', function( e ) { 
+            $el_search_text.on( 'keyup', function( e ) {
                 self.triggerEvents( e, self );
             });
-          
+
             // Register events for fliter clicks
             for( item in filter_classes ) {
                 self.clickEvents( filter_classes[ item ], item, self );
@@ -76,7 +76,7 @@ $(document).ready(function() {
             defaultLinks.buildMostUsedTools( class_search_results );
         },
 
-        /** Trigger events on search overlay */ 
+        /** Trigger events on search overlay */
         triggerEvents: function( e, self ) {
             var $el_search_textbox = $( '.txtbx-search-data' ),
                 query = "";
@@ -122,7 +122,7 @@ $(document).ready(function() {
                 }
             });
         },
-   
+
         /** Search with a filter */
         search: function( type, _this, self ) {
             var class_active = 'filter-active',
@@ -191,7 +191,7 @@ $(document).ready(function() {
             }
         },
 
-        /** Search in tools */ 
+        /** Search in tools */
         searchTools: function( query ) {
 	    var url = Galaxy.root + 'api/tools';
 	    $.get( url, { q: query }, function ( search_result ) {
@@ -261,12 +261,22 @@ $(document).ready(function() {
 	    $( '.search-screen' ).show();
             $el_search_textbox.val( "" );
             $el_search_textbox.focus();
+
+            // Add blur effect
+            $('#left').css('filter', 'blur(5px)');
+            $('#center').css('filter', 'blur(5px)');
+            $('#right').css('filter', 'blur(5px)');
         },
 
-        /** Remove the search overlay */ 
+        /** Remove the search overlay */
         removeOverlay: function() {
             $( '.search-screen-overlay' ).hide();
             $( '.search-screen' ).hide();
+
+            // Remove blur effect
+            $('#left').css('filter', 'none');
+            $('#center').css('filter', 'none');
+            $('#right').css('filter', 'none');
         },
 
         /** Clear search results */
@@ -304,26 +314,26 @@ $(document).ready(function() {
         /** Template for search overlay */
         _template: function() {
             return '<div class="overlay-wrapper">' +
-	           '<div id="search_screen_overlay" class="search-screen-overlay"></div>' +
-	           '<div id="search_screen" class="search-screen">' +
-	               '<input class="txtbx-search-data form-control" type="text" value="" ' +
-                           'placeholder="Give at least 3 letters to search" />' + 
-                       '<div class="overlay-filters">' +
-                           '<ul>' +
-                               '<li><a class="all-filter" title="All"><i class="fa fa-home"></i></a></li>' +
-                               '<li><a class="history-filter" title="History"><i class="fa fa-history"></i></a></li>' +
-                               '<li><a class="tool-filter" title="Tools"><i class="fa fa-wrench"></i></a></li>' +
-                               '<li><a class="workflow-filter" title="Workflow"><i class="fa fa-code-fork rotate"></i></a></li>' +
-                               '<li><a class="datalibrary-filter" title="Data Library"><i class="fa fa-folder-open"></i></a></li>' +
-                               '<li><a class="removeditems-filter" title="Excluded from search"><i class="fa fa-trash"></i></a></li>' +
-                           '</ul>' +
-                       '</div>' +
-                       '<div class="removed-items"></div>' +
-                       '<div class="search-results"></div>' +
-	       '</div>' +
+                '<div id="search_screen_overlay" class="search-screen-overlay"></div>' +
+	            '<div id="search_screen" class="search-screen">' +
+                    '<div class="search-header">' +
+    	                '<input class="txtbx-search-data form-control" type="text" value="" placeholder="Enter at least 3 letters to search" />' +
+                        '<div class="overlay-filters">' +
+                            '<ul>' +
+                                '<li><a class="all-filter" title="All"><i class="fa fa-home"></i></a></li>' +
+                                '<li><a class="history-filter" title="History"><i class="fa fa-history"></i></a></li>' +
+                                '<li><a class="tool-filter" title="Tools"><i class="fa fa-wrench"></i></a></li>' +
+                                '<li><a class="workflow-filter" title="Workflow"><i class="fa fa-code-fork rotate"></i></a></li>' +
+                                '<li><a class="datalibrary-filter" title="Data Library"><i class="fa fa-folder-open"></i></a></li>' +
+                                '<li><a class="removeditems-filter" title="Excluded from search"><i class="fa fa-trash"></i></a></li>' +
+                            '</ul>' +
+                        '</div>' +
+                    '</div>' +
+                    '<div class="removed-items"></div>' +
+                    '<div class="search-results"></div>' +
+	            '</div>' +
            '</div>';
         },
-
     });
 
     /** Display search items from Tools, History, Workflow and Data libraries */
@@ -336,7 +346,7 @@ $(document).ready(function() {
                 data = {};
             // Set the data based on type of the result
 	    switch( type ) {
-		case "tools": 
+		case "tools":
 		    data.tools = item[ type ];
 		    break;
 		case "history":
@@ -348,7 +358,7 @@ $(document).ready(function() {
                 case "workflow":
                     data.workflow = item[ type ];
 	    }
-            
+
             // Refresh the view as soon as more data arrive
             if( Object.keys( data ).length > 0 ) {
                 this.refreshView( data );
@@ -457,7 +467,7 @@ $(document).ready(function() {
 
         /** Create collection of templates of all sections and links for tools */
         makeToolSection: function( search_result ) {
-	    var template_dict = [], 
+	    var template_dict = [],
 	        tool_template = "",
 	        self = this,
 	        $el_search_result = $( '.search-results' ),
@@ -517,7 +527,7 @@ $(document).ready(function() {
 	    // Remove the tool search result section if already present
 	    $el_search_result.find( '.search-tools' ).remove();
 	    // Make template for sections and tools
-	    self.makeToolSearchResultTemplate( template_dict, tool_template );        
+	    self.makeToolSearchResultTemplate( template_dict, tool_template );
         },
 
         /** Append the template or creates a new section */
@@ -603,7 +613,7 @@ $(document).ready(function() {
             self.removeFromDataStorage( self, $( _self ).parent(), type );
             $( _self ).parent().remove();
         },
- 
+
         /** Register remove and pin action clicks */
         registerLinkActionClickEvent: function( self, $el, $el_parent_section ) {
             // Register click of trash icon in search results
@@ -656,7 +666,7 @@ $(document).ready(function() {
             self.setStorageObject( self, window.Galaxy.user.id, 'pinned_results', $( elem ).attr( 'data-id' ), elem );
         },
 
-        /** Build removed links */ 
+        /** Build removed links */
         showRemovedLinks: function() {
 	    var self = this,
                 $el_removed_result = $( '.removed-items' ),
@@ -769,7 +779,7 @@ $(document).ready(function() {
             }
         },
 
-        /** Build the fetched items template using the template dictionary */ 
+        /** Build the fetched items template using the template dictionary */
         makeToolSearchResultTemplate: function( collection, tool_template ) {
 	    var header_template = "",
 	        self = this,
@@ -816,7 +826,7 @@ $(document).ready(function() {
         searchedToolLink: function( _self, e ) {
 	    var id = "",
 	        form_style = "",
-	        version = "", 
+	        version = "",
 	        $target_element = null;
 	    if( e ) {
 	        _self.removeOverlay();
@@ -1037,7 +1047,7 @@ $(document).ready(function() {
 
         /** Build section header template */
         _buildHeaderTemplate: function( id, name, cls ) {
-	    return "<div class='" + cls + "' data-id='searched_" + id + "' >" + name + "</div>";
+	    return "<div class='" + cls + "' data-id='searched_" + id + "' ><div class='section-title'>" + name + "</div></div>";
         },
 
         /** Template for no results for any query */
@@ -1050,10 +1060,15 @@ $(document).ready(function() {
             return '<div class="no-results"> No items </div>';
         },
 
-        /** Remove the search overlay */ 
+        /** Remove the search overlay */
         removeOverlay: function() {
-	    $( '.search-screen-overlay' ).hide();
-	    $( '.search-screen' ).hide();
+            $( '.search-screen-overlay' ).hide();
+	        $( '.search-screen' ).hide();
+
+            // Remove blur effect
+            $('#left').css('filter', 'none');
+            $('#center').css('filter', 'none');
+            $('#right').css('filter', 'none');
         }
     });
     searchOverlay = new OverlaySearchView();
diff --git a/config/plugins/webhooks/demo/search/static/styles.css b/config/plugins/webhooks/demo/search/static/styles.css
index cd6bba6b81c..a94384246af 100644
--- a/config/plugins/webhooks/demo/search/static/styles.css
+++ b/config/plugins/webhooks/demo/search/static/styles.css
@@ -1,29 +1,31 @@
 .overlay-wrapper {
-    margin-top: -5%; 
+    margin-top: -5%;
 }
 
-.search-screen { 
-    position: fixed; 
+.search-screen {
+    position: fixed;
     z-index: 202;
-    width:100%; 
+    width:100%;
     height:100%;
     display:none;
 }
 
-.search-screen-overlay { 
-    position: fixed; 
-    top:0; 
-    left:0; 
-    background:rgba(0,0,0,0.9); 
-    z-index: 201; 
-    width:100%; 
-    height:100%; 
+.search-screen-overlay {
+    position: fixed;
+    top:0;
+    left:0;
+    /*background: rgba(44, 49, 67, 0.85);  // dark-blue */
+    background: rgba(224, 224, 224, 0.75);  /*light-gray*/
+    z-index: 201;
+    width:100%;
+    height:100%;
     display:none;
     opacity: 2;
 }
 
 .overlay-filters {
-    margin: 1% 0% 1% 41%;
+    display: table;
+    margin: 0 auto 5px;
 }
 
 .overlay-filters ul {
@@ -40,62 +42,108 @@
 .overlay-filters li a {
     display: block;
     text-decoration: none;
-    color: white;
+    /*color: white;*/
     cursor: pointer;
     font-weight: bold;
     padding: 5px 5px;
 }
 
 .overlay-filters li a:hover i {
-    color: gold;
+    /*color: gold;*/
+    color: #212121;
 }
 
 .overlay-filters li a i {
     font-size: 1.5em;
 }
 
+.search-header {
+    /* Dark-blue */
+    /*background-color: #343a4f;*/
+    /*background: -moz-linear-gradient(top, rgba(52, 58, 79, 1) 0%, rgba(60, 67, 91, 1) 37%, rgba(52, 58, 79, 1) 100%);*/
+    /*background: linear-gradient(to bottom, rgba(52, 58, 79, 1) 0%, rgba(60, 67, 91, 1) 37%, rgba(52, 58, 79, 1) 100%);*/
+    /*-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);*/
+    /*box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);*/
+
+    /* Light-gray */
+    background-color: #e1e1e1;
+    background: -moz-linear-gradient(top, rgba(225, 225, 225, 1) 0%, rgba(238, 238, 238, 1) 37%, rgba(225, 225, 225, 1) 100%);
+    background: linear-gradient(to bottom, rgba(225, 225, 225, 1) 0%, rgba(238, 238, 238, 1) 37%, rgba(225, 225, 225, 1) 100%);
+    -moz-box-shadow: 0px 2px 5px 0px rgba(158, 158, 158, 0.75);
+    box-shadow: 0px 2px 5px 0px rgba(158, 158, 158, 0.75);
+    
+    position: fixed;
+    top: 34px;
+    width: 100%;
+    z-index: 203;
+}
+
 .txtbx-search-data {
-    margin-left: 35%;
-    margin-top: 10%;
-    height: 30px;
-    width: 25%;
-    padding:2px;
-    font-size: 0.875em;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 14px;
+    border: 1px solid #2c3143;
+    margin: 20px auto 10px;
+    width: 300px;
+    padding: 11px;
 }
 
 .search-section {
     color: white;
-    margin-top: 1%;
+    margin-top: 20px;
     font-weight: bold;
 }
 
-.link-tile {
-    border-radius: 0px;
-    background-color: #3B5998;
-    font-size: 1.05em;
-    border-style: none;
-    width: 17.5%;
-    height: 75px;
-    margin: 0.5% 0.2% 0 0.2%;
+.search-section .section-title {
+    margin-left: 5px;
+    text-shadow: 2px 2px 5px rgba(150, 150, 150, 1);
 }
 
-.search-section .btn:hover,
-.removed-items .btn:hover {
-    background-color: #2b406e;
+.link-tile {
+    /* Dark-blue */
+    /*background-color: #626e96;*/
+    /*border: 1px solid #353c50;*/
+
+    /* Light-blue*/
+    background-color: #b4c2f1;
+    border: 1px solid #899fe9;
+
+    border-radius: 5px;
+    font-size: 12px;
+    width: 19%;
+    height: 75px;
+    margin: 0.5%;
+    padding: 5px;
+}
+
+.link-tile.btn-primary:hover,
+.link-tile.btn-primary:hover {
+    /*background-color: #4e5777;  // dark-blue*/
+    background-color: #899fe9;
+    border-color: #899fe9;
+}
+
+.link-tile.btn-primary:active,
+.link-tile.btn-primary:focus {
+    /*background-color: #4e5777;  // dark-blue*/
+    background-color: #899fe9;
+    border-color: #899fe9;
 }
 
 .search-results,
 .removed-items {
-    margin: -1% 2% 2% 2%;
+    position: fixed;
+    top: 125px;
     overflow-x: hidden;
     overflow-y: auto;
-    height: 75%;
-    width: 96%;
+    padding: 0 15px;
+    width: 100%;
+    height: 83%;
     display: none;
 }
 
 .item-actions {
-    margin: 1%;
+    padding: 5px;
 }
 
 .item-actions:hover {
@@ -112,21 +160,18 @@
     float: right;
 }
 
-.filter-active {
-    color: gold;
-}
-
 .filter-active i {
-    color: gold;
+    /*color: gold;*/
+    color: #616161;
 }
 
-.filter-inactive {
-    color: white;
+.filter-active i:hover {
+    color: #212121;
 }
 
 .filter-inactive i {
     font-size: 0.875em;
-    color: white;
+    color: #9e9e9e;
 }
 
 .rotate {