Skip to content
This repository has been archived by the owner on Jan 31, 2024. It is now read-only.

Commit

Permalink
views: implement more pages
Browse files Browse the repository at this point in the history
  • Loading branch information
liushuyu committed Jul 22, 2022
1 parent 3c07cbf commit 5f63eeb
Show file tree
Hide file tree
Showing 13 changed files with 322 additions and 29 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/aosc-logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AOSC OS Installer</title>
</head>
Expand Down
File renamed without changes
34 changes: 24 additions & 10 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
<script setup>
import { RouterView } from "vue-router";
import DKArrowButton from "@/components/DKArrowButton.vue";
import DKLogo from "@/components/DKLogo.vue";
</script>

<script>
export default {
data: function () {
return {
page_number: 0,
};
},
methods: {
on_abort: function () {
this.$router.push("/abort");
},
},
};
</script>

<template>
<div style="padding: 0 2rem; margin-bottom: 1rem">
<button
class="quit-button"
style="padding-top: 1rem"
aria-label="close button"
@click="
{
}
"
@click="on_abort"
@keyup.enter="on_abort"
>
<img
alt="window close icon"
Expand All @@ -36,13 +48,13 @@ import DKLogo from "@/components/DKLogo.vue";
<nav>Final Steps</nav>
</div>
</div>
<main style="padding-top: 1rem; margin-left: 4rem">
<div style="max-width: 60vh">
<main style="padding-top: 1rem; margin-left: 4rem; max-width: 35vw">
<div style="max-height: 65vh; overflow-y: auto; margin-right: 5rem">
<RouterView />
<div style="display: flex; float: right">
<!-- <div style="display: flex; float: right; margin-right: 1em">
<DKArrowButton :left="true">Previous</DKArrowButton>
<DKArrowButton>Next</DKArrowButton>
</div>
</div> -->
</div>
</main>
</div>
Expand All @@ -55,7 +67,9 @@ import DKLogo from "@/components/DKLogo.vue";
max="100"
class="progress-bar"
></progress>
<label for="progressbar" class="eta-box">5 - 10 minutes remaining...</label>
<label for="progressbar" class="eta-box"
>25 - 30 minutes remaining...</label
>
</div>
</template>

Expand Down
14 changes: 11 additions & 3 deletions src/components/DKIconButton.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
<script></script>
<script>
export default {
props: {
icon: String,
title: String,
explain: String,
},
};
</script>

<template>
<button class="button" style="height: 100%">
Expand All @@ -9,8 +17,8 @@
height="36"
/>
<div class="text-box">
<span style="font-size: 1rem">Manage Partition</span>
<h2 style="font-size: 1.5rem">GParted</h2>
<span style="font-size: 1rem">{{ explain }}</span>
<h2 style="font-size: 1.5rem">{{ title }}</h2>
</div>
</div>
</button>
Expand Down
24 changes: 21 additions & 3 deletions src/components/DKListSelect.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,16 @@ export default {
@keyup.enter="select(index)"
@keyup.space="select(index)"
>
<div style="text-align: left; margin: 0.5rem 0.5rem 0 0.5rem">
<h2>{{ option.title }}</h2>
<p :class="option.hl ? 'error-msg' : ''">{{ option.body }}</p>
<div class="button-box">
<h2 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem">
{{ option.title }}
</h2>
<p
style="font-size: 0.88rem; line-height: 1.2"
:class="option.hl ? 'error-msg' : ''"
>
{{ option.body }}
</p>
</div>
</button>
</div>
Expand All @@ -44,10 +51,21 @@ button.button.selected {
background: #dddddd56;
}
button[disabled].button:hover {
background: transparent;
}
.list-container button {
height: unset;
line-height: 1.2rem;
background-color: transparent;
width: 100%;
align-content: flex-start;
}
.button-box {
text-align: left;
margin: 0.5rem 0.5rem 0 0.5rem;
}
button:disabled,
Expand Down
75 changes: 75 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ import WelcomeView from "@/views/WelcomeView.vue";
import AbortView from "@/views/AbortView.vue";
import CompleteView from "@/views/CompleteView.vue";
import ErrorView from "@/views/ErrorView.vue";
import HostnameView from "@/views/HostnameView.vue";
import UserView from "@/views/UserView.vue";
import ConfirmView from "@/views/ConfirmView.vue";
import SwapFileView from "@/views/SwapFileView.vue";
import LocaleView from "@/views/LocaleView.vue";
import MirrorView from "@/views/MirrorView.vue";
import RescueKitView from "@/views/RescueKitView.vue";
import PartitionView from "@/views/PartitionView.vue";
import VariantView from "@/views/VariantView.vue";
import InstallView from "@/views/InstallView.vue";

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
Expand All @@ -12,6 +22,71 @@ const router = createRouter({
name: "home",
component: WelcomeView,
},
{
path: "/rescue",
name: "rescue",
component: RescueKitView,
},
{
path: "/users",
name: "users",
component: UserView,
},
{
path: "/abort",
name: "abort",
component: AbortView,
},
{
path: "/finish",
name: "complete",
component: CompleteView,
},
{
path: "/error",
name: "error",
component: ErrorView, // TODO: parameters
},
{
path: "/swapfile",
name: "swapfile",
component: SwapFileView,
},
{
path: "/mirrors",
name: "mirrors",
component: MirrorView,
},
{
path: "/locales",
name: "locales",
component: LocaleView,
},
{
path: "/confirm",
name: "confirm",
component: ConfirmView,
},
{
path: "/hostname",
name: "hostname",
component: HostnameView,
},
{
path: "/partitions",
name: "partitions",
component: PartitionView,
},
{
path: "/variants",
name: "variants",
component: VariantView,
},
{
path: "/install",
name: "install",
component: InstallView,
},
],
});

