okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

oobe progress

Browse source
This commit is contained in:
booploops 2022-06-02 05:16:31 -07:00
parent f4a30fbe11
commit af76dff3b6
10 changed files with 526 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/renderer/assets/oobe/ss1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
src/renderer/assets/oobe/ss2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 164 KiB

8
src/renderer/index.js
View file

@ -115,7 +115,6 @@ function fallbackinitMusicKit() {
request.open("GET", "https://raw.githubusercontent.com/lujjjh/LitoMusic/main/token.json");
request.send();
}
document.addEventListener('musickitloaded', function () {
console.log('MusicKit loaded')
// MusicKit global is now defined
@ -288,7 +287,6 @@ webGPU().then()
let screenWidth = screen.width;
let screenHeight = screen.height;
// window.onerror = function (error) {
// console.log(error)
// bootbox.alert("Error occurred: " + error)
// };
document.addEventListener('DOMContentLoaded', async function () {
// app.oobeInit()
})

80
src/renderer/less/pages.less
View file

@ -119,11 +119,13 @@
&.search-page {
.searchToggle {
float:right;
>button {
float: right;
> button {
min-width: 120px;
}
}
.cd-mediaitem-square.mediaitem-brick {
width: 530px !important;
@ -1661,31 +1663,87 @@
.content-inner.oobe {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: grid;
place-items: center;
width: 100%;
background: #1e1e1e;
.oobe-view {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 32px;
gap: 32px;
max-width: 1280px;
max-height: 720px;
align-self: center;
justify-self: center;
height: 100%;
width: 100%;
.oobe-header {
font-size: 3em;
text-shadow: var(--replayTextShadow);
font-weight: 600;
}
.oobe-body {
flex: 1;
width: 100%;
background: #ffffff0d;
border-radius: 20px;
padding: 3em;
&.text {
white-space: pre-wrap;
}
.blurb {
white-space: pre-wrap;
margin: 16px;
line-height: 1.5em;
}
&.visual {
padding: 1em;
.stylePicker {
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: .25s all;
box-shadow: 0px 2px 6px rgb(0 0 0 / 25%);
.visualPreview {
pointer-events: none;
transition: .25s all;
width: 100%;
filter: drop-shadow(0px 8px 6px rgb(0 0 0 / 30%));
}
.card-footer {
font-size: 1.25em;
font-weight: 500;
}
&:hover {
transform: scale(1.10) translateZ(-1px);
z-index: 1;
box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
.visualPreview {
transform: scale(1.5) translateZ(-1px);
}
}
}
}
}
.oobe-footer {
@ -1694,6 +1752,12 @@
justify-content: center;
align-items: center;
padding: 16px;
.md-btn {
font-size: 18px;
min-width: 128px;
text-align: center;
}
}
}
}

427
src/renderer/main/vueapp.js
View file

File diff suppressed because it is too large Load diff

6
src/renderer/views/main.ejs
View file

@ -64,7 +64,6 @@
background-color: #eee;
}
}
</style>
</head>
@ -92,6 +91,11 @@
</mini-view>
</div>
</transition>
<transition name="fsModeSwitch">
<div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
<cider-oobe></cider-oobe>
</div>
</transition>
<%- include('app/panels'); %>
<div class="cursor" v-if="chrome.showCursor"></div>
</div>

137
src/renderer/views/pages/oobe.ejs
View file

@ -1,19 +1,127 @@
<script type="text/x-template" id="cider-oobe">
<div class="content-inner oobe">
<div class="oobe-view">
<div class="oobe-header">
Welcome to Cider
</div>
<div class="oobe-body">
body text
</div>
<div class="oobe-footer">
<div class="btn-group">
<div class="md-btn">Previous</div>
<div class="md-btn">Next</div>
<!-- before_we_start-->
<transition name="fade">
<div class="oobe-view" v-if="screen == 'before_we_start'">
<div class="oobe-header">
{{ getLz("oobe.amupsell.title") }}
</div>
<div class="oobe-body text">{{ getLz("oobe.amupsell.text") }}</div>
<div class="oobe-footer">
<div class="btn-group">
<div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.next") }}</div>
</div>
</div>
</div>
</div>
</transition>
<!-- Welcome -->
<transition name="fade">
<div class="oobe-view" v-if="screen == 'welcome'">
<div class="oobe-header">
{{ getLz("oobe.intro.title") }}
</div>
<div class="oobe-body text">{{ getLz("oobe.intro.text") }}</div>
<div class="oobe-footer">
<div class="btn-group">
<div class="md-btn" @click="screen = 'before_we_start'">{{ getLz("oobe.previous") }}</div>
<div class="md-btn" @click="screen = 'general'">{{ getLz("oobe.next") }}</div>
</div>
</div>
</div>
</transition>
<!-- General -->
<transition name="fade">
<div class="oobe-view" v-if="screen == 'general'">
<div class="oobe-header">
{{ getLz("oobe.general.title") }}
</div>
<div class="oobe-body text">{{ getLz("oobe.general.text") }}</div>
<div class="oobe-footer">
<div class="btn-group">
<div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.previous") }}</div>
<div class="md-btn" @click="screen = 'visual'">{{ getLz("oobe.next") }}</div>
</div>
</div>
</div>
</transition>
<!-- Visual -->
<transition name="fade">
<div class="oobe-view" v-if="screen == 'visual'">
<div class="oobe-header">
{{ getLz("oobe.visual.title") }}
</div>
<div class="oobe-body visual">
<b-row>
<b-col>
<div class="card bg-dark text-white stylePicker">
<div class="card-body">
<img class="visualPreview" src="./assets/oobe/ss1.png" alt="TEMP">
</div>
<div class="card-footer">
Mojave
</div>
</div>
</b-col>
<b-col>
<div class="card bg-dark text-white stylePicker">
<div class="card-body">
<img class="visualPreview" src="./assets/oobe/ss2.png" alt="TEMP">
</div>
<div class="card-footer">
Maverick
</div>
</div>
</b-col>
</b-row>
<div class="blurb">{{getLz("oobe.visual.layout.text")}}</div>
</div>
<div class="oobe-footer">
<div class="btn-group">
<div class="md-btn" @click="screen = 'general'">{{ getLz("oobe.previous") }}</div>
<div class="md-btn" @click="screen = 'audio'">{{ getLz("oobe.next") }}</div>
</div>
</div>
</div>
</transition>
<!-- Audio -->
<transition name="fade">
<div class="oobe-view" v-if="screen == 'audio'">
<div class="oobe-header">
{{ getLz("oobe.audio.title") }}
</div>
<div class="oobe-body">
<div class="blurb">{{ getLz("oobe.audio.text") }}</div>
<div class="md-option-container">
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{getLz('settings.option.audio.enableAdvancedFunctionality')}}
<br>
<small>{{getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="$root.cfg.advanced.AudioContext"
v-on:change="toggleAudioContext"
switch/>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="oobe-footer">
<div class="btn-group">
<div class="md-btn" @click="screen = 'visual'">{{ getLz("oobe.previous") }}</div>
<div class="md-btn">{{ getLz("oobe.next") }}</div>
</div>
</div>
</div>
</transition>
</div>
</script>
<script>
@ -21,13 +129,16 @@
template: '#cider-oobe',
data: function () {
return {
screen: "before_we_start"
}
},
async mounted() {
},
methods: {
getLz() {
return this.$root.getLz.apply(this.$root, arguments);
}
}
});
</script>