Skip to content
This repository was archived by the owner on May 16, 2022. It is now read-only.

Commit fd377df

Browse files
davipaturydavipatury
committed
tweaks
1 parent e794613 commit fd377df

File tree

9 files changed

+118
-117
lines changed

9 files changed

+118
-117
lines changed

‎src/App.vue

-10
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,6 @@ export default {
2323
{ ch: 'utf-8' },
2424
{ n: 'viewport', c: 'width=device-width, initial-scale=1' }
2525
]
26-
},
27-
28-
created () {
29-
const token = this.$localStorage.get('token')
30-
if (token) {
31-
this.$api.loginWithToken(token).catch(e => {
32-
console.error(e)
33-
this.$localStorage.remove('token')
34-
})
35-
}
3626
}
3727
}
3828
</script>

‎src/api/VueSwitchbladeApi.js

+13
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ export default {
1919
redirectUri: options.redirectUri
2020
})
2121

22+
const token = Vue.localStorage && Vue.localStorage.get('token')
23+
if (token) {
24+
vueApi.loginWithToken(token).catch(e => {
25+
console.error(e)
26+
Vue.localStorage.remove('token')
27+
})
28+
}
29+
2230
Vue.mixin({
2331
mounted () {
2432
if (this.$route && this.$route.meta.requiresAuth && !this.$api.state.logged && !this.$api.state.logging) {
@@ -91,6 +99,11 @@ class VueSwitchbladeApi {
9199
return this._request(`/guilds/${id}/config`, { method: 'PATCH', body: entity })
92100
}
93101

102+
// Locales
103+
locales (language = 'en-US') {
104+
return this._request('/locales', { query: { language } })
105+
}
106+
94107
// Authorization
95108
loginPopup () {
96109
if (this.state.logging) return

‎src/assets/main.scss

+7-2
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,21 @@ $navbar-divider-background-color: $dark-but-not-black;
7070
$footer-background-color: $dark-but-not-black;
7171

7272
// Input
73-
$input-disabled-background-color: $dark;
7473
$input-background-color: $light-gray-but-not-so-light;
74+
$input-disabled-background-color: $dark;
75+
7576
$input-color: $white;
77+
$input-hover-color: $white;
78+
$input-focus-color: $white;
7679
$input-border-color: $light-gray-but-not-so-light;
7780

7881
// Dropdown
7982
$dropdown-item-color: $white;
8083
$dropdown-content-background-color: $light-gray-but-not-so-light;
81-
$dropdown-item-hover-background-color: $light-gray-but-not-so-light;
8284
$dropdown-item-hover-color: $primary;
85+
$dropdown-item-hover-background-color: $light-gray-but-not-so-light;
86+
$dropdown-item-active-color: $primary;
87+
$dropdown-item-active-background-color: $light-gray-but-not-so-light;
8388

8489

8590
// Global styles

‎src/components/dashboard/DashboardGeneral.vue

+44-31
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
<template>
22
<div>
33
<section v-if="loaded">
4-
<b-field label="Prefix">
5-
<b-input v-model="prefix" @input="saveSnackbar" maxlength="50" />
6-
</b-field>
7-
<b-field label="Language">
8-
<b-autocomplete
9-
v-model="languageText"
10-
:data="filteredDataObj"
11-
@select="setLanguage">
12-
<template slot="empty">No results found</template>
13-
</b-autocomplete>
14-
</b-field>
4+
<div class="columns">
5+
<div class="column is-narrow">
6+
<b-field label="Prefix">
7+
<b-input v-model="prefix" @input="saveSnackbar" maxlength="50" />
8+
</b-field>
9+
</div>
10+
<div class="column is-narrow">
11+
<b-field label="Language">
12+
<b-select v-model="language" @input="saveSnackbar">
13+
<option
14+
v-for="lang in languages"
15+
:value="lang.key"
16+
:key="lang.key"
17+
class="dashboard-option">
18+
{{ lang.displayName }}
19+
</option>
20+
</b-select>
21+
</b-field>
22+
</div>
23+
</div>
1524
</section>
1625
<b-loading :active="!loaded" />
1726
</div>
@@ -23,40 +32,41 @@ export default {
2332
props: [ 'guild' ],
2433
data: () => ({
2534
loaded: false,
35+
snackbar: false,
2636
language: null,
2737
languages: null,
28-
languageText: null,
29-
prefix: null,
30-
snackbar: false
38+
prefix: null
3139
}),
32-
computed: {
33-
filteredDataObj () {
34-
return this.languages ? this.languages.filter(o => o.toString().toLowerCase().indexOf(this.languageText) >= 0) : []
35-
}
36-
},
3740
mounted () {
38-
this.$api.guildConfiguration(this.guild.id)
39-
.then(({ language, prefix, availableLanguages }) => {
41+
Promise.all([
42+
this.$api.locales(navigator.language || navigator.userLanguage).then(({ languages }) => {
43+
this.languages = languages
44+
}),
45+
this.$api.guildConfiguration(this.guild.id).then(({ language, prefix }) => {
4046
this.language = this.languageText = language
4147
this.prefix = prefix
42-
this.languages = availableLanguages
43-
})
44-
.catch(e => this.errorToast())
45-
.finally(() => {
46-
this.loaded = true
4748
})
49+
]).catch(e => this.errorToast())
50+
.then(() => { this.loaded = true })
4851
},
4952
methods: {
5053
saveSnackbar () {
5154
if (this.snackbar) return
5255
this.snackbar = true
53-
this.$snackbar.open({
56+
const snackbar = this.$snackbar.open({
5457
message: 'You have unsaved changes!',
5558
position: 'is-top',
5659
actionText: 'Save',
5760
duration: 10000,
5861
onAction: () => this.save()
5962
})
63+
64+
const self = this
65+
snackbar.realClose = snackbar.close
66+
snackbar.close = function (...args) {
67+
self.snackbar = false
68+
this.realClose(...args)
69+
}
6070
},
6171
save () {
6272
const { language, prefix } = this
@@ -68,9 +78,6 @@ export default {
6878
})
6979
})
7080
.catch(e => this.errorToast())
71-
.finally(() => {
72-
this.snackbar = false
73-
})
7481
},
7582
errorToast () {
7683
this.$toast.open({
@@ -79,10 +86,16 @@ export default {
7986
})
8087
},
8188
setLanguage (option) {
82-
console.log('a')
8389
this.language = option
8490
this.saveSnackbar()
8591
}
8692
}
8793
}
8894
</script>
95+
96+
<style scoped>
97+
.dashboard-option {
98+
color: #fff;
99+
background-color: #484B52;
100+
}
101+
</style>

‎src/components/profile/ProfileConnections.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<section>
3-
<b-field label="last.fm" horizontal addons>
4-
<b-input v-model="lastfm" icon="account-check" expanded disabled />
5-
<p class="control">
3+
<b-field horizontal label="last.fm">
4+
<b-input v-model="lastfm" icon="account-check" disabled />
5+
<a class="control">
66
<button class="button is-danger">Disconnect</button>
7-
</p>
7+
</a>
88
</b-field>
99
</section>
1010
</template>

‎src/components/profile/ProfileSocial.vue

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<template>
22
<div>
33
<section v-if="loaded">
4-
<b-field label="Personal text">
5-
<b-input v-model="personalText" @input="saveSnackbar" type="textarea" maxlength="260" />
6-
</b-field>
7-
<b-field label="Favorite color">
8-
<swatches v-model="favColor" @input="saveSnackbar" :exceptions="['']" show-fallback />
9-
</b-field>
4+
<div class="columns">
5+
<div class="column">
6+
<b-field label="Personal text">
7+
<b-input v-model="personalText" @input="saveSnackbar" type="textarea" maxlength="260" />
8+
</b-field>
9+
</div>
10+
<div class="column">
11+
<b-field label="Favorite color">
12+
<swatches v-model="favColor" @input="saveSnackbar" :exceptions="['']" show-fallback />
13+
</b-field>
14+
</div>
15+
</div>
1016
</section>
1117
<b-loading :active="!loaded" />
1218
</div>

‎src/pages/Dashboard.vue

+19-32
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@
22
<div class="dashboard-container">
33
<div v-if="guild">
44
<ServerHero :guild="guild" />
5-
<div class="section container dashboard-horizontal">
6-
<aside class="menu dashboard-sidebar">
7-
<p class="menu-label">
8-
Dashboard
9-
</p>
10-
<ul class="menu-list">
11-
<li v-for="cat in categories" v-bind:key="cat" v-on:click="currentCat = cat">
12-
<a v-bind:class="[{ 'is-active': currentCat === cat }]">{{ cat }}</a>
13-
</li>
14-
</ul>
15-
</aside>
16-
<section class="dashboard-main">
17-
<h1 class="title is-spaced">{{ currentCat }}</h1>
18-
<component :guild="guild" v-bind:is="currentCategoryComponent" />
19-
</section>
5+
<div class="section container">
6+
<div class="columns">
7+
<div class="column">
8+
<aside class="menu">
9+
<p class="menu-label">
10+
Dashboard
11+
</p>
12+
<ul class="menu-list">
13+
<li v-for="cat in categories" v-bind:key="cat" v-on:click="currentCat = cat">
14+
<a v-bind:class="[{ 'is-active': currentCat === cat }]">{{ cat }}</a>
15+
</li>
16+
</ul>
17+
</aside>
18+
</div>
19+
<div class="column is-full">
20+
<h1 class="title is-spaced">{{ currentCat }}</h1>
21+
<component :guild="guild" v-bind:is="currentCategoryComponent" />
22+
</div>
23+
</div>
2024
</div>
2125
</div>
2226
<b-loading :active="!guild" />
@@ -56,21 +60,4 @@ export default {
5660
flex-direction: column;
5761
flex: 1;
5862
}
59-
60-
.dashboard-horizontal {
61-
display: flex;
62-
flex-direction: row;
63-
flex: 1;
64-
}
65-
66-
.dashboard-sidebar {
67-
flex-shrink: 0;
68-
}
69-
70-
.dashboard-main {
71-
padding: 0 3rem 0 3rem;
72-
display: flex;
73-
flex-direction: column;
74-
width: 100%;
75-
}
7663
</style>

‎src/pages/Profile.vue

+18-31
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@
22
<div class="profile-container">
33
<div v-if="discord.user">
44
<UserHero :user="discord.user" />
5-
<div class="section container profile-horizontal">
6-
<aside class="menu profile-sidebar">
7-
<p class="menu-label">
8-
Profile
9-
</p>
10-
<ul class="menu-list">
11-
<li v-for="cat in categories" v-bind:key="cat" v-on:click="currentCat = cat">
12-
<a v-bind:class="[{ 'is-active': currentCat === cat }]">{{ cat }}</a>
13-
</li>
14-
</ul>
15-
</aside>
16-
<section class="profile-main">
17-
<h1 class="title is-spaced">{{ currentCat }}</h1>
5+
<div class="section container">
6+
<div class="columns">
7+
<div class="column">
8+
<aside class="menu">
9+
<p class="menu-label">
10+
Profile
11+
</p>
12+
<ul class="menu-list">
13+
<li v-for="cat in categories" v-bind:key="cat" v-on:click="currentCat = cat">
14+
<a v-bind:class="[{ 'is-active': currentCat === cat }]">{{ cat }}</a>
15+
</li>
16+
</ul>
17+
</aside>
18+
</div>
19+
<div class="column is-full">
20+
<h1 class="title is-spaced">{{ currentCat }}</h1>
1821
<component v-bind:is="currentCategoryComponent" />
19-
</section>
22+
</div>
23+
</div>
2024
</div>
2125
</div>
2226
<b-loading :active="discord.logging" />
@@ -51,21 +55,4 @@ export default {
5155
flex-direction: column;
5256
flex: 1;
5357
}
54-
55-
.profile-horizontal {
56-
display: flex;
57-
flex-direction: row;
58-
flex: 1;
59-
}
60-
61-
.profile-sidebar {
62-
flex-shrink: 0;
63-
}
64-
65-
.profile-main {
66-
padding: 0 3rem 0 3rem;
67-
display: flex;
68-
flex-direction: column;
69-
width: 100%;
70-
}
7158
</style>

‎src/router/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import ServerSelector from '../pages/ServerSelector'
1616

1717
Vue.use(Buefy, { defaultTooltipAnimated: true, defaultToastDuration: 3000 })
1818

19-
Vue.use(SwitchbladeApi, { clientId: process.env.CLIENT_ID, redirectUri: process.env.REDIRECT_URI })
2019
Vue.use(LocalStorage)
2120
Vue.use(Head, { separator: '-', complement: 'Switchblade' })
2221
Vue.use(Router)
22+
Vue.use(SwitchbladeApi, { clientId: process.env.CLIENT_ID, redirectUri: process.env.REDIRECT_URI })
2323

2424
export default new Router({
2525
mode: 'history',

0 commit comments

Comments
 (0)