Make the hide button setting functional

This commit is contained in:
Samuel Elliott 2018-08-09 23:49:10 +01:00
parent 87a2db1745
commit 89a5bfba20
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
4 changed files with 51 additions and 18 deletions

View File

@ -43,9 +43,22 @@
}
}
&.bd-hide-button {
transition: opacity 0.4s ease-out;
opacity: 0;
&.bd-active {
transition-timing-function: ease-in;
}
}
&.bd-active {
background: transparent;
opacity: 1;
}
&.bd-active,
&.bd-hide-button {
background: transparent;
box-shadow: none;
.bd-settings-button-btn {

View File

@ -1,20 +1,22 @@
[class*="guildsWrapper-"] {
padding-top: 49px !important;
body:not(.bd-hide-button) {
[class*="guildsWrapper-"] {
padding-top: 49px !important;
.platform-osx & {
margin-top: 26px;
.platform-osx & {
margin-top: 26px;
}
}
}
[class*="guildsWrapper-"] + [class*="flex"] {
border-radius: 0 0 0 5px;
}
[class*="guildsWrapper-"] + [class*="flex"] {
border-radius: 0 0 0 5px;
}
[class*="unreadMentionsIndicatorTop-"] {
top: 49px;
[class*="unreadMentionsIndicatorTop-"] {
top: 49px;
.platform-osx & {
top: 50px;
.platform-osx & {
top: 50px;
}
}
}

View File

@ -8,7 +8,7 @@
* LICENSE file in the root directory of this source tree.
*/
import { Events, DiscordApi } from 'modules';
import { Events, DiscordApi, Settings } from 'modules';
import { remote } from 'electron';
import DOM from './dom';
import Vue from './vue';
@ -17,6 +17,13 @@ import { BdSettingsWrapper, BdModals, BdToasts } from './components';
export default class {
static initUiEvents() {
const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
hideButtonSetting.on('setting-updated', event => {
if (event.value) document.body.classList.add('bd-hide-button');
else document.body.classList.remove('bd-hide-button');
});
if (hideButtonSetting.value) document.body.classList.add('bd-hide-button');
this.pathCache = {
isDm: null,
server: DiscordApi.currentGuild,

View File

@ -9,8 +9,8 @@
*/
<template>
<div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
<div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating}" @click="active = true">
<div class="bd-settings-wrapper" :class="[{active}, 'platform-' + this.platform]">
<div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating, 'bd-hide-button': hideButton}" @click="active = true">
<div v-if="updating === 0" v-tooltip.right="'Checking for updates'" class="bd-settings-button-btn bd-loading"></div>
<div v-else-if="updating === 2" v-tooltip.right="'Updates available!'" class="bd-settings-button-btn bd-updates"></div>
<div v-else class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
@ -36,7 +36,9 @@
timeout: null,
platform: process.platform,
eventHandlers: {},
keybindHandler: null
keybindHandler: null,
hideButton: false,
hideButtonToggleHandler: null
};
},
components: {
@ -80,6 +82,10 @@
const menuKeybind = Settings.getSetting('core', 'default', 'menu-keybind');
menuKeybind.on('keybind-activated', this.keybindHandler = () => this.active = !this.active);
const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
hideButtonSetting.on('setting-updated', this.hideButtonToggleHandler = event => this.hideButton = event.value);
this.hideButton = hideButtonSetting.value;
},
destroyed() {
for (let event in this.eventHandlers) Events.off(event, this.eventHandlers[event]);
@ -89,7 +95,12 @@
if (this.keybindHandler) {
const menuKeybind = Settings.getSetting('core', 'default', 'menu-keybind');
menuKeybind.removeListener('keybind-activated', this.keybindHandler = () => this.active = !this.active);
menuKeybind.removeListener('keybind-activated', this.keybindHandler);
}
if (this.hideButtonToggleHandler) {
const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
hideButtonSetting.removeListener('setting-updated', this.hideButtonToggleHandler);
}
}
}