Differential D250

Search button
ClosedPublic
Actions

Authored by lbrabec on Oct 15 2014, 12:44 PM.

Details

Reviewers
• ralph2
jskladan
Maniphest Tasks
T347: Add search to Resultsdb Frontend
Commits
rRSFEb2282424478e: Search button
Summary

WIP, search button in navbar with popover form. Try pressing '/' (slash), search form should appear.
progressbar.js (if used) would be better via CDN.

Test Plan

tried several searches (as in T347)

Diff Detail

Repository
rRSFE resultsdb_frontend
Lint
Lint Skipped
Unit
Unit Tests Skipped
lbrabec retitled this revision from to Search button.Oct 15 2014, 12:44 PM
lbrabec updated this object.
lbrabec edited the test plan for this revision. (Show Details)
lbrabec added a reviewer: jskladan.
lbrabec updated this object.Oct 15 2014, 12:47 PM
jskladan added a comment.Oct 15 2014, 1:00 PM

I do not think that bundled libraries are allowed (not sure about this rule in javascript case), but in any case, there should be at least an attribution/authorship note with the progressbar.js

Also, please post which progressbar.js it actually is (google gives gazzilion answers).

tflink added a comment.Oct 15 2014, 2:18 PM

I'm not crazy about adding another dep here - what does this give us that can't be done with just jquery? bundled js is mostly against fedora packaging guidelines, do we really want to have another package to maintain? I'm also not crazy about requiring js to make the search functionality work.

Also, with the cdn - I'm not sure that a cdn which isn't under our control is the best idea. That doesn't look like a huge js file - does it really make much of a difference to use the cdn instead of hosting it like the other js files we're using?

lbrabec updated this revision to Diff 722.Oct 21 2014, 12:15 PM
lbrabec updated this object.
  • eyecandy hidden in comment until own hosting
This revision is now accepted and ready to land.Oct 21 2014, 12:31 PM
lbrabec closed this revision.Oct 21 2014, 3:24 PM
lbrabec updated this revision to Diff 725.

Closed by commit rRSFEb2282424478e (authored by @lbrabec).

Revision Contents

Diff 725

View Options

resultsdb_frontend/static/css/style.css

1body { padding-top: 70px; } 1​body { padding-top: 70px; }
2 2​
3​.popover {
4​ z-index: 9000;
5​}
6​
View Options

resultsdb_frontend/static/js/search.js

  • This file was added.
1​/* waiting for reliable CND or own hosting of progressbar.js
2​ https://github.com/kimmobrunfeldt/progressbar.js
3​
4​
5​function progressbar(){
6​ $(".popover #progressbar-animation").removeClass("hide");
7​ var element = $(".popover #progressbar-animation")[0];
8​ var circle = new ProgressBar.Circle(element, {
9​ color: "#428BCA",
10​ strokeWidth: 0.75,
11​ fill: "#fff",
12​ easing: "easeInOut",
13​ duration: 1200
14​ });
15​
16​ function doit(){
17​ circle.animate(1, function() {
18​ setTimeout(function(){
19​ circle.set(0);
20​ doit();
21​ }, 150);
22​ });
23​ }
24​
25​ doit();
26​}
27​*/
28​
29​$(function() {
30​ $("#popover").popover(
31​ {
32​ container: 'body',
33​ html : true,
34​ title: function() {
35​ return $("#popover-head").html();
36​ },
37​ content: function() {
38​ return $("#popover-content").html();
39​ }
40​ }
41​ ).on('click', function(){
42​ $(".popover #query").focus();
43​ $(".popover #searchform").submit(function(e){
44​
45​ var query = $(".popover #query").val();
46​ var testcase = $(".popover #testcase").val();
47​ var type = $(".popover #type").val();
48​
49​ var url = "/results?"
50​
51​ if(query != "")
52​ if($(".popover #exact").prop('checked'))
53​ url += "item="+query;
54​ else
55​ url += "item:like="+query+"%";
56​
57​ if(testcase != 0)
58​ url += "&testcase_name="+testcase;
59​ if(type != 0)
60​ url += "&type="+type;
61​
62​ e.preventDefault();
63​
64​ //progressbar();
65​ //$(".popover #searchform").hide();
66​
67​ window.location.href = url;
68​ });
69​ });
70​
71​ $(document).bind('keypress', function(e) {
72​ if(e.keyCode == 47 && !$(":focus").is("input")) //slash key
73​ {
74​ e.preventDefault();
75​ $("#popover").click();
76​ }
77​ });
78​});
79​No newline at end of file
View Options

resultsdb_frontend/templates/layout.html

Show All 22 Lines14 <div class="container">
23 <div class="navbar-collapse collapse"> 23​ <div class="navbar-collapse collapse">
24 24​
25 <ul class="nav navbar-nav"> 25​ <ul class="nav navbar-nav">
26 <li><a href="{{ url_for('main.jobs') }}">Jobs</a></li> 26​ <li><a href="{{ url_for('main.jobs') }}">Jobs</a></li>
27 <li><a href="{{ url_for('main.results') }}">Results</a></li> 27​ <li><a href="{{ url_for('main.results') }}">Results</a></li>
28 <li><a href="{{ url_for('main.testcases') }}">Testcases</a></li> 28​ <li><a href="{{ url_for('main.testcases') }}">Testcases</a></li>
29 </ul> 29​ </ul>
30 30​
31<!-- <div class="navbar-right"> 31​ <form class="navbar-form navbar-right" role="search">
32 <input type="button" class="btn btn-default navbar-btn" value="Search" onclick="location.href='';"> 32​ <button type="button" class="btn btn-default" id="popover" data-placement="bottom">
33 </div> --> 33​ <span class="glyphicon glyphicon-search"></span>
34​ </button>
35​ </form>
34 36​
35 </div><!--/.nav-collapse --> 37​ </div><!--/.nav-collapse -->
36 </div><!--/.container --> 38​ </div><!--/.container -->
37 </div><!--/.navbar --> 39​ </div><!--/.navbar -->
38 40​
39 41​
40 <div class="container"> 42​ <div class="container">
41 {% for message in get_flashed_messages() %} 43​ {% for message in get_flashed_messages() %}
Show All 16 Lines
58 60​
59 {% block footer %} 61​ {% block footer %}
60 {% endblock %} 62​ {% endblock %}
61 63​
62 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 64​ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
63 <script src="//code.jquery.com/jquery.js"></script> 65​ <script src="//code.jquery.com/jquery.js"></script>
64 <!-- Include all compiled plugins --> 66​ <!-- Include all compiled plugins -->
65 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 67​ <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
68​ <!-- Progressbar eyecandy (https://github.com/kimmobrunfeldt/progressbar.js)
69​ <script src="waiting for reliable CND or own hosting"></script>
70​ -->
71​ <!-- Search logic -->
72​ <script src="{{ url_for('static', filename='js/search.js') }}"></script>
73​
74​ <!-- Search html -->
75​ <div id="popover-head" class="hide">Search</div>
76​ <div id="popover-content" class="hide">
77​
78​ <form id="searchform" role="form" name="searchform" action="">
79​ <div class="form-group">
80​ <input class="form-control" id="query" placeholder="Search" value="">
81​ </div>
82​
83​ <div class="form-group">
84​ <select class="form-control" id="testcase">
85​ <option value="0">Any testcase</option>
86​ <option value="rpmlint">Rpmlint</option>
87​ <option value="depcheck">Depcheck</option>
88​ <option value="upgradepath">Upgradepath</option>
89​ </select>
90​ </div>
91​
92​ <div class="form-group">
93​ <select class="form-control" id="type">
94​ <option value="0">Any type</option>
95​ <option value="koji_build">Koji build</option>
96​ <option value="bodhu_update">Bodhi update</option>
97​ <option value="koji_tag">Koji tag</option></select>
98​ </div>
99​
100​ <div class="form-group">
101​ <label class="checkbox-inline"><input type="checkbox" id="exact" value="option1" checked> Exact search (faster)</label>
102​ </div>
103​
104​ <button type="submit" class="btn btn-default" id="go">Go!</button>
105​ </form>
106​ <div id="progressbar-animation" class="hide" style="width:200px;"></div>
107​ </div>
108​ </div>
109​
66 </body> 110​ </body>
67</html> 111​</html>