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

Merge pull request #8257 from guerler/fix_search_icons

Browse Source 
Fix and unify search bar handling
This commit is contained in:
Marius van den Beek
2019-07-09 17:08:38 +02:00
committed by GitHub
parent d22d7beaf4 8704fc5648
commit c245630a9d
9 changed files with 48 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/components/PluginList.vue
+10 -8
View File
@@ -2,14 +2,16 @@
<div class="ui-thumbnails">
<div v-if="error" class="alert alert-danger">{{ error }}</div>
<div v-else>
<input
class="search-query parent-width"
name="query"
placeholder="search visualizations"
autocomplete="off"
type="text"
v-model="search"
/>
<div class="search-input">
<input
class="search-query parent-width"
name="query"
placeholder="search visualizations"
autocomplete="off"
type="text"
v-model="search"
/>
</div>
<div v-for="plugin in plugins" :key="plugin.name">
<table v-if="match(plugin)">
<tr class="ui-thumbnails-item" @click="select(plugin)">
client/galaxy/scripts/mvc/collection/list-of-pairs-collection-creator.js
+2 -2
View File
@@ -1568,7 +1568,7 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
"</span>",
'<span class="title-info unpaired-info"></span>',
"</div>",
'<div class="unpaired-filter forward-unpaired-filter float-left">',
'<div class="unpaired-filter forward-unpaired-filter float-left search-input">',
'<input class="search-query" placeholder="',
_l("Filter this list"),
'" />',
@@ -1596,7 +1596,7 @@ var PairedCollectionCreator = Backbone.View.extend(baseMVC.LoggableMixin)
"</span>",
'<span class="title-info unpaired-info"></span>',
"</div>",
'<div class="unpaired-filter reverse-unpaired-filter float-left">',
'<div class="unpaired-filter reverse-unpaired-filter float-left search-input">',
'<input class="search-query" placeholder="',
_l("Filter this list"),
'" />',
client/galaxy/scripts/mvc/tool/tools.js
+4 -8
View File
@@ -347,9 +347,7 @@ var ToolSearch = Backbone.Model.extend({
SEARCH_RESERVED_TERMS_FAVORITES: ["#favs", "#favorites", "#favourites"],
defaults: {
search_hint_string: "search tools",
min_chars_for_search: 3,
clear_btn_url: "",
visible: true,
query: "",
results: null,
@@ -635,7 +633,7 @@ var ToolSectionView = BaseView.extend({
var ToolSearchView = Backbone.View.extend({
tagName: "div",
id: "tool-search",
className: "bar",
className: "search-input",
events: {
click: "focus_and_select",
@@ -649,7 +647,6 @@ var ToolSearchView = Backbone.View.extend({
if (!this.model.is_visible()) {
this.$el.hide();
}
this.$el.find("[title]").tooltip();
return this;
},
@@ -774,10 +771,9 @@ var templates = {
// the search bar at the top of the tool panel
tool_search: _.template(
`<input id="tool-search-query" class="search-query parent-width" name="query"
placeholder="<%- search_hint_string %>" autocomplete="off" type="text" />
<a id="search-clear-btn" title="clear search (esc)"> </a>
<span id="search-spinner" class="search-spinner fa fa-spinner fa-spin"></span>
`
placeholder="search tools" autocomplete="off" type="text" />
<span id="search-clear-btn" class="search-clear fa fa-times-circle" title="clear search (esc)"/>
<span id="search-spinner" class="search-loading fa fa-spinner fa-spin"/>`
),
// the category level container in the tool panel (e.g. 'Get Data', 'Text Manipulation')
client/galaxy/scripts/mvc/workflow/workflow-view.js
+3
View File
@@ -47,6 +47,7 @@ function reset_tool_search(initValue) {
// Reset search input.
tool_menu_frame.find("#search-spinner").hide();
tool_menu_frame.find("#search-clear-btn").show();
if (initValue) {
var search_input = tool_menu_frame.find("#tool-search-query");
search_input.val("search tools");
@@ -155,6 +156,7 @@ export default Backbone.View.extend({
}
// Start a new ajax-request in X ms
$("#search-spinner").show();
$("#search-clear-btn").hide();
this.timer = window.setTimeout(() => {
$.get(
self.urls.tool_search,
@@ -209,6 +211,7 @@ export default Backbone.View.extend({
$("#search-no-results").show();
}
$("#search-spinner").hide();
$("#search-clear-btn").show();
},
"json"
);
client/galaxy/style/scss/base.scss
-48
View File
@@ -735,54 +735,6 @@ button {
}
}
.search-query {
display: inline-block;
padding: 4px;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
border: 1px solid $border-default-color;
padding-left: 14px !important;
padding-right: 14px;
margin-bottom: 0;
@include border-radius(14px);
background: $brand-white;
}
.search-query:focus {
border-color: darken(rgba(82, 168, 236, 0.8), 15%);
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
@include box-shadow($shadow);
outline: 0;
outline: thin dotted \9; /* IE6-8 */
}
.search-spinner {
position: absolute;
display: none;
right: 6px;
top: 5px;
font-size: 1.4em;
color: #888;
}
#tool-search {
position: relative;
@extend .mb-2;
#search-clear-btn {
position: absolute;
right: 6px;
top: 6px;
display: block;
font-size: 1.4em !important;
text-decoration: none;
color: #888;
@extend .fa-icon;
&:before {
content: "\f057";
}
}
}
// Messages
.errormessagelarge,
client/galaxy/style/scss/history.scss
-15
View File
@@ -470,21 +470,6 @@
.btn {
@extend .btn-sm;
}
.search-control {
display: inline-block;
width: 40%;
.search-clear,
.search-loading {
margin-top: -22px;
}
}
input.search-query {
font-size: 90%;
height: 21px;
line-height: normal;
padding: 2px 2px 1px 2px;
}
.open-more-options {
padding: 2px 6px 2px 6px;
font-size: 100%;
client/galaxy/style/scss/theme/blue.scss
+2
View File
@@ -114,7 +114,9 @@ $layout-border: none;
// Borders
$border-radius-base: 0.1875rem;
$border-radius-large: 0.3125rem;
$border-radius-extralarge: 1rem;
$border-default-color: $gray-400;
$border-default: 1px solid $border-default-color;
// Buttons
$btn-default-color: $text-color;
client/galaxy/style/scss/ui/search-input.scss
+24 -13
View File
@@ -1,26 +1,37 @@
// search bar, see: scripts/jq-plugins/ui/search-input.js
.search-input {
.search-query {
width: 100%;
padding-right: 24px;
}
@extend .mb-2;
.search-clear,
.search-loading {
// it places the icons on the right of the bar (and puts the lotion on its skin)
@extend .mr-2;
position: relative;
display: inline-block;
float: right;
margin-top: -25px;
margin-right: 4px;
font-size: 1.4em;
line-height: 23px;
color: grey;
color: $gray-500;
}
.search-clear:hover {
color: $link-color;
color: $brand-info;
cursor: pointer;
}
.search-loading {
display: none;
}
.search-query {
@extend .px-3;
@extend .py-1;
width: 100%;
display: inline-block;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
border: $border-default;
@include border-radius($border-radius-extralarge);
max-width: auto;
background: $brand-white;
}
.search-query:focus {
border-color: $brand-info;
outline: 0;
}
}
templates/webapps/galaxy/workflow/editor.mako
+3 -3
View File
@@ -148,10 +148,10 @@
</div>
<div class="unified-panel-controls">
<div id="tool-search" class="bar">
<div id="tool-search" class="search-input">
<input id="tool-search-query" class="search-query parent-width" name="query" placeholder="search tools" autocomplete="off" type="text">
<a id="search-clear-btn" title="" data-original-title="clear search (esc)"> </a>
<span id="search-spinner" class="search-spinner fa fa-spinner fa-spin"></span>
<span id="search-clear-btn" class="search-clear fa fa-times-circle" title="" data-original-title="clear search (esc)" />
<span id="search-spinner" class="search-loading fa fa-spinner fa-spin" />
</div>
</div>