Commit c8f525bf by kevalbhatt Committed by Sarath Subramanian

ATLAS-3244: UI : Allows user to search the entities from any page (quick-search)

parent c24029bf
......@@ -17,11 +17,13 @@
*/
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
......@@ -30,6 +32,7 @@
@mixin ellipsis() {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@mixin transition($transition...) {
......
......@@ -28,16 +28,16 @@ $white: #fff;
$black: #000;
$red: #f00;
$gray: #808080;
$dark_gray:#666;
$action_gray:#999999;
$dark_gray: #666;
$action_gray: #999999;
$color_keppel_approx: #37bb9b;
$color_gallery_approx: #eee;
$color_tuna_approx: #323544;
$color_celeste_approx: #ccc;
$color_cornflower_blue_approx: #66afe9;
$color_mystic_approx: #e8e9ee;
$color_jungle_green_approx: #38BB9B;
$color_jungle_green_light:#7ed3be;
$color_jungle_green_approx: #38bb9b;
$color_jungle_green_light: #7ed3be;
$color_froly_approx: #ee6e73;
$color_manatee_approx: #9398a0;
$color_havelock_blue_approx: #4a90e2;
......@@ -50,11 +50,13 @@ $color_puerto_rico_approx: #3dd4af;
$color_star_dust_approx: #9a9a9a;
$color_mirage_approx: #1c1e2a;
$concrete: #f2f2f2;
$lightGrey:#e1e2e4;
$lightGrey: #e1e2e4;
$color_form_control: #e8e8e8;
$attribute-dash-box: #cbcbcb;
//old - style color
$color_bali_hai_approx: #8fa5b1;
$transparent:transparent;
$black_7_5: rgba(0, 0, 0, .075);
$transparent: transparent;
$black_7_5: rgba(0, 0, 0, 0.075);
$color_hoki_approx: #698797;
$color_curious_blue_approx: #1ba9e2;
$color_blue_bayoux_approx: #44697d;
......@@ -66,7 +68,7 @@ $color_trinidad_approx: #e14f00;
$color_grenadier_approx: #c74600;
$color_athens_gray_approx: #e9ecf2;
$color_green_house_approx: #26530c;
$color_dark_grey_approx:#333;
$color_dark_grey_approx: #333;
$black_10: rgba(0, 0, 0, 0.1);
$color_cararra_approx: #ececec;
$black_30: rgba(0, 0, 0, 0.3);
......@@ -92,9 +94,9 @@ $black_80: rgba(0, 0, 0, 0.8);
$color_bright_turquoise_approx: #00ffd0;
$color_mountain_mist_approx: #999;
$color_suva_gray_approx: #868686;
$tag_color:#4A90E2;
$delete_link:#BB5838;
$tag_color: #4a90e2;
$delete_link: #bb5838;
//urls
$url_0: url(../img/loading.gif);
$switchTransition: .4s ease-out;
\ No newline at end of file
$switchTransition: 0.4s ease-out;
\ No newline at end of file
......@@ -16,7 +16,6 @@
* limitations under the License.
*/
/* form.scss */
.form-horizontal {
......@@ -39,7 +38,7 @@
.required:after {
content: "*";
padding-left: 1%;
color: $red
color: $red;
}
.control-label {
......@@ -73,7 +72,7 @@
.form-group span[class^="select2-selection select2-selection--"],
.form-control {
background-color: #e8e8e8 !important;
background-color: $color_form_control !important;
}
}
......@@ -216,7 +215,7 @@ button:focus {
margin-bottom: 10px;
border: 1px $color_keppel_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
transition: all .3s ease;
transition: all 0.3s ease;
margin: 2px;
&:hover {
......@@ -455,8 +454,51 @@ button:focus {
list-style: disc;
}
.create-entity-form {
.has-feedback.align-left {
.form-control {
padding-left: 32.5px;
padding-right: 12px;
}
.form-control-feedback {
top: 10px;
left: 0px;
height: 14px
}
}
.has-feedback.align-left-right-icon {
position: relative;
.form-control {
padding-left: 32.5px;
padding-right: 32.5px;
}
.form-control-feedback {
top: 10px;
height: 14px;
&:first-child {
left: 0;
}
&.clearable:last-child {
right: 0;
overflow: hidden;
padding-left: 33px;
transition: padding 0.4s;
pointer-events: all;
cursor: pointer;
&.in {
padding-left: 0;
}
}
}
}
.create-entity-form {
&.all {
.attribute-dash-box {
&.alloptional {
......@@ -470,7 +512,7 @@ button:focus {
border-width: 2px;
border-spacing: 8px;
border-radius: 12px;
border-color: #cbcbcb;
border-color: $attribute-dash-box;
position: relative;
padding: 18px 10px 0px 10px;
margin-top: 25px;
......@@ -478,7 +520,7 @@ button:focus {
span.required:after {
content: "*";
padding-left: 1%;
color: $red
color: $red;
}
&.alloptional {
......
......@@ -90,7 +90,6 @@
overflow: scroll !important;
max-height: 500px;
width: 100%;
table-layout: fixed;
.resizeHandler {
&.grid-draggable {
......@@ -351,12 +350,12 @@ td {
.group-conditions {
.btn-primary {
color: #333 !important;
background-color: #fff !important;
background-color: $white !important;
border-color: #ccc !important;
}
.active {
color: #fff !important;
color: $white !important;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
......@@ -375,8 +374,8 @@ div.columnmanager-visibilitycontrol {
margin-bottom: 5px;
&.open .btn-action {
background-color: #37bb9b;
color: #fff;
background-color: $color_keppel_approx;
color: $white;
}
}
......
......@@ -221,30 +221,6 @@ ul.type-filter-ul {
color: black;
}
.type-filter-dropdown {
position: absolute;
top: 5px;
background-color: #323544;
}
.filter-sticky-div {
text-align: center;
position: sticky;
position: -webkit-sticky;
top: 0px;
background-color: white;
padding-top: 8px;
& .row {
margin-right: -10px;
margin-left: -10px;
}
& input.form-control {
border: 1px #c9c9c9 solid;
}
}
hr.hr-filter {
margin-top: 7px;
margin-bottom: 7px;
......
......@@ -47,7 +47,7 @@
&.panel-primary>.panel-heading {
color: #686868;
background-color: #fff;
background-color: $white;
font-size: 14px;
font-weight: bold;
}
......
......@@ -25,45 +25,86 @@ body {
overflow-x: hidden;
}
header {
.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;
}
.header-menu {
.dropdown-menu>li>a {
color: $color_ironside_gray_approx;
.nav.navbar-nav {
width: 5%;
}
&:hover {
color: $color_jungle_green_approx;
}
.global-search-container {
top: 8px;
width: 76%;
i {
padding-right: 3px;
@media screen and (max-width: 1024px) {
width: 65%;
}
}
>a {
display: inline-block;
color: $color_ironside_gray_approx;
padding: 15px 14px;
.header-menu {
width: 18%;
&:hover {
border-bottom: 2px solid $color_jungle_green_approx;
padding: 14px 14px;
color: $color_jungle_green_approx;
@media screen and (max-width: 1024px) {
width: 30%;
}
span {
padding: 5px;
.dropdown-menu>li>a {
color: $color_ironside_gray_approx;
&:hover {
color: $color_jungle_green_approx;
}
i {
padding-right: 3px;
}
}
i {
font-size: 18px;
>a {
display: inline-block;
color: $color_ironside_gray_approx;
padding: 15px 14px;
&:hover {
border-bottom: 2px solid $color_jungle_green_approx;
padding: 14px 14px;
color: $color_jungle_green_approx;
}
span {
padding: 5px;
}
i {
font-size: 18px;
}
}
}
}
.main-search {
.form-control {
border: none;
......@@ -88,18 +129,24 @@ header {
font-size: 2em;
}
#sideNav-wrapper {
color: $white;
font-size: 16px !important;
#sidebar-wrapper {
background: $color_tuna_approx;
#sideNav-wrapper {
color: $white;
font-size: 16px !important;
.well {
background-color: $color_tuna_approx;
border: 1px solid #666363;
overflow: hidden;
@include clearfix();
.well {
background: transparent;
border: 1px solid #666363;
overflow: hidden;
@include clearfix();
}
}
}
.page-title {
background-color: $color_white_lilac_approx;
padding: 10px 15px 0px 15px;
......@@ -324,11 +371,15 @@ hr[size="10"] {
margin-top: 15px;
}
.ellipsis {
.ellipsis-with-margin {
@include ellipsis();
margin-bottom: 10px;
}
.ellipsis {
@include ellipsis();
}
.readOnlyLink {
@include ellipsis();
......@@ -395,6 +446,19 @@ hr[size="10"] {
}
}
.search-entity-icon-box {
padding: 10px;
border-radius: 50%;
width: 25px;
height: 25px;
img {
width: 25px;
height: 25px;
cursor: default;
}
}
.entity-icon-box {
display: inline-block;
background: #cee0fa;
......@@ -410,4 +474,46 @@ hr[size="10"] {
img {
height: 50px;
}
}
.ui-menu.ui-widget-content.ui-autocomplete {
box-shadow: 0px 11px 30px -8px grey;
max-width: 60% !important;
.ui-menu-item {
padding: 5px 2px;
color: $color_ironside_gray_approx;
&.with-icon {
img {
height: 25px;
width: 30px;
margin-right: 10px;
background: none;
}
}
.ui-state-active {
margin: 0px;
&.empty {
background: transparent;
color: inherit !important;
cursor: default;
}
border: none;
background: #cee0fa;
color: $black !important;
//color: #686868 !important;
}
a,
span {
padding: 10px;
display: block;
color: inherit !important;
}
}
}
\ No newline at end of file
......@@ -195,7 +195,7 @@ $color_falu_red_approx: #8a1f11;
a {
padding: 10px 20px;
background-color: $color_keppel_approx;
color: #fff;
color: $white;
margin-bottom: 10px;
border: 1px $color_keppel_approx solid;
border-radius: 4px;
......
......@@ -20,7 +20,7 @@
<div class="fontLoader" style="z-index:999">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="ellipsis" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span>
<div class="ellipsis-with-margin" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span>
</div>
<div class="searchTable">
<div class="row no-data" style="display: none;">
......
......@@ -14,14 +14,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<header class="clearfix">
<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="btn-group pull-right header-menu ">
<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>
......
......@@ -25,7 +25,7 @@
<input class="form-control" data-id="tagName" placeholder="Name(required)" autofocus/>
</div>
{{else}}
<span class="ellipsis control-label text-left col-sm-10" data-id="title"></span> {{/if}}
<span class="ellipsis-with-margin control-label text-left col-sm-10" data-id="title"></span> {{/if}}
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="description">Description</label>
......
......@@ -354,7 +354,7 @@ define(['require',
CommonViewFunction.deleteTag(_.extend({}, {
guid: that.id,
associatedGuid: that.id != entityGuid ? entityGuid : null,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + this.name + "?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + this.name + "?</b></div>",
titleMessage: Messages.removeTag,
okText: "Remove",
showLoader: that.showLoader.bind(that),
......@@ -378,7 +378,7 @@ define(['require',
relationshipGuid: termObj.relationshipGuid
},
collection: that.glossaryCollection,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(termName) + "</b> assignment from" + " " + "<b>" + this.name + "?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(termName) + "</b> assignment from" + " " + "<b>" + this.name + "?</b></div>",
titleMessage: Messages.glossary.removeTermfromEntity,
isEntityView: true,
buttonText: "Remove",
......
......@@ -498,7 +498,7 @@ define(['require',
entityLabel = this.capitalize(value.name);
return '<div class=" row ' + value.isOptional + '"><span class="col-sm-3">' +
'<label><span class="' + (value.isOptional ? 'true' : 'false required') + '">' + entityLabel + '</span><span class="center-block ellipsis text-gray" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span></label></span>' +
'<label><span class="' + (value.isOptional ? 'true' : 'false required') + '">' + entityLabel + '</span><span class="center-block ellipsis-with-margin text-gray" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span></label></span>' +
'<span class="col-sm-9">' + (this.getElement(object)) +
'</input></span></div>';
},
......
......@@ -389,7 +389,7 @@ define(['require',
tagName = $(e.currentTarget).text(),
termName = this.data.name;
CommonViewFunction.deleteTag(_.extend({}, {
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + termName + "?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + termName + "?</b></div>",
titleMessage: Messages.removeTag,
okText: "Remove",
showLoader: that.showLoader.bind(that),
......@@ -410,7 +410,7 @@ define(['require',
selectedGuid: guid,
model: that.data,
collection: that.glossaryCollection,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(name) + "</b> assignment from" + " " + "<b>" + that.data.name + "?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(name) + "</b> assignment from" + " " + "<b>" + that.data.name + "?</b></div>",
titleMessage: Messages.glossary[that.isTermView ? "removeCategoryfromTerm" : "removeTermfromCategory"],
isCategoryView: that.isCategoryView,
isTermView: that.isTermView,
......
......@@ -288,7 +288,7 @@ define(['require',
CommonViewFunction.deleteTag({
tagName: tagName,
guid: guid,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + assetName + " ?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + assetName + " ?</b></div>",
titleMessage: Messages.removeTag,
okText: "Remove",
showLoader: that.showLoader.bind(that),
......
......@@ -575,7 +575,7 @@ define(['require',
} else {
that.ui.containerCheckBox.hide();
}
that.$(".ellipsis .inputAssignTag").hide();
that.$(".ellipsis-with-margin .inputAssignTag").hide();
table.trigger("grid:refresh"); /*Event fire when table rendered*/
// that.REntityTableLayoutView.$el.find('.colSort thead tr th:not(:first)').addClass('dragHandler');
if (that.isTableDropDisable !== true) {
......@@ -956,7 +956,7 @@ define(['require',
},
hideLoader: function(options) {
this.$('.fontLoader:not(.for-ignore)').removeClass('show');
options && options.type === 'error' ? this.$('.ellipsis,.pagination-box').hide() : this.$('.ellipsis,.pagination-box').show(); // only show for first time and hide when type is error
options && options.type === 'error' ? this.$('.ellipsis-with-margin,.pagination-box').hide() : this.$('.ellipsis-with-margin,.pagination-box').show(); // only show for first time and hide when type is error
this.$('.tableOverlay').removeClass('show');
},
checkedValue: function(e) {
......@@ -995,7 +995,7 @@ define(['require',
tagName: tagName,
guid: guid,
associatedGuid: guid != entityGuid ? entityGuid : null,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + assetName + " ?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + assetName + " ?</b></div>",
titleMessage: Messages.removeTag,
okText: "Remove",
showLoader: that.showLoader.bind(that),
......@@ -1022,7 +1022,7 @@ define(['require',
relationshipGuid: termObj.relationGuid
},
collection: that.glossaryCollection,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(termName) + "</b> assignment from" + " " + "<b>" + assetname + "?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(termName) + "</b> assignment from" + " " + "<b>" + assetname + "?</b></div>",
titleMessage: Messages.glossary.removeTermfromEntity,
isEntityView: true,
buttonText: "Remove",
......
......@@ -20,8 +20,10 @@ define(['require',
'hbs!tmpl/site/Header',
'utils/CommonViewFunction',
'utils/Globals',
'utils/Utils'
], function(require, tmpl, CommonViewFunction, Globals, Utils) {
'utils/Utils',
'utils/UrlLinks',
'jquery-ui'
], function(require, tmpl, CommonViewFunction, Globals, Utils, UrlLinks) {
'use strict';
var Header = Marionette.LayoutView.extend({
......@@ -30,6 +32,8 @@ define(['require',
ui: {
backButton: "[data-id='backButton']",
menuHamburger: "[data-id='menuHamburger']",
globalSearch: "[data-id='globalSearch']",
clearGlobalSearch: "[data-id='clearGlobalSearch']"
},
events: function() {
var events = {};
......@@ -39,7 +43,7 @@ define(['require',
if (queryParams && queryParams.from) {
if (queryParams.from == "classification") {
urlPath = "tagUrl";
} else if(queryParams.from == "glossary"){
} else if (queryParams.from == "glossary") {
urlPath = "glossaryUrl";
}
}
......@@ -51,6 +55,11 @@ define(['require',
});
};
events['click ' + this.ui.clearGlobalSearch] = function() {
this.ui.globalSearch.val("");
this.ui.globalSearch.autocomplete("search");
this.ui.clearGlobalSearch.removeClass("in");
};
events['click ' + this.ui.menuHamburger] = function() {
$('body').toggleClass("full-screen");
};
......@@ -64,7 +73,118 @@ define(['require',
if (Globals.userLogedIn.status) {
that.$('.userName').html(Globals.userLogedIn.response.userName);
}
this.initializeGlobalSearch();
},
getSearchUrlQueryParam: function(request) {
var term = request.term;
return {
"excludeDeletedEntities": true,
"includeSubClassifications": true,
"includeSubTypes": true,
"includeClassificationAttributes": true,
"entityFilters": null,
"tagFilters": null,
"attributes": null,
"query": this.getSearchString(term),
"limit": 5,
"offset": 0,
"typeName": null,
"classification": null,
"termName": null
}
},
getSearchString: function(str) {
if (str && str.length) {
return (str.match(/[+\-&|!(){}[\]^"~*?:/]/g) === null ? (str + "*") : str);
} else {
return str;
}
},
initializeGlobalSearch: function() {
var that = this;
this.cache = {};
this.ui.globalSearch.autocomplete({
minLength: 1,
autoFocus: false,
search: function() {
$(this).siblings('span.fa-search').removeClass("fa-search").addClass("fa-refresh fa-spin-custom");
},
focus: function(event, ui) {
//$(this).val(ui.item.itemText);
return false;
},
open: function() {
$(this).siblings('span.fa-refresh').removeClass("fa-refresh fa-spin-custom").addClass("fa-search");
},
select: function(event, ui) {
if (ui && ui.item && ui.item.value == "Empty") {
return false
} else {
Utils.setUrl({
url: '#!/detailPage/' + ui.item.guid,
mergeBrowserUrl: false,
trigger: true
});
return true
}
},
source: function(request, response) {
var term = request.term;
if (term in that.cache) {
response(that.cache[term]);
return;
}
$.ajax({
type: 'POST',
url: UrlLinks.searchApiUrl('basic'),
contentType: 'application/json',
data: JSON.stringify(that.getSearchUrlQueryParam(request)),
cache: true,
success: function(data) {
var data = data.entities;
if (data === undefined) {
data = ["Empty"];
}
that.cache[term] = data;
response(data);
}
});
}
}).focus(function() {
$(this).autocomplete("search");
}).keyup(function(event) {
if ($(this).val().trim() === "") {
that.ui.clearGlobalSearch.removeClass("in");
} else {
that.ui.clearGlobalSearch.addClass("in");
if (event.keyCode == 13) {
Utils.setUrl({
url: '#!/search/searchResult?query=' + encodeURIComponent(that.getSearchString($(this).val())) + '&searchType=basic',
mergeBrowserUrl: false,
trigger: true
});
}
}
}).autocomplete("instance")._renderItem = function(ul, item) {
if (item && item.value == "Empty") {
return $("<li>")
.append("<span class='empty'>No record found</span>")
.appendTo(ul);
}
item.itemText = Utils.getName(item) + " (" + item.typeName + ")";
var options = {},
table = '';
options.entityData = item;
var img = $('<img src="' + Utils.getEntityIconPath(options) + '">').on('error', function(error, s) {
this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src }));
});
var link = $("<a class='search-entity-anchor ellipsis' href='#!/detailPage/" + item.guid + "'>" + item.itemText + "</a>").prepend(img);
return $("<li class='with-icon'>")
.append(link)
.appendTo(ul);
};
}
});
return Header;
});
\ No newline at end of file
......@@ -205,7 +205,7 @@ define(['require',
tagName: tagName,
guid: that.guid,
associatedGuid: that.guid != entityGuid ? entityGuid : null,
msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + this.entityName + "?</b></div>",
msg: "<div class='ellipsis-with-margin'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + this.entityName + "?</b></div>",
titleMessage: Messages.removeTag,
okText: "Remove",
showLoader: function() {
......
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