Badge: option to show short/full versions of contents (#1397)

* add button to expand and view whole badge contents

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* revert font changes due to update elsewhere already existing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* make expanding icon smaller and not focusable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* extended badge content by click, selecting text from label doesn't trigger auto-closing

Signed-off-by: Roman <ixrock@gmail.com>

* fix: hover only intercative badges (with extra content)

Signed-off-by: Roman <ixrock@gmail.com>

* added common document/selectionchange watcher

Signed-off-by: Roman <ixrock@gmail.com>

* lint fixes

Signed-off-by: Roman <ixrock@gmail.com>

* Convert Badge to CSS Modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align Badge styles across components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Not closing badge if user started to select text

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/badge/badge.module.css

@@ -19,25 +19,41 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.Badge {
+.badge {
+  position: relative;
   display: inline-block;
-  white-space: nowrap;
   max-width: 100%;
+}
+
+.badge + .badge {
+  margin-left: 8px;
+}
+
+.badge.interactive:hover {
+  background-color: var(--mainBackground);
+  cursor: pointer;
+}
+
+.badge:not(.isExpanded) {
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
 
-  &:not(.flat) {
-    background: $colorVague;
-    color: $textColorSecondary;
-    border-radius: $radius;
-    padding: .2em .4em;
-  }
+.badge:not(.flat) {
+  background: var(--colorVague);
+  border-radius: 3px;
+  padding: .2em .4em;
+}
 
-  &.small {
-    font-size: $font-size-small;
-  }
+.small {
+  font-size: var(--font-size-small);
+}
 
-  &.clickable {
-    cursor: pointer;
-  }
+.clickable {
+  cursor: pointer;
+}
+
+.disabled {
+  opacity: 0.5;
 }

src/renderer/components/badge/badge.tsx

@@ -19,29 +19,84 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./badge.scss";
+import styles from "./badge.module.css";
 
 import React from "react";
+import { computed, makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
 import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
+import { boundMethod } from "../../utils";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
   flat?: boolean;
   label?: React.ReactNode;
+  expandable?: boolean;
+  disabled?: boolean;
 }
 
+// Common handler for all Badge instances
+document.addEventListener("selectionchange", () => {
+  Badge.badgeMeta.hasTextSelected ||= window.getSelection().toString().trim().length > 0;
+});
+
 @withTooltip
+@observer
 export class Badge extends React.Component<BadgeProps> {
-  render() {
-    const { className, label, small, flat, children, ...elemProps } = this.props;
-    const clickable = Boolean(this.props.onClick);
+  static defaultProps: Partial<BadgeProps> = {
+    expandable: true
+  };
 
-    return <>
-      <span className={cssNames("Badge", { small, flat, clickable }, className)} {...elemProps}>
+  static badgeMeta = observable({
+    hasTextSelected: false
+  });
+
+  @observable.ref elem: HTMLElement;
+  @observable isExpanded = false;
+
+  constructor(props: BadgeProps) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @computed get isExpandable() {
+    if (!this.props.expandable) return false;
+
+    return this.elem?.clientWidth < this.elem?.scrollWidth;
+  }
+
+  @boundMethod
+  onMouseUp() {
+    if (!this.isExpandable || Badge.badgeMeta.hasTextSelected) {
+      Badge.badgeMeta.hasTextSelected = false;
+    } else {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
+
+  @boundMethod
+  bindRef(elem: HTMLElement) {
+    this.elem = elem;
+  }
+
+  render() {
+    const { className, label, disabled, small, children, flat, expandable, ...elemProps } = this.props;
+    const clickable = Boolean(this.props.onClick) || this.isExpandable;
+    const classNames = cssNames(styles.badge, className, {
+      [styles.small]: small,
+      [styles.flat]: flat,
+      [styles.clickable]: clickable,
+      [styles.interactive]: this.isExpandable,
+      [styles.isExpanded]: this.isExpanded,
+      [styles.disabled]: disabled
+    });
+
+    return (
+      <div {...elemProps} className={classNames} onMouseUp={this.onMouseUp} ref={this.bindRef}>
         {label}
         {children}
-      </span>
-    </>;
+      </div>
+    );
   }
 }