Expand Down
32 changes: 32 additions & 0 deletions src/slides.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const slides_data = [
{
title: "Made with Love",
body: "AOSC OS is brought to you by a group of enthusiastic maintainers who works on their free time, hoping to bring you an efficient and reliable Linux experience.\nInstallation should take only a few minutes, but could take longer depending on your device's performance and Internet bandwidth. Please sit back and relax.\nDrinks are self-served, but we provide a complimentary Web browser, along with a sweet tune.",
},
{
title: "Work Ready",
body: "Built with out-of-the-box usability and easy maintenance in mind, AOSC OS is a ready-made toolbox for your everyday computing.\nFrom office productivity to server administration, photoediting to 3D modeling, note-taking to translation projects, AOSC OS has the right tools ready for you. With our clear and refined software repository, we will get you right under way for whatever awaits.\nFor Internet-restricted regions, AOSC OS is ready to help you connect with the globalized world.",
},
{
title: "Play Ready",
body: "Powered by a solid graphical stack and strong community support, AOSC OS is ready for your entertainment needs.\nPlay your favorite CD with Strawberry, watch your latest block-buster movies with VLC, or share them together with friends and family with Kodi, AOSC OS has everything you need for a good time.\nPlay your favorite Linux and Windows® games with Steam, fuel your nostalgia with console emulators! If you feel like a game or two, we have you covered.",
},
{
title: "Disaster Ready",
body: "AOSC OS comes pre-installed with RescueKit where available, a self-contained maintenance and rescue environment.\nCorrupted file system? Accidental deletes? Messed up system updates? No worries! RescueKit has most (if not everything) you need to get your AOSC OS back on track.\nIf you are the cautious type, RescueKit also comes with essential tools for backing up your system for a rainy day.",
},
{
title: "Device Ready",
body: "Built on the highly scalable Linux Kernel and its portable and vibrant userspace, AOSC OS is ready for your single-board computers, laptops, desktops, and servers.\nConfigured for full feature sets, AOSC OS readies your new and old devices and peripherals for maximal functionality.\nProprietary drivers needed? No problem! With our liberal software support policies, if your hardware vendors let us, we will ship them for you.",
},
{
title: "Retro Ready",
body: "Still holding onto your 486? No worries, our maintainers love their old computers, and intend to have them run AOSC OS.\nAOSC OS/Retro is a purpose-built distribution optimised for devices with limited RAM, processing power, and storage space. With six architectures supported and counting, AOSC OS/Retro keeps your old and tired computers going with optimized and up-to-date software.\n",
},
{
title: "You Ready",
body: "At AOSC, we pride ourselves with friendly and ready support for our users. Warranty and merchantability notwithstanding,we believe that our users should be respected of their time and energy spent on adapting to a new work environment.\nAt Telegram, Discord, IRC, or Matrix, our maintainers,contributors, and friends are ready to offer help. We wish you much joy at our community and great success with AOSC OS.\nEnjoy!",
},
];

export default slides_data;
1 change: 0 additions & 1 deletion src/views/ConfirmView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export default {
</li>
<ul v-if="rescue_size > 0">
<li>
A
<span class="emphasis"
>A {{ rescue_size }}GiB partition will be created for
RescueKit.</span
Expand Down
62 changes: 62 additions & 0 deletions src/views/InstallView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<script>
import slides_data from "@/slides";
import DKIconButton from "@/components/DKIconButton.vue";
export default {
data: function () {
return {
current_slide: {},
index: 0,
timer: null,
slides: slides_data,
hide: false,
};
},
methods: {
next_slide: function () {
this.hide = true;
const next_slide = this.slides[++this.index % this.slides.length];
setTimeout(() => {
this.current_slide = {
title: next_slide.title,
paras: next_slide.body.split("\n"),
};
this.hide = false;
}, 200);
},
},
mounted: function () {
this.next_slide();
this.timer = setInterval(this.next_slide, 6000);
},
beforeUnmount: function () {
clearInterval(this.timer);
},
components: { DKIconButton },
};
</script>

<template>
<div :class="'slide-show' + (hide ? ' hidden' : '')">
<h1>{{ current_slide.title }}</h1>
<article>
<p v-for="(para, index) in current_slide.paras" v-bind:key="index">
{{ para }}
</p>
</article>
</div>
<p style="display: flex; column-gap: 0.5rem">
<DKIconButton title="Firefox" explain="Web Browser" />
<DKIconButton title="BGM" explain="Mute" />
</p>
</template>

<style>
.hidden {
opacity: 0;
}
.slide-show {
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
</style>
12 changes: 7 additions & 5 deletions src/views/MirrorView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
<template>
<div>
<h1>Download Source</h1>
<p>
Installer will now detect the fastest mirror to download AOSC OS from. If
you would like to manual select a mirror, press "Customize..." below.
</p>
<button class="button">Customize...</button>
<section>
<p>
Installer will now detect the fastest mirror to download AOSC OS from.
If you would like to manual select a mirror, press "Customize..." below.
</p>
<button class="button">Customize...</button>
</section>
</div>
</template>

Expand Down
Loading

0 comments on commit 5f63eeb

Please sign in to comment.