Commit 57b52a29 by kevalbhatt Committed by Sarath Subramanian

ATLAS-3470: UI : Search completes late because of loading entity icons

parent c3da6d5f
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg); transform: rotate(359deg);
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg); transform: rotate(359deg);
...@@ -116,19 +118,53 @@ ...@@ -116,19 +118,53 @@
left: -200px; left: -200px;
width: 30%; width: 30%;
} }
50% { 50% {
width: 30%; width: 30%;
} }
70% { 70% {
width: 70%; width: 70%;
} }
80% { 80% {
left: 50%; left: 50%;
} }
95% { 95% {
left: 120%; left: 120%;
} }
to { to {
left: 100%; left: 100%;
} }
} }
.searchTableLogoLoader {
width: 20px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: placeHolderLoader;
animation-name: placeHolderLoader;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 700px 10px;
border-radius: 8px;
}
@keyframes placeHolderLoader {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
\ No newline at end of file
...@@ -462,7 +462,7 @@ hr[size="10"] { ...@@ -462,7 +462,7 @@ hr[size="10"] {
overflow-x: hidden; overflow-x: hidden;
.ui-autocomplete-category { .ui-autocomplete-category {
padding: 10px; padding: 5px 15px;
color: #acacac; color: #acacac;
text-transform: capitalize; text-transform: capitalize;
} }
...@@ -477,7 +477,7 @@ hr[size="10"] { ...@@ -477,7 +477,7 @@ hr[size="10"] {
} }
.ui-menu-item { .ui-menu-item {
padding: 5px 2px; padding: 2px 2px;
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
&.with-icon { &.with-icon {
...@@ -505,7 +505,7 @@ hr[size="10"] { ...@@ -505,7 +505,7 @@ hr[size="10"] {
a, a,
span { span {
padding: 10px; padding: 6px 10px;
display: block; display: block;
color: inherit !important; color: inherit !important;
} }
...@@ -522,6 +522,17 @@ td.searchTableName:hover { ...@@ -522,6 +522,17 @@ td.searchTableName:hover {
} }
} }
.globalsearchImgItem.isIncomplete {
display: inline-block !important;
position: relative;
i.fa {
left: 10px;
top: 7px;
font-size: 12px;
}
}
.isIncomplete { .isIncomplete {
&.show { &.show {
img { img {
......
...@@ -77,6 +77,7 @@ define(['require', ...@@ -77,6 +77,7 @@ define(['require',
} else if (isPopOverEl.$tip) { } else if (isPopOverEl.$tip) {
$('.popover').not(isPopOverEl.$tip).popover('hide'); $('.popover').not(isPopOverEl.$tip).popover('hide');
} }
$(".tooltip").tooltip("hide");
} }
}); });
$('body').on('hidden.bs.popover', function(e) { $('body').on('hidden.bs.popover', function(e) {
...@@ -243,10 +244,17 @@ define(['require', ...@@ -243,10 +244,17 @@ define(['require',
}); });
// For adding tooltip globally // For adding tooltip globally
$("body").on('mouseenter', '.select2-selection__choice', function() {
$(this).attr("title", "");
});
if ($('body').tooltip) {
$('body').tooltip({ $('body').tooltip({
selector: '[title]', selector: '[title]:not(".select2-selection__choice")',
placement: 'bottom', placement: function() {
return this.$element.attr("data-placement") || "bottom";
},
container: 'body' container: 'body'
}); });
}
}) })
\ No newline at end of file
...@@ -683,8 +683,7 @@ define(['require', ...@@ -683,8 +683,7 @@ define(['require',
returnImgUrl = null; returnImgUrl = null;
$.ajax({ $.ajax({
"url": imagePath, "url": imagePath,
"method": "get", "method": "get"
"async": false,
}) })
.always(function(data, status, xhr) { .always(function(data, status, xhr) {
if (data.status == 404) { if (data.status == 404) {
...@@ -693,19 +692,17 @@ define(['require', ...@@ -693,19 +692,17 @@ define(['require',
}); });
} else if (data) { } else if (data) {
returnImgUrl = imagePath; returnImgUrl = imagePath;
that.$("img[data-imgGuid='" + obj.guid + "']").removeClass("searchTableLogoLoader").attr("src", imagePath);
} }
}); });
return returnImgUrl;
} }
var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }), var img = "",
img = "",
isIncompleteClass = "isIncomplete search-result-page"; isIncompleteClass = "isIncomplete search-result-page";
if (obj.isIncomplete === true) { if (obj.isIncomplete === true) {
isIncompleteClass += " show"; isIncompleteClass += " show";
} }
if (imgPath) { img = "<div class='" + isIncompleteClass + "'><img data-imgGuid='" + obj.guid + "' class='searchTableLogoLoader'><i class='fa fa-hourglass-half'></i></div>";
img = "<div class='" + isIncompleteClass + "'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>"; getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) });
}
return (img + nameHtml); return (img + nameHtml);
} }
}) })
......
...@@ -71,7 +71,7 @@ define(['require', ...@@ -71,7 +71,7 @@ define(['require',
}; };
events['click ' + this.ui.signOut] = function() { events['click ' + this.ui.signOut] = function() {
Utils.localStorage.setValue("atlas_ui","classic"); Utils.localStorage.setValue("atlas_ui", "classic");
var path = Utils.getBaseUrl(window.location.pathname); var path = Utils.getBaseUrl(window.location.pathname);
window.location = path + "/logout.html"; window.location = path + "/logout.html";
}; };
...@@ -253,9 +253,10 @@ define(['require', ...@@ -253,9 +253,10 @@ define(['require',
var options = {}, var options = {},
table = ''; table = '';
options.entityData = item; options.entityData = item;
var img = $('<img src="' + Utils.getEntityIconPath(options) + '">').on('error', function(error, s) { var imgEl = $('<img src="' + Utils.getEntityIconPath(options) + '">').on("error", function(error, s) {
this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src })); this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src }));
}); });
var img = $('<div class="globalsearchImgItem isIncomplete ' + (item.isIncomplete ? "show" : "") + '"><i class="fa fa-hourglass-half"></i><div>').prepend(imgEl);
var span = $("<span>" + (getHighlightedTerm(item.itemText)) + "</span>") var span = $("<span>" + (getHighlightedTerm(item.itemText)) + "</span>")
.prepend(img); .prepend(img);
li = $("<li class='with-icon'>") li = $("<li class='with-icon'>")
......
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg); transform: rotate(359deg);
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg); transform: rotate(359deg);
...@@ -113,19 +115,53 @@ ...@@ -113,19 +115,53 @@
left: -200px; left: -200px;
width: 30%; width: 30%;
} }
50% { 50% {
width: 30%; width: 30%;
} }
70% { 70% {
width: 70%; width: 70%;
} }
80% { 80% {
left: 50%; left: 50%;
} }
95% { 95% {
left: 120%; left: 120%;
} }
to { to {
left: 100%; left: 100%;
} }
} }
.searchTableLogoLoader {
width: 20px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: placeHolderLoader;
animation-name: placeHolderLoader;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 700px 10px;
border-radius: 8px;
}
@keyframes placeHolderLoader {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
\ No newline at end of file
...@@ -703,6 +703,17 @@ td.searchTableName:hover { ...@@ -703,6 +703,17 @@ td.searchTableName:hover {
} }
} }
.globalsearchImgItem.isIncomplete {
display: inline-block !important;
position: relative;
i.fa {
left: 10px;
top: 7px;
font-size: 12px;
}
}
.isIncomplete { .isIncomplete {
&.show { &.show {
img { img {
......
...@@ -262,10 +262,17 @@ define(['require', ...@@ -262,10 +262,17 @@ define(['require',
}); });
// For adding tooltip globally // For adding tooltip globally
$("body").on('mouseenter', '.select2-selection__choice', function() {
$(this).attr("title", "");
});
if ($('body').tooltip) {
$('body').tooltip({ $('body').tooltip({
selector: '[title]', selector: '[title]:not(".select2-selection__choice")',
placement: 'bottom', placement: function() {
return this.$element.attr("data-placement") || "bottom";
},
container: 'body' container: 'body'
}); });
}
}) })
\ No newline at end of file
...@@ -295,9 +295,12 @@ define(["require", ...@@ -295,9 +295,12 @@ define(["require",
var options = {}, var options = {},
table = ""; table = "";
options.entityData = item; options.entityData = item;
var img = $('<img src="' + Utils.getEntityIconPath(options) + '">').on("error", function(error, s) { var imgEl = $('<img src="' + Utils.getEntityIconPath(options) + '">').on("error", function(error, s) {
this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src })); this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src }));
}); });
var img = $('<div class="globalsearchImgItem isIncomplete ' + (item.isIncomplete ? "show" : "") + '"><i class="fa fa-hourglass-half"></i><div>').prepend(imgEl);
var span = $("<span>" + getHighlightedTerm(item.itemText) + "</span>").prepend(img); var span = $("<span>" + getHighlightedTerm(item.itemText) + "</span>").prepend(img);
li = $("<li class='with-icon'>").append(span); li = $("<li class='with-icon'>").append(span);
} else { } else {
......
...@@ -695,8 +695,7 @@ define(['require', ...@@ -695,8 +695,7 @@ define(['require',
returnImgUrl = null; returnImgUrl = null;
$.ajax({ $.ajax({
"url": imagePath, "url": imagePath,
"method": "get", "method": "get"
"async": false,
}) })
.always(function(data, status, xhr) { .always(function(data, status, xhr) {
if (data.status == 404) { if (data.status == 404) {
...@@ -705,19 +704,17 @@ define(['require', ...@@ -705,19 +704,17 @@ define(['require',
}); });
} else if (data) { } else if (data) {
returnImgUrl = imagePath; returnImgUrl = imagePath;
that.$("img[data-imgGuid='" + obj.guid + "']").removeClass("searchTableLogoLoader").attr("src", imagePath);
} }
}); });
return returnImgUrl;
} }
var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }), var img = "",
img = "",
isIncompleteClass = "isIncomplete search-result-page"; isIncompleteClass = "isIncomplete search-result-page";
if (obj.isIncomplete === true) { if (obj.isIncomplete === true) {
isIncompleteClass += " show"; isIncompleteClass += " show";
} }
if (imgPath) { img = "<div class='" + isIncompleteClass + "'><img data-imgGuid='" + obj.guid + "' class='searchTableLogoLoader'><i class='fa fa-hourglass-half'></i></div>";
img = "<div class='" + isIncompleteClass + "'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>"; getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) });
}
return (img + nameHtml); return (img + nameHtml);
} }
}) })
......
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