Fix name display and appeareance

ui/component/channelMentionSuggestion/view.jsx

@@ -22,8 +22,8 @@ export default function ChannelMentionSuggestion(props: Props) {
  <div className="channel-mention__suggestion">
  <ChannelThumbnail xsmall uri={uri} />
  <span className="channel-mention__suggestion-label">
- <div className="channel-mention__suggestion-name">{claim.name}</div>
  <div className="channel-mention__suggestion-title">{(claim.value && claim.value.title) || claim.name}</div>
+ <div className="channel-mention__suggestion-name">{claim.name}</div>
  </span>
  </div>
  )}

ui/component/channelMentionSuggestions/view.jsx

@@ -26,6 +26,7 @@ type Props = {
  subscriptionUris: Array<string>,
  unresolvedSubscriptions: Array<string>,
  doResolveUris: (Array<string>) => void,
+ isInputFocused: boolean,
  customSelectAction?: (string, number) => void,
 };
 
@@ -40,11 +41,14 @@ export default function ChannelMentionSuggestions(props: Props) {
  noTopSuggestion,
  mentionTerm,
  doResolveUris,
+ isInputFocused,
  customSelectAction,
  } = props;
  const comboboxInputRef: ElementRef<any> = React.useRef();
  const comboboxListRef: ElementRef<any> = React.useRef();
  const [debouncedTerm, setDebouncedTerm] = React.useState('');
+ const mainEl = document.querySelector('.channel-mention__suggestions');
+ const [isFocused, setIsFocused] = React.useState(false);
 
  const isRefFocused = (ref) => ref && ref.current === document.activeElement;
 
@@ -95,28 +99,41 @@ export default function ChannelMentionSuggestions(props: Props) {
  }, [isTyping, mentionTerm, hasMinLength, possibleMatches.length]);
 
  React.useEffect(() => {
- if (!inputRef) return;
+ if (!mainEl) return;
+ const header = document.querySelector('.header__navigation');
 
- if (mentionTerm && isUriFromTermValid) {
- inputRef.current.classList.add('textarea-mention');
- } else {
- inputRef.current.classList.remove('textarea-mention');
+ function handleReflow() {
+ const boxAtTopOfPage = header && mainEl.getBoundingClientRect().top <= header.offsetHeight;
+ const boxAtBottomOfPage = mainEl.getBoundingClientRect().bottom >= window.innerHeight;
+
+ if (boxAtTopOfPage) {
+ mainEl.setAttribute('flow-bottom', '');
+ }
+ if (mainEl.getAttribute('flow-bottom') !== null && boxAtBottomOfPage) {
+ mainEl.removeAttribute('flow-bottom');
+ }
  }
- }, [inputRef, isUriFromTermValid, mentionTerm]);
+ handleReflow();
+
+ window.addEventListener('scroll', handleReflow);
+ return () => window.removeEventListener('scroll', handleReflow);
+ }, [mainEl]);
 
  React.useEffect(() => {
  if (!inputRef || !comboboxInputRef || !mentionTerm) return;
 
  function handleKeyDown(event) {
  const { keyCode } = event;
  const activeElement = document.activeElement;
+ setIsFocused(isRefFocused(comboboxInputRef) || isRefFocused(inputRef));
 
  if (keyCode === KEYCODES.UP || keyCode === KEYCODES.DOWN) {
  if (isRefFocused(comboboxInputRef)) {
  const selectedId = activeElement && activeElement.getAttribute('aria-activedescendant');
  const selectedItem = selectedId && document.querySelector(`li[id="${selectedId}"]`);
  if (selectedItem) selectedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
  } else {
+ // $FlowFixMe
  comboboxInputRef.current.focus();
  }
  } else {
@@ -132,7 +149,10 @@ export default function ChannelMentionSuggestions(props: Props) {
  handleSelect(mentionTerm, keyCode);
  }
  }
- if (isRefFocused(comboboxInputRef)) inputRef.current.focus();
+ if (isRefFocused(comboboxInputRef)) {
+ // $FlowFixMe
+ inputRef.current.focus();
+ }
  }
  }
 
@@ -187,7 +207,7 @@ export default function ChannelMentionSuggestions(props: Props) {
  );
  };
 
