Break out anno plus button (#1473)

* break out plus button

* remove menu item

* padding, remove icon

* icon padding

client/src/components/categorical/category/annoMenuCategory.js

@@ -6,9 +6,13 @@ import {
   MenuItem,
   Popover,
   Position,
+  Tooltip,
+  Icon,
   PopoverInteractionKind,
 } from "@blueprintjs/core";
 
+import * as globals from "../../../globals";
+
 @connect((state) => ({
   annotations: state.annotations,
 }))
@@ -56,19 +60,28 @@ class AnnoMenuCategory extends React.PureComponent {
     return (
       <>
         {isUserAnno ? (
+          <>
+            <Tooltip
+              content={createText}
+              position="bottom"
+              hoverOpenDelay={globals.tooltipHoverOpenDelay}
+            >
+              <Button
+                style={{ marginLeft: 0, marginRight: 2 }}
+                data-testclass="handleAddNewLabelToCategory"
+                data-testid={`${metadataField}:add-new-label-to-category`}
+                icon={<Icon icon="plus" iconSize={10} />}
+                onClick={this.activateAddNewLabelMode}
+                small
+                minimal
+              />
+            </Tooltip>
             <Popover
               interactionKind={PopoverInteractionKind.HOVER}
               boundary="window"
               position={Position.RIGHT_TOP}
               content={
                 <Menu>
-                <MenuItem
-                  icon="tag"
-                  data-testclass="handleAddNewLabelToCategory"
-                  data-testid={`${metadataField}:add-new-label-to-category`}
-                  onClick={this.activateAddNewLabelMode}
-                  text={createText}
-                />
                   <MenuItem
                     icon="edit"
                     disabled={annotations.isEditingCategoryName}
@@ -89,13 +102,15 @@ class AnnoMenuCategory extends React.PureComponent {
               }
             >
               <Button
-              style={{ marginLeft: 0 }}
+                style={{ marginLeft: 0, marginRight: 5 }}
                 data-testclass="seeActions"
                 data-testid={`${metadataField}:see-actions`}
-              icon="more"
+                icon={<Icon icon="more" iconSize={10} />}
+                small
                 minimal
               />
             </Popover>
+          </>
         ) : null}
       </>
     );

client/src/components/categorical/category/index.js

@@ -278,9 +278,6 @@ class Category extends React.Component {
               }}
               onClick={this.handleCategoryClick}
             >
-              {isUserAnno ? (
-                <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
-              ) : null}
               {truncatedString || metadataField}
               {isExpanded ? (
                 <FaChevronDown

client/src/components/categorical/value/index.js

@@ -7,6 +7,7 @@ import {
   MenuItem,
   Popover,
   Position,
+  Icon,
   PopoverInteractionKind,
   Tooltip,
 } from "@blueprintjs/core";
@@ -343,7 +344,7 @@ class CategoryValue extends React.Component {
         }
         data-testclass="categorical-row"
         style={{
-          padding: "4px 7px",
+          padding: "4px 0px 4px 7px",
           display: "flex",
           alignItems: "baseline",
           justifyContent: "space-between",
@@ -561,14 +562,14 @@ class CategoryValue extends React.Component {
                 >
                   <Button
                     style={{
-                      marginLeft: 0,
+                      marginLeft: 2,
                       position: "relative",
                       top: -1,
                       minHeight: 16,
                     }}
                     data-testclass="seeActions"
                     data-testid={`${metadataField}:${displayString}:see-actions`}
-                    icon="more"
+                    icon={<Icon icon="more" iconSize={10} />}
                     small
                     minimal
                   />