Skip to content

Commit

Permalink
frontend: version-chooser: Make it mobile friendly
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafaellehmkuhl
rafaellehmkuhl committed Apr 29, 2022
1 parent b2d43dd commit 2c5e1ef
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 108 deletions.
106 changes: 57 additions & 49 deletions core/frontend/src/components/version-chooser/VersionCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,42 @@
<template>
<v-list-item>
<v-list-item-avatar>
<v-icon
:class="current ? 'green' : 'grey'"
>
{{ remote? 'mdi-earth' : '' }}
{{ current? 'mdi-checkbox-blank-circle' : 'mdi-checkbox-blank-circle-outline' }}
</v-icon>
</v-list-item-avatar>
<v-sheet
class="d-flex flex-column align-center my-4 pa-4 flex-sm-row py-sm-0"
:elevation="$vuetify.breakpoint.xs ? 1 : 0"
>
<div class="d-flex">
<v-list-item-avatar>
<v-icon :class="current ? 'green' : 'grey'">
{{ remote? 'mdi-earth' : '' }}
{{ current? 'mdi-checkbox-blank-circle' : 'mdi-checkbox-blank-circle-outline' }}
</v-icon>
</v-list-item-avatar>

<v-list-item-content>
<v-list-item-title v-text="image.tag" />
<v-list-item-subtitle
v-if="settings.is_pirate_mode"
v-text="`${image.sha? shortSha(image.sha) : 'N/A'} - ${asTimeAgo(image.last_modified)}`"
/>
<v-list-item-subtitle
v-else
v-text="`${asTimeAgo(image.last_modified)}`"
/>
<v-list-item-subtitle v-text="image.repository" />
</v-list-item-content>
<v-list-item-action>
<div>
<p
class="text-body-1 ma-0"
v-text="image.tag"
/>
<p
v-if="settings.is_pirate_mode"
class="text-caption text--secondary ma-0"
v-text="`${image.sha? shortSha(image.sha) : 'N/A'} - ${asTimeAgo(image.last_modified)}`"
/>
<p
v-else
class="text-caption text--secondary ma-0"
v-text="`${asTimeAgo(image.last_modified)}`"
/>
<p
class="text-caption text--secondary ma-0"
v-text="image.repository"
/>
</div>
</div>
<v-spacer />
<div class="d-flex flex-wrap justify-center align-center my-2">
<v-alert
v-if="upToDate && !settings.is_pirate_mode"
class="mx-2 my-1"
dense
text
type="success"
Expand All @@ -32,69 +45,64 @@
</v-alert>
<v-alert
v-if="settings.is_pirate_mode && current"
class="mx-2 my-1"
dense
text
type="success"
>
Running
</v-alert>
</v-list-item-action>
<v-list-item-action v-if="loading || deleting">
<spinning-logo
style="max-width:10%"
size="10%"
:subtitle="loading ? 'Loading image...' : 'Deleting image...'"
/>
</v-list-item-action>
<v-list-item-action v-if="newStableAvailable">
<div v-if="loading || deleting">
<spinning-logo
style="max-width:10%"
size="10%"
:subtitle="loading ? 'Loading image...' : 'Deleting image...'"
/>
</div>
<v-btn
v-if="newStableAvailable"
color="primary"
class="mr-2 mb-4"
class="mx-2 my-1"
@click="$emit('pull-and-apply',`${image.repository}:${newStableAvailable}`)"
v-text="`Upgrade to ${newStableAvailable}`"
/>
</v-list-item-action>
<v-list-item-action v-if="current && updateAvailable">
<v-btn
v-if="current && updateAvailable"
color="primary"
class="mr-2 mb-4"
class="mx-2 my-1"
@click="$emit('pull-and-apply',`${image.repository}:${image.tag}`)"
v-text="`Update to latest ${image.tag}`"
/>
</v-list-item-action>
<v-list-item-action v-if="newBetaAvailable">
<v-btn
v-if="newBetaAvailable"
color="primary"
class="mr-2 mb-4"
class="mx-2 my-1"
@click="$emit('pull-and-apply',`${image.repository}:${newBetaAvailable}`)"
v-text="`Upgrade to ${newBetaAvailable}`"
/>
</v-list-item-action>
<v-list-item-action v-if="!current && !remote && imageCanBeDeleted()">
<v-btn
v-if="!current && !remote && imageCanBeDeleted()"
color="error"
class="mr-2 mb-4"
class="mx-2 my-1"
@click="$emit('delete', `${image.repository}:${image.tag}`)"
v-text="'Delete'"
/>
</v-list-item-action>
<v-list-item-action v-if="!current && !remote">
<v-btn
v-if="!current && !remote"
color="primary"
class="mr-2 mb-4"
class="mx-2 my-1"
@click="$emit('apply',`${image.repository}:${image.tag}`)"
v-text="'Apply'"
/>
</v-list-item-action>
<v-list-item-action v-if="showPullButton">
<v-btn
v-if="showPullButton"
color="primary"
class="mr-2 mb-4"
class="mx-2 my-1"
@click="$emit('pull-and-apply', `${image.repository}:${image.tag}`)"
v-text="'Download and Apply'"
/>
</v-list-item-action>
</v-list-item>
</div>
</v-sheet>
</template>

