zotero#35 Add color split button to selection-popup. Fix page-copy@2x…

… icon.

src/components/layer.js

@@ -487,7 +487,7 @@ function Layer(props) {
         continue;
       }
       let view = viewer.getPageView(pageIndex);
-      
+
 
       pageLayers.push(
         <PageLayerHighlight
@@ -522,7 +522,7 @@ function Layer(props) {
           onDragEnd={props.onDragEnd}
         />
       );
-      
+
       if (props.enableEdgeNotes) {
         pageLayers.push(<EdgeNoteLayer
           key={'m_' + pageIndex}
@@ -545,7 +545,7 @@ function Layer(props) {
       ...rest
     };
   }
-  
+
 
   let blinkLayer = null;
   if (blink) {
@@ -615,6 +615,7 @@ function Layer(props) {
             updateOnPositionChange={true}
           >
             <SelectionMenu
+              color={ color }
               onHighlight={props.onHighlightSelection}
               onCopy={props.onCopySelection}
             />

src/components/selection-menu.js

@@ -3,16 +3,31 @@
 import React from 'react';
 
 class SelectionMenu extends React.Component {
+  handleColorPick = (event) => {
+    this.props.onColorPick(event.screenX, event.screenY)
+  }
+
   render() {
-    let { onCopy, onHighlight } = this.props;
+    let { onCopy, onHighlight, color } = this.props;
     return (
       <div className="selection-menu">
         <button className="toolbarButton btn-copy" onClick={onCopy} data-l10n-id="copy">
           <span data-l10n-id="copy_label">Copy</span>
         </button>
-        <button className="toolbarButton btn-highlight" onClick={onHighlight} data-l10n-id="highlight">
-          <span data-l10n-id="highlight_label">Highlight</span>
-        </button>
+        <div className="tool-group selection-tools">
+          <button className="toolbarButton btn-highlight" onClick={onHighlight} data-l10n-id="highlight">
+            <span data-l10n-id="highlight_label">Highlight</span>
+          </button>
+          <button
+            data-l10n-id='global_color'
+            className="toolbarButton global-color"
+            style={{ color }}
+            onClick={this.handleColorPick}
+          >
+            <span data-l10n-id="global_color_label">Global Color</span>
+            <span className="dropmarker"></span>
+          </button>
+        </div>
       </div>
     );
   }

src/stylesheets/components/annotator/_page-popup.scss

@@ -16,6 +16,7 @@
 
     .selection-menu {
       display: flex;
+      align-items: center;
     }
 
     .toolbarButton {
@@ -28,5 +29,18 @@
         background: $selection-popup-btn-active-bg;
       }
     }
+
+    .selection-tools {
+      .toolbarButton {
+        @if $platform == "darwin" {
+          @include split-button(
+            $height: 22px,
+            $button: "popupbutton",
+            $padding-x: 11px,
+            $padding-y: 3px
+          );
+        }
+      }
+    }
   }
 }

src/stylesheets/components/annotator/_toolbar-buttons.scss

@@ -2,11 +2,44 @@
 // Toolbar buttons
 //
 
-.toolbar {
-  .tool-group {
-    display: flex;
+.tool-group {
+  display: flex;
+}
+
+.toolbarButton {
+  &.global-color {
+    white-space: nowrap;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      vertical-align: top;
+      width: 12px;
+      height: 12px;
+      margin: 2px;
+      background-color: currentColor;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 3px;
+    }
+
+    .dropmarker {
+      display: inline-block;
+      vertical-align: top;
+      width: 7px;
+      height: 4px;
+      margin: 6px -1px 0 2px;
+      background: image-url("searchbar-dropmarker.png") no-repeat left top;
+      position: relative;
+      z-index: 1;
+
+      @include retina {
+        background: image-url("[email protected]") no-repeat left top / 100%;
+      }
+    }
   }
+}
 
+.toolbar {
   .annotation-tools {
     .toolbarButton {
       @if $platform == "darwin" {
@@ -17,35 +50,6 @@
           $padding-y: 4px
         );
       }
-
-      &.global-color {
-        &::before {
-          content: "";
-          display: inline-block;
-          vertical-align: top;
-          width: 12px;
-          height: 12px;
-          margin: 2px;
-          background-color: currentColor;
-          border: 1px solid rgba(0, 0, 0, 0.08);
-          border-radius: 3px;
-        }
-
-        .dropmarker {
-          display: inline-block;
-          vertical-align: top;
-          width: 7px;
-          height: 4px;
-          margin: 6px -1px 0 2px;
-          background: image-url("searchbar-dropmarker.png") no-repeat left top;
-          position: relative;
-          z-index: 1;
-
-          @include retina {
-            background: image-url("[email protected]") no-repeat left top / 100%;
-          }
-        }
-      }
     }
   }
 }