- return isRefFocused(inputRef) || isRefFocused(comboboxInputRef) ? (
+ return isInputFocused || isFocused ? (
  <Form onSubmit={() => handleSelect(mentionTerm)}>
  <Combobox className="channel-mention" onSelect={handleSelect}>
  <ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} />

ui/component/commentCreate/view.jsx

@@ -106,6 +106,7 @@ export function CommentCreate(props: Props) {
  const [deletedComment, setDeletedComment] = React.useState(false);
  const [pauseQuickSend, setPauseQuickSend] = React.useState(false);
  const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
+ const [isFocused, setIsFocused] = React.useState(false);
 
  const selectedMentionIndex =
  commentValue.indexOf('@', selectionIndex) === selectionIndex
@@ -203,10 +204,12 @@ export function CommentCreate(props: Props) {
  }
 
  function onTextareaFocus() {
+ setIsFocused(true);
  window.addEventListener('keydown', altEnterListener);
  }
 
  function onTextareaBlur() {
+ setIsFocused(false);
  window.removeEventListener('keydown', altEnterListener);
  }
 
@@ -529,6 +532,7 @@ export function CommentCreate(props: Props) {
  mentionTerm={channelMention}
  creatorUri={channelUri}
  customSelectAction={handleSelectMention}
+ isInputFocused={isFocused}
  />
  )}
  <FormField

ui/scss/component/_channel-mention.scss

@@ -44,6 +44,17 @@
  }
 }
 
+.channel-mention__suggestions[flow-bottom] {
+ top: 0;
+ bottom: auto;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ border-top: none;
+ border-bottom-right-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+ border-bottom: auto;
+}
+
 .channel-mention__input--none {
  opacity: 0;
  width: 0;
@@ -59,7 +70,10 @@
 }
 
 .channel-mention__suggestion {
- @extend .wunderbar__suggestion;
+ display: flex;
+ align-items: center;
+ padding: 0 var(--spacing-xxs);
+ margin-left: var(--spacing-xxs);
  overflow: hidden;
  text-overflow: ellipsis;
 
@@ -81,35 +95,31 @@
 }
 
 .channel-mention__suggestion-name {
- display: inline;
+ @extend .wunderbar__suggestion-name;
  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
-
- &::after {
- margin-left: var(--spacing-xxs);
- content: '•';
- }
 }
 
 .channel-mention__suggestion-title {
- display: inline;
- margin-left: var(--spacing-xxs);
+ @extend .wunderbar__suggestion-title;
+ margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
 }
 
 .channel-mention__placeholder-suggestion {
- @extend .wunderbar__suggestion-name;
+ @extend .wunderbar__placeholder-suggestion;
+ padding: 0 var(--spacing-xxs);
+ margin-left: var(--spacing-xxs);
 }
 
 .channel-mention__placeholder-label {
- @extend .wunderbar__suggestion-name;
+ @extend .wunderbar__placeholder-label;
+ margin-left: var(--spacing-m);
 }
 
 .channel-mention__placeholder-thumbnail {
- @extend .wunderbar__suggestion-name;
+ @extend .wunderbar__placeholder-thumbnail;
+ margin-left: var(--spacing-m);
 }
 .channel-mention__placeholder-info {
- @extend .wunderbar__suggestion-name;
-}
-
-.textarea-mention {
- color: var(--color-primary);
+ @extend .wunderbar__placeholder-info;
+ margin-left: var(--spacing-m);
 }

ui/scss/component/_comments.scss

@@ -40,6 +40,10 @@ $thumbnailWidthSmall: 1rem;
  .form-field--SimpleMDE {
  margin-top: 0;
  }
+
+ .form-field__two-column {
+ column-count: 2;
+ }
 }
 
 .comment__create--reply {