Skip to content

A
atlas
Commit 57b52a29 by kevalbhatt Committed by Sarath Subramanian
Options

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

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent c3da6d5f
Showing with 141 additions and 30 deletions
dashboardv2/public/css/scss/loader.scss
......@@ -26,6 +26,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
......@@ -37,6 +38,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
......@@ -116,19 +118,53 @@
left: -200px;
width: 30%;
}
50% {
width: 30%;
}
70% {
width: 70%;
}
80% {
left: 50%;
}
95% {
left: 120%;
}
to {
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
dashboardv2/public/css/scss/theme.scss
......@@ -462,7 +462,7 @@ hr[size="10"] {
overflow-x: hidden;
.ui-autocomplete-category {
padding: 10px;
padding: 5px 15px;
color: #acacac;
text-transform: capitalize;
}
......@@ -477,7 +477,7 @@ hr[size="10"] {
}
.ui-menu-item {
padding: 5px 2px;
padding: 2px 2px;
color: $color_ironside_gray_approx;
&.with-icon {
......@@ -505,7 +505,7 @@ hr[size="10"] {
a,
span {
padding: 10px;
padding: 6px 10px;
display: block;
color: inherit !important;
}
......@@ -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 {
&.show {
img {
......
dashboardv2/public/js/utils/Helper.js
......@@ -77,6 +77,7 @@ define(['require',
} else if (isPopOverEl.$tip) {
$('.popover').not(isPopOverEl.$tip).popover('hide');
}
$(".tooltip").tooltip("hide");
}
});
$('body').on('hidden.bs.popover', function(e) {
......@@ -243,10 +244,17 @@ define(['require',
});
// For adding tooltip globally
$('body').tooltip({
selector: '[title]',
placement: 'bottom',
container: 'body'
$("body").on('mouseenter', '.select2-selection__choice', function() {
$(this).attr("title", "");
});
if ($('body').tooltip) {
$('body').tooltip({
selector: '[title]:not(".select2-selection__choice")',
placement: function() {
return this.$element.attr("data-placement") || "bottom";
},
container: 'body'
});
}
})
\ No newline at end of file
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -683,8 +683,7 @@ define(['require',
returnImgUrl = null;
$.ajax({
"url": imagePath,
"method": "get",
"async": false,
"method": "get"
})
.always(function(data, status, xhr) {
if (data.status == 404) {
......@@ -693,19 +692,17 @@ define(['require',
});
} else if (data) {
returnImgUrl = imagePath;
that.$("img[data-imgGuid='" + obj.guid + "']").removeClass("searchTableLogoLoader").attr("src", imagePath);
}
});
return returnImgUrl;
}
var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }),
img = "",
var img = "",
isIncompleteClass = "isIncomplete search-result-page";
if (obj.isIncomplete === true) {
isIncompleteClass += " show";
}
if (imgPath) {
img = "<div class='" + isIncompleteClass + "'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>";
}
img = "<div class='" + isIncompleteClass + "'><img data-imgGuid='" + obj.guid + "' class='searchTableLogoLoader'><i class='fa fa-hourglass-half'></i></div>";
getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) });
return (img + nameHtml);
}
})
......
dashboardv2/public/js/views/site/Header.js
......@@ -71,7 +71,7 @@ define(['require',
};
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);
window.location = path + "/logout.html";
};
......@@ -253,9 +253,10 @@ define(['require',
var options = {},
table = '';
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 }));
});
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);
li = $("<li class='with-icon'>")
......
dashboardv3/public/css/scss/loader.scss
......@@ -26,6 +26,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
......@@ -37,6 +38,7 @@
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
100% {
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
......@@ -113,19 +115,53 @@
left: -200px;
width: 30%;
}
50% {
width: 30%;
}
70% {
width: 70%;
}
80% {
left: 50%;
}
95% {
left: 120%;
}
to {
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
dashboardv3/public/css/scss/theme.scss
......@@ -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 {
&.show {
img {
......
dashboardv3/public/js/utils/Helper.js
......@@ -262,10 +262,17 @@ define(['require',
});
// For adding tooltip globally
$('body').tooltip({
selector: '[title]',
placement: 'bottom',
container: 'body'
$("body").on('mouseenter', '.select2-selection__choice', function() {
$(this).attr("title", "");
});
if ($('body').tooltip) {
$('body').tooltip({
selector: '[title]:not(".select2-selection__choice")',
placement: function() {
return this.$element.attr("data-placement") || "bottom";
},
container: 'body'
});
}
})
\ No newline at end of file
dashboardv3/public/js/views/search/GlobalSearchLayoutView.js
......@@ -295,9 +295,12 @@ define(["require",
var options = {},
table = "";
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 }));
});
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);
li = $("<li class='with-icon'>").append(span);
} else {
......
dashboardv3/public/js/views/search/SearchResultLayoutView.js
......@@ -695,8 +695,7 @@ define(['require',
returnImgUrl = null;
$.ajax({
"url": imagePath,
"method": "get",
"async": false,
"method": "get"
})
.always(function(data, status, xhr) {
if (data.status == 404) {
......@@ -705,19 +704,17 @@ define(['require',
});
} else if (data) {
returnImgUrl = imagePath;
that.$("img[data-imgGuid='" + obj.guid + "']").removeClass("searchTableLogoLoader").attr("src", imagePath);
}
});
return returnImgUrl;
}
var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }),
img = "",
var img = "",
isIncompleteClass = "isIncomplete search-result-page";
if (obj.isIncomplete === true) {
isIncompleteClass += " show";
}
if (imgPath) {
img = "<div class='" + isIncompleteClass + "'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>";
}
img = "<div class='" + isIncompleteClass + "'><img data-imgGuid='" + obj.guid + "' class='searchTableLogoLoader'><i class='fa fa-hourglass-half'></i></div>";
getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) });
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