add button to expand and view whole badge contents

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

package.json

@@ -233,6 +233,7 @@
     "lodash": "^4.17.15",
     "mac-ca": "^1.0.4",
     "marked": "^1.1.0",
+    "material-design-icons-iconfont": "^6.1.0",
     "md5-file": "^5.0.0",
     "mobx": "^5.15.5",
     "mobx-observable-history": "^1.0.3",

src/renderer/components/badge/badge.scss

@@ -6,10 +6,32 @@
   padding: .2em .4em;
   white-space: nowrap;
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  position: relative;
+
+  >.children {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   &.small {
     font-size: $font-size-small;
   }
-}
+
+  &.expanded {
+    overflow: unset;
+    text-overflow: unset;
+    white-space: unset;
+  }
+
+  > .expansionIcon {
+    transform: scaleX(-1);
+    position: absolute;
+    z-index: 1;
+    right: -10px;
+    bottom: -10px;
+    color: $textColorAccent;
+    background-color: $halfGray;
+    border-radius: 50%;
+    padding: 2px;
+  }
+}

src/renderer/components/badge/badge.tsx

@@ -3,6 +3,10 @@ import "./badge.scss"
 import React from "react";
 import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
+import { observer } from "mobx-react";
+import { autobind } from "../../utils";
+import { observable } from "mobx";
+import { Icon } from "../icon";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
@@ -10,14 +14,48 @@ export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorP
 }
 
 @withTooltip
+@observer
 export class Badge extends React.Component<BadgeProps> {
+  private elem: HTMLElement;
+
+  @observable isExpanded = false
+  @observable canBeExpanded = false
+
+  componentDidMount() {
+    this.canBeExpanded = this.elem.offsetWidth < this.elem.scrollWidth
+  }
+
+  @autobind()
+  onClick() {
+    if (this.canBeExpanded) {
+      this.isExpanded = !this.isExpanded
+    }
+  }
+
+  renderExpansionIcon() {
+    if (!this.canBeExpanded) {
+      return null
+    }
+
+    if (this.isExpanded) {
+      return <Icon className="expansionIcon" size={20} material="close_fullscreen" onClick={this.onClick} />
+    }
+
+    return <Icon className="expansionIcon" size={20} material="open_in_full" onClick={this.onClick} />
+  }
+
   render() {
     const { className, label, small, children, ...elemProps } = this.props;
-    return <>
-      <span className={cssNames("Badge", { small }, className)} {...elemProps}>
-        {label}
-        {children}
-      </span>
-    </>
+    const classNames = cssNames("Badge", className, { small, expanded: this.isExpanded })
+
+    return (
+      <div className={classNames} {...elemProps}>
+        {this.renderExpansionIcon()}
+        <div className="children" ref={ref => (this.elem = ref)}>
+          {label}
+          {children}
+        </div>
+      </div>
+    )
   }
 }

src/renderer/components/fonts.scss

@@ -1,4 +1,7 @@
+$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
+
 // Custom fonts
+@import "~material-design-icons-iconfont/src/material-design-icons";
 @import "~typeface-roboto/index.css";
 
 // Material Design Icons, used primarily in icon.tsx
@@ -17,4 +20,4 @@
   font-family: 'RobotoMono';
   src: local('RobotoMono'),
   url('fonts/roboto-mono-nerd.ttf') format('truetype');
-}
+}

src/renderer/components/icon/icon.scss

@@ -132,4 +132,4 @@
       @extend .active;
     }
   }
-}
+}

src/renderer/components/icon/icon.tsx

@@ -9,7 +9,7 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber"
 
 export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
-  material?: string;          // material-icon, see available names at https://material.io/icons/
+  material?: string;          // material-icon, see available names at https://jossef.github.io/material-design-icons-iconfont/
   svg?: string;               // svg-filename without extension in current folder
   link?: LocationDescriptor;   // render icon as NavLink from react-router-dom
   href?: string;              // render icon as hyperlink
@@ -32,7 +32,7 @@ export class Icon extends React.PureComponent<IconProps> {
 
   get isInteractive() {
     const { interactive, onClick, href, link } = this.props;
-    return interactive || !!(onClick || href || link);
+    return !!(interactive || onClick || href || link);
   }
 
   @autobind()
@@ -87,7 +87,7 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (svg) {
-      const svgIconText = require("!!raw-loader!./" + svg + ".svg").default;
+      const svgIconText = require(`!!raw-loader!./${svg}.svg`).default;
       iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }
 

yarn.lock

@@ -9476,6 +9476,11 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+material-design-icons-iconfont@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-6.1.0.tgz#ffad21a71f2000336fd410cbeba36ddbf301f0f2"
+  integrity sha512-wRJtOo1v1ch+gN8PRsj0IGJznk+kQ8mz13ds/nuhLI+Qyf/931ZlRpd92oq0IRPpZIb+bhX8pRjzIVdcPDKmiQ==
+
 md5-file@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-5.0.0.tgz#e519f631feca9c39e7f9ea1780b63c4745012e20"