From 21db4e39fb8df6f41a5838d8a0d971098ce36110 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Thu, 5 Nov 2020 10:12:35 -0500 Subject: [PATCH] add button to expand and view whole badge contents Signed-off-by: Sebastian Malton --- package.json | 1 + src/renderer/components/badge/badge.scss | 28 +++++++++++-- src/renderer/components/badge/badge.tsx | 50 +++++++++++++++++++++--- src/renderer/components/fonts.scss | 5 ++- src/renderer/components/icon/icon.scss | 2 +- src/renderer/components/icon/icon.tsx | 6 +-- yarn.lock | 5 +++ 7 files changed, 83 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 2aae54e4cd..b3c3dea110 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/components/badge/badge.scss b/src/renderer/components/badge/badge.scss index bcc5df4f1a..e47291fc28 100644 --- a/src/renderer/components/badge/badge.scss +++ b/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; } -} \ No newline at end of file + + &.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; + } +} diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx index 5fd80afe2a..d26ae8a6ec 100644 --- a/src/renderer/components/badge/badge.tsx +++ b/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, TooltipDecoratorProps { small?: boolean; @@ -10,14 +14,48 @@ export interface BadgeProps extends React.HTMLAttributes, TooltipDecoratorP } @withTooltip +@observer export class Badge extends React.Component { + 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 + } + + return + } + render() { const { className, label, small, children, ...elemProps } = this.props; - return <> - - {label} - {children} - - + const classNames = cssNames("Badge", className, { small, expanded: this.isExpanded }) + + return ( +
+ {this.renderExpansionIcon()} +
(this.elem = ref)}> + {label} + {children} +
+
+ ) } } diff --git a/src/renderer/components/fonts.scss b/src/renderer/components/fonts.scss index 102f87d05e..1c61ef1de9 100644 --- a/src/renderer/components/fonts.scss +++ b/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'); -} \ No newline at end of file +} diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss index e581ccbbdc..77a4523bbf 100644 --- a/src/renderer/components/icon/icon.scss +++ b/src/renderer/components/icon/icon.scss @@ -132,4 +132,4 @@ @extend .active; } } -} \ No newline at end of file +} diff --git a/src/renderer/components/icon/icon.tsx b/src/renderer/components/icon/icon.tsx index 8fc86e6301..ce479049aa 100644 --- a/src/renderer/components/icon/icon.tsx +++ b/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, 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 { 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 { // render as inline svg-icon if (svg) { - const svgIconText = require("!!raw-loader!./" + svg + ".svg").default; + const svgIconText = require(`!!raw-loader!./${svg}.svg`).default; iconContent = ; } diff --git a/yarn.lock b/yarn.lock index 72b2025686..b484eda7f8 100644 --- a/yarn.lock +++ b/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"