Unbloat user menu (#264)

This commit is contained in:
Swiftzerr 2022-01-30 01:38:29 -05:00 committed by GitHub
parent 02f5fbe744
commit b21464de05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 90 additions and 34 deletions

View file

@ -0,0 +1,47 @@
<script type="text/x-template" id="audio-settings">
<template>
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@click="openEqualizer()" style="width:100%;">
<div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('term.equalizer')}}</div>
</button>
<button class="playlist-item"
@click="openSpacialAudio()" style="width:100%;">
<div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
</button>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('audio-settings', {
template: '#audio-settings',
data: function () {
return {
app: this.$root,
}
},
props: {},
mounted() {},
methods: {
openEqualizer() {
app.modals.equalizer = true
app.modals.audioSettings = false
},
openSpacialAudio() {
app.modals.spatialProperties = true
app.modals.audioSettings = false
},
}
});
</script>

View file

@ -246,43 +246,13 @@
</div>
</div>
</button>
<button class="usermenu-item" @click="toggleHideUserInfo()">
<div class="row nopadding">
<div class="col nopadding">
{{$root.getLz('settings.option.visual.showPersonalInfo')}}
</div>
<div class="col-auto nopadding" v-if="!chrome.hideUserInfo">
✔️
</div>
</div>
</button>
<button class="usermenu-item" @click="mk.privateEnabled = !mk.privateEnabled">
<div class="row nopadding">
<div class="col nopadding">
{{$root.getLz('term.privateSession')}}
</div>
<div class="col-auto nopadding" v-if="mk.privateEnabled">
✔️
</div>
</div>
</button>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext"
@click="modals.equalizer = true">
{{$root.getLz('term.equalizer')}}
</button>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial"
@click="modals.spatialProperties = true">
{{$root.getLz('term.spacializedAudioSetting')}}
</button>
<button class="usermenu-item" @click="appRoute('apple-account-settings')">
{{$root.getLz('term.accountSettings')}}
@click="modals.audioSettings = true">
{{$root.getLz('term.audioSettings')}}
</button>
<button class="usermenu-item" @click="appRoute('about')">
{{$root.getLz('term.about')}}
</button>
<button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
{{$root.getLz('term.discord')}}
</button>
<button class="usermenu-item" @click="appRoute('settings')">
{{$root.getLz('term.settings')}}
</button>
@ -631,6 +601,9 @@
<transition name="modal">
<spatial-properties v-if="modals.spatialProperties"></spatial-properties>
</transition>
<transition name="modal">
<audio-settings v-if="modals.audioSettings"></audio-settings>
</transition>
<transition name="modal">
<eq-view v-if="modals.equalizer"></eq-view>
</transition>
@ -745,6 +718,9 @@
<!-- Spatial Properties -->
<%- include('components/spatial-properties')
%>
<!-- Audio Settings -->
<%- include('components/audio-settings')
%>
<!-- QRCode Modal -->
<%- include('components/qrcode-modal')
%>

View file

@ -13,6 +13,8 @@
<h3>{{$root.getLz('term.sponsor')}}</h3>
<button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
<button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
<h3>{{$root.getLz('term.socials')}}</h3>
<button onclick="window.open('https://discord.gg/applemusic')" class="md-btn sponsorBtn"><img src="./assets/discord.svg"/>{{$root.getLz('term.discord')}}</button>
</div>
<div class="col">

View file

@ -1,6 +1,24 @@
<script type="text/x-template" id="cider-settings">
<div class="content-inner settings-page">
<div class="md-option-container">
<div class="md-option-header">
<span>{{$root.getLz('settings.header.general')}}</span>
</div>
<div class="md-option-line">
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn" onclick="app.appRoute('apple-account-settings')">
{{$root.getLz('term.accountSettings')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('term.privateSession')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.mk.privateEnabled" switch/>
</div>
</div>
<div class="md-option-header">
<span>{{$root.getLz('settings.header.audio')}}</span>
</div>

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-speaker"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><circle cx="12" cy="14" r="4"></circle><line x1="12" y1="6" x2="12.01" y2="6"></line></svg>

After

Width:  |  Height:  |  Size: 366 B