Merge pull request #4116 from mozilla-services/annotation-fixes

Annotation fixes
mozilla-services · Feb 15, 2018 · 1968677 · 1968677
2 parents f482f98 + b07ff25
commit 1968677
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
@@ -130,7 +130,7 @@ exports.Editor = class Editor extends React.Component {
     const penState = this.state.tool === "pen" ? "active" : "inactive";
     const highlighterState = this.state.tool === "highlighter" ? "active" : "inactive";
     return <div className="editor-header default-color-scheme">
-      <div className="shot-main-actions">
+      <div className="shot-main-actions annotation-main-actions">
         <div className="annotation-tools">
           <Localized id="annotationCropButton">
             <button className={`button transparent crop-button`} id="crop" onClick={this.onClickCrop.bind(this)} title="Crop"></button>
@@ -563,7 +563,7 @@ exports.Editor = class Editor extends React.Component {
 
   draw(e) {
     e.preventDefault();
-    if (!drawMousedown) {
+    if (!drawMousedown || e.button !== 0) {
       return;
     }
     if (this.state.tool === "highlighter") {
@@ -639,8 +639,7 @@ class ColorPicker extends React.Component {
   }
 
   render() {
-    const border = this.state.color === "rgb(255, 255, 255)" ? "#000" : this.state.color;
-    return <div><button className="color-button" id="color-picker" onClick={this.onClickColorPicker.bind(this)} title="Color Picker" style={{"backgroundColor": this.state.color, "border": `1px solid ${border}`}}></button>
+    return <div><button className="color-button" id="color-picker" onClick={this.onClickColorPicker.bind(this)} title="Color Picker" style={{"backgroundColor": this.state.color, "border": "3px solid #D4D4D4"}}></button>
       {this.state.pickerActive ? this.renderColorBoard() : null}
     </div>
   }
@@ -655,6 +654,9 @@ class ColorPicker extends React.Component {
 
   renderColorBoard() {
     return <div className="color-board">
+      <div className="triangle">
+        <div className="triangle-inner"></div>
+      </div>
       <div className="row">
         <div className="swatch" title="White" style={{backgroundColor: "#FFF", border: "1px solid #000"}} onClick={this.onClickSwatch.bind(this)}></div>
         <div className="swatch" title="Black" style={{backgroundColor: "#000"}} onClick={this.onClickSwatch.bind(this)}></div>

diff --git a/static/css/frame.scss b/static/css/frame.scss
@@ -361,6 +361,7 @@
   position: relative;
   left: -31px;
   top: -5px;
+  margin-right: -17px;
 }
 
 .highlight-button {
@@ -423,6 +424,7 @@ body {
   display: flex;
   justify-content: space-between;
   height: 100px;
+  z-index: 2;
 
   .button {
     margin: $grid-unit * 0.25;
@@ -467,6 +469,10 @@ body {
   }
 }
 
+.annotation-main-actions {
+  overflow: visible;
+}
+
 .annotation-alt-actions {
   height: 72px;
   @include respond-to("small") {
@@ -482,6 +488,7 @@ body {
   justify-content: center;
   position: relative;
   flex: 1;
+  z-index: 1;
 
   @include respond-to("small") {
     top: $grid-unit * 4;
@@ -533,10 +540,10 @@ body {
 }
 
 .color-button {
-  height: 25px;
-  width: 25px;
-  border-radius: 12.5px;
-  margin: 12px 5px 0 5px;
+  height: 28px;
+  width: 28px;
+  border-radius: 14px;
+  margin: 10.5px 5px 0 5px;
 
   &:hover {
     cursor: pointer;
@@ -550,7 +557,31 @@ body {
   position: absolute;
   background: $light-default;
   border: 1px solid $light-border;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
   padding: 20px;
+
+  .triangle {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 15px solid $light-border;
+    top: -15px;
+    left: 8px;
+
+    .triangle-inner {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 13px solid $light-default;
+      left: -8px;
+      top: 2px;
+    }
+  }
 }
 
 .color-board .row {
@@ -567,7 +598,7 @@ body {
 
   &:hover
     {
-      border: 2px solid $light-border-active !important;
+      border: 3px solid #d4d4d4 !important;
     }
 }