moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replaced most trivial checkboxes with Checkbox component

This commit is contained in:
Henry Jameson 2019-10-07 20:43:23 +03:00
parent 8ee50f9f16
commit e7532464e3
10 changed files with 122 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/checkbox/checkbox.vue
View File

@ -40,12 +40,16 @@ export default {
.checkbox { .checkbox {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 1.2em;
min-height: 1.2em; min-height: 1.2em;
&-indicator {
position: relative;
padding-left: 1.2em;
}
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
left: 0; right: 0;
top: 0; top: 0;
display: block; display: block;
content: '✔'; content: '✔';

4
src/components/emoji_picker/emoji_picker.js
View File

@ -1,3 +1,4 @@
import Checkbox from '../checkbox/checkbox.vue'
const filterByKeyword = (list, keyword = '') => { const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.displayText.includes(keyword)) return list.filter(x => x.displayText.includes(keyword))
@ -22,7 +23,8 @@ const EmojiPicker = {
} }
}, },
components: { components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue') StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
Checkbox
}, },
methods: { methods: {
onEmoji (emoji) { onEmoji (emoji) {

4
src/components/emoji_picker/emoji_picker.scss
View File

@ -14,10 +14,6 @@
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
} }
.keep-open-label {
padding: 0 7px;
display: flex;
}
.heading { .heading {
display: flex; display: flex;

18
src/components/emoji_picker/emoji_picker.vue
View File

@ -75,22 +75,10 @@
</span> </span>
</div> </div>
</div> </div>
<div <div class="keep-open">
class="keep-open" <Checkbox v-model="keepOpen">
>
<input
:id="labelKey + 'keep-open'"
v-model="keepOpen"
type="checkbox"
>
<label
class="keep-open-label"
:for="labelKey + 'keep-open'"
>
<div class="keep-open-label-text">
{{ $t('emoji.keep_open') }} {{ $t('emoji.keep_open') }}
</div> </Checkbox>
</label>
</div> </div>
</div> </div>
<div <div

4
src/components/post_status_form/post_status_form.js
View File

@ -8,6 +8,7 @@ import { findOffset } from '../../services/offset_finder/offset_finder.service.j
import { reject, map, uniqBy } from 'lodash' import { reject, map, uniqBy } from 'lodash'
import suggestor from '../emoji_input/suggestor.js' import suggestor from '../emoji_input/suggestor.js'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue'
const buildMentionsString = ({ user, attentions = [] }, currentUser) => { const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions] let allAttentions = [...attentions]
@ -36,7 +37,8 @@ const PostStatusForm = {
MediaUpload, MediaUpload,
EmojiInput, EmojiInput,
PollForm, PollForm,
ScopeSelector ScopeSelector,
Checkbox
}, },
mounted () { mounted () {
this.resize(this.$refs.textarea) this.resize(this.$refs.textarea)

9
src/components/post_status_form/post_status_form.vue
View File

@ -261,12 +261,9 @@
v-if="newStatus.files.length > 0" v-if="newStatus.files.length > 0"
class="upload_settings" class="upload_settings"
> >
<input <Checkbox v-model="newStatus.nsfw">
id="filesSensitive" {{ $t('post_status.attachments_sensitive') }}
v-model="newStatus.nsfw" </Checkbox>
type="checkbox"
>
<label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
</div> </div>
</form> </form>
</div> </div>

4
src/components/settings/settings.js
View File

@ -6,6 +6,7 @@ import StyleSwitcher from '../style_switcher/style_switcher.vue'
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
import { extractCommit } from '../../services/version/version.service' import { extractCommit } from '../../services/version/version.service'
import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js' import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js'
import Checkbox from '../checkbox/checkbox.vue'
const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/' const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/' const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
@ -35,7 +36,8 @@ const settings = {
components: { components: {
TabSwitcher, TabSwitcher,
StyleSwitcher, StyleSwitcher,
InterfaceLanguageSwitcher InterfaceLanguageSwitcher,
Checkbox
}, },
computed: { computed: {
user () { user () {

266
src/components/settings/settings.vue
View File

@ -36,12 +36,9 @@
<interface-language-switcher /> <interface-language-switcher />
</li> </li>
<li v-if="instanceSpecificPanelPresent"> <li v-if="instanceSpecificPanelPresent">
<input <Checkbox v-model="hideISP">
id="hideISP" {{ $t('settings.hide_isp') }}
v-model="hideISP" </Checkbox>
type="checkbox"
>
<label for="hideISP">{{ $t('settings.hide_isp') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -49,58 +46,42 @@
<h2>{{ $t('nav.timeline') }}</h2> <h2>{{ $t('nav.timeline') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="hideMutedPosts">
id="hideMutedPosts" {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
v-model="hideMutedPosts" </Checkbox>
type="checkbox"
>
<label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="collapseMessageWithSubject">
id="collapseMessageWithSubject" {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
v-model="collapseMessageWithSubject" </Checkbox>
type="checkbox"
>
<label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="streaming">
id="streaming" {{ $t('settings.streaming') }}
v-model="streaming" </Checkbox>
type="checkbox"
>
<label for="streaming">{{ $t('settings.streaming') }}</label>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streaming}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<input <Checkbox
id="pauseOnUnfocused"
v-model="pauseOnUnfocused" v-model="pauseOnUnfocused"
:disabled="!streaming" :disabled="!streaming"
type="checkbox"
> >
<label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label> {{ $t('settings.pause_on_unfocused') }}
</Checkbox>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<input <Checkbox v-model="autoLoad">
id="autoload" {{ $t('settings.autoload') }}
v-model="autoLoad" </Checkbox>
type="checkbox"
>
<label for="autoload">{{ $t('settings.autoload') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="hoverPreview">
id="hoverPreview" {{ $t('settings.reply_link_preview') }}
v-model="hoverPreview" </Checkbox>
type="checkbox"
>
<label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -109,24 +90,14 @@
<h2>{{ $t('settings.composing') }}</h2> <h2>{{ $t('settings.composing') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="scopeCopy">
id="scopeCopy"
v-model="scopeCopy"
type="checkbox"
>
<label for="scopeCopy">
{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }} {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="alwaysShowSubjectInput">
id="subjectHide"
v-model="alwaysShowSubjectInput"
type="checkbox"
>
<label for="subjectHide">
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }} {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
</label> </Checkbox>
</li> </li>
<li> <li>
<div> <div>
@ -181,30 +152,19 @@
</div> </div>
</li> </li>
<li> <li>
<input <Checkbox v-model="minimalScopesMode">
id="minimalScopesMode"
v-model="minimalScopesMode"
type="checkbox"
>
<label for="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }} {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="autohideFloatingPostButton">
id="autohideFloatingPostButton" {{ $t('settings.autohide_floating_post_button') }}
v-model="autohideFloatingPostButton" </Checkbox>
type="checkbox"
>
<label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="padEmoji">
id="padEmoji" {{ $t('settings.pad_emoji') }}
v-model="padEmoji" </Checkbox>
type="checkbox"
>
<label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -213,23 +173,19 @@
<h2>{{ $t('settings.attachments') }}</h2> <h2>{{ $t('settings.attachments') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="hideAttachments">
id="hideAttachments" {{ $t('settings.hide_attachments_in_tl') }}
v-model="hideAttachments" </Checkbox>
type="checkbox"
>
<label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="hideAttachmentsInConv">
id="hideAttachmentsInConv" {{ $t('settings.hide_attachments_in_convo') }}
v-model="hideAttachmentsInConv" </Checkbox>
type="checkbox"
>
<label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
</li> </li>
<li> <li>
<label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label> <label for="maxThumbnails">
{{ $t('settings.max_thumbnails') }}
</label>
<input <input
id="maxThumbnails" id="maxThumbnails"
v-model.number="maxThumbnails" v-model.number="maxThumbnails"
@ -240,60 +196,48 @@
> >
</li> </li>
<li> <li>
<input <Checkbox v-model="hideNsfw">
id="hideNsfw" {{ $t('settings.nsfw_clickthrough') }}
v-model="hideNsfw" </Checkbox>
type="checkbox"
>
<label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
</li> </li>
<ul class="setting-list suboptions"> <ul class="setting-list suboptions">
<li> <li>
<input <Checkbox
id="preloadImage"
v-model="preloadImage" v-model="preloadImage"
:disabled="!hideNsfw" :disabled="!hideNsfw"
type="checkbox"
> >
<label for="preloadImage">{{ $t('settings.preload_images') }}</label> {{ $t('settings.preload_images') }}
</Checkbox>
</li> </li>
<li> <li>
<input <Checkbox
id="useOneClickNsfw"
v-model="useOneClickNsfw" v-model="useOneClickNsfw"
:disabled="!hideNsfw" :disabled="!hideNsfw"
type="checkbox"
> >
<label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label> {{ $t('settings.use_one_click_nsfw') }}
</Checkbox>
</li> </li>
</ul> </ul>
<li> <li>
<input <Checkbox v-model="stopGifs">
id="stopGifs" {{ $t('settings.stop_gifs') }}
v-model="stopGifs" </Checkbox>
type="checkbox"
>
<label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="loopVideo">
id="loopVideo" {{ $t('settings.loop_video') }}
v-model="loopVideo" </Checkbox>
type="checkbox"
>
<label for="loopVideo">{{ $t('settings.loop_video') }}</label>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streaming}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<input <Checkbox
id="loopVideoSilentOnly"
v-model="loopVideoSilentOnly" v-model="loopVideoSilentOnly"
:disabled="!loopVideo || !loopSilentAvailable" :disabled="!loopVideo || !loopSilentAvailable"
type="checkbox"
> >
<label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label> {{ $t('settings.loop_video_silent_only') }}
</Checkbox>
<div <div
v-if="!loopSilentAvailable" v-if="!loopSilentAvailable"
class="unavailable" class="unavailable"
@ -304,20 +248,14 @@
</ul> </ul>
</li> </li>
<li> <li>
<input <Checkbox v-model="playVideosInModal">
id="playVideosInModal" {{ $t('settings.play_videos_in_modal') }}
v-model="playVideosInModal" </Checkbox>
type="checkbox"
>
<label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="useContainFit">
id="useContainFit" {{ $t('settings.use_contain_fit') }}
v-model="useContainFit" </Checkbox>
type="checkbox"
>
<label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -326,14 +264,9 @@
<h2>{{ $t('settings.notifications') }}</h2> <h2>{{ $t('settings.notifications') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="webPushNotifications">
id="webPushNotifications"
v-model="webPushNotifications"
type="checkbox"
>
<label for="webPushNotifications">
{{ $t('settings.enable_web_push_notifications') }} {{ $t('settings.enable_web_push_notifications') }}
</label> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
@ -351,44 +284,24 @@
<span class="label">{{ $t('settings.notification_visibility') }}</span> <span class="label">{{ $t('settings.notification_visibility') }}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<input <Checkbox v-model="notificationVisibility.likes">
id="notification-visibility-likes"
v-model="notificationVisibility.likes"
type="checkbox"
>
<label for="notification-visibility-likes">
{{ $t('settings.notification_visibility_likes') }} {{ $t('settings.notification_visibility_likes') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationVisibility.repeats">
id="notification-visibility-repeats"
v-model="notificationVisibility.repeats"
type="checkbox"
>
<label for="notification-visibility-repeats">
{{ $t('settings.notification_visibility_repeats') }} {{ $t('settings.notification_visibility_repeats') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationVisibility.follows">
id="notification-visibility-follows"
v-model="notificationVisibility.follows"
type="checkbox"
>
<label for="notification-visibility-follows">
{{ $t('settings.notification_visibility_follows') }} {{ $t('settings.notification_visibility_follows') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationVisibility.mentions">
id="notification-visibility-mentions"
v-model="notificationVisibility.mentions"
type="checkbox"
>
<label for="notification-visibility-mentions">
{{ $t('settings.notification_visibility_mentions') }} {{ $t('settings.notification_visibility_mentions') }}
</label> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
@ -413,24 +326,14 @@
</label> </label>
</div> </div>
<div> <div>
<input <Checkbox v-model="hidePostStats">
id="hidePostStats"
v-model="hidePostStats"
type="checkbox"
>
<label for="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }} {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
</label> </Checkbox>
</div> </div>
<div> <div>
<input <Checkbox v-model="hideUserStats">
id="hideUserStats"
v-model="hideUserStats"
type="checkbox"
>
<label for="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }} {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
</label> </Checkbox>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -442,14 +345,9 @@
/> />
</div> </div>
<div> <div>
<input <Checkbox v-model="hideFilteredStatuses">
id="hideFilteredStatuses"
v-model="hideFilteredStatuses"
type="checkbox"
>
<label for="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }} {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
</label> </Checkbox>
</div> </div>
</div> </div>
</div> </div>

4
src/components/style_switcher/style_switcher.js
View File

@ -10,6 +10,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import TabSwitcher from '../tab_switcher/tab_switcher.js' import TabSwitcher from '../tab_switcher/tab_switcher.js'
import Preview from './preview.vue' import Preview from './preview.vue'
import ExportImport from '../export_import/export_import.vue' import ExportImport from '../export_import/export_import.vue'
import Checkbox from '../checkbox/checkbox.vue'
// List of color values used in v1 // List of color values used in v1
const v1OnlyNames = [ const v1OnlyNames = [
@ -338,7 +339,8 @@ export default {
FontControl, FontControl,
TabSwitcher, TabSwitcher,
Preview, Preview,
ExportImport ExportImport,
Checkbox
}, },
methods: { methods: {
setCustomTheme () { setCustomTheme () {

45
src/components/style_switcher/style_switcher.vue
View File

@ -42,44 +42,29 @@
</div> </div>
<div class="save-load-options"> <div class="save-load-options">
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepColor">
id="keep-color" {{ $t('settings.style.switcher.keep_color') }}
v-model="keepColor" </Checkbox>
type="checkbox"
>
<label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepShadows">
id="keep-shadows" {{ $t('settings.style.switcher.keep_shadows') }}
v-model="keepShadows" </Checkbox>
type="checkbox"
>
<label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepOpacity">
id="keep-opacity" {{ $t('settings.style.switcher.keep_opacity') }}
v-model="keepOpacity" </Checkbox>
type="checkbox"
>
<label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepRoundness">
id="keep-roundness" {{ $t('settings.style.switcher.keep_roundness') }}
v-model="keepRoundness" </Checkbox>
type="checkbox"
>
<label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepFonts">
id="keep-fonts" {{ $t('settings.style.switcher.keep_fonts') }}
v-model="keepFonts" </Checkbox>
type="checkbox"
>
<label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
</span> </span>
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p> <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
</div> </div>