<script lang="ts">
Expand Down
103 changes: 44 additions & 59 deletions core/frontend/src/components/version-chooser/VersionChooser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,20 @@
class="mx-auto my-12 pa-4"
>
<h2>Current Version</h2>
<v-list
subheader
two-line
>
<version-card
v-if="current_version"
:image="current_version"
:current="true"
:last-modified="current_version.last_modified"
:loading="loading_images"
:up-to-date="!loading_images &&
!newStableAvailable() && !newBetaAvailable() && !updateIsAvailable(current_version)"
:new-stable-available="newStableAvailable()"
:new-beta-available="runningBeta() ? newBetaAvailable() : ''"
:update-available="updateIsAvailable(current_version)"
@apply="setVersion"
@pull-and-apply="pullAndSetVersion"
/>
</v-list>
<version-card
v-if="current_version"
:image="current_version"
:current="true"
:last-modified="current_version.last_modified"
:loading="loading_images"
:up-to-date="!loading_images &&
!newStableAvailable() && !newBetaAvailable() && !updateIsAvailable(current_version)"
:new-stable-available="newStableAvailable()"
:new-beta-available="runningBeta() ? newBetaAvailable() : ''"
:update-available="updateIsAvailable(current_version)"
@apply="setVersion"
@pull-and-apply="pullAndSetVersion"
/>
<v-alert
v-if="available_versions.error"

Expand All @@ -45,27 +40,22 @@
class="mx-auto my-12 pa-4"
>
<h2>Local Versions</h2>
<v-list
subheader
two-line
>
<version-card
v-for="image in available_versions['local']"
:key="image.sha"
:image="image"
:current="image.tag === current_version.tag"
:update-available="updateIsAvailable(image)"
:deleting="deleting.endsWith(image.tag)"
@delete="deleteVersion"
@apply="setVersion"
@pull-and-apply="pullAndSetVersion"
/>
<spinning-logo
v-if="loading_images"
size="15%"
subtitle="Loading local images..."
/>
</v-list>
<version-card
v-for="image in available_versions['local']"
:key="image.sha"
:image="image"
:current="image.tag === current_version.tag"
:update-available="updateIsAvailable(image)"
:deleting="deleting.endsWith(image.tag)"
@delete="deleteVersion"
@apply="setVersion"
@pull-and-apply="pullAndSetVersion"
/>
<spinning-logo
v-if="loading_images"
size="15%"
subtitle="Loading local images..."
/>
</v-card>
<v-card
v-if="settings.is_pirate_mode"
Expand All @@ -89,25 +79,20 @@
>
{{ available_versions.error }}
</v-alert>
<v-list
subheader
two-line
>
<spinning-logo
v-if="loading_images"
size="15%"
subtitle="Loading remote images..."
/>
<version-card
v-for="image in available_versions['remote']"
:key="image.sha"
:image="image"
:remote="true"
:update-available="updateIsAvailable(image)"
:show-pull-button="!imageIsAvailableLocally(image.sha)"
@pull-and-apply="pullAndSetVersion"
/>
</v-list>
<spinning-logo
v-if="loading_images"
size="15%"
subtitle="Loading remote images..."
/>
<version-card
v-for="image in available_versions['remote']"
:key="image.sha"
:image="image"
:remote="true"
:update-available="updateIsAvailable(image)"
:show-pull-button="!imageIsAvailableLocally(image.sha)"
@pull-and-apply="pullAndSetVersion"
/>
</v-card>
</v-col>
<v-dialog
Expand Down

0 comments on commit 2c5e1ef

Please sign in to comment.