diff --git a/modules/system/assets/css/updates/install.css b/modules/system/assets/css/updates/install.css
index 7bcd70388..9ff5c3d71 100644
--- a/modules/system/assets/css/updates/install.css
+++ b/modules/system/assets/css/updates/install.css
@@ -7,6 +7,7 @@
margin: 0;
padding: 10px 0;
overflow: hidden;
+ /* clearfix */
}
.product-list li button {
position: absolute;
@@ -38,9 +39,6 @@
padding-bottom: 10px;
overflow: hidden;
}
-.plugin-list li:last-child {
- border-bottom: none;
-}
.plugin-list li .image {
float: left;
margin-right: 15px;
@@ -61,6 +59,9 @@
color: #C03F31;
font-weight: 400;
}
+.plugin-list li:last-child {
+ border-bottom: none;
+}
.theme-list li {
float: left;
padding: 0;
@@ -70,11 +71,6 @@
background: #fff;
position: relative;
border-radius: 3px;
-}
-.theme-list li:hover {
- border-color: transparent;
-}
-.theme-list li {
-webkit-transition: border .2s linear;
-moz-transition: border .2s linear;
transition: border .2s linear;
@@ -86,9 +82,6 @@
width: 210px;
height: 140px;
}
-.theme-list li:hover .image {
- opacity: 0;
-}
.theme-list li .details {
position: absolute;
bottom: 0;
@@ -97,9 +90,6 @@
padding: 10px;
overflow: hidden;
}
-.theme-list li:hover .details {
- opacity: 1;
-}
.theme-list li h4 {
padding: 15px 0 0;
margin: 0;
@@ -111,32 +101,34 @@
text-transform: uppercase;
font-size: 12px;
}
+.theme-list li:hover {
+ border-color: transparent;
+}
+.theme-list li:hover .image {
+ opacity: 0;
+}
+.theme-list li:hover .details {
+ opacity: 1;
+}
.suggested-products {
padding: 0;
}
.suggested-products .product {
padding: 0;
}
+.suggested-products .image {
+ float: left;
+ position: relative;
+}
.suggested-products .image img {
width: 40px;
height: 40px;
margin-top: 10px;
}
-.suggested-themes .image img {
- width: 60px;
- height: 40px;
-}
-.suggested-products .image {
- float: left;
- position: relative;
-}
.suggested-products .details {
margin-left: 50px;
padding: 10px 0;
}
-.suggested-themes .details {
- margin-left: 70px;
-}
.suggested-products .details h5 {
margin: 0 0 3px;
font-size: 14px;
@@ -175,6 +167,13 @@
.suggested-products a:hover .image img {
opacity: .5;
}
+.suggested-themes .image img {
+ width: 60px;
+ height: 40px;
+}
+.suggested-themes .details {
+ margin-left: 70px;
+}
/*!
* Typeahead
*/
@@ -185,6 +184,24 @@
text-align: left;
padding-bottom: 15px;
}
+.product-search > i.icon {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ font-size: 24px;
+ margin-top: -20px;
+ color: rgba(0, 0, 0, 0.35);
+}
+.product-search > i.icon.loading {
+ display: block;
+ width: 24px;
+ height: 24px;
+ background-image: url(../../../../backend/assets/images/loading-indicator-transparent.svg);
+ background-size: 24px 24px;
+ background-position: 50% 50%;
+ -webkit-animation: spin 1s linear infinite;
+ animation: spin 1s linear infinite;
+}
.twitter-typeahead {
width: 100%;
}
diff --git a/modules/system/assets/js/updates/install.js b/modules/system/assets/js/updates/install.js
index 1f4c0f462..2a37cdb81 100644
--- a/modules/system/assets/js/updates/install.js
+++ b/modules/system/assets/js/updates/install.js
@@ -53,7 +53,21 @@
var engine = new Bloodhound({
name: 'products',
method: 'POST',
- remote: window.location.pathname + '?search=' + searchType + '&query=%QUERY',
+ remote: {
+ url: window.location.pathname + '?search=' + searchType + '&query=%QUERY',
+ ajax: {
+ beforeSend: function() {
+ $('.icon', $form).hide()
+ $('.icon.loading', $form).show()
+ $el.data('searchReady', false)
+ },
+ complete: function() {
+ $('.icon', $form).show()
+ $('.icon.loading', $form).hide()
+ $el.data('searchReady', true)
+ }
+ }
+ },
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val)
},
@@ -92,6 +106,9 @@
$el = $(el),
$input = $el.find('.product-search-input.tt-input:first')
+ if (!$input.data('searchReady'))
+ return
+
$el.popup()
$input.typeahead('val', '')
diff --git a/modules/system/assets/less/updates/install.less b/modules/system/assets/less/updates/install.less
index 338e0d84e..631dc9b4a 100644
--- a/modules/system/assets/less/updates/install.less
+++ b/modules/system/assets/less/updates/install.less
@@ -205,6 +205,25 @@
margin: 0 auto 0 auto;
text-align: left;
padding-bottom: 15px;
+
+ > i.icon {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ font-size: 24px;
+ margin-top: -20px;
+ color: rgba(0,0,0,.35);
+ }
+
+ > i.icon.loading {
+ display: block;
+ width: 24px;
+ height: 24px;
+ background-image: url(../../../../backend/assets/images/loading-indicator-transparent.svg);
+ background-size: 24px 24px;
+ background-position: 50% 50%;
+ .animation(spin 1s linear infinite);
+ }
}
.twitter-typeahead {
width: 100%;
@@ -247,11 +266,9 @@
.tt-suggestion {
font-size: 14px;
line-height: 18px;
- + {
- .tt-suggestion {
- font-size: 14px;
- border-top: 1px solid #ccc;
- }
+ + .tt-suggestion {
+ font-size: 14px;
+ border-top: 1px solid #ccc;
}
}
.tt-suggestions {
diff --git a/modules/system/controllers/updates/_install_plugins.htm b/modules/system/controllers/updates/_install_plugins.htm
index 378baf0d3..32dcdbe72 100644
--- a/modules/system/controllers/updates/_install_plugins.htm
+++ b/modules/system/controllers/updates/_install_plugins.htm
@@ -14,6 +14,8 @@
placeholder="search plugins to install..."
data-search-type="plugins"
/>
+
+
diff --git a/modules/system/controllers/updates/_install_themes.htm b/modules/system/controllers/updates/_install_themes.htm
index 9b1f3d803..eb88c0bce 100644
--- a/modules/system/controllers/updates/_install_themes.htm
+++ b/modules/system/controllers/updates/_install_themes.htm
@@ -14,6 +14,8 @@
placeholder="search themes to install..."
data-search-type="themes"
/>
+
+