Skip to content

A
atlas
Commit 9062e2c8 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3282 : UI : use search suggestions API for quick-search

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent 4e1eeb4c
Showing with 107 additions and 70 deletions
dashboardv2/public/css/bootstrap-sidebar.css
......@@ -59,7 +59,7 @@
.sidebar-nav>li {
line-height: 50px;
padding: 0 20px;
padding: 5px 20px;
border-bottom: 1px #1c1e2a solid;
}
......
dashboardv2/public/css/scss/common.scss
......@@ -86,7 +86,7 @@
.detail-page {
.details-backbutton {
display: block !important;
display: table-cell !important;
}
}
......
dashboardv2/public/css/scss/theme.scss
......@@ -25,50 +25,36 @@ body {
overflow-x: hidden;
}
.detail-page {
header.atlas-header {
.nav.navbar-nav {
width: 16%;
@media screen and (max-width: 1024px) {
width: 24%;
}
}
.global-search-container {
width: 65%;
@media screen and (max-width: 1024px) {
width: 45%;
}
}
}
}
header.atlas-header {
background-color: $white;
border-bottom: 1px $color_mystic_approx solid;
.nav.navbar-nav {
width: 5%;
}
.navbar-nav {
display: table;
.global-search-container {
top: 8px;
width: 76%;
li {
float: none;
display: table-cell;
padding: 0px 5px;
@media screen and (max-width: 1024px) {
width: 65%;
}
}
.header-menu {
width: 18%;
&>table {
td {
padding: 3px 2px;
position: relative;
transition: width 0.3s !important;
@media screen and (max-width: 1024px) {
width: 30%;
.global-search-container {
width: input {
width: 100%;
}
}
}
}
.header-menu {
.dropdown-menu>li>a {
color: $color_ironside_gray_approx;
......@@ -81,7 +67,7 @@ header.atlas-header {
}
}
>a {
td>a {
display: inline-block;
color: $color_ironside_gray_approx;
padding: 15px 14px;
......@@ -149,7 +135,7 @@ header.atlas-header {
.page-title {
background-color: $color_white_lilac_approx;
padding: 10px 15px 0px 15px;
padding: 15px 15px 0px 15px;
.title {
padding-top: 0;
......@@ -480,6 +466,25 @@ hr[size="10"] {
.ui-menu.ui-widget-content.ui-autocomplete {
box-shadow: 0px 11px 30px -8px grey;
max-width: 60% !important;
max-height: 70vh;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
.ui-autocomplete-category {
padding: 10px;
color: #acacac;
text-transform: capitalize;
}
li.empty {
padding: 5px 2px;
line-height: 45px;
span.empty-message {
padding: 10px;
}
}
.ui-menu-item {
padding: 5px 2px;
......@@ -496,17 +501,9 @@ hr[size="10"] {
.ui-state-active {
margin: 0px;
&.empty {
background: transparent;
color: inherit !important;
cursor: default;
}
border: none;
background: #cee0fa;
color: $black !important;
//color: #686868 !important;
}
a,
......
dashboardv2/public/js/templates/site/Header.html
......@@ -15,27 +15,42 @@
* limitations under the License.
-->
<header class="clearfix atlas-header">
<ul class="nav navbar-nav">
<li>
<a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a>
</li>
<li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
</ul>
<div class="form-group has-feedback align-left-right-icon search-box pull-left global-search-container">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control global-search" name="global search" placeholder="Search entities" data-id="globalSearch" />
<span class="fa fa-times form-control-feedback clearable" data-id="clearGlobalSearch"></span>
</div>
<div class="btn-group pull-right header-menu">
<a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a>
<a target="_blank" href="http://atlas.apache.org/"><i class="fa fa-question-circle"></i></a>
<a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i><span class="userName"></span></a>
<ul class="dropdown-menu">
<li class="aboutAtlas"><a href="javascript:void(0)">About</a></li>
<li role="separator" class="divider"></li>
<li>
<a href="logout.html"><i class="fa fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
<table>
<tr>
<td>
<ul class="nav navbar-nav">
<li>
<a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a>
</li>
<li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
</ul>
</td>
<td class="global-search-container">
<div class="has-feedback align-left-right-icon search-box">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control global-search" name="global search" placeholder="Search entities" data-id="globalSearch" />
<span class="fa fa-times form-control-feedback clearable" data-id="clearGlobalSearch"></span>
</div>
</td>
<td>
<!-- <div class="btn-group pull-right header-menu"> -->
<table class="header-menu">
<tr>
<td><a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a></td>
<td><a target="_blank" href="http://atlas.apache.org/"><i class="fa fa-question-circle"></i></a></td>
<td>
<a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i><span class="userName"></span></a>
<ul class="dropdown-menu">
<li class="aboutAtlas"><a href="javascript:void(0)">About</a></li>
<li role="separator" class="divider"></li>
<li>
<a href="logout.html"><i class="fa fa-sign-out"></i>Logout</a>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</header>
\ No newline at end of file
dashboardv2/public/js/utils/CommonViewFunction.js
......@@ -688,7 +688,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
collection = options.collection,
isGlossaryView = options.isGlossaryView,
data = ref.ui[(isGlossaryView ? "glossaryForm" : "categoryTermForm")].serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
obj[item.name] = item.value.trim();
return obj;
}, {}),
newModel = new options.collection.model(),
......
dashboardv2/public/js/utils/Helper.js
......@@ -18,7 +18,8 @@
define(['require',
'utils/Utils',
'd3',
'marionette'
'marionette',
'jquery-ui'
], function(require, Utils, d3) {
'use strict';
_.mixin({
......@@ -201,6 +202,29 @@ define(['require',
return adapter;
});
$.widget("custom.atlasAutoComplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category,.empty)");
},
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
items = _.sortBy(items, 'order');
$.each(items, function(index, item) {
var li;
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
},
_renderItemData: function(ul, item) {
return this._renderItem(ul, item);
}
});
// For placeholder support
if (!('placeholder' in HTMLInputElement.prototype)) {
var originalRender = Backbone.Marionette.LayoutView.prototype.render;
......
dashboardv2/public/js/views/graph/LineageUtils.js
......@@ -16,7 +16,7 @@
* limitations under the License.
*/
define(['require', ''], function(require) {
define(['require'], function(require) {
'use strict';
var LinegaeUtils = {};
LinegaeUtils.DragNode = function(options) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment