Big Chungus Window settings (#1230)
* Initial Changes * I suposse this is the last * cryptofyre * Documentation
This commit is contained in:
Gabriel Davila
GitHub
parent
962b7094c2
commit
e133b2c38b
17 changed files with 1571 additions and 504 deletions
|
|
@ -221,7 +221,7 @@
|
|||
{{$root.getLz('settings.option.general.keybindings')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn" @click="app.$store.state.pageState.settings.currentTabIndex = 7">
|
||||
<button class="md-btn" @click="$root.openSettingsPage('keybindings')">
|
||||
{{$root.getLz('action.open')}}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -409,6 +409,17 @@
|
|||
<audiolabs-page/>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div><svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles" /></div>
|
||||
<div>
|
||||
{{ $root.getLz('settings.header.visual.styles') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="settings-tab-content">
|
||||
<installed-themes/>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
|
||||
|
|
@ -423,7 +434,7 @@
|
|||
<span>{{$root.getLz('settings.header.visual')}}</span>
|
||||
</div>
|
||||
<div class="settings-option-body">
|
||||
<div class="md-option-line">
|
||||
<!--<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.header.visual.theme')}}
|
||||
</div>
|
||||
|
|
@ -432,7 +443,7 @@
|
|||
{{$root.getLz('settings.option.visual.theme.manageStyles')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz("settings.option.visual.windowStyle")}}
|
||||
|
|
@ -650,6 +661,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div><svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins" /></div>
|
||||
<div>
|
||||
{{ $root.getLz('term.plugins') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="settings-tab-content">
|
||||
<plugins-github/>
|
||||
</div>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
|
||||
|
|
@ -1227,16 +1249,16 @@
|
|||
</div>
|
||||
<div class="settings-option-body">
|
||||
|
||||
<div class="md-option-line">
|
||||
<!--<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.visual.plugin.github.explore')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn" @click="$root.appRoute('plugins-github')">{{
|
||||
<button class="md-btn" @click="$root.openSettingsPage('github-plugins')">{{
|
||||
$root.getLz("settings.option.visual.plugin.github.explore") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
|
|
@ -1353,220 +1375,25 @@
|
|||
</b-tab>
|
||||
<!--keybinds Settings -->
|
||||
<b-tab id="hid">
|
||||
<div class="keybinds-page">
|
||||
<div class="md-option-header">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings')}}</span>
|
||||
</div>
|
||||
<div class="settings-option-body">
|
||||
<div class="md-option-header-sub">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.search')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('search')">
|
||||
{{app.cfg.general.keybindings.search.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.listnow')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('listnow')">
|
||||
{{app.cfg.general.keybindings.listnow.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.browse')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('browse')">
|
||||
{{app.cfg.general.keybindings.browse.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.recentAdd')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('recentAdd')">
|
||||
{{app.cfg.general.keybindings.recentAdd.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.songs')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('songs')">
|
||||
{{app.cfg.general.keybindings.songs.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.albums')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('albums')">
|
||||
{{app.cfg.general.keybindings.albums.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.artists')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('artists')">
|
||||
{{app.cfg.general.keybindings.artists.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-header-sub">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings.session')}}</span>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.private')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('togglePrivateSession')">
|
||||
{{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-header-sub">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings.control')}}</span>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.remote')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('webRemote')">
|
||||
{{app.cfg.general.keybindings.webRemote.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.audio')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('audioSettings')">
|
||||
{{app.cfg.general.keybindings.audioSettings.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.plugins')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('pluginMenu')">
|
||||
{{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.cast')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('castToDevices')">
|
||||
{{app.cfg.general.keybindings.castToDevices.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.settings')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('settings')">
|
||||
{{app.cfg.general.keybindings.settings.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-header-sub" v-if="app.platform !== 'darwin'">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings.interface')}}</span>
|
||||
</div>
|
||||
<div class="md-option-line" v-if="app.platform !== 'darwin'">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('term.zoomin')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('zoomn')">
|
||||
{{app.cfg.general.keybindings.zoomn.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line" v-if="app.platform !== 'darwin'">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('term.zoomout')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('zoomt')">
|
||||
{{app.cfg.general.keybindings.zoomt.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line" v-if="app.platform !== 'darwin'">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('term.zoomreset')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('zoomrst')">
|
||||
{{app.cfg.general.keybindings.zoomrst.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-header-sub">
|
||||
<span>{{$root.getLz('settings.option.general.keybindings.advanced')}}</span>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.description.developer')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn md-btn-small md-btn-block"
|
||||
@click="keyBindUpdate('openDeveloperTools')">
|
||||
{{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
|
||||
{{$root.getLz('term.reset')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template>
|
||||
<keybinds-settings/>
|
||||
</template>
|
||||
</b-tab>
|
||||
<!--keybinds-settings -->
|
||||
<!--Github-theme-settings -->
|
||||
<b-tab id="hid">
|
||||
<template>
|
||||
<themes-github/>
|
||||
</template>
|
||||
</b-tab>
|
||||
<!--Github-theme-settings -->
|
||||
<!--Github-Plugins -->
|
||||
<b-tab id="hid">
|
||||
<template>
|
||||
<plugins-github/>
|
||||
</template>
|
||||
</b-tab>
|
||||
<!--Github-Plugins -->
|
||||
<!-- Connect Settings -->
|
||||
<!-- Not Prod Ready
|
||||
<b-tab :title="$root.getLz('settings.header.connect')">
|
||||
|
|
@ -1694,7 +1521,7 @@
|
|||
})
|
||||
},
|
||||
gitHubExplore() {
|
||||
app.appRoute("themes-github")
|
||||
app.openSettingsPage("github-themes")
|
||||
},
|
||||
copyLogs() {
|
||||
ipcRenderer.send('fetch-log')
|
||||
|
|
@ -1827,84 +1654,6 @@
|
|||
const token = document.getElementById('lfmToken').value;
|
||||
ipcRenderer.send('lastfm:auth', token);
|
||||
},
|
||||
/* keybindings */
|
||||
keyBindUpdate: function (action) {
|
||||
const blur = document.createElement('div');
|
||||
blur.className = 'blur';
|
||||
blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
|
||||
blur.style.position = 'fixed';
|
||||
blur.style.top = '0';
|
||||
blur.style.left = '0';
|
||||
blur.style.width = '100%';
|
||||
blur.style.height = '100%';
|
||||
blur.style.zIndex = '20';
|
||||
blur.style.display = 'flex';
|
||||
blur.style.alignItems = 'center';
|
||||
blur.style.justifyContent = 'center';
|
||||
blur.style.fontSize = '2em';
|
||||
blur.style.color = 'white';
|
||||
blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
|
||||
document.body.appendChild(blur);
|
||||
|
||||
let keyBind = [];
|
||||
const keyBindTimeout = setTimeout(function () {
|
||||
keyBind = [];
|
||||
document.body.removeChild(blur);
|
||||
}, 30000);
|
||||
const keyBindUpdate = function (e) {
|
||||
if (document.body.contains(blur)) {
|
||||
if (e.key == 'Escape') {
|
||||
document.body.removeChild(blur);
|
||||
clearTimeout(keyBindTimeout);
|
||||
return;
|
||||
} else {
|
||||
if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
|
||||
keyBind.push(e.key.toUpperCase());
|
||||
} else {
|
||||
keyBind.push(e.key);
|
||||
}
|
||||
if (keyBind.length === 2) {
|
||||
if (keyBind[0] !== keyBind[1]) {
|
||||
app.cfg.general.keybindings[action] = keyBind
|
||||
document.body.removeChild(blur);
|
||||
clearTimeout(keyBindTimeout);
|
||||
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
|
||||
app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
|
||||
if (ok) ipcRenderer.invoke("relaunchApp")
|
||||
})
|
||||
} else {
|
||||
keyBind = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', keyBindUpdate);
|
||||
},
|
||||
keyBindReset: function () {
|
||||
app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "F"];
|
||||
app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
|
||||
app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
|
||||
app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
|
||||
app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
|
||||
app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "A"];
|
||||
app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
|
||||
app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
|
||||
app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
|
||||
app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
|
||||
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
|
||||
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
|
||||
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
|
||||
app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
|
||||
app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
|
||||
app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
|
||||
app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
|
||||
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
|
||||
app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
|
||||
if (ok) ipcRenderer.invoke("relaunchApp")
|
||||
})
|
||||
},
|
||||
/* keybindings */
|
||||
openLocalSongsPathMenu() {
|
||||
app.modals.pathMenu = true
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue