Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): add ElScrollbar component for improved scrolling #1841

Merged
merged 2 commits into from
Dec 19, 2024
Merged

feat(ui): add ElScrollbar component for improved scrolling #1841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c36a05b
feat(ui): add ElScrollbar component for improved scrolling
Red-Asuka Dec 18, 2024
6c88c95
feat(update): improve the dialog styling
Red-Asuka Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/desktop/src/renderer/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ declare module 'vue' {
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
Expand All @@ -49,6 +50,7 @@ declare module 'vue' {
SettingsView: typeof import('./../../../../packages/ui/src/components/SettingsView.vue')['default']
UpdateAvailable: typeof import('./src/components/update/Available.vue')['default']
UpdateDownloadProgress: typeof import('./src/components/update/DownloadProgress.vue')['default']
UpdateNotAvailable: typeof import('./src/components/update/NotAvailable.vue')['default']
UpdateView: typeof import('./src/components/update/View.vue')['default']
}
}
6 changes: 3 additions & 3 deletions apps/desktop/src/renderer/src/components/update/Available.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@ watch(releaseNotes, () => {
<MyDialog
v-model="dialogVisible"
:title="$t('update.updateTitle', { version })"
width="min(100vw - 80px, 960px)"
width="min(100vw - 200px, 960px)"
>
<div class="h-[min(50vh,400px)] overflow-y-auto">
<ElScrollbar class="h-[min(50vh,400px)]">
<div class="prose prose-sm" v-html="releaseNotes" />
</div>
</ElScrollbar>
<template #footer>
<div class="flex gap-6 justify-between">
<ElButton @click="ignoreCurrentVersion">
Expand Down
36 changes: 36 additions & 0 deletions apps/desktop/src/renderer/src/components/update/NotAvailable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<script setup lang="ts">
import Logo from '../../../../../../../packages/ui/src/assets/images/logo.png'

const dialogVisible = defineModel<boolean>({ default: false })

const version = ref(`v${window.__APP_VERSION__}`)
</script>

<template>
<MyDialog
v-model="dialogVisible"
width="280px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
center
>
<div class="text-center select-none">
<img class="mx-auto mb-6" :src="Logo" alt="MQTTX" width="64" height="64">
<div class="mb-0.5 text-title font-semibold text-2xl">
MQTTX
</div>
<div class="mb-6 text-default text-sm">
{{ version }}
</div>
<div class="text-default">
{{ $t('update.noUpdateAvailable') }}
</div>
</div>
<template #footer>
<ElButton class="w-full" type="primary" @click="dialogVisible = false">
{{ $t('common.close') }}
</ElButton>
</template>
</MyDialog>
</template>
13 changes: 6 additions & 7 deletions apps/desktop/src/renderer/src/components/update/View.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
import type { ProgressInfo } from 'electron-updater'
import useSettingsService from '@database/services/SettingsService'

const updateNotAvailableDialogVisible = ref(false)

const updateAvailableDialogVisible = ref(false)
const version = ref('')
const changelog = ref('')
Expand All @@ -10,17 +12,11 @@ const downloadProgressDialogVisible = ref(false)
const downloadProgress = ref<ProgressInfo | null>(null)
const updateDownloaded = ref(false)

const { t } = useI18n()

window.api.onUpdateStatus((_event, updateEvent) => {
const { status } = updateEvent
if (status === 'update-not-available') {
if (window.forceCheck) {
ElMessage({
message: t('update.noUpdateAvailable'),
type: 'info',
plain: true,
})
updateNotAvailableDialogVisible.value = true
window.forceCheck = false
}
} else if (status === 'update-available') {
Expand Down Expand Up @@ -58,6 +54,9 @@ onMounted(async () => {
</script>

<template>
<UpdateNotAvailable
v-model="updateNotAvailableDialogVisible"
/>
<UpdateAvailable
v-model="updateAvailableDialogVisible"
:version="version"
Expand Down
1 change: 1 addition & 0 deletions apps/web/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ declare module 'vue' {
ElOption: typeof import('element-plus/es')['ElOption']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
Expand Down
2 changes: 2 additions & 0 deletions packages/tailwind-config/base.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const config: Config = {
DEFAULT: {
css: {
'color': 'var(--color-text-default)',
'maxWidth': 'unset',
'strong': {
color: 'var(--color-text-title)',
},
Expand Down Expand Up @@ -49,6 +50,7 @@ const config: Config = {
borderInlineStartColor: 'var(--color-main-green)',
backgroundColor: 'var(--color-bg-primary)',
paddingInlineEnd: '1.1111111em',
marginInlineEnd: '1.1111111em',
paddingTop: '0.1em',
paddingBottom: '0.1em',
},
Expand Down
1 change: 1 addition & 0 deletions packages/ui/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ declare module 'vue' {
ElMain: typeof import('element-plus/es')['ElMain']
ElOption: typeof import('element-plus/es')['ElOption']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
Expand Down
160 changes: 81 additions & 79 deletions packages/ui/src/components/HelpView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,99 +179,101 @@ const helpPractice = computed(() => [
</script>

<template>
<div id="help-view" class="px-4 pt-4 pb-12 bg-primary min-h-full select-none">
<div class="mx-auto max-w-screen-lg">
<div class="mb-12 flex justify-between items-center">
<h1 class="text-lg text-title font-semibold">
{{ $t('help.helpMQTT') }}
</h1>
<ElTooltip
v-if="locale === 'zh'"
placement="bottom"
content="2024 MQTT 协议入门教程"
>
<a
target="_blank"
rel="noopener"
class="text-sm text-main-green"
href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
<ElScrollbar id="help-view" class="bg-primary min-h-full select-none">
<div class="px-4 pt-4 pb-12">
<div class="mx-auto max-w-screen-lg">
<div class="mb-12 flex justify-between items-center">
<h1 class="text-lg text-title font-semibold">
{{ $t('help.helpMQTT') }}
</h1>
<ElTooltip
v-if="locale === 'zh'"
placement="bottom"
content="2024 MQTT 协议入门教程"
>
下载 MQTT 电子书
<span>→</span>
</a>
</ElTooltip>
</div>

<section class="mb-16 grid grid-cols-3 gap-6">
<a
v-for="item in helpTop"
:key="item.icon"
class="block text-center cursor-pointer rounded-lg py-6 px-3 bg-gradient-card"
:href="item.link"
target="_blank"
rel="noopener"
>
<img class="mb-3 mx-auto" :src="getImage(item.icon)" :alt="item.icon" width="24" height="24">
<h2 class="text-title text-sm font-semibold">{{ item.title }}</h2>
</a>
</section>
<a
target="_blank"
rel="noopener"
class="text-sm text-main-green"
href="https://www.emqx.com/zh/resources/beginners-guide-to-the-mqtt-protocol?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-to-mqtt-ebook-zh"
>
下载 MQTT 电子书
<span>→</span>
</a>
</ElTooltip>
</div>

<section class="mb-16">
<h2 class="mb-2 text-lg text-title font-semibold">
{{ $t('help.guideTitle') }}
</h2>
<p class="mb-6 text-sm text-default">
{{ $t('help.guideDesc') }}
</p>
<div class="grid grid-cols-2 gap-6">
<section class="mb-16 grid grid-cols-3 gap-6">
<a
v-for="item in helpGuide"
:key="item.link"
class="block cursor-pointer rounded-lg p-4 border border-solid border-border-default"
:href="`${item.link}${help.blogUtm}`"
v-for="item in helpTop"
:key="item.icon"
class="block text-center cursor-pointer rounded-lg py-6 px-3 bg-gradient-card"
:href="item.link"
target="_blank"
rel="noopener"
>
<p class="text-title font-semibold text-sm">
{{ item.title }}
<span class="text-main-green ml-1">
→
</span>
</p>
<img class="mb-3 mx-auto" :src="getImage(item.icon)" :alt="item.icon" width="24" height="24">
<h2 class="text-title text-sm font-semibold">{{ item.title }}</h2>
</a>
</div>
</section>
</section>

<section>
<h2 class="mb-2 text-lg text-title font-semibold">
{{ $t('help.practiceTitle') }}
</h2>
<p class="mb-6 text-sm text-default">
{{ $t('help.practiceDesc') }}
</p>
<div class="grid grid-cols-[repeat(auto-fill,120px)] gap-6">
<template v-for="item in helpPractice">
<section class="mb-16">
<h2 class="mb-2 text-lg text-title font-semibold">
{{ $t('help.guideTitle') }}
</h2>
<p class="mb-6 text-sm text-default">
{{ $t('help.guideDesc') }}
</p>
<div class="grid grid-cols-2 gap-6">
<a
v-if="item.link"
v-for="item in helpGuide"
:key="item.link"
class="block cursor-pointer text-center rounded-lg py-6 px-3 bg-card-normal"
class="block cursor-pointer rounded-lg p-4 border border-solid border-border-default"
:href="`${item.link}${help.blogUtm}`"
target="_blank"
rel="noopener"
>
<img
class="mb-3 mx-auto"
:class="[{ invert: item.invert?.includes(settings?.currentTheme ?? '') }]"
:src="getImage(item.icon)"
:alt="item.icon"
width="32"
height="32"
>
<p class="text-default text-sm">{{ item.title }}</p>
<p class="text-title font-semibold text-sm">
{{ item.title }}
<span class="text-main-green ml-1">
→
</span>
</p>
</a>
</template>
</div>
</section>
</div>
</section>

<section>
<h2 class="mb-2 text-lg text-title font-semibold">
{{ $t('help.practiceTitle') }}
</h2>
<p class="mb-6 text-sm text-default">
{{ $t('help.practiceDesc') }}
</p>
<div class="grid grid-cols-[repeat(auto-fill,120px)] gap-6">
<template v-for="item in helpPractice">
<a
v-if="item.link"
:key="item.link"
class="block cursor-pointer text-center rounded-lg py-6 px-3 bg-card-normal"
:href="`${item.link}${help.blogUtm}`"
target="_blank"
rel="noopener"
>
<img
class="mb-3 mx-auto"
:class="[{ invert: item.invert?.includes(settings?.currentTheme ?? '') }]"
:src="getImage(item.icon)"
:alt="item.icon"
width="32"
height="32"
>
<p class="text-default text-sm">{{ item.title }}</p>
</a>
</template>
</div>
</section>
</div>
</div>
</div>
</ElScrollbar>
</template>
Loading
Loading