oobe progress

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

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>