diff --git a/dashboard/src/components/AppInstallDialog.vue b/dashboard/src/components/AppInstallDialog.vue index 574355ed0..a7bd8ae88 100644 --- a/dashboard/src/components/AppInstallDialog.vue +++ b/dashboard/src/components/AppInstallDialog.vue @@ -147,6 +147,24 @@ onMounted(async () => { domain.value = (domains.value.find(d => d.domain === result.adminDomain) || domains.value[0]).domain; }); +const screenshotsContainer = useTemplateRef('screenshotsContainer'); +let currentScreenshotPos = 0; +function onScreenshotPrev() { + if (currentScreenshotPos <= 0) currentScreenshotPos = manifest.value.mediaLinks.length-1; + else --currentScreenshotPos; + + const elem = screenshotsContainer.value.children.item(currentScreenshotPos); + elem.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' }); +} + +function onScreenshotNext() { + if (currentScreenshotPos >= manifest.value.mediaLinks.length-1) currentScreenshotPos = 0; + else ++currentScreenshotPos; + + const elem = screenshotsContainer.value.children.item(currentScreenshotPos); + elem.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' }); +} + defineExpose({ open(a, appCountExceeded) { step.value = STEP.DETAILS; @@ -174,6 +192,8 @@ defineExpose({ port.domain = domains.value[0].domain; } + currentScreenshotPos = 0; + dialog.value.open(); } }); @@ -195,8 +215,12 @@ defineExpose({
-
- +
+
+ +
+
+
@@ -288,13 +312,17 @@ defineExpose({ margin: 0 4px; } +.screenshots-container { + position: relative; + overflow: hidden; +} + .screenshots { margin: 10px 4px; display: flex; gap: 20px; width: 100%; padding: 10px 0; - scroll-snap-type: x mandatory; overflow: auto; } @@ -308,4 +336,38 @@ defineExpose({ scroll-snap-stop: always; } +.screenshots-action { + color: white; + position: absolute; + top: calc(50% - 40px); + cursor: pointer; + margin: 20px; + width: 40px; + height: 40px; + border-radius: 40px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all 200ms; + background-color: rgba(128,128,128,0.5); +} + +.screenshots-container:hover .screenshots-action { + opacity: 1; +} + +.screenshots-action:hover { + background-color: rgba(128,128,128,0.8); +} + +.screenshots-prev { + left: 0; +} + +.screenshots-next { + right: 0; +} +