Skip to content

Commit

Permalink
Channel switching, mobile dialog, bugfixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Slipn3r
Slipn3r committed Jul 20, 2023
1 parent 2b74ee6 commit 08dc25e
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 119 deletions.
5 changes: 3 additions & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"lint": "eslint --ext .js,.vue ./",
"dev/web": "quasar dev",
"dev/electron": "quasar dev -m electron",
"build/web": "quasar build",
"build": "PRODUCTION=TRUE quasar build -m spa",
"build/dev": "DEV=TRUE quasar build -m spa",
"build/electron": "quasar build -m electron",
"compile-protofiles": "npx pbjs -t static-module -w es6 --no-comments --lint \"eslint-disable block-scoped-var, id-length, no-control-regex, no-magic-numbers, no-prototype-builtins, no-redeclare, no-shadow, no-var, sort-vars, camelcase, default-case-last, no-mixed-operators\" -o src/flipper/protobuf/proto-compiled.js ./flipperzero-protobuf/*.proto && eslint --fix src/flipper-js/protobuf/protobufCompiled.js"
},
Expand Down Expand Up @@ -60,4 +61,4 @@
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}
}
}
6 changes: 6 additions & 0 deletions frontend/quasar.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ module.exports = configure(function (ctx) {
build: {
vueRouterMode: 'history', // available values: 'hash', 'history'

env: {
ARCHIVARIUS_API_ENDPOINT: process.env.PRODUCTION
? 'https://catalog.flipperzero.one/api/v0'
: 'https://catalog.flipp.dev/api/v0',
PRODUCTION: process.env.PRODUCTION
},
// transpile: false,
// publicPath: '/',

Expand Down
203 changes: 108 additions & 95 deletions frontend/src/components/AppList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,124 @@
<template>
<div>
<div
class="row q-pr-md"
:class="`${$q.screen.width > 670 ? 'no-wrap' : 'justify-center'} ${action.type ? 'disabled' : ''}`"
>
<q-list class="categories row" :class="$q.screen.width > 670 ? 'col-8' : 'justify-center'">
<div
:style="`opacity: ${currentCategory && currentCategory.name !== 'All apps' ? '0.5' : '1'}`"
style="background-color: #ebebeb; border-radius: 20px; padding: 4px 13px; cursor: pointer;"
class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
@click="currentCategory = null; $router.push('/apps')"
>
<span style="white-space: nowrap;">All apps</span>
</div>
<div
v-for="category in categories"
:key="category.name"
:style="`background-color: #${category.color}; opacity: ${currentCategory && currentCategory.name !== category.name ? '0.5' : '1'}`"
style="border-radius: 20px; padding: 4px 13px; cursor: pointer;"
class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
@click="currentCategory = category;"
>
<q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
<span style="white-space: nowrap;">{{ category.name }}</span>
</div>
</q-list>
<q-space v-if="$q.screen.width > 670"/>
<div>
<div class="row no-wrap justify-end text-grey-7">
<q-select
v-model="sortModel"
:options="sortOptions"
dense
standout="bg-primary text-white no-shadow"
rounded
style="min-width: fit-content; border-radius: 20px;"
/>
<template v-if="apps.length">
<div
class="row q-pr-md"
:class="`${$q.screen.width > 670 ? 'no-wrap' : 'justify-center'} ${action.type ? 'disabled' : ''}`"
>
<q-list class="categories row" :class="$q.screen.width > 670 ? 'col-8' : 'justify-center'">
<div
:style="`opacity: ${currentCategory && currentCategory.name !== 'All apps' ? '0.5' : '1'}`"
style="background-color: #ebebeb; border-radius: 20px; padding: 4px 13px; cursor: pointer;"
class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
@click="currentCategory = null; $router.push('/apps')"
>
<span style="white-space: nowrap;">All apps</span>
</div>
<div
v-for="category in categories"
:key="category.name"
:style="`background-color: #${category.color}; opacity: ${currentCategory && currentCategory.name !== category.name ? '0.5' : '1'}`"
style="border-radius: 20px; padding: 4px 13px; cursor: pointer;"
class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
@click="currentCategory = category;"
>
<q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
<span style="white-space: nowrap;">{{ category.name }}</span>
</div>
</q-list>
<q-space v-if="$q.screen.width > 670"/>
<div>
<div class="row no-wrap justify-end text-grey-7">
<q-select
v-model="sortModel"
:options="sortOptions"
dense
standout="bg-primary text-white no-shadow"
rounded
style="min-width: fit-content; border-radius: 20px;"
/>
</div>
</div>
</div>
</div>

<q-list class="apps full-width q-mt-sm">
<div
v-for="app in filteredSortedApps"
:key="app.name"
class="flex justify-center q-pa-none card-container"
style="width: fit-content"
:class="action.type && action.id !== app.id ? 'disabled' : ''"
>
<q-list class="apps full-width q-mt-sm">
<div
style="width: calc(256px + 4px + 8px)"
class="app-card"
@click="appClicked(app)"
v-for="app in filteredSortedApps"
:key="app.name"
class="flex justify-center q-pa-none card-container"
style="width: fit-content"
:class="action.type && action.id !== app.id ? 'disabled' : ''"
>
<div class="screenshot q-mb-sm">
<img :src="app.currentVersion.screenshots[0]" style="width: 256px" />
</div>
<div
style="width: calc(256px + 4px + 8px)"
class="app-card"
@click="appClicked(app)"
>
<div class="screenshot q-mb-sm">
<img :src="app.currentVersion.screenshots[0]" style="width: 256px" />
</div>

<div class="flex justify-between" style="padding: 0 4px">
<div class="text-h6">{{ app.currentVersion.name }}</div>
<div style="font-size: 18px; line-height: 18px;">
<span>
<q-icon :name="`img:${categories.find(e => e.id === app.categoryId).iconUri}`" size="14px" class="q-mr-sm"/>
<span style="font-size: 13px">{{ categories.find(e => e.id === app.categoryId).name }}</span>
</span>
<div class="flex justify-between" style="padding: 0 4px">
<div class="text-h6">{{ app.currentVersion.name }}</div>
<div style="font-size: 18px; line-height: 18px;">
<span>
<q-icon :name="`img:${categories.find(e => e.id === app.categoryId).iconUri}`" size="14px" class="q-mr-sm"/>
<span style="font-size: 13px">{{ categories.find(e => e.id === app.categoryId).name }}</span>
</span>
</div>
</div>
</div>

<div
style="display: grid;grid-template-columns: 1fr auto;padding-left: 4px;align-items: end;"
:style="`padding-right: ${action.type && action.id === app.id ? 0 : 4}px`"
>
<span class="col-shrink desc text-grey-7" style="margin-bottom: 2px;max-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
{{ app.currentVersion.shortDescription }}
</span>
<div class="col-shrink" style="width: 80px;">
<template v-if="action.type && action.id === app.id">
<q-linear-progress
:value="action.progress"
size="32px"
:color="actionColors.bar"
:track-color="actionColors.track"
style="width: 80px; border-radius: 5px;"
>
<div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
<div
class="app-progress-label"
style="font-size: 28px;"
>{{ `${action.progress * 100}%` }}</div>
</div>
</q-linear-progress>
</template>
<q-btn
v-else
flat
dense
color="white"
style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
:label="app.actionButton.text"
class="fit no-shadow text-pixelated"
:class="app.actionButton.class"
@click="handleAction(app, app.actionButton.text)"
/>
<div
style="display: grid;grid-template-columns: 1fr auto;padding-left: 4px;align-items: end;"
:style="`padding-right: ${action.type && action.id === app.id ? 0 : 4}px`"
>
<span class="col-shrink desc text-grey-7" style="margin-bottom: 2px;max-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
{{ app.currentVersion.shortDescription }}
</span>
<div class="col-shrink" style="width: 80px;">
<template v-if="action.type && action.id === app.id">
<q-linear-progress
:value="action.progress"
size="32px"
:color="actionColors.bar"
:track-color="actionColors.track"
style="width: 80px; border-radius: 5px;"
>
<div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
<div
class="app-progress-label"
style="font-size: 28px;"
>{{ `${action.progress * 100}%` }}</div>
</div>
</q-linear-progress>
</template>
<q-btn
v-else
flat
dense
color="white"
style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
:label="app.actionButton.text"
class="fit no-shadow text-pixelated"
:class="app.actionButton.class"
@click="handleAction(app, app.actionButton.text)"
/>
</div>
</div>
</div>
</div>
</q-list>
</template>
<template v-else>
<div class="column items-center">
<q-spinner
color="primary"
size="3em"
class="q-mb-md"
></q-spinner>
<p>Loading apps...</p>
</div>
</q-list>
</template>
</div>
</template>

Expand Down Expand Up @@ -230,6 +242,7 @@ export default defineComponent({
.apps
display: grid
grid-template-columns: repeat(4, 1fr)
justify-items: center
.card-container
padding: 12px
Expand Down
28 changes: 15 additions & 13 deletions frontend/src/components/AppPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>
<div :class="$q.screen.width > 350 ? 'q-mr-md' : ''">
<div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
<div class="row">
<div class="row q-gutter-md">
<div
:style="`background-color: #${category.color};`"
style="border-radius: 20px; padding: 4px 13px; width: fit-content;"
Expand All @@ -25,18 +25,20 @@
</div>

<template v-if="currentStatusHint">
<q-chip
:color="statusHints[currentStatusHint].color"
:icon="statusHints[currentStatusHint].icon"
:label="statusHints[currentStatusHint].text"
class="q-ml-lg q-my-none"
:clickable="!!statusHints[currentStatusHint].dialog"
@click="$emit('showDialog', statusHints[currentStatusHint].dialog)"
>
<q-tooltip v-if="!!statusHints[currentStatusHint].tooltip">
{{ statusHints[currentStatusHint].tooltip }}
</q-tooltip>
</q-chip>
<div>
<q-chip
:color="statusHints[currentStatusHint].color"
:icon="statusHints[currentStatusHint].icon"
:label="statusHints[currentStatusHint].text"
class="q-my-none"
:clickable="!!statusHints[currentStatusHint].dialog"
@click="$emit('showDialog', statusHints[currentStatusHint].dialog)"
>
<q-tooltip v-if="!!statusHints[currentStatusHint].tooltip">
{{ statusHints[currentStatusHint].tooltip }}
</q-tooltip>
</q-chip>
</div>
</template>
</div>
</div>
Expand Down
Loading

0 comments on commit 08dc25e

Please sign in to comment.