Merge pull request #2601 from robertknight/t125-post_button_ui_fixes

Enable privacy dropdown even when saving an annotation is disabled

h/static/scripts/directive/test/publish-annotation-btn-test.js

@@ -106,7 +106,7 @@ describe('publishAnnotationBtn', function () {
       canPost: false
     });
     var disabledBtns = element.find('button[disabled]');
-    assert.equal(disabledBtns.length, 2);
+    assert.equal(disabledBtns.length, 1);
 
     // check that buttons are enabled when posting is possible
     element.link({

h/static/styles/app.scss

@@ -8,6 +8,7 @@ $base-line-height: 20px;
 @import './common';
 
 // components
+@import './primary-action-btn';
 @import './dropdown-menu-btn';
 @import './publish-annotation-btn';
 @import './share-link';

h/static/styles/dropdown-menu-btn.scss

 // the primary action button for a form
 .dropdown-menu-btn {
-  $text-color: #f1f1f1;
-  $default-background-color: #626262;
-  $hover-background-color: #3A3A3A;
+  $text-color: $color-seashell;
+  $default-background-color: $color-dove-gray;
+  $hover-background-color: $color-mine-shaft;
   $h-padding: 9px;
   $height: 35px;
   $border-radius: 2px;
   $arrow-indicator-width: 26px;
 
-  background-color: $default-background-color;
-
-  border: 0px;
-  border-radius: $border-radius;
-
-  font-size: $body1-font-size;
-  font-weight: bold;
   height: $height;
   position: relative;
 
-  user-select: none;
+  &__btn {
+    @extend .primary-action-btn;
 
-  &__label {
     // the label occupies the entire space of the button and
     // shows a darker state on hover
     width: 100%;
     height: 100%;
-
-    color: $text-color;
-    background-color: transparent;
-    border-radius: $border-radius;
-    border: none;
-    line-height: $height;
+    text-align: left;
     padding-left: $h-padding;
     padding-right: $arrow-indicator-width + 8px;
-
-    text-align: left;
-    vertical-align: middle;
-
-    &:hover {
-      background-color: $hover-background-color;
-    }
-
-    &:disabled {
-      color: $gray-light;
-    }
   }
 
   // dropdown arrow which reveals the button's associated menu
@@ -65,7 +42,7 @@
     border-bottom-right-radius: $border-radius;
 
     &:hover {
-      background-color: #3A3A3A;
+      background-color: $hover-background-color;
     }
 
     &:hover &-separator {
@@ -85,7 +62,7 @@
       width: 1px;
       height: 15px;
 
-      background-color: #818181;
+      background-color: $color-gray;
     }
 
     // the ▼ arrow which reveals the dropdown menu when clicked

h/static/styles/variables.scss

@@ -14,6 +14,7 @@ $gray-lightest: #f9f9f9 !default;
 
 $color-mine-shaft: #3A3A3A;
 $color-dove-gray: #626262;
+$color-gray: #818181;
 $color-silver-chalice: #a6a6a6;
 $color-silver: #bbb;
 $color-alto: #dedede;

h/templates/client/dropdown_menu_btn.html

 <div class="dropdown-menu-btn">
   <button
-    class="dropdown-menu-btn__label"
+    class="dropdown-menu-btn__btn"
     ng-bind="label"
     ng-click="vm.onClick($event)"
     ng-disabled="isDisabled">
@@ -8,8 +8,7 @@
   <button
     class="dropdown-menu-btn__dropdown-arrow"
     title="{{dropdownMenuLabel}}"
-    ng-click="vm.toggleDropdown($event)"
-    ng-disabled="isDisabled">
+    ng-click="vm.toggleDropdown($event)">
     <div class="dropdown-menu-btn__dropdown-arrow-separator"></div>
     <div class="dropdown-menu-btn__dropdown-arrow-indicator">
       <div>▼</div>