From 79efe0646cb6fc88952e33e13a8ce61205d3aad6 Mon Sep 17 00:00:00 2001 From: jared Date: Tue, 2 Apr 2019 10:53:33 -0400 Subject: merge develop --- src/components/status/status.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1f415534..690e8318 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -98,16 +98,16 @@
- Show more -
- Show less + {{$t("general.show_more")}} +
+ {{$t("general.show_less")}}
- Show more -
+ {{$t("general.show_more")}} +
- Show more - Show less + {{$t("general.show_more")}} + {{$t("general.show_less")}}
-- cgit v1.2.3-70-g09d2 From 14df84d89bfc58f564697b7d72d7c66134c64697 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 8 Sep 2019 15:51:17 +0300 Subject: fixed some bugs, added spam mode, minor collateral fixes --- src/components/emoji_input/emoji_input.js | 28 +++++++++++++----- src/components/emoji_picker/emoji_picker.js | 7 +++-- src/components/emoji_picker/emoji_picker.scss | 33 +++++++++++++++++----- src/components/emoji_picker/emoji_picker.vue | 16 +++++++++-- .../post_status_form/post_status_form.js | 2 +- .../post_status_form/post_status_form.vue | 2 +- src/components/status/status.vue | 2 +- src/components/user_panel/user_panel.vue | 2 +- src/i18n/en.json | 1 + 9 files changed, 69 insertions(+), 24 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 5ff27b20..b1640753 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -77,7 +77,9 @@ const EmojiInput = { caret: 0, focused: false, blurTimeout: null, - showPicker: false + showPicker: false, + spamMode: false, + disableClickOutside: false } }, components: { @@ -100,7 +102,7 @@ const EmojiInput = { })) }, showSuggestions () { - return this.focused && this.suggestions && this.suggestions.length > 0 + return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker }, textAtCaret () { return (this.wordAtCaret || {}).word || '' @@ -142,6 +144,13 @@ const EmojiInput = { methods: { triggerShowPicker () { this.showPicker = true + // This temporarily disables "click outside" handler + // since external trigger also means click originates + // from outside, thus preventing picker from opening + this.disableClickOutside = true + setTimeout(() => { + this.disableClickOutside = false + }, 0) }, togglePicker () { this.showPicker = !this.showPicker @@ -151,12 +160,13 @@ const EmojiInput = { this.$emit('input', newValue) this.caret = 0 }, - insert (insertion) { + insert ({ insertion, spamMode }) { const newValue = [ this.value.substring(0, this.caret), insertion, this.value.substring(this.caret) ].join('') + this.spamMode = spamMode this.$emit('input', newValue) const position = this.caret + insertion.length @@ -191,7 +201,7 @@ const EmojiInput = { }, cycleBackward (e) { const len = this.suggestions.length || 0 - if (len > 0) { + if (len > 1) { this.highlighted -= 1 if (this.highlighted < 0) { this.highlighted = this.suggestions.length - 1 @@ -203,7 +213,7 @@ const EmojiInput = { }, cycleForward (e) { const len = this.suggestions.length || 0 - if (len > 0) { + if (len > 1) { this.highlighted += 1 if (this.highlighted >= len) { this.highlighted = 0 @@ -234,7 +244,10 @@ const EmojiInput = { this.blurTimeout = null } - this.showPicker = false + console.log(this.spamMode) + if (!this.spamMode) { + this.showPicker = false + } this.focused = true this.setCaret(e) this.resize() @@ -280,7 +293,8 @@ const EmojiInput = { this.resize() this.$emit('input', e.target.value) }, - onClickOutside () { + onClickOutside (e) { + if (this.disableClickOutside) return this.showPicker = false }, onStickerUploaded (e) { diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 0a64f759..bce5026e 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -13,9 +13,11 @@ const EmojiPicker = { }, data () { return { + labelKey: String(Math.random() * 100000), keyword: '', activeGroup: 'custom', - showingStickers: false + showingStickers: false, + spamMode: false } }, components: { @@ -24,8 +26,7 @@ const EmojiPicker = { methods: { onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement - this.$emit('emoji', ` ${value} `) - this.open = false + this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode }) }, highlight (key) { const ref = this.$refs['group-' + key] diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 6c13e82b..079eb362 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -10,29 +10,48 @@ margin: 0 !important; z-index: 1; - .panel-body { + .spam-mode { + padding: 7px; + line-height: normal; + } + .spam-mode-label { + padding: 7px; + } + + .heading { + display: flex; + height: 32px; + padding: 10px 7px 5px; + } + + .content { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0px; } + .emoji-tabs { + flex-grow: 1; + } + .additional-tabs { border-left: 1px solid; border-left-color: $fallback--icon; border-left-color: var(--icon, $fallback--icon); - padding-left: 5px; + padding-left: 7px; flex: 0 0 0; } - .emoji-tabs { - flex: 1 1 0; - } - .additional-tabs, .emoji-tabs { + display: block; + min-width: 0; + flex-basis: auto; + flex-shrink: 1; + &-item { - padding: 0 5px; + padding: 0 7px; cursor: pointer; font-size: 24px; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 12b1569e..901520aa 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -1,6 +1,6 @@ diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a0756ae4..771615f3 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -696,22 +696,6 @@ $status-margin: 0.75em; line-height: 1.4em; white-space: pre-wrap; - .emoji-container { - display: inline-block; - width: 32px; - height: 32px; - z-index: 1; - - &:hover { - z-index: 2; - - .emoji { - transform: scale(3); - z-index: 2; - } - } - } - img, video { max-width: 100%; max-height: 400px; @@ -721,9 +705,6 @@ $status-margin: 0.75em; &.emoji { width: 32px; height: 32px; - transition: transform 200ms; - transform: scale(1); - pointer-events: none; } } diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 17b4a6e0..6cc1851d 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => { return emojis.reduce((acc, emoji) => { return acc.replace( new RegExp(`:${emoji.shortcode}:`, 'g'), - `${emoji.shortcode}` + `${emoji.shortcode}` ) }, string) } diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js index 24aef5cd..20e03cb0 100644 --- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js +++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js @@ -323,9 +323,9 @@ describe('API Entities normalizer', () => { describe('MastoAPI emoji adder', () => { const emojis = makeMockEmojiMasto() - const imageHtml = 'image' + const imageHtml = 'image' .replace(/"/g, '\'') - const thinkHtml = 'thinking' + const thinkHtml = 'thinking' .replace(/"/g, '\'') it('correctly replaces shortcodes in supplied string', () => { -- cgit v1.2.3-70-g09d2 From d2fe79782119c061173c1b07753f634f0766bae9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Sep 2019 02:14:40 +0300 Subject: update status/user card to use same gradient mask fading effect instead of background hack --- src/components/status/status.vue | 16 ++++++++++------ src/components/user_card/user_card.js | 11 +---------- src/components/user_card/user_card.vue | 30 ++++++++++++++++++++++++++---- 3 files changed, 37 insertions(+), 20 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 771615f3..93f37a49 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -665,6 +665,15 @@ $status-margin: 0.75em; height: 220px; overflow-x: hidden; overflow-y: hidden; + z-index: 1; + .status-content { + height: 100%; + mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, + linear-gradient(to top, white, white); + // Autoprefixed seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + } } .tall-status-hider { @@ -676,12 +685,7 @@ $status-margin: 0.75em; width: 100%; text-align: center; line-height: 110px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); - &_focused { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%); - } + z-index: 2; } .status-unhider, .cw-status-hider { diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 82d3b835..e41a3180 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -38,19 +38,10 @@ export default { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` - const gradient = [ - [tintColor, this.hideBio ? '60%' : ''], - this.hideBio ? [ - color, '100%' - ] : [ - tintColor, '' - ] - ].map(_ => _.join(' ')).join(', ') - return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, backgroundImage: [ - `linear-gradient(to bottom, ${gradient})`, + `linear-gradient(to bottom, ${tintColor}, ${tintColor})`, `url(${this.user.cover_photo})` ].join(', ') } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index fc18e240..c2626260 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -2,8 +2,9 @@
+
+