Skip to content

Commit

Permalink
Improved ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaxwilko
jaxwilko committed Jan 20, 2025
1 parent 93e0e84 commit b9ad3f8
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 112 deletions.
130 changes: 106 additions & 24 deletions modules/system/controllers/updates/assets/src/components/PluginUpdates.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,7 @@
<template>
<div>
<div class="row">
<div class="col-12 col-md-4">
<div class="btn-group" role="group" aria-label="...">
<button type="button"
:class="`btn btn-${active === 'popular' ? 'primary' : 'default'}`"
@click="activePlugins = 'popular'; filter = null;"
>Popular</button>
<button type="button"
:class="`btn btn-${active === 'featured' ? 'primary' : 'default'}`"
@click="activePlugins = 'featured'; filter = null;"
>Featured</button>
<button type="button"
:class="`btn btn-${active === 'all' ? 'primary' : 'default'}`"
@click="activePlugins = 'all'; filter = null;"
>All</button>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row mx-5">
<div class="col-12">
<div class="product-search">
<input
ref="search"
Expand All @@ -26,13 +10,25 @@
class="product-search-input search-input-lg typeahead"
:placeholder="searchString"
data-search-type="plugins"
@keydown="filter = this.$refs.search.value; activePlugins = 'all';"
v-model="filter"
@keydown="activePlugins = 'all'"
/>
<i class="icon icon-search"></i>
<i class="icon loading" style="display: none"></i>
</div>
</div>
<div class="col-12 col-md-2">
<div class="col-12 btn-row">
<div class="btn-group" role="group" aria-label="...">
<button type="button"
:class="`btn btn-${active === 'popular' ? 'primary' : 'default'}`"
@click="activePlugins = 'popular'; filter = null;"
>Popular</button>
<button type="button"
:class="`btn btn-${active === 'featured' ? 'primary' : 'default'}`"
@click="activePlugins = 'featured'; filter = null;"
>Featured</button>
</div>

