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 @@ ...@@ -59,7 +59,7 @@
.sidebar-nav>li { .sidebar-nav>li {
line-height: 50px; line-height: 50px;
padding: 0 20px; padding: 5px 20px;
border-bottom: 1px #1c1e2a solid; border-bottom: 1px #1c1e2a solid;
} }
......
dashboardv2/public/css/scss/common.scss
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
.detail-page { .detail-page {
.details-backbutton { .details-backbutton {
display: block !important; display: table-cell !important;
} }
} }
......
dashboardv2/public/css/scss/theme.scss
...@@ -25,50 +25,36 @@ body { ...@@ -25,50 +25,36 @@ body {
overflow-x: hidden; 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 { header.atlas-header {
background-color: $white; background-color: $white;
border-bottom: 1px $color_mystic_approx solid; border-bottom: 1px $color_mystic_approx solid;
.nav.navbar-nav { .navbar-nav {
width: 5%; display: table;
}
.global-search-container { li {
top: 8px; float: none;
width: 76%; display: table-cell;
padding: 0px 5px;
@media screen and (max-width: 1024px) {
width: 65%;
} }
} }
.header-menu { &>table {
width: 18%; td {
padding: 3px 2px;
position: relative;
transition: width 0.3s !important;
@media screen and (max-width: 1024px) { .global-search-container {
width: 30%; width: input {
width: 100%;
}
}
} }
}
.header-menu {
.dropdown-menu>li>a { .dropdown-menu>li>a {
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
...@@ -81,7 +67,7 @@ header.atlas-header { ...@@ -81,7 +67,7 @@ header.atlas-header {
} }
} }
>a { td>a {
display: inline-block; display: inline-block;
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
padding: 15px 14px; padding: 15px 14px;
...@@ -149,7 +135,7 @@ header.atlas-header { ...@@ -149,7 +135,7 @@ header.atlas-header {
.page-title { .page-title {
background-color: $color_white_lilac_approx; background-color: $color_white_lilac_approx;
padding: 10px 15px 0px 15px; padding: 15px 15px 0px 15px;
.title { .title {
padding-top: 0; padding-top: 0;
...@@ -480,6 +466,25 @@ hr[size="10"] { ...@@ -480,6 +466,25 @@ hr[size="10"] {
.ui-menu.ui-widget-content.ui-autocomplete { .ui-menu.ui-widget-content.ui-autocomplete {
box-shadow: 0px 11px 30px -8px grey; box-shadow: 0px 11px 30px -8px grey;
max-width: 60% !important; 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 { .ui-menu-item {
padding: 5px 2px; padding: 5px 2px;
...@@ -496,17 +501,9 @@ hr[size="10"] { ...@@ -496,17 +501,9 @@ hr[size="10"] {
.ui-state-active { .ui-state-active {
margin: 0px; margin: 0px;
&.empty {
background: transparent;
color: inherit !important;
cursor: default;
}
border: none; border: none;
background: #cee0fa; background: #cee0fa;
color: $black !important; color: $black !important;
//color: #686868 !important;
} }
a, a,
......
dashboardv2/public/js/templates/site/Header.html
...@@ -15,27 +15,42 @@ ...@@ -15,27 +15,42 @@
* limitations under the License. * limitations under the License.
--> -->
<header class="clearfix atlas-header"> <header class="clearfix atlas-header">
<ul class="nav navbar-nav"> <table>
<li> <tr>
<a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a> <td>
</li> <ul class="nav navbar-nav">
<li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li> <li>
</ul> <a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a>
<div class="form-group has-feedback align-left-right-icon search-box pull-left global-search-container"> </li>
<span class="fa fa-search form-control-feedback"></span> <li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
<input type="text" class="form-control global-search" name="global search" placeholder="Search entities" data-id="globalSearch" /> </ul>
<span class="fa fa-times form-control-feedback clearable" data-id="clearGlobalSearch"></span> </td>
</div> <td class="global-search-container">
<div class="btn-group pull-right header-menu"> <div class="has-feedback align-left-right-icon search-box">
<a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a> <span class="fa fa-search form-control-feedback"></span>
<a target="_blank" href="http://atlas.apache.org/"><i class="fa fa-question-circle"></i></a> <input type="text" class="form-control global-search" name="global search" placeholder="Search entities" data-id="globalSearch" />
<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> <span class="fa fa-times form-control-feedback clearable" data-id="clearGlobalSearch"></span>
<ul class="dropdown-menu"> </div>
<li class="aboutAtlas"><a href="javascript:void(0)">About</a></li> </td>
<li role="separator" class="divider"></li> <td>
<li> <!-- <div class="btn-group pull-right header-menu"> -->
<a href="logout.html"><i class="fa fa-sign-out"></i>Logout</a> <table class="header-menu">
</li> <tr>
</ul> <td><a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a></td>
</div> <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> </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 ...@@ -688,7 +688,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
collection = options.collection, collection = options.collection,
isGlossaryView = options.isGlossaryView, isGlossaryView = options.isGlossaryView,
data = ref.ui[(isGlossaryView ? "glossaryForm" : "categoryTermForm")].serializeArray().reduce(function(obj, item) { data = ref.ui[(isGlossaryView ? "glossaryForm" : "categoryTermForm")].serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value; obj[item.name] = item.value.trim();
return obj; return obj;
}, {}), }, {}),
newModel = new options.collection.model(), newModel = new options.collection.model(),
......
dashboardv2/public/js/utils/Helper.js
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
define(['require', define(['require',
'utils/Utils', 'utils/Utils',
'd3', 'd3',
'marionette' 'marionette',
'jquery-ui'
], function(require, Utils, d3) { ], function(require, Utils, d3) {
'use strict'; 'use strict';
_.mixin({ _.mixin({
...@@ -201,6 +202,29 @@ define(['require', ...@@ -201,6 +202,29 @@ define(['require',
return adapter; 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 // For placeholder support
if (!('placeholder' in HTMLInputElement.prototype)) { if (!('placeholder' in HTMLInputElement.prototype)) {
var originalRender = Backbone.Marionette.LayoutView.prototype.render; var originalRender = Backbone.Marionette.LayoutView.prototype.render;
......
dashboardv2/public/js/views/graph/LineageUtils.js
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
define(['require', ''], function(require) { define(['require'], function(require) {
'use strict'; 'use strict';
var LinegaeUtils = {}; var LinegaeUtils = {};
LinegaeUtils.DragNode = function(options) { 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