Skip to content

Commit 22cc523

Browse files
ckjckj
committed
Stub out search autocomplete results
1 parent 22738c1 commit 22cc523

File tree

2 files changed

+92
-56
lines changed

2 files changed

+92
-56
lines changed

‎src/sentry/static/sentry/less/sentry.less

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -543,7 +543,7 @@ footer {
543543
font-size: 15px;
544544
background: #fff;
545545
}
546-
.filter-toggle {
546+
.search-toggle {
547547
color: #8E8E97;
548548
position: absolute;
549549
right: 2px;
@@ -552,7 +552,7 @@ footer {
552552
}
553553
}
554554

555-
.filter-dropdown {
555+
.search-dropdown {
556556
box-shadow: 0 0 0 2px rgba(70, 82, 98, .1);
557557
border-radius: 0 0 5px 5px;
558558
position: absolute;
@@ -573,6 +573,49 @@ footer {
573573
}
574574
}
575575

576+
.search-autocomplete-list {
577+
.list-unstyled();
578+
margin-bottom: 0;
579+
580+
li {
581+
position: relative;
582+
border-top: 2px solid #f1f2f3;
583+
padding: 12px 14px 12px 40px;
584+
cursor: pointer;
585+
586+
h4 {
587+
margin: 0;
588+
font-size: 14px;
589+
span {
590+
font-weight: normal;
591+
}
592+
}
593+
594+
p {
595+
margin: 2px 0 0;
596+
font-size: 13px;
597+
color: #AAB2B7;
598+
}
599+
600+
&:first-child {
601+
border: 0;
602+
}
603+
604+
&:hover, .active {
605+
background: #EFF9FF;
606+
border-color: #DFEAF1;
607+
608+
h4 {}
609+
p {
610+
611+
}
612+
& + li {
613+
border-color: #DFEAF1;
614+
}
615+
}
616+
}
617+
}
618+
576619
.chart {
577620
position: relative;
578621
max-height: 200px;

‎src/sentry/templates/sentry/bases/stream.html

Lines changed: 47 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -40,62 +40,55 @@
4040
<input type="text" class="search-input form-control"
4141
placeholder="Search for events, users, tags, and everything else.">
4242
<span class="icon-search"></span>
43-
<a href="#" class="filter-toggle"
43+
<a href="#" class="search-toggle"
4444
ng-click="searchDropdown.visible = !searchDropdown.visible === true"><span aria-hidden="true" class="icon-arrow-down"></span></a>
4545
</div>
46-
<div class="filter-dropdown" ng-show="searchDropdown.visible === true">
47-
<!-- <ul class="nav nav-pills">
48-
<li class="active"><a href="#">Build</a></li>
49-
<li><a href="#">Recent searches</a></li>
50-
</ul> -->
51-
<div class="users form-group">
52-
<label class="col-md-2 control-label">String</label>
53-
<div class="col-md-10">
54-
<input type="text" class="form-control">
55-
</div>
56-
</div>
57-
<div class="row form-group">
58-
<div class="col-md-4">
59-
<select class="selectize" placeholder="Browser">
60-
<option>Hi</option>
61-
</select>
62-
</div>
63-
<div class="col-md-4">
64-
<select class="selectize" placeholder="Status">
65-
<option>Hi</option>
66-
</select>
67-
</div>
68-
<div class="col-md-4">
69-
<select class="selectize" placeholder="Client">
70-
<option>Hi</option>
71-
</select>
72-
</div>
73-
<div class="col-md-4">
74-
<select class="selectize" placeholder="Logger">
75-
<option>Hi</option>
76-
</select>
77-
</div>
78-
<div class="col-md-4">
79-
<select class="selectize" placeholder="Project">
80-
<option>Hi</option>
81-
</select>
82-
</div>
83-
<div class="col-md-4">
84-
<select class="selectize" placeholder="User">
85-
86-
</select>
87-
</div>
88-
<div class="col-md-4">
89-
<select class="selectize" placeholder="Project">
90-
<option>Hi</option>
91-
</select>
92-
</div>
93-
<div class="col-md-4">
94-
<select class="selectize" placeholder="User">
95-
<option>Hi</option>
96-
</select>
97-
</div>
98-
</div>
46+
<div class="search-dropdown" ng-hide="searchDropdown.visible === true">
47+
<ul class="search-helper search-autocomplete-list" ng-show="searchHelper.visible === true">
48+
<li class="search-autocomplete-item">
49+
<span class="icon"></span>
50+
<h4>Tag - <span class="search-description">key/value pair associated to an event</span></h4>
51+
<p class="search-example">browser:"Chrome 34"</p>
52+
</li>
53+
<li class="search-autocomplete-item">
54+
<span class="icon"></span>
55+
<h4>Status - <span class="search-description">State of an event</span></h4>
56+
<p class="search-example">is:resolved, unresolved, muted</p>
57+
</li>
58+
<li class="search-autocomplete-item">
59+
<span class="icon"></span>
60+
<h4>Assigned - <span class="search-description">team member assigned to an event</span></h4>
61+
<p class="search-example">assigned:[me|[email protected]]</p>
62+
</li>
63+
</ul>
64+
<ul class="tag-results search-autocomplete-list" ng-show="searchTagResults.visible === true">
65+
<li class="search-autocomplete-item">
66+
<span class="icon"></span>
67+
<h4>server</h4>
68+
</li>
69+
<li class="search-autocomplete-item">
70+
<span class="icon"></span>
71+
<h4>severity</h4>
72+
</li>
73+
</ul>
74+
<ul class="value-results search-autocomplete-list">
75+
<li class="search-autocomplete-item">
76+
<span class="icon"></span>
77+
<h4>web-1</h4>
78+
</li>
79+
<li class="search-autocomplete-item">
80+
<span class="icon"></span>
81+
<h4>web-2</h4>
82+
</li>
83+
<li class="search-autocomplete-item">
84+
<span class="icon"></span>
85+
<h4>web-3</h4>
86+
</li>
87+
<li class="search-autocomplete-item">
88+
<span class="icon"></span>
89+
<h4>web-4</h4>
90+
</li>
91+
</ul>
9992
</div>
10093
</form>
10194
</div>

0 commit comments

Comments
 (0)