<button
type="button"
data-control="popup"
Expand Down Expand Up @@ -81,15 +77,101 @@ export default {
this.$request('onGetMarketplacePlugins', {
success: (response) => {
this.plugins = response.result;
if (localStorage.winterInstalling) {
const installing = JSON.parse(localStorage.winterInstalling);
if (installing.length > 0) {
this.displayInstall(installing[installing.length - 1]);
}
}
}
});
},
methods: {
displayInstall(installKey) {
$.popup({
size: 'large installer-popup',
content: `
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Installing...</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
</div>
`
});
const popup = document.querySelector('.installer-popup .modal-body');
const prepareMessage = (str) => {
return `<div class="install-message">${
str.split("\n").filter((line) => line.indexOf('FINISHED:') === 0 ? false : !!line).map((line) => {
['INFO', 'ERROR'].forEach((status) => {
if (line.indexOf(status) === 0) {
line = `<span class="message-${status.toLowerCase()}">${status}</span> ${line.substring(status.length + 1)}`;
}
});
let search;
if (search = line.match(/^[\d].*:\ /)) {
line = `<span class="message-version">${search[0].replace(':', '').trim()}</span>:${line.substring(search[0].length + 1)}`;
}
if (search = line.match(/\.*?[\d][\w]*DONE$/)) {
line = `${line.substring(0, line.length - search[0].length)} <span class="message-done">${search[0].match(/\.*?[\d][\w]*DONE$/)[0].replace(/\.*/, '').replace('DONE', '')}</span>`;
}
return `<pre>${line}</pre>`;
}).join("\n")
}</div>`;
};
const checkStatus = () => {
this.$request('onInstallProductStatus', {
data: {
install_key: installKey
},
success: (statusResponse) => {
popup.innerHTML = prepareMessage(statusResponse.data);
if (!statusResponse.done) {
return setTimeout(checkStatus, 500);
}
const store = JSON.parse(localStorage.winterInstalling);
store.splice(store.indexOf(installKey), 1);
localStorage.winterInstalling = JSON.stringify(store);
}
})
};
checkStatus();
}
}
};
</script>
<style>
.typeahead {
height: 36px;
font-size: 18px;
.mt-lg-3 {
margin-top: 15px;
}
@media (min-width: 992px) {
.text-md-right {
text-align: right;
}
.mt-lg-3 {
margin-top: 0;
}
}
.btn-row {
display: flex;
justify-content: center;
gap: 15px;
margin: auto auto 15px auto;
}
.mx-5 {
margin: auto 5rem;
}
.products {
display: flex;
Expand Down
142 changes: 54 additions & 88 deletions modules/system/controllers/updates/assets/src/components/Product.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
<template>
<div class="product-card p-2 mb-1">
<div class="product-body">
<div class="product-row relative">
<div class="product-row">
<div class="product-image">
<img :src="product.icon" :alt="product.name">
</div>
<div class="product-description">
<div>
<p class="product-name">{{product.name}}</p>
<p>{{product.description}}</p>
</div>
</div>
<div class="absolute">
<button v-if="!product.installed && !installing"
class="btn btn-info"
@click="install()"
>Install</button>
<div v-if="installing" class="installing"></div>
<p v-if="product.installed" class="text-muted">This {{type}} is installed.</p>
<div>
<p class="product-name">{{product.name}}</p>
<p>{{product.description}}</p>
</div>
</div>

<div class="install-container">
<button v-if="!product.installed && !installing"
class="btn btn-info"
@click="install()"
>Install</button>
<div v-if="installing" class="installing"></div>
<p v-if="product.installed" class="text-muted">This {{type}} is installed.</p>
</div>
</div>
<div class="product-footer">
<div class="product-footer-item">
Expand Down Expand Up @@ -60,58 +59,14 @@ export default {
package: this.product.package
},
success: (response) => {
$.popup({
size: 'installer-popup',
content: `
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Installing ${this.product.name}</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
</div>
`
});
const popup = document.querySelector('.size-installer-popup .modal-body');
const prepareMessage = (str) => {
return `<div class="install-message">${
str.split("\n").filter((line) => line.indexOf('FINISHED:') === 0 ? false : !!line).map((line) => {
['INFO', 'ERROR'].forEach((status) => {
if (line.indexOf(status) === 0) {
line = `
<div class="message-line">
<span class="message-${status.toLowerCase()}">${status}</span> <pre>${line.substring(status.length + 1)}</pre>
</div>
`;
}
});
return line;
}).join("\n")
}</div>`;
};
const checkStatus = () => {
this.$request('onInstallProductStatus', {
data: {
install_key: response.install_key
},
success: (statusResponse) => {
popup.innerHTML = prepareMessage(statusResponse.data);
this.$parent.displayInstall(response.install_key);
if (!statusResponse.done) {
return setTimeout(checkStatus, 500);
}
this.installing = false;
}
})
};
checkStatus();
let store = [];
if (localStorage.winterInstalling) {
store = JSON.parse(localStorage.winterInstalling);
}
store.push(response.install_key);
localStorage.winterInstalling = JSON.stringify(store);
}
});
}
Expand All @@ -122,7 +77,7 @@ export default {
.product-card {
flex: 1 1 500px;
box-sizing: border-box;
margin: 1rem .25em;
margin: 1.5em .5em;
}
@media screen and (min-width: 40em) {
Expand All @@ -142,7 +97,7 @@ export default {
text-wrap: wrap;
}
.product-body {
border: 2px solid #cdcdcd;
border: 2px solid #eaeaea;
border-bottom: 0;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
Expand All @@ -151,23 +106,11 @@ export default {
align-items: stretch;
min-height: 82%;
text-wrap: wrap;
}
.product-description {
margin-left: 10px;
}
.product-body .relative {
position: relative;
display: block;
text-wrap: wrap;
}
.product-body .absolute {
position: absolute;
right: 5px;
top: 5px;
}
.product-footer {
background: #ececec;
border: 2px solid #cdcdcd;
background: #f9f9f9;
border: 2px solid #eaeaea;
border-top: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
Expand All @@ -176,12 +119,6 @@ export default {
justify-content: space-between;
gap: 15px;
}
.product-image {
width: 35%;
border-radius: 6px;
margin: 10px;
overflow: hidden;
}
.product-image img {
width: -webkit-fill-available;
}
Expand All @@ -190,7 +127,17 @@ export default {
}
.product-row {
display: flex;
justify-content: left;
align-self: stretch;
gap: 25px;
flex-wrap: nowrap;
}
.product-image {
width: 20%;
}
.product-row .product-image img {
min-width: 100%;
border-radius: 6px;
}
.product-footer-item {
display: flex;
Expand All @@ -199,22 +146,35 @@ export default {
color: white;
padding: 6px;
border-radius: 6px;
cursor: pointer;
}
.product-footer .stars .product-badge {
background: #f0ad4e;
opacity: 0.7;
}
.product-footer .downloads .product-badge {
background: #183638;
opacity: 0.7;
}
.product-footer .github .product-badge {
background: #010409;
opacity: 0.7;
}
.product-footer .packagist .product-badge {
background: #f28d1a;
opacity: 0.7;
}
.product-footer .product-badge:hover {
opacity: 1;
}
.product-footer .stars, .product-footer .github {
margin-right: 7px;
}
.install-container {
position: absolute;
bottom: 15px;
right: 15px;
}
.installing:after {
content: ' ';
display: block;
Expand All @@ -228,7 +188,7 @@ export default {
margin: 0;
}
.install-message span, .install-message pre {
display: inline;
margin: auto;
text-wrap: wrap;
}
.install-message .message-info {
Expand All @@ -248,4 +208,10 @@ export default {
.message-line {
margin-bottom: 5px;
}
.message-done {
color: #ead707;
}
.message-version {
color: #04a3a8;
}
</style>

0 comments on commit b9ad3f8

Please sign in to comment.