Merge pull request #2606 from robertknight/t112-center_post_dropdown

Let the annotation post button resize to fit its content

h/static/styles/app.scss

@@ -153,6 +153,12 @@ $group-list-width: 270px;
   }
 }
 
+// the name of a group in the groups drop-down list
+// and 'Post to <Group>' button for saving annotations
+.group-name-link {
+  white-space: nowrap;
+}
+
 /* The user account dropdown menu */
 .user-picker {
   .avatar {

h/static/styles/common.scss

@@ -164,14 +164,12 @@ html {
 }
 
 .dropdown-menu {
-  @include rotateX(90deg);
+  visibility: hidden;
   background: $white;
   border: solid 1px $gray-lighter;
   margin-top: .8em;
   top: 100%;
   float: left;
-  opacity: 0;
-  pointer-events: none;
   position: absolute;
   z-index: 2;
 
@@ -248,14 +246,22 @@ html {
       right: 0;
     }
   }
+
+  // Aligns the dropdown menu's '▲' indicator to the center,
+  // the menu itself has to be aligned by the user
+  &.pull-center {
+    // Align the tail
+    &:before, &:after {
+      left: auto;
+      right: 50%;
+    }
+  }
 }
 
 .open {
   & > .dropdown-menu {
     @include smallshadow;
-    @include rotateX(0);
-    opacity: 1;
-    pointer-events: auto;
+    visibility: visible;
   }
 }
 

h/static/styles/publish-annotation-btn.scss

@@ -2,14 +2,32 @@
   display: flex;
 
   &__btn {
-    width: 250px;
+    position: relative;
   }
 
+  // a container which wraps the dropdown menu
+  // in order to allow it to be positioned
+  // relative to its own width
+  &__dropdown-container {
+    position: absolute;
+    left: 100%;
+  }
+
+  // the content of the dropdown menu
   &__dropdown-menu {
-    width: 100%;
+    // align the ▼ arrow in the dropdown button
+    // with the ▲ arrow in the dropdown menu
+    position: relative;
+    left: calc(-50% - 6px);
   }
 }
 
+// .dropdown-menu initially hides the dropdown via
+// `visibility`. Show it when the dropdown is open
+.open .publish-annotation-btn__dropdown-menu {
+  visibility: visible;
+}
+
 .publish-annotation-cancel-btn {
   @extend .btn--cancel;
 

h/templates/client/publish_annotation_btn.html

@@ -7,32 +7,34 @@
     dropdown-menu-label="Change annotation sharing setting"
     is-disabled="!canPost">
   </dropdown-menu-btn>
-  <ul class="dropdown-menu pull-right group-list publish-annotation-btn__dropdown-menu" role="menu">
-    <li ng-click="vm.setPrivacy('shared')">
-      <div class="group-item">
-        <div class="group-icon-container">
-          <i class="small" ng-class="'h-icon-' + vm.group.type"></i>
-        </div>
-        <div class="group-details">
-          <div class="group-name-container">
-            <a href="" class="group-name-link" ng-bind="vm.group.name"></a>
+  <div class="publish-annotation-btn__dropdown-container">
+    <ul class="dropdown-menu pull-center group-list publish-annotation-btn__dropdown-menu" role="menu">
+      <li ng-click="vm.setPrivacy('shared')">
+        <div class="group-item">
+          <div class="group-icon-container">
+            <i class="small" ng-class="'h-icon-' + vm.group.type"></i>
+          </div>
+          <div class="group-details">
+            <div class="group-name-container">
+              <a href="" class="group-name-link" ng-bind="vm.group.name"></a>
+            </div>
           </div>
         </div>
-      </div>
-    </li>
-    <li ng-click="vm.setPrivacy('private')">
-      <div class="group-item">
-        <div class="group-icon-container">
-          <i class="small h-icon-lock"></i>
-        </div>
-        <div class="group-details">
-          <div class="group-name-container">
-            <a href="" class="group-name-link" ng-bind="vm.privateLabel"></a>
+      </li>
+      <li ng-click="vm.setPrivacy('private')">
+        <div class="group-item">
+          <div class="group-icon-container">
+            <i class="small h-icon-lock"></i>
+          </div>
+          <div class="group-details">
+            <div class="group-name-container">
+              <a href="" class="group-name-link" ng-bind="vm.privateLabel"></a>
+            </div>
           </div>
         </div>
-      </div>
-    </li>
-  </ul>
+      </li>
+    </ul>
+  </div>
 </div>
 <button class="publish-annotation-cancel-btn btn-clean"
         ng-click="vm.cancel()"