Skip to content

Commit

Permalink
[feat] Extension details page (lnbits#2544)
Browse files Browse the repository at this point in the history 
* feat: add empty dialog

* feat: add `details_link` field for extension

* feat: show info icon if `details_link` present

* feat: add extension details endpoint

* feat: first details page

* feat: carousel working

* feat: full screen

* fix: layout

* fix: repo site

* fix: release icon

* fix: repo link

* feat: terms and conditions partial

* chore: fix typing

* fix: info icon layout

* chore: add try-catch

* feat: layout improvements

* feat: add video link

* fix: show terms and conditions

* chore: code format

* feat: add `details_link`

* fix: github release details

* feat: add close button

* chore: code clean-up

* chore: revert some changes

* feat: i18n

* chore: `make bundle`

* chore: make bundle

* feat: terms and conditions is a link now
  • Loading branch information
@motorina0 @ram0verflow
motorina0 authored and ram0verflow committed Jul 3, 2024
1 parent a541bb6 commit c2c7531
Show file tree
Hide file tree
Showing 2 changed files with 208 additions and 0 deletions.
204 changes: 204 additions & 0 deletions lnbits/core/templates/core/extensions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,13 +91,28 @@
</div>
<div class="col-9 q-pl-md">
<q-badge
<<<<<<< HEAD
v-if="extension.isInstalled"
@click="showManageExtension(extension)"
class="float-right"
color="transparent"
style="cursor: pointer"
>
<span v-text="extension.installedRelease.version"></span>
=======
v-if="hasNewVersion(extension)"
@click="showExtensionDetails(extension.id, extension.latestRelease?.details_link)"
color="green"
class="float-right"
:class="extension.latestRelease?.details_link ? 'cursor-pointer': ''"
>
<q-icon
v-if="extension.latestRelease?.details_link"
name="info"
size="xs"
></q-icon>
<small v-text="$t('new_version')" class="q-ma-xs"></small>
>>>>>>> eacdd432 ([feat] Extension details page (#2544))
<q-tooltip
><span v-text="extension.installedRelease.version"></span
></q-tooltip>
Expand Down Expand Up @@ -225,6 +240,7 @@
</div>

<div class="col-2">
<<<<<<< HEAD
<div v-if="extension.details_link" class="float-right">
<q-btn
@click="showExtensionDetails(extension.id, extension.details_link)"
Expand All @@ -235,6 +251,31 @@
<span v-text="extension.shortDescription"></span>
</q-tooltip>
</q-btn>
=======
<div
v-if="(extension.isInstalled && extension.installedRelease) || extension.details_link"
class="float-right"
>
<q-badge
@click="showExtensionDetails(extension.id, extension.details_link)"
:class="extension.details_link? 'cursor-pointer' : ''"
>
<q-icon
v-if="extension.details_link"
name="info"
size="xs"
></q-icon>
<div v-if="extension.installedRelease" class="q-ma-xs">
<span
v-text="extension.installedRelease.version"
class="q-mt-lg"
></span>
<q-tooltip>
<span v-text="$t('extension_installed_version')"></span>
</q-tooltip>
</div>
</q-badge>
>>>>>>> eacdd432 ([feat] Extension details page (#2544))
</div>
</div>
</q-card-actions>
Expand Down Expand Up @@ -929,10 +970,173 @@ <h5 class="q-my-sm" v-text="selectedExtensionDetails.name"></h5>
</div>
</div>
</div>
<<<<<<< HEAD
</div>
</q-card-section>
</q-card>
</q-dialog>
=======
</q-card-section>
</q-card>
</q-dialog>

<q-dialog v-model="showExtensionDetailsDialog">
<q-card
v-if="selectedExtensionDetails"
class="q-pa-lg"
style="width: 800px; max-width: 80vw"
>
<q-card-section>
<div class="row">
<div class="col-2 gt-md">
<q-img
:src="selectedExtensionDetails.icon"
style="width: 100px"
type="image"
></q-img>
</div>
<div class="col-7 q-pl-md">
<h3 class="q-my-sm" v-text="selectedExtensionDetails.name"></h3>
<h6
class="q-my-sm"
v-text="selectedExtensionDetails.short_description"
></h6>
</div>
<div class="col-3">
<q-btn
v-close-popup
flat
color="grey"
class="float-right q-ml-lg"
v-text="$t('close')"
></q-btn>
</div>
</div>
<div v-if="selectedExtensionDetails.images?.length" class="row q-my-lg">
<div class="col q-pr-md">
<q-carousel
swipeable
animated
v-model="slide"
:fullscreen.sync="fullscreen"
thumbnails
infinite
:autoplay="autoplay"
arrows
transition-prev="slide-right"
transition-next="slide-left"
@mouseenter="autoplay = false"
@mouseleave="autoplay = true"
height="300px"
>
<template v-slot:control>
<q-carousel-control position="bottom-right" :offset="[18, 18]">
<q-btn
push
round
dense
color="white"
text-color="primary"
:icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
@click="fullscreen = !fullscreen"
></q-btn>
</q-carousel-control>
</template>
<q-carousel-slide
v-for="(image, i) of selectedExtensionDetails.images"
:img-src="image.uri"
:key="i"
:name="i"
>
<q-video
v-if="image.link"
class="absolute-full"
:src="image.link"
/>
</q-carousel-slide>
</q-carousel>
</div>
</div>

<div class="row">
<div class="col-8 q-pr-sm">
<div v-html="selectedExtensionDetails.description_md"></div>
</div>
<div class="col-4 q-pl-sm" style="border-left: 1px solid grey">
<div class="">
<q-btn
size="xs"
color="primary"
label="Terms and conditions"
type="a"
:href="selectedExtensionDetails.terms_and_conditions_md"
target="_blank"
rel="noopener noreferrer"
></q-btn>
</div>
<div class="q-mt-md">
<b>
<span v-text="$t('contributors')"></span>
</b>
<small>
<div
v-for="contributor of selectedExtensionDetails.contributors"
>
<a
:href="contributor.uri"
target="_blank"
rel="noopener noreferrer"
style="color: var(--q-primary); text-decoration: none"
>
<span
v-text="(contributor.name || contributor) + ' - ' + (contributor.role || 'dev')"
></span>
</a>
</div>
</small>
</div>
<div class="q-pt-lg">
<div>
<b>
<span v-text="$t('license')"></span>
</b>
<q-badge
color="primary"
v-text="selectedExtensionDetails.license"
></q-badge>
</div>
<br />

<div>
<q-rating
v-model="maxStars"
disable
size="1.5em"
:max="5"
color="primary"
><q-tooltip>
<span
v-text="$t('extension_rating_soon')"
></span> </q-tooltip
></q-rating>
<q-btn
size="xs"
color="primary"
:label="$t('repository')"
type="a"
:href="selectedExtensionDetails.repo"
target="_blank"
rel="noopener noreferrer"
></q-btn>
</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
</div>
>>>>>>> eacdd432 ([feat] Extension details page (#2544))
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
new Vue({
Expand Down
Loading

0 comments on commit c2c7531

Please sign in to comment.