Fix rendering of boolean values in CRDs (#1087)

* Fix rendering of boolean values in CRDs

- add optional special casing for boolean values in DrawerItems and
  TableRows since React (imo annoying fashion) does not render boolean
  values by default.
- add a spinner on the sidebar for when the CRD menu is expeanded but
  the entries have not been loaded yet.
- Add ability to double click a Badge to expand, also make it so that
  Badges highligh all text on first click.

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

src/renderer/components/spinner/spinner.scss

@@ -34,6 +34,12 @@
     margin-top: calc(var(--spinner-size) / -2);
   }
 
+  &.centerHorizontal {
+    position: absolute;
+    left: 50%;
+    margin-left: calc(var(--spinner-size) / -2);
+  }
+
   @keyframes rotate {
     0% {
       transform: rotate(0deg);
@@ -60,4 +66,4 @@
       @include spinner-color(#4285F4);
     }
   }
-}
+}

src/renderer/components/spinner/spinner.tsx

@@ -6,23 +6,19 @@ import { cssNames } from "../../utils";
 export interface SpinnerProps extends React.HTMLProps<any> {
   singleColor?: boolean;
   center?: boolean;
+  centerHorizontal?: boolean;
 }
 
 export class Spinner extends React.Component<SpinnerProps, {}> {
-  private elem: HTMLElement;
-
   static defaultProps = {
     singleColor: true,
     center: false,
   };
 
   render() {
-    const { center, singleColor, ...props } = this.props;
-    let { className } = this.props;
-    className = cssNames('Spinner', className, {
-      singleColor: singleColor,
-      center: center,
-    });
-    return <div {...props} className={className} ref={e => this.elem = e}/>;
+    const { center, singleColor, centerHorizontal, className, ...props } = this.props;
+    const classNames = cssNames('Spinner', className, { singleColor, center, centerHorizontal });
+
+    return <div {...props} className={classNames} />;
   }
 }