No OneTemporary
Actions

Size

40 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index dbba715c06..2685fd324b 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,232 +1,233 @@
	# Changelog
	All notable changes to this project will be documented in this file.

	The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).

	## [Unreleased]
	### Fixed
	- Button to remove uploaded media in post status form is now properly placed and sized.
	- Fixed shoutbox not working in mobile layout
	- Fixed missing highlighted border in expanded conversations again
	- Fixed some UI jumpiness when opening images particularly in chat view
	- Fixed chat unread badge looking weird

	### Changed
	- Display 'people voted' instead of 'votes' for multi-choice polls
	- Optimized chat to not get horrible performance after keeping the same chat open for a long time
	+- When opening emoji picker or react picker, it automatically focuses the search field

	### Added
	- Added reason field for registration when approval is required

	## [2.2.3] - 2021-01-18
	### Added
	- Added Report button to status ellipsis menu for easier reporting

	### Fixed
	- Follows/Followers tabs on user profiles now display the content properly.
	- Handle punycode in screen names

	### Changed
	- Don't filter own posts when they hit your wordfilter
	- Language picker now uses native language names


	## [2.2.2] - 2020-12-22
	### Added
	- Mouseover titles for emojis in reaction picker
	- Support to input emoji into the search box in reaction picker
	- Added some missing unicode emoji
	- Added the upload limit to the Features panel in the About page
	- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
	- Group staff members by role in the About page

	### Fixed
	- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
	- Fixed timeline errors locking timelines
	- Fixed missing highlighted border in expanded conversations
	- Fixed custom emoji not working in profile field names
	- Fixed pinned statuses not appearing in user profiles
	- Fixed some elements not being keyboard navigation friendly
	- Fixed error handling when updating various profile images
	- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
	- Fixed custom emoji not showing in poll options before voting
	- Fixed link color not applied to instance name in topbar

	### Changed
	- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
	- Made reply/fav/repeat etc buttons easier to hit
	- Adjusted timeline menu clickable area to match the visible button
	- Moved external source link from status heading to the ellipsis menu
	- Disabled horizontal textarea resize
	- Wallpaper is now top-aligned, horizontally centered.


	## [2.2.1] - 2020-11-11
	### Fixed
	- Fixed regression in react popup alignment and overflowing


	## [2.2.0] - 2020-11-06
	### Added
	- New option to optimize timeline rendering to make the site more responsive (enabled by default)
	- New instance option `logoLeft` to move logo to the left side in desktop nav bar
	- Import/export a muted users
	- Proper handling of deletes when using websocket streaming
	- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
	- Added a small red badge to the favicon when there's unread notifications
	- Added the NSFW alert to link previews

	### Fixed
	- Fixed clicking NSFW hider through status popover
	- Fixed chat-view back button being hard to click
	- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
	- Fixed multiple regressions in CSS styles
	- Fixed multiple issues with input fields when using CJK font as default
	- Fixed search field in navbar infringing into logo in some cases
	- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch.

	### Changed
	- Clicking immediately when timeline shifts is now blocked to prevent misclicks
	- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
	- Some icons changed for better accessibility (lock, globe)
	- Logo is now clickable
	- Changed default logo to SVG version


	## [2.1.2] - 2020-09-17
	### Fixed
	- Fixed chats list not updating its order when new messages come in
	- Fixed chat messages sometimes getting lost when you receive a message at the same time


	## [2.1.1] - 2020-09-08
	### Changed
	- Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.

	### Fixed
	- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling.
	- Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over.
	- Fixed weird autocomplete behavior when you write ":custom_emoji: ?"


	## [2.1.0] - 2020-08-28
	### Added
	- Autocomplete domains from list of known instances
	- 'Bot' settings option and badge
	- Added profile meta data fields that can be set in profile settings
	- Added option to reset avatar/banner in profile settings
	- Descriptions can be set on uploaded files before posting
	- Added status preview option to preview your statuses before posting
	- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style
	- Added ability to see all favoriting or repeating users when hovering the number on highlighted statuses
	- Bookmarks

	### Changed
	- Change heart to thumbs up in reaction picker
	- Close the media modal on navigation events
	- Add colons to the emoji alt text, to make them copyable
	- Add better visual indication for drag-and-drop for files
	- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc
	- Remove unnecessary options for 'automatic loading when loading older' and 'reply previews'
	- Greentext now has separate color slot for it
	- Removed the use of with_move parameters when fetching notifications
	- Push notifications now are the same as normal notfication, and are localized.
	- Updated Notification Settings to match new BE API

	### Fixed
	- Custom Emoji will display in poll options now.
	- Status ellipsis menu closes properly when selecting certain options
	- Cropped images look correct in Chrome
	- Newlines in the muted words settings work again
	- Clicking on non-latin hashtags won't open a new window
	- Uploading and drag-dropping multiple files works correctly now.
	- Subject field now appears disabled when posting
	- Fix status ellipsis menu being cut off in notifications column
	- Fixed autocomplete sometimes not returning the right user when there's already some results
	- Videos and audio and misc files show description as alt/title properly now
	- Clicking on non-image/video files no longer opens an empty modal
	- Audio files can now be played back in the frontend with hidden attachments
	- Videos are not cropped awkwardly in the uploads section anymore
	- Reply filtering options in Settings -> Filtering now work again using filtering on server
	- Don't show just blank-screen when cookies are disabled
	- Add status idempotency to prevent accidental double posting when posting returns an error
	- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
	- Multiple issues with muted statuses/notifications

	## [2.0.5] - 2020-05-12
	### Added
	- Added private notifications option for push notifications
	- 'Copy link' button for statuses (in the ellipsis menu)

	### Changed
	- Registration page no longer requires email if the server is configured not to require it

	### Fixed
	- Status ellipsis menu closes properly when selecting certain options

	## [2.0.3] - 2020-05-02
	### Fixed
	- Show more/less works correctly with auto-collapsed subjects and long posts
	- RTL characters won't look messed up in notifications

	### Changed
	- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:

	### Added
	- Follow request notification support

	## [2.0.2] - 2020-04-08
	### Fixed
	- Favorite/Repeat avatars not showing up on private instances/non-public posts
	- Autocorrect getting triggered in the captcha field
	- Overflow on long domains in follow/move notifications

	### Changed
	- Polish translation updated

	## [2.0.0] - 2020-02-28
	### Added
	- Tons of color slots including ones for hover/pressed/toggled buttons
	- Experimental `--variable[,mod]` syntax support for color slots in themes. the `mod` makes color brighter/darker depending on background color (makes darker color brighter/darker depending on background color)
	- Paper theme by Shpuld
	- Icons in nav panel
	- Private mode support
	- Support for 'Move' type notifications
	- Pleroma AMOLED dark theme
	- User level domain mutes, under User Settings -> Mutes
	- Emoji reactions for statuses
	- MRF keyword policy disclosure
	### Changed
	- Updated Pleroma default themes
	- theme engine update to 3 (themes v2.1 introduction)
	- massive internal changes in theme engine - slowly away from "generate things separately with spaghetti code" towards "feed all data into single 'generateTheme' function and declare slot inheritance and all in a separate file"
	- Breezy theme updates to make it closer to actual Breeze in some aspects
	- when using `--variable` in shadows it no longer uses the actual CSS3 variable, instead it generates color from other slots
	- theme doesn't get saved to local storage when opening FE anonymously
	- Captcha now resets on failed registrations
	- Notifications column now cleans itself up to optimize performance when tab is left open for a long time
	- 403 messaging
	### Fixed
	- Fixed loader-spinner not disappearing when a status preview fails to load
	- anon viewers won't get theme data saved to local storage, so admin changing default theme will have an effect for users coming back to instance.
	- Single notifications left unread when hitting read on another device/tab
	- Registration fixed
	- Deactivation of remote accounts from frontend
	- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
	- Improved performance of anything that uses popovers (most notably statuses)

	## [1.1.7 and earlier] - 2019-12-14
	### Added
	- Ability to hide/show repeats from user
	- User profile button clutter organized into a menu
	- Emoji picker
	- Started changelog anew
	- Ability to change user's email
	- About page
	- Added remote user redirect

	### Changed
	- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes

	### Fixed
	- improved hotkey behavior on autocomplete popup
	diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
	index 2068a598c7..dc03bc9f44 100644
	--- a/src/components/emoji_input/emoji_input.js
	+++ b/src/components/emoji_input/emoji_input.js
	@@ -1,498 +1,506 @@
	import Completion from '../../services/completion/completion.js'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'
	import { take } from 'lodash'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSmileBeam
	} from '@fortawesome/free-regular-svg-icons'

	library.add(
	faSmileBeam
	)

	/**
	* EmojiInput - augmented inputs for emoji and autocomplete support in inputs
	* without having to give up the comfort of <input/> and <textarea/> elements
	*
	* Intended usage is:
	* <EmojiInput v-model="something">
	* <input v-model="something"/>
	* </EmojiInput>
	*
	* Works only with <input> and <textarea>. Intended to use with only one nested
	* input. It will find first input or textarea and work with that, multiple
	* nested children not tested. You HAVE TO duplicate v-model for both
	* <emoji-input> and <input>/<textarea> otherwise it will not work.
	*
	* Be prepared for CSS troubles though because it still wraps component in a div
	* while TRYING to make it look like nothing happened, but it could break stuff.
	*/

	const EmojiInput = {
	props: {
	suggest: {
	/**
	* suggest: function (input: String) => Suggestion[]
	*
	* Function that takes input string which takes string (textAtCaret)
	* and returns an array of Suggestions
	*
	* Suggestion is an object containing following properties:
	* displayText: string. Main display text, what actual suggestion
	* represents (user's screen name/emoji shortcode)
	* replacement: string. Text that should replace the textAtCaret
	* detailText: string, optional. Subtitle text, providing additional info
	* if present (user's nickname)
	* imageUrl: string, optional. Image to display alongside with suggestion,
	* currently if no image is provided, replacement will be used (for
	* unicode emojis)
	*
	* TODO: make it asynchronous when adding proper server-provided user
	* suggestions
	*
	* For commonly used suggestors (emoji, users, both) use suggestor.js
	*/
	required: true,
	type: Function
	},
	value: {
	/**
	* Used for v-model
	*/
	required: true,
	type: String
	},
	enableEmojiPicker: {
	/**
	* Enables emoji picker support, this implies that custom emoji are supported
	*/
	required: false,
	type: Boolean,
	default: false
	},
	hideEmojiButton: {
	/**
	* intended to use with external picker trigger, i.e. you have a button outside
	* input that will open up the picker, see triggerShowPicker()
	*/
	required: false,
	type: Boolean,
	default: false
	},
	enableStickerPicker: {
	/**
	* Enables sticker picker support, only makes sense when enableEmojiPicker=true
	*/
	required: false,
	type: Boolean,
	default: false
	},
	placement: {
	/**
	* Forces the panel to take a specific position relative to the input element.
	* The 'auto' placement chooses either bottom or top depending on which has the available space (when both have available space, bottom is preferred).
	*/
	required: false,
	type: String, // 'auto', 'top', 'bottom'
	default: 'auto'
	},
	newlineOnCtrlEnter: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	data () {
	return {
	input: undefined,
	highlighted: 0,
	caret: 0,
	focused: false,
	blurTimeout: null,
	showPicker: false,
	temporarilyHideSuggestions: false,
	keepOpen: false,
	disableClickOutside: false,
	suggestions: []
	}
	},
	components: {
	EmojiPicker
	},
	computed: {
	padEmoji () {
	return this.$store.getters.mergedConfig.padEmoji
	},
	showSuggestions () {
	return this.focused &&
	this.suggestions &&
	this.suggestions.length > 0 &&
	!this.showPicker &&
	!this.temporarilyHideSuggestions
	},
	textAtCaret () {
	return (this.wordAtCaret \|\| {}).word \|\| ''
	},
	wordAtCaret () {
	if (this.value && this.caret) {
	const word = Completion.wordAtPosition(this.value, this.caret - 1) \|\| {}
	return word
	}
	}
	},
	mounted () {
	const slots = this.$slots.default
	if (!slots \|\| slots.length === 0) return
	const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
	if (!input) return
	this.input = input
	this.resize()
	input.elm.addEventListener('blur', this.onBlur)
	input.elm.addEventListener('focus', this.onFocus)
	input.elm.addEventListener('paste', this.onPaste)
	input.elm.addEventListener('keyup', this.onKeyUp)
	input.elm.addEventListener('keydown', this.onKeyDown)
	input.elm.addEventListener('click', this.onClickInput)
	input.elm.addEventListener('transitionend', this.onTransition)
	input.elm.addEventListener('input', this.onInput)
	},
	unmounted () {
	const { input } = this
	if (input) {
	input.elm.removeEventListener('blur', this.onBlur)
	input.elm.removeEventListener('focus', this.onFocus)
	input.elm.removeEventListener('paste', this.onPaste)
	input.elm.removeEventListener('keyup', this.onKeyUp)
	input.elm.removeEventListener('keydown', this.onKeyDown)
	input.elm.removeEventListener('click', this.onClickInput)
	input.elm.removeEventListener('transitionend', this.onTransition)
	input.elm.removeEventListener('input', this.onInput)
	}
	},
	watch: {
	showSuggestions: function (newValue) {
	this.$emit('shown', newValue)
	},
	textAtCaret: async function (newWord) {
	const firstchar = newWord.charAt(0)
	this.suggestions = []
	if (newWord === firstchar) return
	const matchedSuggestions = await this.suggest(newWord)
	// Async: cancel if textAtCaret has changed during wait
	if (this.textAtCaret !== newWord) return
	if (matchedSuggestions.length <= 0) return
	this.suggestions = take(matchedSuggestions, 5)
	.map(({ imageUrl, ...rest }) => ({
	...rest,
	img: imageUrl \|\| ''
	}))
	},
	suggestions (newValue) {
	this.$nextTick(this.resize)
	}
	},
	methods: {
	+ focusPickerInput () {
	+ const pickerEl = this.$refs.picker.$el
	+ if (!pickerEl) return
	+ const pickerInput = pickerEl.querySelector('input')
	+ if (pickerInput) pickerInput.focus()
	+ },
	triggerShowPicker () {
	this.showPicker = true
	this.$refs.picker.startEmojiLoad()
	this.$nextTick(() => {
	this.scrollIntoView()
	+ this.focusPickerInput()
	})
	// 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.input.elm.focus()
	this.showPicker = !this.showPicker
	if (this.showPicker) {
	this.scrollIntoView()
	this.$refs.picker.startEmojiLoad()
	+ this.$nextTick(this.focusPickerInput)
	}
	},
	replace (replacement) {
	const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
	this.$emit('input', newValue)
	this.caret = 0
	},
	insert ({ insertion, keepOpen, surroundingSpace = true }) {
	const before = this.value.substring(0, this.caret) \|\| ''
	const after = this.value.substring(this.caret) \|\| ''

	/* Using a bit more smart approach to padding emojis with spaces:
	* - put a space before cursor if there isn't one already, unless we
	* are at the beginning of post or in spam mode
	* - put a space after emoji if there isn't one already unless we are
	* in spam mode
	*
	* The idea is that when you put a cursor somewhere in between sentence
	* inserting just ' :emoji: ' will add more spaces to post which might
	* break the flow/spacing, as well as the case where user ends sentence
	* with a space before adding emoji.
	*
	* Spam mode is intended for creating multi-part emojis and overall spamming
	* them, masto seem to be rendering :emoji::emoji: correctly now so why not
	*/
	const isSpaceRegex = /\s/
	const spaceBefore = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : ''
	const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''

	const newValue = [
	before,
	spaceBefore,
	insertion,
	spaceAfter,
	after
	].join('')
	this.keepOpen = keepOpen
	this.$emit('input', newValue)
	const position = this.caret + (insertion + spaceAfter + spaceBefore).length
	if (!keepOpen) {
	this.input.elm.focus()
	}

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	// Set selection right after the replacement instead of the very end
	this.input.elm.setSelectionRange(position, position)
	this.caret = position
	})
	},
	replaceText (e, suggestion) {
	const len = this.suggestions.length \|\| 0
	if (this.textAtCaret.length === 1) { return }
	if (len > 0 \|\| suggestion) {
	const chosenSuggestion = suggestion \|\| this.suggestions[this.highlighted]
	const replacement = chosenSuggestion.replacement
	const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
	this.$emit('input', newValue)
	this.highlighted = 0
	const position = this.wordAtCaret.start + replacement.length

	this.$nextTick(function () {
	// Re-focus inputbox after clicking suggestion
	this.input.elm.focus()
	// Set selection right after the replacement instead of the very end
	this.input.elm.setSelectionRange(position, position)
	this.caret = position
	})
	e.preventDefault()
	}
	},
	cycleBackward (e) {
	const len = this.suggestions.length \|\| 0
	if (len > 1) {
	this.highlighted -= 1
	if (this.highlighted < 0) {
	this.highlighted = this.suggestions.length - 1
	}
	e.preventDefault()
	} else {
	this.highlighted = 0
	}
	},
	cycleForward (e) {
	const len = this.suggestions.length \|\| 0
	if (len > 1) {
	this.highlighted += 1
	if (this.highlighted >= len) {
	this.highlighted = 0
	}
	e.preventDefault()
	} else {
	this.highlighted = 0
	}
	},
	scrollIntoView () {
	const rootRef = this.$refs['picker'].$el
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight

	const scrollerBottomBorder = currentScroll + scrollerHeight
	// We check where the bottom border of root element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top

	const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
	// could also check top delta but there's no case for it
	const targetScroll = currentScroll + bottomDelta

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}

	this.$nextTick(() => {
	const { offsetHeight } = this.input.elm
	const { picker } = this.$refs
	const pickerBottom = picker.$el.getBoundingClientRect().bottom
	if (pickerBottom > window.innerHeight) {
	picker.$el.style.top = 'auto'
	picker.$el.style.bottom = offsetHeight + 'px'
	}
	})
	},
	onTransition (e) {
	this.resize()
	},
	onBlur (e) {
	// Clicking on any suggestion removes focus from autocomplete,
	// preventing click handler ever executing.
	this.blurTimeout = setTimeout(() => {
	this.focused = false
	this.setCaret(e)
	this.resize()
	}, 200)
	},
	onClick (e, suggestion) {
	this.replaceText(e, suggestion)
	},
	onFocus (e) {
	if (this.blurTimeout) {
	clearTimeout(this.blurTimeout)
	this.blurTimeout = null
	}

	if (!this.keepOpen) {
	this.showPicker = false
	}
	this.focused = true
	this.setCaret(e)
	this.resize()
	this.temporarilyHideSuggestions = false
	},
	onKeyUp (e) {
	const { key } = e
	this.setCaret(e)
	this.resize()

	// Setting hider in keyUp to prevent suggestions from blinking
	// when moving away from suggested spot
	if (key === 'Escape') {
	this.temporarilyHideSuggestions = true
	} else {
	this.temporarilyHideSuggestions = false
	}
	},
	onPaste (e) {
	this.setCaret(e)
	this.resize()
	},
	onKeyDown (e) {
	const { ctrlKey, shiftKey, key } = e
	if (this.newlineOnCtrlEnter && ctrlKey && key === 'Enter') {
	this.insert({ insertion: '\n', surroundingSpace: false })
	// Ensure only one new line is added on macos
	e.stopPropagation()
	e.preventDefault()

	// Scroll the input element to the position of the cursor
	this.$nextTick(() => {
	this.input.elm.blur()
	this.input.elm.focus()
	})
	}
	// Disable suggestions hotkeys if suggestions are hidden
	if (!this.temporarilyHideSuggestions) {
	if (key === 'Tab') {
	if (shiftKey) {
	this.cycleBackward(e)
	} else {
	this.cycleForward(e)
	}
	}
	if (key === 'ArrowUp') {
	this.cycleBackward(e)
	} else if (key === 'ArrowDown') {
	this.cycleForward(e)
	}
	if (key === 'Enter') {
	if (!ctrlKey) {
	this.replaceText(e)
	}
	}
	}
	// Probably add optional keyboard controls for emoji picker?

	// Escape hides suggestions, if suggestions are hidden it
	// de-focuses the element (i.e. default browser behavior)
	if (key === 'Escape') {
	if (!this.temporarilyHideSuggestions) {
	this.input.elm.focus()
	}
	}

	this.showPicker = false
	this.resize()
	},
	onInput (e) {
	this.showPicker = false
	this.setCaret(e)
	this.resize()
	this.$emit('input', e.target.value)
	},
	onClickInput (e) {
	this.showPicker = false
	},
	onClickOutside (e) {
	if (this.disableClickOutside) return
	this.showPicker = false
	},
	onStickerUploaded (e) {
	this.showPicker = false
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed (e) {
	this.showPicker = false
	this.$emit('sticker-upload-Failed', e)
	},
	setCaret ({ target: { selectionStart } }) {
	this.caret = selectionStart
	},
	resize () {
	const panel = this.$refs.panel
	if (!panel) return
	const picker = this.$refs.picker.$el
	const panelBody = this.$refs['panel-body']
	const { offsetHeight, offsetTop } = this.input.elm
	const offsetBottom = offsetTop + offsetHeight

	this.setPlacement(panelBody, panel, offsetBottom)
	this.setPlacement(picker, picker, offsetBottom)
	},
	setPlacement (container, target, offsetBottom) {
	if (!container \|\| !target) return

	target.style.top = offsetBottom + 'px'
	target.style.bottom = 'auto'

	if (this.placement === 'top' \|\| (this.placement === 'auto' && this.overflowsBottom(container))) {
	target.style.top = 'auto'
	target.style.bottom = this.input.elm.offsetHeight + 'px'
	}
	},
	overflowsBottom (el) {
	return el.getBoundingClientRect().bottom > window.innerHeight
	}
	}
	}

	export default EmojiInput
	diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
	index 5e417fa0ed..bfe39212c5 100644
	--- a/src/components/popover/popover.js
	+++ b/src/components/popover/popover.js
	@@ -1,174 +1,177 @@
	const Popover = {
	name: 'Popover',
	props: {
	// Action to trigger popover: either 'hover' or 'click'
	trigger: String,
	// Either 'top' or 'bottom'
	placement: String,
	// Takes object with properties 'x' and 'y', values of these can be
	// 'container' for using offsetParent as boundaries for either axis
	// or 'viewport'
	boundTo: Object,
	// Takes a selector to use as a replacement for the parent container
	// for getting boundaries for x an y axis
	boundToSelector: String,
	// Takes a top/bottom/left/right object, how much space to leave
	// between boundary and popover element
	margin: Object,
	// Takes a x/y object and tells how many pixels to offset from
	// anchor point on either axis
	offset: Object,
	// Replaces the classes you may want for the popover container.
	// Use 'popover-default' in addition to get the default popover
	// styles with your custom class.
	popoverClass: String,
	// If true, subtract padding when calculating position for the popover,
	// use it when popover offset looks to be different on top vs bottom.
	removePadding: Boolean
	},
	data () {
	return {
	hidden: true,
	styles: { opacity: 0 },
	oldSize: { width: 0, height: 0 }
	}
	},
	methods: {
	containerBoundingClientRect () {
	const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
	return container.getBoundingClientRect()
	},
	updateStyles () {
	if (this.hidden) {
	this.styles = {
	opacity: 0
	}
	return
	}

	// Popover will be anchored around this element, trigger ref is the container, so
	// its children are what are inside the slot. Expect only one slot="trigger".
	const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) \|\| this.$el
	const screenBox = anchorEl.getBoundingClientRect()
	// Screen position of the origin point for popover
	const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
	const content = this.$refs.content
	// Minor optimization, don't call a slow reflow call if we don't have to
	const parentBounds = this.boundTo &&
	(this.boundTo.x === 'container' \|\| this.boundTo.y === 'container') &&
	this.containerBoundingClientRect()

	const margin = this.margin \|\| {}

	// What are the screen bounds for the popover? Viewport vs container
	// when using viewport, using default margin values to dodge the navbar
	const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
	min: parentBounds.left + (margin.left \|\| 0),
	max: parentBounds.right - (margin.right \|\| 0)
	} : {
	min: 0 + (margin.left \|\| 10),
	max: window.innerWidth - (margin.right \|\| 10)
	}

	const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
	min: parentBounds.top + (margin.top \|\| 0),
	max: parentBounds.bottom - (margin.bottom \|\| 0)
	} : {
	min: 0 + (margin.top \|\| 50),
	max: window.innerHeight - (margin.bottom \|\| 5)
	}

	let horizOffset = 0

	// If overflowing from left, move it so that it doesn't
	if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
	horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
	}

	// If overflowing from right, move it so that it doesn't
	if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
	horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
	}

	// Default to whatever user wished with placement prop
	let usingTop = this.placement !== 'bottom'

	// Handle special cases, first force to displaying on top if there's not space on bottom,
	// regardless of what placement value was. Then check if there's not space on top, and
	// force to bottom, again regardless of what placement value was.
	if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
	if (origin.y - content.offsetHeight < yBounds.min) usingTop = false

	let vPadding = 0
	if (this.removePadding && usingTop) {
	const anchorStyle = getComputedStyle(anchorEl)
	vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
	}

	const yOffset = (this.offset && this.offset.y) \|\| 0
	const translateY = usingTop
	? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
	: yOffset

	const xOffset = (this.offset && this.offset.x) \|\| 0
	const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset

	// Note, separate translateX and translateY avoids blurry text on chromium,
	// single translate or translate3d resulted in blurry text.
	this.styles = {
	opacity: 1,
	transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
	}
	},
	showPopover () {
	- if (this.hidden) this.$emit('show')
	+ const wasHidden = this.hidden
	this.hidden = false
	- this.$nextTick(this.updateStyles)
	+ this.$nextTick(() => {
	+ if (wasHidden) this.$emit('show')
	+ this.updateStyles()
	+ })
	},
	hidePopover () {
	if (!this.hidden) this.$emit('close')
	this.hidden = true
	this.styles = { opacity: 0 }
	},
	onMouseenter (e) {
	if (this.trigger === 'hover') this.showPopover()
	},
	onMouseleave (e) {
	if (this.trigger === 'hover') this.hidePopover()
	},
	onClick (e) {
	if (this.trigger === 'click') {
	if (this.hidden) {
	this.showPopover()
	} else {
	this.hidePopover()
	}
	}
	},
	onClickOutside (e) {
	if (this.hidden) return
	if (this.$el.contains(e.target)) return
	this.hidePopover()
	}
	},
	updated () {
	// Monitor changes to content size, update styles only when content sizes have changed,
	// that should be the only time we need to move the popover box if we don't care about scroll
	// or resize
	const content = this.$refs.content
	if (!content) return
	if (this.oldSize.width !== content.offsetWidth \|\| this.oldSize.height !== content.offsetHeight) {
	this.updateStyles()
	this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
	}
	},
	created () {
	document.addEventListener('click', this.onClickOutside)
	},
	destroyed () {
	document.removeEventListener('click', this.onClickOutside)
	this.hidePopover()
	}
	}

	export default Popover
	diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
	index 5e7b7580b1..ce82c90da7 100644
	--- a/src/components/react_button/react_button.js
	+++ b/src/components/react_button/react_button.js
	@@ -1,63 +1,69 @@
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'

	library.add(faSmileBeam)

	const ReactButton = {
	props: ['status'],
	data () {
	return {
	filterWord: ''
	}
	},
	components: {
	Popover
	},
	methods: {
	addReaction (event, emoji, close) {
	const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
	if (existingReaction && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	close()
	+ },
	+ focusInput () {
	+ this.$nextTick(() => {
	+ const input = this.$el.querySelector('input')
	+ if (input) input.focus()
	+ })
	}
	},
	computed: {
	commonEmojis () {
	return [
	{ displayText: 'thumbsup', replacement: '👍' },
	{ displayText: 'angry', replacement: '😠' },
	{ displayText: 'eyes', replacement: '👀' },
	{ displayText: 'joy', replacement: '😂' },
	{ displayText: 'fire', replacement: '🔥' }
	]
	},
	emojis () {
	if (this.filterWord !== '') {
	const filterWordLowercase = this.filterWord.toLowerCase()
	let orderedEmojiList = []
	for (const emoji of this.$store.state.instance.emoji) {
	if (emoji.replacement === this.filterWord) return [emoji]

	const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
	if (indexOfFilterWord > -1) {
	if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
	orderedEmojiList[indexOfFilterWord] = []
	}
	orderedEmojiList[indexOfFilterWord].push(emoji)
	}
	}
	return orderedEmojiList.flat()
	}
	return this.$store.state.instance.emoji \|\| []
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	}
	}
	}

	export default ReactButton
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index 0473467458..4839024c61 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,130 +1,131 @@
	<template>
	<Popover
	trigger="click"
	class="ReactButton"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	+ @show="focusInput"
	>
	<div
	slot="content"
	slot-scope="{close}"
	>
	<div class="reaction-picker-filter">
	<input
	v-model="filterWord"
	size="1"
	:placeholder="$t('emoji.search_emoji')"
	>
	</div>
	<div class="reaction-picker">
	<span
	v-for="emoji in commonEmojis"
	:key="emoji.replacement"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-picker-divider" />
	<span
	v-for="(emoji, key) in emojis"
	:key="key"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-bottom-fader" />
	</div>
	</div>
	<span
	slot="trigger"
	class="popover-trigger"
	:title="$t('tool_tip.add_reaction')"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	:icon="['far', 'smile-beam']"
	/>
	</span>
	</Popover>
	</template>

	<script src="./react_button.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.ReactButton {
	.reaction-picker-filter {
	padding: 0.5em;
	display: flex;

	input {
	flex: 1;
	}
	}

	.reaction-picker-divider {
	height: 1px;
	width: 100%;
	margin: 0.5em;
	background-color: var(--border, $fallback--border);
	}

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	user-select: none;

	mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	.emoji-button {
	cursor: pointer;

	flex-basis: 20%;
	line-height: 1.5em;
	align-content: center;

	&:hover {
	transform: scale(1.25);
	}
	}
	}

	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	}

	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 9:23 PM (1 d, 14 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737485
Default Alt Text: (40 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions