quick-search: improve styling of search input and results.

This commit is contained in:
Daniel Dourvaris 2019-01-31 13:13:55 +01:00
parent 4eccdc24d9
commit ed7e61efb5
4 changed files with 86 additions and 36 deletions

View file

@ -32,7 +32,13 @@ def assert_and_get_main_filter_content(result):
if data_item['type'] == 'search':
display_val = data_item['value_display']
assert 'Search for:' in display_val, display_val
if data_item['id'] == -1:
assert 'File search for:' in display_val, display_val
elif data_item['id'] == -2:
assert 'Commit search for:' in display_val, display_val
else:
assert False, 'No Proper ID returned {}'.format(data_item['id'])
elif data_item['type'] == 'repo':
repos.append(data_item)
elif data_item['type'] == 'repo_group':

View file

@ -263,19 +263,30 @@ class HomeView(BaseAppView):
'commit_id:{}*'.format(commit_hash), 'commit', auth_user,
raise_on_exc=False)
return [
{
commits = []
for entry in result['results']:
repo_data = {
'repository_id': entry.get('repository_id'),
'repository_type': entry.get('repo_type'),
'repository_name': entry.get('repository'),
}
commit_entry = {
'id': entry['commit_id'],
'value': org_query,
'value_display': 'repo `{}` commit: {}'.format(
'value_display': '`{}` commit: {}'.format(
entry['repository'], entry['commit_id']),
'type': 'commit',
'repo': entry['repository'],
'repo_data': repo_data,
'url': h.route_path(
'repo_commit',
repo_name=entry['repository'], commit_id=entry['commit_id'])
}
for entry in result['results']]
commits.append(commit_entry)
return commits
@LoginRequired()
@view_config(
@ -373,7 +384,7 @@ class HomeView(BaseAppView):
label = u'Commit search for `{}` in this repository.'.format(query)
queries.append(
{
'id': -10,
'id': -20,
'value': query,
'value_display': label,
'type': 'search',
@ -392,7 +403,7 @@ class HomeView(BaseAppView):
label = u'File search for `{}` in this repository group'.format(query)
queries.append(
{
'id': -20,
'id': -30,
'value': query,
'value_display': label,
'type': 'search',
@ -410,7 +421,7 @@ class HomeView(BaseAppView):
label = u'Commit search for `{}` in this repository group'.format(query)
queries.append(
{
'id': -20,
'id': -40,
'value': query,
'value_display': label,
'type': 'search',
@ -425,16 +436,16 @@ class HomeView(BaseAppView):
{
'id': -1,
'value': query,
'value_display': u'Commit search for: `{}`'.format(query),
'value_display': u'File search for: `{}`'.format(query),
'type': 'search',
'url': h.route_path('search',
_query={'q': query, 'type': 'content'})
})
queries.append(
{
'id': -1,
'id': -2,
'value': query,
'value_display': u'File search for: `{}`'.format(query),
'value_display': u'Commit search for: `{}`'.format(query),
'type': 'search',
'url': h.route_path('search',
_query={'q': query, 'type': 'commit'})

View file

@ -636,8 +636,10 @@ ul#context-pages {
border-bottom: 1px solid @grey4;
display: inline-block;
vertical-align: top;
margin-left: -7px;
background: @grey3;
background: inherit;
position: absolute;
right: 8px;
top: 9px;
}
.main_filter_input_box {
@ -652,24 +654,36 @@ ul#context-pages {
background: @grey3;
border: 1px solid black;
position: absolute;
white-space: pre-wrap;
white-space: pre;
z-index: 9999;
color: @nav-grey;
margin: 1px 7px;
padding: 0 2px;
padding: 0 10px;
}
.main_filter_input {
padding: 5px;
min-width: 220px;
min-width: 260px;
color: @nav-grey;
background: @grey3;
min-height: 18px;
&:active {
color: @grey2 !important;
background: white !important;
}
&:focus {
color: @grey2 !important;
background: white !important;
}
}
.main_filter_input::placeholder {
color: @nav-grey;
opacity: 1;
color: @nav-grey;
opacity: 1;
}
.notice-box {

View file

@ -492,17 +492,17 @@
</div>
<div id="main_filter_help" style="display: none">
Use '/' key to quickly access this field.
Enter name of repository, or repository group for quick search.
- Use '/' key to quickly access this field.
Prefix query to allow special search:
- Enter a name of repository, or repository group for quick search.
user:admin, to search for usernames
- Prefix query to allow special search:
user_group:devops, to search for user groups
user:admin, to search for usernames
commit:efced4, to search for commits
user_group:devops, to search for user groups
commit:efced4, to search for commits
</div>
</li>
@ -626,10 +626,23 @@ commit:efced4, to search for commits
var valueDisplay = data['value_display'];
var escapeRegExChars = function (value) {
return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
var pattern = '(' + escapeRegExChars(value) + ')';
var getRepoIcon = function(repo_type) {
if (repo_type === 'hg') {
return '<i class="icon-hg"></i> ';
}
else if (repo_type === 'git') {
return '<i class="icon-git"></i> ';
}
else if (repo_type === 'svn') {
return '<i class="icon-svn"></i> ';
}
return ''
};
// highlight match
valueDisplay = Select2.util.escapeMarkup(valueDisplay);
valueDisplay = valueDisplay.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
@ -639,19 +652,16 @@ commit:efced4, to search for commits
if (searchType === 'hint') {
icon += '<i class="icon-folder-close"></i> ';
}
// full text search
else if (searchType === 'search') {
icon += '<i class="icon-more"></i> ';
}
// repository
else if (searchType === 'repo') {
if (data['repo_type'] === 'hg') {
icon += '<i class="icon-hg"></i> ';
}
else if (data['repo_type'] === 'git') {
icon += '<i class="icon-git"></i> ';
}
else if (data['repo_type'] === 'svn') {
icon += '<i class="icon-svn"></i> ';
}
var repoIcon = getRepoIcon(data['repo_type']);
icon += repoIcon;
if (data['private']) {
icon += '<i class="icon-lock" ></i> ';
}
@ -659,17 +669,26 @@ commit:efced4, to search for commits
icon += '<i class="icon-unlock-alt"></i> ';
}
}
// repository groups
else if (searchType === 'repo_group') {
icon += '<i class="icon-folder-close"></i> ';
}
// user group
else if (searchType === 'user_group') {
icon += '<i class="icon-group"></i> ';
}
else if (searchType === 'user') {
icon += '<img class="gravatar" src="{0}"/>'.format(data['icon_link']);
}
// commit
else if (searchType === 'commit') {
icon += '<i class="icon-tag"></i>';
var repo_data = data['repo_data'];
var repoIcon = getRepoIcon(repo_data['repository_type']);
if (repoIcon) {
icon += repoIcon;
} else {
icon += '<i class="icon-tag"></i>';
}
}
var tmpl = '<div class="ac-container-wrap">{0}{1}</div>';
@ -715,7 +734,7 @@ commit:efced4, to search for commits
showMainFilterBox = function () {
$('#main_filter_help').toggle();
}
};
</script>
<script src="${h.asset('js/rhodecode/base/keyboard-bindings.js', ver=c.rhodecode_version_hash)}"></script>