From a6eb5034d3ce26379778a66cab20febe393372c5 Mon Sep 17 00:00:00 2001
From: leejooy96 <leejooy96@gmail.com>
Date: Tue, 1 Nov 2022 18:04:07 +0900
Subject: [PATCH] renderer: redesign main screen

---
 src/renderer/locales/en.json        |  7 ++-
 src/renderer/locales/ko.json        |  7 ++-
 src/renderer/screens/MainScreen.vue | 95 +++++++++++++++++++----------
 3 files changed, 74 insertions(+), 35 deletions(-)

diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index b7069b0..6543f26 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -1,10 +1,13 @@
 {
 	"desc": {
-		"welcome": "Thank you for using Vutron. This cool template makes it easy to create a variety of cross-platform applications."
+		"welcome-title": "Hello Vutron! Everything is ready.",
+		"welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code."
 	},
 	"menu": {
 		"change-theme": "Change Theme",
 		"change-language": "Change Language",
-		"about": "About Vutron"
+		"increase-count": "Count 1 increment",
+		"documentation": "Documentation",
+		"github": "Source Code"
 	}
 }
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index 5714d24..1b3ef7e 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -1,10 +1,13 @@
 {
 	"desc": {
-		"welcome": "Vutron을 이용해주셔서 감사드립니다. 이 멋진 템플릿을 활용하면 다양한 크로스플랫폼 애플리케이션을 손쉽게 제작할 수 있습니다."
+		"welcome-title": "안녕 Vutron! 모든 준비를 마쳤습니다.",
+		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다."
 	},
 	"menu": {
 		"change-theme": "테마 변경",
 		"change-language": "언어 변경",
-		"about": "Vutron 정보"
+		"increase-count": "카운트 1 증가",
+		"documentation": "문서",
+		"github": "소스코드"
 	}
 }
diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue
index f4e8488..604464a 100644
--- a/src/renderer/screens/MainScreen.vue
+++ b/src/renderer/screens/MainScreen.vue
@@ -4,25 +4,29 @@ import { useTheme } from 'vuetify'
 import { openExternal } from '@/renderer/utils'
 import { useTempStore } from '@/renderer/store/temp'
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 
-const { locale } = useI18n()
+const { locale, availableLocales } = useI18n()
 const theme = useTheme()
 const { counterIncrease } = useTempStore()
 const { counter } = storeToRefs(useTempStore())
+const languages = ref(['en'])
+
+languages.value = availableLocales
 
 const handleChangeTheme = (): void => {
 	theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 
-const handleChangeLanguage = (): void => {
-	if (locale.value === 'en') {
-		locale.value = 'ko'
-	} else {
-		locale.value = 'en'
-	}
+const handleChangeLanguage = (val): void => {
+	locale.value = val
 }
 
-const handleAbout = async (): Promise<void> => {
+const handleDocument = async (): Promise<void> => {
+	await openExternal('https://vutron.jooy2.com')
+}
+
+const handleGitHub = async (): Promise<void> => {
 	await openExternal('https://github.com/jooy2/vutron')
 }
 
@@ -33,31 +37,60 @@ const handleCountIncrease = (): void => {
 
 <template>
 	<v-container>
-		<v-row align="center" class="text-center">
-			<v-col cols="12">
+		<v-row no-gutters align="center" class="text-center">
+			<v-col cols="5">
 				<img alt="logo" class="ma-auto h-auto w-75" src="/images/vutron-logo.webp" />
 			</v-col>
-			<v-col cols="12">
-				{{ $t('desc.welcome') }}
-			</v-col>
-			<v-col cols="12"> Counter: {{ counter }} </v-col>
-			<v-col cols="3">
-				<v-btn block color="primary" @click="handleChangeTheme">
-					{{ $t('menu.change-theme') }}
-				</v-btn>
-			</v-col>
-			<v-col cols="3">
-				<v-btn block color="primary" @click="handleChangeLanguage">
-					{{ $t('menu.change-language') }}
-				</v-btn>
-			</v-col>
-			<v-col cols="3">
-				<v-btn block color="primary" @click="handleAbout">
-					{{ $t('menu.about') }}
-				</v-btn>
-			</v-col>
-			<v-col cols="3">
-				<v-btn block color="primary" @click="handleCountIncrease">Count + 1</v-btn>
+			<v-col cols="7">
+				<h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
+				<p>{{ $t('desc.welcome-desc') }}</p>
+				<v-row class="my-4">
+					<v-col cols="3">
+						<v-btn icon color="primary" @click="handleChangeTheme">
+							<v-icon icon="mdi-brightness-6" />
+							<v-tooltip activator="parent" location="bottom">
+								{{ $t('menu.change-theme') }}
+							</v-tooltip>
+						</v-btn>
+					</v-col>
+					<v-col cols="3">
+						<v-badge color="blue" :content="counter">
+							<v-btn icon color="primary" @click="handleCountIncrease">
+								<v-icon icon="mdi-plus-circle" />
+								<v-tooltip activator="parent" location="bottom">
+									{{ $t('menu.increase-count') }}
+								</v-tooltip>
+							</v-btn>
+						</v-badge>
+					</v-col>
+					<v-col cols="3">
+						<v-btn icon color="primary" @click="handleDocument">
+							<v-icon icon="mdi-file-document" />
+							<v-tooltip activator="parent" location="bottom">
+								{{ $t('menu.documentation') }}
+							</v-tooltip>
+						</v-btn>
+					</v-col>
+					<v-col cols="3">
+						<v-btn icon color="primary" @click="handleGitHub">
+							<v-icon icon="mdi-github" />
+							<v-tooltip activator="parent" location="bottom">
+								{{ $t('menu.github') }}
+							</v-tooltip>
+						</v-btn>
+					</v-col>
+					<v-col cols="12">
+						<v-select
+							:model-value="locale"
+							density="compact"
+							:label="$t('menu.change-language')"
+							:items="languages"
+							@update:model-value="handleChangeLanguage"
+						>
+							{{ $t('menu.change-language') }}
+						</v-select>
+					</v-col>
+				</v-row>
 			</v-col>
 		</v-row>
 	</v-container>