clean up docs icons UI, refactor styles (palantir#2198)

danielbh · Mar 6, 2018 · cff13ed · cff13ed · danielbh · Mar 7, 2018
1 parent 8396c0d
commit cff13ed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 50 deletions.
diff --git a/packages/docs-app/src/components/docsIcon.tsx b/packages/docs-app/src/components/docsIcon.tsx
@@ -18,6 +18,9 @@ export interface IDocsIconProps {
 }
 
 const GITHUB_PATH = "https://github.com/palantir/blueprint/blob/develop/resources/icons";
+function openIconFile(iconName: IconName, iconSize: 16 | 20) {
+    window.open(`${GITHUB_PATH}/${iconSize}px/${iconName}.svg`);
+}
 
 @ContextMenuTarget
 export class DocsIcon extends React.PureComponent<IDocsIconProps, {}> {
@@ -26,11 +29,12 @@ export class DocsIcon extends React.PureComponent<IDocsIconProps, {}> {
         return (
             <ClickToCopy className="docs-icon" data-tags={tags} value={iconName}>
                 <Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />
-                <span className="docs-icon-detail">
-                    <div className="docs-icon-name">{displayName}</div>
-                    <strong className="docs-icon-class-name pt-monospace-text">{iconName}</strong>
-                    <div className="docs-clipboard-message pt-text-muted" data-hover-message="Click to copy" />
-                </span>
+                <div className="docs-icon-name">{displayName}</div>
+                <div className="docs-icon-detail">
+                    <p className="docs-code">{iconName}</p>
+                    <div className="pt-text-muted">Right-click to download</div>
+                    <div className="docs-clipboard-message pt-text-muted" data-hover-message="Click to copy name" />
+                </div>
             </ClickToCopy>
         );
     }
@@ -40,22 +44,19 @@ export class DocsIcon extends React.PureComponent<IDocsIconProps, {}> {
         return (
             <Menu>
                 <MenuItem
-                    className="docs-icon-16"
-                    icon={iconName}
+                    icon={<Icon icon={iconName} iconSize={Icon.SIZE_STANDARD} />}
                     text="Download 16px SVG"
                     onClick={this.handleClick16}
                 />
                 <MenuItem
-                    className="docs-icon-20"
-                    icon={iconName}
+                    icon={<Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />}
                     text="Download 20px SVG"
                     onClick={this.handleClick20}
                 />
             </Menu>
         );
     }
 
-    private handleClick16 = () => window.open(`${GITHUB_PATH}/16px/${this.props.iconName}.svg`);
-
-    private handleClick20 = () => window.open(`${GITHUB_PATH}/20px/${this.props.iconName}.svg`);
+    private handleClick16 = () => openIconFile(this.props.iconName, 16);
+    private handleClick20 = () => openIconFile(this.props.iconName, 20);
 }
diff --git a/packages/docs-app/src/components/icons.tsx b/packages/docs-app/src/components/icons.tsx
@@ -6,6 +6,7 @@
 
 import * as React from "react";
 
+import { NonIdealState } from "@blueprintjs/core";
 import { smartSearch } from "@blueprintjs/docs-theme";
 
 import { DocsIcon, IDocsIconProps as IIcon } from "./docsIcon";
@@ -95,7 +96,7 @@ export class Icons extends React.PureComponent<IIconsProps, IIconsState> {
     }
 
     private renderZeroState() {
-        return <div className="pt-running-text pt-text-muted icons-zero-state">No icons found.</div>;
+        return <NonIdealState className="pt-text-muted" visual="zoom-out" description="No icons found" />;
     }
 
     private handleFilterChange = (e: React.SyntheticEvent<HTMLInputElement>) => {

diff --git a/packages/docs-app/src/styles/_icons.scss b/packages/docs-app/src/styles/_icons.scss
@@ -22,7 +22,7 @@ $icons-per-row: 5;
 
     h3 {
       flex: 1 1 100%;
-      margin: 0 0 $pt-grid-size * 5;
+      margin-top: 0;
       text-transform: capitalize;
     }
   }
@@ -44,7 +44,7 @@ $icons-per-row: 5;
   }
 
   &:hover::before {
-    transform: scale(1.2);
+    transform: scale(1.15);
     opacity: 1;
   }
 
@@ -84,9 +84,9 @@ $icons-per-row: 5;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: $pt-grid-size 0;
   border-radius: $pt-border-radius;
   width: 100% / $icons-per-row - 1%;
+  height: $pt-grid-size * 12;
   padding: ($pt-grid-size * 2) 0;
 
   transition: background-color $hover-transition;
@@ -102,13 +102,12 @@ $icons-per-row: 5;
 
   &:hover {
     .docs-icon-name {
-      transform: translateY(-$pt-font-size);
+      transform: translateY(-1em);
       opacity: 0;
     }
 
-    .docs-icon-class-name,
-    .docs-clipboard-message {
-      transform: translateY(-$pt-font-size);
+    .docs-icon-detail {
+      transform: translateY(-1em);
       opacity: 1;
     }
   }
@@ -119,43 +118,24 @@ $icons-per-row: 5;
   }
 }
 
+.docs-icon-name,
 .docs-icon-detail {
+  transform: translateY(0);
   margin-top: $pt-grid-size * 2;
-  height: $pt-font-size * 2;
   text-align: center;
-  white-space: normal;
-
-  .docs-icon-name,
-  .docs-icon-class-name,
-  .docs-clipboard-message {
-    display: block;
-    transform: translateY(0);
-    opacity: 0;
-    line-height: 1;
-    font-size: $pt-font-size-small;
-    transition: transform $hover-transition, opacity $hover-transition;
-    word-wrap: break-word;
-  }
-
-  .docs-icon-name {
-    opacity: 1;
-  }
-
-  .docs-clipboard-message {
-    margin-top: $pt-grid-size / 2;
-  }
+  font-size: $pt-font-size-small;
+  transition: transform $hover-transition, opacity $hover-transition;
+  word-wrap: break-word;
 }
 
-.docs-icon-16::before {
-  padding: 0 (($pt-icon-size-large - $pt-icon-size-standard) / 2);
+.docs-icon-name {
+  position: absolute;
+  top: $pt-grid-size * 4;
+  opacity: 1;
 }
 
-.docs-icon-20 {
-  line-height: $pt-icon-size-large;
-
-  &::before {
-    @include pt-icon-sized($pt-icon-size-large);
-  }
+.docs-icon-detail {
+  opacity: 0;
 }
 
 .icons-zero-state {