mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-09 22:18:39 +02:00
Use Semantic UI's Search component for user and repo search (#2636)
* Use search component on org invitation user input. * Search component for collaboration and members. * Search component for repo search. * minCharacters for search input * Display full_name for user search. * Fixed missing uid query parameter for repo search. * Removed unused comment.
This commit is contained in:
harry authored and 
Lauris BH committed
1 parent
a04718a2a6
commit
b3cfa5a77e
7 files changed
+49
-109
No files matched your search
@@ -1 +1 @@
|
||||
.emoji{width:1.5em;height:1.5em;display:inline-block;background-size:contain}body{font-family:"Helvetica Neue","Microsoft YaHei",Arial,Helvetica,sans-serif!important;background-color:#fff;overflow-y:scroll;-webkit-font-smoothing:antialiased}img{border-radius:3px}code,pre{font:12px Consolas,"Liberation Mono",Menlo,Courier,monospace}code.raw,pre.raw{padding:7px 12px;margin:10px 0;background-color:#f8f8f8;border:1px solid #ddd;border-radius:3px;font-size:13px;line-height:1.5;overflow:auto}code.wrap,pre.wrap{white-space:pre-wrap;word-break:break-word}.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full.height{padding:0;margin:0 0 -80px 0;min-height:100%}.following.bar{z-index:900;left:0;width:100%}.following.bar.light{background-color:#fff;border-bottom:1px solid #DDD;box-shadow:0 2px 3px rgba(0,0,0,.04)}.following.bar .column .menu{margin-top:0}.following.bar .top.menu a.item.brand{padding-left:0}.following.bar .brand .ui.mini.image{width:30px}.following.bar .top.menu .dropdown.item.active,.following.bar .top.menu .dropdown.item:hover,.following.bar .top.menu a.item:hover{background-color:transparent}.following.bar .top.menu a.item:hover{color:rgba(0,0,0,.45)}.following.bar .top.menu .menu{z-index:900}.following.bar .icon,.following.bar .octicon{margin-right:5px!important}.following.bar .head.link.item{padding-right:0!important}.following.bar .avatar>.ui.image{margin-right:0}.following.bar .avatar .octicon-triangle-down{margin-top:6.5px}.following.bar .searchbox{background-color:#f4f4f4!important}.following.bar .searchbox:focus{background-color:#e9e9e9!important}.following.bar .text .octicon{width:16px;text-align:center}.following.bar .right.menu .menu{left:auto;right:0}.following.bar .right.menu .dropdown .menu{margin-top:0}.ui.left{float:left}.ui.right{float:right}.ui.button,.ui.menu .item{-moz-user-select:auto;-ms-user-select:auto;-webkit-user-select:auto;user-select:auto}.ui.container.fluid.padded{padding:0 10px 0 10px}.ui.form .ui.button{font-weight:400}.ui .text.red{color:#d95c5c!important}.ui .text.red a{color:#d95c5c!important}.ui .text.red a:hover{color:#E67777!important}.ui .text.blue{color:#428bca!important}.ui .text.blue a{color:#15c!important}.ui .text.blue a:hover{color:#428bca!important}.ui .text.black{color:#444}.ui .text.black:hover{color:#000}.ui .text.grey{color:#767676!important}.ui .text.grey a{color:#444!important}.ui .text.grey a:hover{color:#000!important}.ui .text.light.grey{color:#888!important}.ui .text.green{color:#6cc644!important}.ui .text.purple{color:#6e5494!important}.ui .text.yellow{color:#FBBD08!important}.ui .text.gold{color:#a1882b!important}.ui .text.left{text-align:left!important}.ui .text.right{text-align:right!important}.ui .text.small{font-size:.75em}.ui .text.normal{font-weight:400}.ui .text.bold{font-weight:700}.ui .text.italic{font-style:italic}.ui .text.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}.ui .text.thin{font-weight:400}.ui .text.middle{vertical-align:middle}.ui .message{text-align:center}.ui .header>i+.content{padding-left:.75rem;vertical-align:middle}.ui .warning.header{background-color:#F9EDBE!important;border-color:#F0C36D}.ui .warning.segment{border-color:#F0C36D}.ui .info.segment{border:1px solid #c5d5dd}.ui .info.segment.top{background-color:#e6f1f6!important}.ui .info.segment.top h3,.ui .info.segment.top h4{margin-top:0}.ui .info.segment.top h3:last-child{margin-top:4px}.ui .info.segment.top>:last-child{margin-bottom:0}.ui .normal.header{font-weight:400}.ui .avatar.image{border-radius:3px}.ui .form .fake{display:none!important}.ui .form .sub.field{margin-left:25px}.ui .sha.label{font-family:Consolas,Menlo,Monaco,"Lucida Console",monospace;font-size:13px;padding:6px 10px 4px 10px;font-weight:400;margin:0 6px}.ui.status.buttons .octicon{margin-right:4px}.ui.inline.delete-button{padding:8px 15px;font-weight:400}.overflow.menu .items{max-height:300px;overflow-y:auto}.overflow.menu .items .item{position:relative;cursor:pointer;display:block;border:none;height:auto;border-top:none;line-height:1em;color:rgba(0,0,0,.8);padding:.71428571em 1.14285714em!important;font-size:1rem;text-transform:none;font-weight:400;box-shadow:none;-webkit-touch-callout:none}.overflow.menu .items .item.active{font-weight:700}.overflow.menu .items .item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.8);z-index:13}.scrolling.menu .item.selected{font-weight:700!important}footer{margin-top:54px!important;height:40px;background-color:#fff;border-top:1px solid #d6d6d6;clear:both;width:100%;color:#888}footer .container{padding-top:10px}footer .container .fa{width:16px;text-align:center;color:#428bca}footer .container .links>*{border-left:1px solid #d6d6d6;padding-left:8px;margin-left:5px}footer .container .links>:first-child{border-left:none}footer .ui.language .menu{max-height:500px;overfLine truncated
|
||||
.emoji{width:1.5em;height:1.5em;display:inline-block;background-size:contain}body{font-family:"Helvetica Neue","Microsoft YaHei",Arial,Helvetica,sans-serif!important;background-color:#fff;overflow-y:scroll;-webkit-font-smoothing:antialiased}img{border-radius:3px}code,pre{font:12px Consolas,"Liberation Mono",Menlo,Courier,monospace}code.raw,pre.raw{padding:7px 12px;margin:10px 0;background-color:#f8f8f8;border:1px solid #ddd;border-radius:3px;font-size:13px;line-height:1.5;overflow:auto}code.wrap,pre.wrap{white-space:pre-wrap;word-break:break-word}.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full.height{padding:0;margin:0 0 -80px 0;min-height:100%}.following.bar{z-index:900;left:0;width:100%}.following.bar.light{background-color:#fff;border-bottom:1px solid #DDD;box-shadow:0 2px 3px rgba(0,0,0,.04)}.following.bar .column .menu{margin-top:0}.following.bar .top.menu a.item.brand{padding-left:0}.following.bar .brand .ui.mini.image{width:30px}.following.bar .top.menu .dropdown.item.active,.following.bar .top.menu .dropdown.item:hover,.following.bar .top.menu a.item:hover{background-color:transparent}.following.bar .top.menu a.item:hover{color:rgba(0,0,0,.45)}.following.bar .top.menu .menu{z-index:900}.following.bar .icon,.following.bar .octicon{margin-right:5px!important}.following.bar .head.link.item{padding-right:0!important}.following.bar .avatar>.ui.image{margin-right:0}.following.bar .avatar .octicon-triangle-down{margin-top:6.5px}.following.bar .searchbox{background-color:#f4f4f4!important}.following.bar .searchbox:focus{background-color:#e9e9e9!important}.following.bar .text .octicon{width:16px;text-align:center}.following.bar .right.menu .menu{left:auto;right:0}.following.bar .right.menu .dropdown .menu{margin-top:0}.ui.left{float:left}.ui.right{float:right}.ui.button,.ui.menu .item{-moz-user-select:auto;-ms-user-select:auto;-webkit-user-select:auto;user-select:auto}.ui.container.fluid.padded{padding:0 10px 0 10px}.ui.form .ui.button{font-weight:400}.ui .text.red{color:#d95c5c!important}.ui .text.red a{color:#d95c5c!important}.ui .text.red a:hover{color:#E67777!important}.ui .text.blue{color:#428bca!important}.ui .text.blue a{color:#15c!important}.ui .text.blue a:hover{color:#428bca!important}.ui .text.black{color:#444}.ui .text.black:hover{color:#000}.ui .text.grey{color:#767676!important}.ui .text.grey a{color:#444!important}.ui .text.grey a:hover{color:#000!important}.ui .text.light.grey{color:#888!important}.ui .text.green{color:#6cc644!important}.ui .text.purple{color:#6e5494!important}.ui .text.yellow{color:#FBBD08!important}.ui .text.gold{color:#a1882b!important}.ui .text.left{text-align:left!important}.ui .text.right{text-align:right!important}.ui .text.small{font-size:.75em}.ui .text.normal{font-weight:400}.ui .text.bold{font-weight:700}.ui .text.italic{font-style:italic}.ui .text.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}.ui .text.thin{font-weight:400}.ui .text.middle{vertical-align:middle}.ui .message{text-align:center}.ui .header>i+.content{padding-left:.75rem;vertical-align:middle}.ui .warning.header{background-color:#F9EDBE!important;border-color:#F0C36D}.ui .warning.segment{border-color:#F0C36D}.ui .info.segment{border:1px solid #c5d5dd}.ui .info.segment.top{background-color:#e6f1f6!important}.ui .info.segment.top h3,.ui .info.segment.top h4{margin-top:0}.ui .info.segment.top h3:last-child{margin-top:4px}.ui .info.segment.top>:last-child{margin-bottom:0}.ui .normal.header{font-weight:400}.ui .avatar.image{border-radius:3px}.ui .form .fake{display:none!important}.ui .form .sub.field{margin-left:25px}.ui .sha.label{font-family:Consolas,Menlo,Monaco,"Lucida Console",monospace;font-size:13px;padding:6px 10px 4px 10px;font-weight:400;margin:0 6px}.ui.status.buttons .octicon{margin-right:4px}.ui.inline.delete-button{padding:8px 15px;font-weight:400}.overflow.menu .items{max-height:300px;overflow-y:auto}.overflow.menu .items .item{position:relative;cursor:pointer;display:block;border:none;height:auto;border-top:none;line-height:1em;color:rgba(0,0,0,.8);padding:.71428571em 1.14285714em!important;font-size:1rem;text-transform:none;font-weight:400;box-shadow:none;-webkit-touch-callout:none}.overflow.menu .items .item.active{font-weight:700}.overflow.menu .items .item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.8);z-index:13}.scrolling.menu .item.selected{font-weight:700!important}footer{margin-top:54px!important;height:40px;background-color:#fff;border-top:1px solid #d6d6d6;clear:both;width:100%;color:#888}footer .container{padding-top:10px}footer .container .fa{width:16px;text-align:center;color:#428bca}footer .container .links>*{border-left:1px solid #d6d6d6;padding-left:8px;margin-left:5px}footer .container .links>:first-child{border-left:none}footer .ui.language .menu{max-height:500px;overfLine truncated
|
||||
+36
-87
@@ -1230,104 +1230,53 @@ function hideWhenLostFocus(body, parent) {
|
||||
}
|
||||
|
||||
function searchUsers() {
|
||||
if (!$('#search-user-box .results').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $searchUserBox = $('#search-user-box');
|
||||
var $results = $searchUserBox.find('.results');
|
||||
$searchUserBox.keyup(function () {
|
||||
var $this = $(this);
|
||||
var keyword = $this.find('input').val();
|
||||
if (keyword.length < 2) {
|
||||
$results.hide();
|
||||
return;
|
||||
}
|
||||
$searchUserBox.search({
|
||||
minCharacters: 2,
|
||||
apiSettings: {
|
||||
url: suburl + '/api/v1/users/search?q={query}',
|
||||
onResponse: function(response) {
|
||||
var items = [];
|
||||
$.each(response.data, function (i, item) {
|
||||
var title = item.login;
|
||||
if (item.full_name && item.full_name.length > 0) {
|
||||
title += ' (' + item.full_name + ')';
|
||||
}
|
||||
items.push({
|
||||
title: title,
|
||||
image: item.avatar_url
|
||||
})
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: suburl + '/api/v1/users/search?q=' + keyword,
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
var notEmpty = function (str) {
|
||||
return str && str.length > 0;
|
||||
};
|
||||
|
||||
$results.html('');
|
||||
|
||||
if (response.ok && response.data.length) {
|
||||
var html = '';
|
||||
$.each(response.data, function (i, item) {
|
||||
html += '<div class="item"><img class="ui avatar image" src="' + item.avatar_url + '"><span class="username">' + item.login + '</span>';
|
||||
if (notEmpty(item.full_name)) {
|
||||
html += ' (' + item.full_name + ')';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
$results.html(html);
|
||||
$this.find('.results .item').click(function () {
|
||||
$this.find('input').val($(this).find('.username').text());
|
||||
$results.hide();
|
||||
});
|
||||
$results.show();
|
||||
} else {
|
||||
$results.hide();
|
||||
}
|
||||
return { results: items }
|
||||
}
|
||||
});
|
||||
},
|
||||
searchFields: ['login', 'full_name'],
|
||||
showNoResults: false
|
||||
});
|
||||
$searchUserBox.find('input').focus(function () {
|
||||
$searchUserBox.keyup();
|
||||
});
|
||||
hideWhenLostFocus('#search-user-box .results', '#search-user-box');
|
||||
}
|
||||
|
||||
// FIXME: merge common parts in two functions
|
||||
function searchRepositories() {
|
||||
if (!$('#search-repo-box .results').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $searchRepoBox = $('#search-repo-box');
|
||||
var $results = $searchRepoBox.find('.results');
|
||||
$searchRepoBox.keyup(function () {
|
||||
var $this = $(this);
|
||||
var keyword = $this.find('input').val();
|
||||
if (keyword.length < 2) {
|
||||
$results.hide();
|
||||
return;
|
||||
}
|
||||
$searchRepoBox.search({
|
||||
minCharacters: 2,
|
||||
apiSettings: {
|
||||
url: suburl + '/api/v1/repos/search?q={query}&uid=' + $searchRepoBox.data('uid'),
|
||||
onResponse: function(response) {
|
||||
var items = [];
|
||||
$.each(response.data, function (i, item) {
|
||||
items.push({
|
||||
title: item.full_name.split("/")[1],
|
||||
description: item.full_name
|
||||
})
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: suburl + '/api/v1/repos/search?q=' + keyword + "&uid=" + $searchRepoBox.data('uid'),
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
var notEmpty = function (str) {
|
||||
return str && str.length > 0;
|
||||
};
|
||||
|
||||
$results.html('');
|
||||
|
||||
if (response.ok && response.data.length) {
|
||||
var html = '';
|
||||
$.each(response.data, function (i, item) {
|
||||
html += '<div class="item"><i class="icon octicon octicon-repo"></i> <span class="fullname">' + item.full_name + '</span></div>';
|
||||
});
|
||||
$results.html(html);
|
||||
$this.find('.results .item').click(function () {
|
||||
$this.find('input').val($(this).find('.fullname').text().split("/")[1]);
|
||||
$results.hide();
|
||||
});
|
||||
$results.show();
|
||||
} else {
|
||||
$results.hide();
|
||||
}
|
||||
return { results: items }
|
||||
}
|
||||
});
|
||||
},
|
||||
searchFields: ['full_name'],
|
||||
showNoResults: false
|
||||
});
|
||||
$searchRepoBox.find('input').focus(function () {
|
||||
$searchRepoBox.keyup();
|
||||
});
|
||||
hideWhenLostFocus('#search-repo-box .results', '#search-repo-box');
|
||||
}
|
||||
|
||||
function initCodeView() {
|
||||
|
||||
@@ -1345,20 +1345,15 @@
|
||||
#search-repo-box,
|
||||
#search-user-box {
|
||||
.results {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
||||
.item {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,.05)!important;
|
||||
color: rgba(0,0,0,.95)!important;
|
||||
}
|
||||
img {
|
||||
.result {
|
||||
.image {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
.content {
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user