From 8d6750d9c2816e33a0444cd978f94009d8b85d47 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 5 Jul 2019 10:17:44 +0300 Subject: eslint --fix --ext .js,.vue src --- src/components/style_switcher/style_switcher.vue | 825 ++++++++++++++++------- 1 file changed, 571 insertions(+), 254 deletions(-) (limited to 'src/components/style_switcher/style_switcher.vue') diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 84963c81..97dba99d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,274 +1,591 @@ -- cgit v1.2.3-70-g09d2 From 020c6d1bcfaf67ccb9ecdab13a39a1ddea868bb6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Jul 2019 00:54:17 +0300 Subject: all the manual fixes --- .eslintrc.js | 22 +---------------- src/components/attachment/attachment.vue | 2 ++ src/components/basic_user_card/basic_user_card.vue | 2 ++ src/components/chat_panel/chat_panel.vue | 2 +- src/components/conversation/conversation.js | 1 + src/components/font_control/font_control.vue | 1 + src/components/gallery/gallery.vue | 3 ++- .../instance_specific_panel.vue | 2 ++ .../interface_language_switcher.vue | 1 + src/components/link-preview/link-preview.vue | 2 +- src/components/media_modal/media_modal.vue | 2 +- src/components/media_upload/media_upload.vue | 2 +- src/components/notification/notification.vue | 2 ++ src/components/poll/poll.vue | 2 +- src/components/poll/poll_form.vue | 1 + .../post_status_form/post_status_form.vue | 3 ++- src/components/registration/registration.vue | 7 +++++- src/components/shadow_control/shadow_control.vue | 1 + src/components/status/status.js | 2 +- src/components/status/status.vue | 28 ++++++++++++---------- src/components/style_switcher/style_switcher.vue | 2 ++ .../terms_of_service_panel.vue | 2 ++ src/components/user_card/user_card.js | 4 ++-- src/components/user_card/user_card.vue | 4 ++++ src/components/user_settings/mfa_backup_codes.vue | 5 +++- .../who_to_follow_panel/who_to_follow_panel.vue | 1 + src/modules/auth_flow.js | 1 + src/modules/users.js | 8 +++---- .../backend_interactor_service.js | 6 +++++ test/unit/karma.conf.js | 4 ++-- .../entity_normalizer/entity_normalizer.spec.js | 6 ----- 31 files changed, 74 insertions(+), 57 deletions(-) (limited to 'src/components/style_switcher/style_switcher.vue') diff --git a/.eslintrc.js b/.eslintrc.js index 7d090208..3c48baa8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,26 +21,6 @@ module.exports = { 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, - // Webpack 4 update commit, most of these probably should be fixed and removed in a separate MR - // A lot of errors come from .vue files that are now properly linted - 'vue/valid-v-if': 1, - 'vue/use-v-on-exact': 1, - 'vue/no-parsing-error': 1, - 'vue/require-v-for-key': 1, - 'vue/valid-v-for': 1, - 'vue/require-prop-types': 1, - 'vue/no-use-v-if-with-v-for': 1, - 'indent': 1, - 'import/first': 1, - 'object-curly-spacing': 1, - 'prefer-promise-reject-errors': 1, - 'eol-last': 1, - 'no-return-await': 1, - 'no-multi-spaces': 1, - 'no-trailing-spaces': 1, - 'no-unused-expressions': 1, - 'no-mixed-operators': 1, - 'camelcase': 1, - 'no-multiple-empty-lines': 1 + 'vue/require-prop-types': 0 } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 55d81691..108dc36e 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -97,8 +97,10 @@
+

{{ attachment.oembed.title }}

+
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 8ad0da2d..568e9359 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -25,11 +25,13 @@ :title="user.name" class="basic-user-card-user-name" > + +
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index cc0b0b41..a2b3aeab 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -86,6 +86,7 @@ const conversation = { }, replies () { let i = 1 + // eslint-disable-next-line camelcase return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => { /* eslint-disable camelcase */ const irid = in_reply_to_status_id diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue index 87644628..61f0384b 100644 --- a/src/components/font_control/font_control.vue +++ b/src/components/font_control/font_control.vue @@ -35,6 +35,7 @@ >
@@ -213,23 +173,19 @@

{{ $t('settings.attachments') }}

  • - - + + {{ $t('settings.hide_attachments_in_tl') }} +
  • - - + + {{ $t('settings.hide_attachments_in_convo') }} +
  • - +
  • - - + + {{ $t('settings.nsfw_clickthrough') }} +
    • - - + {{ $t('settings.preload_images') }} +
    • - - + {{ $t('settings.use_one_click_nsfw') }} +
  • - - + + {{ $t('settings.stop_gifs') }} +
  • - - + + {{ $t('settings.loop_video') }} +
    • - - + {{ $t('settings.loop_video_silent_only') }} +
    • - - + + {{ $t('settings.play_videos_in_modal') }} +
    • - - + + {{ $t('settings.use_contain_fit') }} +
@@ -326,14 +264,9 @@

{{ $t('settings.notifications') }}

  • - - +
@@ -351,44 +284,24 @@ {{ $t('settings.notification_visibility') }}
  • - - +
  • - - +
  • - - +
  • - - +
@@ -413,24 +326,14 @@
- - +
- - +
@@ -442,14 +345,9 @@ />
- - +
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index c19aaaec..6e2a1d7b 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -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 () { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index d24394a4..944debab 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -42,44 +42,29 @@
- - + + {{ $t('settings.style.switcher.keep_color') }} + - - + + {{ $t('settings.style.switcher.keep_shadows') }} + - - + + {{ $t('settings.style.switcher.keep_opacity') }} + - - + + {{ $t('settings.style.switcher.keep_roundness') }} + - - + + {{ $t('settings.style.switcher.keep_fonts') }} +

{{ $t('settings.style.switcher.save_load_hint') }}

-- cgit v1.2.3-70-g09d2 From 6511a744a29c760aa2613b0902db55be3b59dfa5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Oct 2019 23:46:40 +0300 Subject: arbitrary limit with option to overcome it --- src/App.scss | 12 ++++ src/_variables.scss | 1 + src/components/emoji_picker/emoji_picker.js | 80 ++++++++++++++++-------- src/components/emoji_picker/emoji_picker.scss | 24 ++++--- src/components/emoji_picker/emoji_picker.vue | 11 ++++ src/components/style_switcher/style_switcher.js | 3 + src/components/style_switcher/style_switcher.vue | 7 +++ src/i18n/en.json | 5 +- src/services/style_setter/style_setter.js | 5 ++ 9 files changed, 113 insertions(+), 35 deletions(-) (limited to 'src/components/style_switcher/style_switcher.vue') diff --git a/src/App.scss b/src/App.scss index 2190f91a..fe271ce1 100644 --- a/src/App.scss +++ b/src/App.scss @@ -658,6 +658,18 @@ nav { color: var(--alertErrorPanelText, $fallback--text); } } + + &.warning { + background-color: $fallback--alertWarning; + background-color: var(--alertWarning, $fallback--alertWarning); + color: $fallback--text; + color: var(--alertWarningText, $fallback--text); + + .panel-heading & { + color: $fallback--text; + color: var(--alertWarningPanelText, $fallback--text); + } + } } .faint { diff --git a/src/_variables.scss b/src/_variables.scss index 150e4fb5..e18101f0 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -17,6 +17,7 @@ $fallback--cGreen: #0fa00f; $fallback--cOrange: orange; $fallback--alertError: rgba(211,16,20,.5); +$fallback--alertWarning: rgba(111,111,20,.5); $fallback--panelRadius: 10px; $fallback--checkboxRadius: 2px; diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 81f7437f..11dbdf44 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,5 +1,9 @@ import { set } from 'vue' +const LOAD_EMOJI_BY = 50 +const LOAD_EMOJI_INTERVAL = 100 +const LOAD_EMOJI_SANE_AMOUNT = 500 + const filterByKeyword = (list, keyword = '') => { return list.filter(x => x.displayText.includes(keyword)) } @@ -21,13 +25,17 @@ const EmojiPicker = { groupsScrolledClass: 'scrolled-top', keepOpen: false, customEmojiBuffer: [], - customEmojiInterval: null, - customEmojiCounter: 0 + customEmojiTimeout: null, + customEmojiCounter: 0, + customEmojiLoadAllConfirmed: false } }, components: { StickerPicker: () => import('../sticker_picker/sticker_picker.vue') }, + mounted () { + this.startEmojiLoad() + }, methods: { onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement @@ -61,35 +69,39 @@ const EmojiPicker = { }) }) }, - restartInterval () { - const customEmojis = filterByKeyword( - this.$store.state.instance.customEmoji || [], - this.keyword - ) - const amount = 50 - const interval = 100 + loadEmojiInsane () { + this.customEmojiLoadAllConfirmed = true + this.continueEmojiLoad() + }, + loadEmoji () { + const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length + const saneLoaded = this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && + !this.customEmojiLoadAllConfirmed - if (this.customEmojiInterval) { - window.clearInterval(this.customEmojiInterval) + if (allLoaded || saneLoaded) { + return } - window.setTimeout( - window.clearInterval(this.customEmojiInterval), - 1000 + + this.customEmojiBuffer.push( + ...this.filteredEmoji.slice( + this.customEmojiCounter, + this.customEmojiCounter + LOAD_EMOJI_BY + ) ) + this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) + this.customEmojiCounter += LOAD_EMOJI_BY + }, + startEmojiLoad () { + if (this.customEmojiTimeout) { + window.clearTimeout(this.customEmojiTimeout) + } + set(this, 'customEmojiBuffer', []) this.customEmojiCounter = 0 - this.customEmojiInterval = window.setInterval(() => { - console.log(this.customEmojiBuffer.length) - console.log(customEmojis.length) - if (this.customEmojiBuffer.length < customEmojis.length) { - this.customEmojiBuffer.push( - ...customEmojis.slice(this.customEmojiCounter, this.customEmojiCounter + amount) - ) - } else { - window.clearInterval(this.customEmojiInterval) - } - this.customEmojiCounter += amount - }, interval) + this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) + }, + continueEmojiLoad () { + this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL) }, toggleStickers () { this.showingStickers = !this.showingStickers @@ -107,7 +119,7 @@ const EmojiPicker = { watch: { keyword () { this.scrolledGroup() - this.restartInterval() + this.startEmojiLoad() } }, computed: { @@ -120,6 +132,20 @@ const EmojiPicker = { } return 0 }, + saneAmount () { + // for UI + return LOAD_EMOJI_SANE_AMOUNT + }, + filteredEmoji () { + return filterByKeyword( + this.$store.state.instance.customEmoji || [], + this.keyword + ) + }, + askForSanity () { + return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT && + !this.customEmojiLoadAllConfirmed + }, emojis () { const standardEmojis = this.$store.state.instance.emoji || [] const customEmojis = this.customEmojiBuffer diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index b0ed00e9..6608f393 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -6,14 +6,20 @@ position: absolute; right: 0; left: 0; - height: 320px; margin: 0 !important; z-index: 1; - .keep-open { + .keep-open, + .too-many-emoji { padding: 7px; line-height: normal; } + + .too-many-emoji { + display: flex; + flex-direction: column; + } + .keep-open-label { padding: 0 7px; display: flex; @@ -28,7 +34,7 @@ .content { display: flex; flex-direction: column; - flex: 1 1 0; + flex: 1 1 auto; min-height: 0px; } @@ -36,12 +42,16 @@ flex-grow: 1; } + .emoji-groups { + min-height: 200px; + } + .additional-tabs { border-left: 1px solid; border-left-color: $fallback--icon; border-left-color: var(--icon, $fallback--icon); padding-left: 7px; - flex: 0 0 0; + flex: 0 0 auto; } .additional-tabs, @@ -72,7 +82,7 @@ } .sticker-picker { - flex: 1 1 0 + flex: 1 1 auto } .stickers, @@ -80,7 +90,7 @@ &-content { display: flex; flex-direction: column; - flex: 1 1 0; + flex: 1 1 auto; min-height: 0; &.hidden { @@ -94,7 +104,7 @@ .emoji { &-search { padding: 5px; - flex: 0 0 0; + flex: 0 0 auto; input { width: 100%; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 42f20130..d9daac3e 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -92,6 +92,17 @@ +
+
+ {{ $t('emoji.load_all_hint', { saneAmount } ) }} +
+ +
+ +

{{ $t('settings.style.advanced_colors.badge') }}

diff --git a/src/i18n/en.json b/src/i18n/en.json index 32c25e3e..c6c98c48 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -114,7 +114,9 @@ "search_emoji": "Search for an emoji", "add_emoji": "Insert emoji", "custom": "Custom emoji", - "unicode": "Unicode emoji" + "unicode": "Unicode emoji", + "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.", + "load_all": "Loading all {emojiAmount} emoji" }, "interactions": { "favs_repeats": "Repeats and Favorites", @@ -387,6 +389,7 @@ "_tab_label": "Advanced", "alert": "Alert background", "alert_error": "Error", + "alert_warning": "Warning", "badge": "Badge background", "badge_notification": "Notification", "panel_header": "Panel header", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 1cf7edc3..eaa495c4 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -215,6 +215,10 @@ const generateColors = (input) => { colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text) colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText) + colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange) + colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text) + colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText) + colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed) colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb @@ -222,6 +226,7 @@ const generateColors = (input) => { if (typeof v === 'undefined') return if (k === 'alert') { colors.alertError.a = v + colors.alertWarning.a = v return } if (k === 'faint') { -- cgit v1.2.3-70-g09d2