combined messages restyling - next round (#15386)
* split component prepare new views / states
* extract empty and disabled state as components
* fix empty state mail icon
* first logic switching between modes, move page to /private-messages/index.vue
* extract autoCompleteHelper.js
* style header + start new message input
* style plus button + focus input
* state logic, types for sanity
* WIP PM new Message started
* add /members/username test
* first design changes to messageCard
* delete private message or chat - based on the mode
* copy as todo
* mention links to modal
* report chat or private message
* WIP likeButton
* likeButton styling
* hide like on private message cards
* fix unit test
* replace copy as todo - to just a copy to clipboard
* style changes
* menu position + like button width
* dropdown items background + like font
* fix like button padding
* move api endpoints and tests around to group inbox methods + like for inbox private messages
* restyle system messages
* Dropdown Radius and Padding
* WIP system messages
* fix lint
* copy delta commit of allowing liking own private messages
* enable liking private messages
* fix menu non hovered item icon color
* fix import path
* ignore background on system messages
* requested changes + migration
* update migration to update the unique id to some messages and delete the duplicates
* migration based on users pagination
* fix(migration): use Promise.all
* change to bulkWrites per User, and all messages in one run (of a user)
* check for array
* use rest operator ...
* skip sorting to get the users
* remove migration, disable like for private messages without uniqueMessageId
* lean+bulkWrite for likes, add time checks for like and auth for further debugging
* add a limit 2 get the messages by uniqueId
* Adding a simple server start script
* remove pinned nodemon dep
* fix inbox controller/tests
* fix / requested style changes
* fix empty state padding /
* hide avatar weapons on messages - fix avatar spacing on messages
* Hourglass Simplification (#15323)
* begin removing obsolete tests
* begin refactoring
* update cron tests
* cleanup
* finish basic implementation of new logic
* add more subscription tests
* subscription test improvements
* return nextHourglassDate again
* fix gem limit
* fix(test): short circuit this.
* fix(admin): correct logic and style for shrimple subs
* WIP(frontend): draft of main subs page view
* fix hourglass count
* Fix hourglass logic for upgrades
* fix admin panel display
* WIP(subs): extant Stripe state
* fix admin panel strings
* fix missing transaction type
* add new field for cumulative subscription count
* show date for hourglass bonus if it was received
* fix test
* feat(subscription): max Gems progress readout
* fix(css): correct and refactor heights and selection states
* fix(subs): correct border-radius and redirect
* fix(stripe): correct redirect after success
* Admin panel display fixes
* don’t give additional HG for new sub if they already got one this month
* fix issue with promo hourglasses
* fix(subscription): update layout when gifting
* fix(subscriptions): more gift layout revisions
* fix(subscriptions): minor visual updates
* fix(subs): pass autoRenews through Stripe
* fix(subs): gifts DON't renew
* fix(lint): unnecessary ternary
* fix(lint): do negate object ig
* fix(subs): try again on gifts
* fix(subs): unhovery and un-12-monthy
* fix bug with incorrectly giving HG bonus
* remove only
* fix test
* fix test
* fix(subs): also redirect to subs after gift sub
* fix(subs): fix typeError
* fix(g1g1): don't try to find Gems promo during bogo
---------
Co-authored-by: Phillip Thelen <phillip@habitica.com>
Co-authored-by: Kalista Payne <sabe@habitica.com>
* chore(sprites): update subproject
* fix(layout): tighten cancellation note
* fix(subs): Google wording and HG escape
* chore(testing): fake g1g1 dates
* fix(subs): don't hide HG preview entirely
* fix(subs): center next hourglass message
* working validatedTextInput.vue within start-new-conversation-input-header.vue 🎉
* fix(git): remove changes from old develop
* Revert "fix(git): remove changes from old develop"
This reverts commit 0e30f7df00.
* fix(git): no actually just this file i guesss
* adding an empty loading state, hiding
* fought the avatar arch nemesis again
* fix chatMessages (party chat) message spacing
* move disabled text back to above the input area - re-enable input area
* show disabled private messages top panel
* fix font color
* fixing uiStates - removing disabled - moving the own user check to the last
* fix(lint): add missing prop defaults
* fix(lint): object default should be fn
* fix(chat): correct grammar in error
* remove weapon position relative
* revert most of avatar.vue changes, add back weapons in chat message UI
* show date tooltip above system / skill messages
* fix toggle disable icon position
* trivial CSS cleanup
* fix(typo): English syntax in test
* chore(test): small style cleanup
* chore(logging): revert debug function
* chore(debug): remove timers from inbox like
---------
Co-authored-by: SabreCat <sabe@habitica.com>
Co-authored-by: Kalista Payne <sabrecat@gmail.com>
Co-authored-by: Phillip Thelen <phillip@habitica.com>
This commit is contained in:
negue
@@ -22,13 +22,13 @@
|
||||
:placeholder="placeholder"
|
||||
:class="{'user-entry': newMessage}"
|
||||
:maxlength="MAX_MESSAGE_LENGTH"
|
||||
@keydown="updateCarretPosition"
|
||||
@keydown="autoCompleteMixinUpdateCarretPosition"
|
||||
@keyup.ctrl.enter="sendMessageShortcut()"
|
||||
@keydown.tab="handleTab($event)"
|
||||
@keydown.up="selectPreviousAutocomplete($event)"
|
||||
@keydown.down="selectNextAutocomplete($event)"
|
||||
@keypress.enter="selectAutocomplete($event)"
|
||||
@keydown.esc="handleEscape($event)"
|
||||
@keydown.tab="autoCompleteMixinHandleTab($event)"
|
||||
@keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
|
||||
@keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
|
||||
@keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
|
||||
@keydown.esc="autoCompleteMixinHandleEscape($event)"
|
||||
@paste="disableMessageSendShortcut()"
|
||||
></textarea>
|
||||
<span>{{ currentLength }} / {{ MAX_MESSAGE_LENGTH }}</span>
|
||||
@@ -36,8 +36,8 @@
|
||||
ref="autocomplete"
|
||||
:text="newMessage"
|
||||
:textbox="textbox"
|
||||
:coords="coords"
|
||||
:caret-position="caretPosition"
|
||||
:coords="mixinData.autoComplete.coords"
|
||||
:caret-position="mixinData.autoComplete.caretPosition"
|
||||
:chat="group.chat"
|
||||
@select="selectedAutocomplete"
|
||||
/>
|
||||
@@ -74,7 +74,7 @@
|
||||
<slot name="additionRow"></slot>
|
||||
<div class="row">
|
||||
<div class="hr col-12"></div>
|
||||
<chat-message
|
||||
<chat-messages
|
||||
:chat.sync="group.chat"
|
||||
:group-type="group.type"
|
||||
:group-id="group._id"
|
||||
@@ -86,16 +86,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import { MAX_MESSAGE_LENGTH } from '@/../../common/script/constants';
|
||||
import externalLinks from '../../mixins/externalLinks';
|
||||
|
||||
import autocomplete from '../chat/autoComplete';
|
||||
import communityGuidelines from './communityGuidelines';
|
||||
import chatMessage from '../chat/chatMessages';
|
||||
import chatMessages from '../chat/chatMessages';
|
||||
import { mapState } from '@/libs/store';
|
||||
import markdownDirective from '@/directives/markdown';
|
||||
import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
@@ -104,23 +103,18 @@ export default {
|
||||
components: {
|
||||
autocomplete,
|
||||
communityGuidelines,
|
||||
chatMessage,
|
||||
chatMessages,
|
||||
},
|
||||
mixins: [externalLinks],
|
||||
mixins: [externalLinks, autoCompleteHelperMixin],
|
||||
props: ['label', 'group', 'placeholder'],
|
||||
data () {
|
||||
return {
|
||||
newMessage: '',
|
||||
sending: false,
|
||||
caretPosition: 0,
|
||||
chat: {
|
||||
submitDisable: false,
|
||||
submitTimeout: null,
|
||||
},
|
||||
coords: {
|
||||
TOP: 0,
|
||||
LEFT: 0,
|
||||
},
|
||||
textbox: null,
|
||||
MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
|
||||
};
|
||||
@@ -142,35 +136,6 @@ export default {
|
||||
this.handleExternalLinks();
|
||||
},
|
||||
methods: {
|
||||
// https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
|
||||
getCoord (e, text) {
|
||||
this.caretPosition = text.selectionEnd;
|
||||
const div = document.createElement('div');
|
||||
const span = document.createElement('span');
|
||||
const copyStyle = getComputedStyle(text);
|
||||
|
||||
[].forEach.call(copyStyle, prop => {
|
||||
div.style[prop] = copyStyle[prop];
|
||||
});
|
||||
|
||||
div.style.position = 'absolute';
|
||||
document.body.appendChild(div);
|
||||
div.textContent = text.value.substr(0, this.caretPosition);
|
||||
span.textContent = text.value.substr(this.caretPosition) || '.';
|
||||
div.appendChild(span);
|
||||
this.coords = {
|
||||
TOP: span.offsetTop,
|
||||
LEFT: span.offsetLeft,
|
||||
};
|
||||
document.body.removeChild(div);
|
||||
},
|
||||
updateCarretPosition: debounce(function updateCarretPosition (eventUpdate) {
|
||||
this._updateCarretPosition(eventUpdate);
|
||||
}, 250),
|
||||
_updateCarretPosition (eventUpdate) {
|
||||
const text = eventUpdate.target;
|
||||
this.getCoord(eventUpdate, text);
|
||||
},
|
||||
async sendMessageShortcut () {
|
||||
// If the user recently pasted in the text field, don't submit
|
||||
if (!this.chat.submitDisable) {
|
||||
@@ -221,50 +186,6 @@ export default {
|
||||
}, 500);
|
||||
},
|
||||
|
||||
handleTab (e) {
|
||||
if (this.$refs.autocomplete.searchActive) {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
this.$refs.autocomplete.selectPrevious();
|
||||
} else {
|
||||
this.$refs.autocomplete.selectNext();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleEscape (e) {
|
||||
if (this.$refs.autocomplete.searchActive) {
|
||||
e.preventDefault();
|
||||
this.$refs.autocomplete.cancel();
|
||||
}
|
||||
},
|
||||
|
||||
selectNextAutocomplete (e) {
|
||||
if (this.$refs.autocomplete.searchActive) {
|
||||
e.preventDefault();
|
||||
this.$refs.autocomplete.selectNext();
|
||||
}
|
||||
},
|
||||
|
||||
selectPreviousAutocomplete (e) {
|
||||
if (this.$refs.autocomplete.searchActive) {
|
||||
e.preventDefault();
|
||||
this.$refs.autocomplete.selectPrevious();
|
||||
}
|
||||
},
|
||||
|
||||
selectAutocomplete (e) {
|
||||
if (this.$refs.autocomplete.searchActive) {
|
||||
if (this.$refs.autocomplete.selected !== null) {
|
||||
e.preventDefault();
|
||||
this.$refs.autocomplete.makeSelection();
|
||||
} else {
|
||||
// no autocomplete selected, newline instead
|
||||
this.$refs.autocomplete.cancel();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
selectedAutocomplete (newText, newCaret) {
|
||||
this.newMessage = newText;
|
||||
// Wait for v-modal to update
|
||||
@@ -273,7 +194,6 @@ export default {
|
||||
this.textbox.focus();
|
||||
});
|
||||
},
|
||||
|
||||
fetchRecentMessages () {
|
||||
this.$emit('fetchRecentMessages');
|
||||
},
|
||||
@@ -284,10 +204,7 @@ export default {
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
// Reset chat
|
||||
this.newMessage = '';
|
||||
this.coords = {
|
||||
TOP: 0,
|
||||
LEFT: 0,
|
||||
};
|
||||
this.autoCompleteMixinResetCoordsPosition();
|
||||
|
||||
next();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user