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 {
position: relative;
display: inline-block;
padding-left: 1.2em;
min-height: 1.2em;
&-indicator {
position: relative;
padding-left: 1.2em;
}
&-indicator::before {
position: absolute;
left: 0;
right: 0;
top: 0;
display: block;
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 = '') => {
return list.filter(x => x.displayText.includes(keyword))
@ -22,7 +23,8 @@ const EmojiPicker = {
}
},
components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
Checkbox
},
methods: {
onEmoji (emoji) {

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

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

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

@ -75,22 +75,10 @@
</span>
</div>
</div>
<div
class="keep-open"
>
<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">
<div class="keep-open">
<Checkbox v-model="keepOpen">
{{ $t('emoji.keep_open') }}
</div>
</label>
</Checkbox>
</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 suggestor from '../emoji_input/suggestor.js'
import { mapGetters } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue'
const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions]
@ -36,7 +37,8 @@ const PostStatusForm = {
MediaUpload,
EmojiInput,
PollForm,
ScopeSelector
ScopeSelector,
Checkbox
},
mounted () {
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"
class="upload_settings"
>
<input
id="filesSensitive"
v-model="newStatus.nsfw"
type="checkbox"
>
<label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
<Checkbox v-model="newStatus.nsfw">
{{ $t('post_status.attachments_sensitive') }}
</Checkbox>
</div>
</form>
</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 { extractCommit } from '../../services/version/version.service'
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 pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
@ -35,7 +36,8 @@ const settings = {
components: {
TabSwitcher,
StyleSwitcher,
InterfaceLanguageSwitcher
InterfaceLanguageSwitcher,
Checkbox
},
computed: {
user () {

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

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

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

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