xarvos/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

replace checkboxes in user-settings with Checkbox component

Browse source
This commit is contained in:
Henry Jameson 2019-10-07 00:05:21 +03:00
parent 0be86304d2
commit 8ee50f9f16
3 changed files with 69 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/checkbox/checkbox.vue
View file

@ -1,13 +1,22 @@
<template>
<label class="checkbox">
<label
class="checkbox"
:class="{ disabled, indeterminate }"
>
<input
type="checkbox"
:disabled="disabled"
:checked="checked"
:indeterminate.prop="indeterminate"
@change="$emit('change', $event.target.checked)"
>
<i class="checkbox-indicator" />
<span v-if="!!$slots.default"><slot /></span>
<span
class="label"
v-if="!!$slots.default"
>
<slot />
</span>
</label>
</template>
@ -17,7 +26,11 @@ export default {
prop: 'checked',
event: 'change'
},
props: ['checked', 'indeterminate']
props: [
'checked',
'indeterminate',
'disabled'
]
}
</script>
@ -54,6 +67,17 @@ export default {
box-sizing: border-box;
}
&.disabled {
.checkbox-indicator::before,
.label {
opacity: .5;
}
.label {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
}
input[type=checkbox] {
display: none;
@ -68,9 +92,6 @@ export default {
color: var(--text, $fallback--text);
}
&:disabled + .checkbox-indicator::before {
opacity: .5;
}
}
& > span {

4
src/components/user_settings/user_settings.js
View file

@ -17,6 +17,7 @@ import Autosuggest from '../autosuggest/autosuggest.vue'
import Importer from '../importer/importer.vue'
import Exporter from '../exporter/exporter.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription'
import Checkbox from '../checkbox/checkbox.vue'
import Mfa from './mfa.vue'
const BlockList = withSubscription({
@ -82,7 +83,8 @@ const UserSettings = {
ProgressButton,
Importer,
Exporter,
Mfa
Mfa,
Checkbox
},
computed: {
user () {

118
src/components/user_settings/user_settings.vue
View file

@ -53,12 +53,9 @@
/>
</EmojiInput>
<p>
<input
id="account-locked"
v-model="newLocked"
type="checkbox"
>
<label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
<Checkbox v-model="newLocked">
{{ $t('settings.lock_account_description') }}
</Checkbox>
</p>
<div>
<label for="default-vis">{{ $t('settings.default_vis') }}</label>
@ -75,69 +72,52 @@
</div>
</div>
<p>
<input
id="account-no-rich-text"
v-model="newNoRichText"
type="checkbox"
>
<label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
<Checkbox v-model="newNoRichText">
{{ $t('settings.no_rich_text_description') }}
</Checkbox>
</p>
<p>
<input
id="account-hide-follows"
v-model="hideFollows"
type="checkbox"
>
<label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
<Checkbox v-model="hideFollows">
{{ $t('settings.hide_follows_description') }}
</Checkbox>
</p>
<p class="setting-subitem">
<input
id="account-hide-follows-count"
<Checkbox
v-model="hideFollowsCount"
type="checkbox"
:disabled="!hideFollows"
>
<label for="account-hide-follows-count">{{ $t('settings.hide_follows_count_description') }}</label>
>
{{ $t('settings.hide_follows_count_description') }}
</Checkbox>
</p>
<p>
<input
id="account-hide-followers"
<Checkbox
v-model="hideFollowers"
type="checkbox"
>
<label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
>
{{ $t('settings.hide_followers_description') }}
</Checkbox>
</p>
<p class="setting-subitem">
<input
id="account-hide-followers-count"
<Checkbox
v-model="hideFollowersCount"
type="checkbox"
:disabled="!hideFollowers"
>
<label for="account-hide-followers-count">{{ $t('settings.hide_followers_count_description') }}</label>
{{ $t('settings.hide_followers_count_description') }}
</Checkbox>
</p>
<p>
<input
id="account-show-role"
v-model="showRole"
type="checkbox"
>
<label
v-if="role === 'admin'"
for="account-show-role"
>{{ $t('settings.show_admin_badge') }}</label>
<label
v-if="role === 'moderator'"
for="account-show-role"
>{{ $t('settings.show_moderator_badge') }}</label>
<Checkbox v-model="showRole">
<template v-if="role === 'admin'">
{{ $t('settings.show_admin_badge') }}
</template>
<template v-if="role === 'moderator'">
{{ $t('settings.show_moderator_badge') }}
</template>
</Checkbox>
</p>
<p>
<input
id="discoverable"
v-model="discoverable"
type="checkbox"
>
<label for="discoverable">{{ $t('settings.discoverable') }}</label>
<Checkbox v-model="discoverable">
{{ $t('settings.discoverable') }}
</Checkbox>
</p>
<button
:disabled="newName && newName.length === 0"
@ -367,44 +347,24 @@
<span class="label">{{ $t('settings.notification_setting') }}</span>
<ul class="option-list">
<li>
<input
id="notification-setting-follows"
v-model="notificationSettings.follows"
type="checkbox"
>
<label for="notification-setting-follows">
<Checkbox v-model="notificationSettings.follows">
{{ $t('settings.notification_setting_follows') }}
</label>
</Checkbox>
</li>
<li>
<input
id="notification-setting-followers"
v-model="notificationSettings.followers"
type="checkbox"
>
<label for="notification-setting-followers">
<Checkbox v-model="notificationSettings.followers">
{{ $t('settings.notification_setting_followers') }}
</label>
</Checkbox>
</li>
<li>
<input
id="notification-setting-non-follows"
v-model="notificationSettings.non_follows"
type="checkbox"
>
<label for="notification-setting-non-follows">
<Checkbox v-model="notificationSettings.non_follows">
{{ $t('settings.notification_setting_non_follows') }}
</label>
</Checkbox>
</li>
<li>
<input
id="notification-setting-non-followers"
v-model="notificationSettings.non_followers"
type="checkbox"
>
<label for="notification-setting-non-followers">
<Checkbox v-model="notificationSettings.non_followers">
{{ $t('settings.notification_setting_non_followers') }}
</label>
</Checkbox>
</li>
</ul>
</div>