opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

add new Search plugin styles

Browse Source
This commit is contained in:
Evgeny Anatskiy
2017-02-11 16:18:45 +01:00
parent 34be053399
commit 823ac3cc61
2 changed files with 142 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/webhooks/demo/search/static/script.js
+52 -37
View File
@@ -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();
config/plugins/webhooks/demo/search/static/styles.css
+90 -45
View File
@@ -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 {