Merge pull request #2980 from hypothesis/annotation-style-cleanup

Annotation card & groups list style cleanup

h/static/styles/annotations.scss → h/static/styles/annotation.scss

@@ -143,11 +143,8 @@ $annotation-card-left-padding: 10px;
   }
 }
 
-//PRIVACY CONTROL////////////////////////////
-privacy {
-  position: relative;
-  top: 2px;
-}
+// Share dialog
+// ------------
 
 .share-dialog-wrapper {
   position: relative;

h/static/styles/app.scss

@@ -8,19 +8,28 @@ $base-line-height: 20px;
 @import './elements';
 @import './common';
 
-// components
+// Components
+// ----------
+@import './annotation';
 @import './api-token-input';
+@import './dropdown-menu-btn';
 @import './excerpt';
+@import './group-list';
+@import './markdown';
 @import './primary-action-btn';
-@import './dropdown-menu-btn';
 @import './publish-annotation-btn';
 @import './search-status-bar';
 @import './share-link';
 @import './sidebar-tutorial';
 @import './signin-control';
 @import './simple-search';
+@import './spinner';
+@import './tags-input';
+@import './thread';
 @import './top-bar';
 
+// Top-level styles
+// ----------------
 body {
   $sidebar-h-padding: 9px;
 
@@ -93,141 +102,3 @@ body {
     top: 1em;
   }
 }
-
-
-.user {
-  font-weight: bold;
-  font-size: 1.1em;
-  &:hover {
-    color: $link-color-hover;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-
-
-/* The groups dropdown list. */
-
-$group-list-width: 270px;
-$group-list-spacing-below: 50px;
-
-.group-list {
-  .dropdown {
-    white-space: nowrap;
-  }
-
-  .dropdown-menu {
-    width: $group-list-width;
-    max-height: 500px;  // fallback for browsers lacking support for vh/calc
-    max-height: calc(100vh - #{$top-bar-height} - #{$group-list-spacing-below});
-    overflow-y: auto;
-
-    .group-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: $group-list-width - 30px;
-    }
-  }
-
-  .group-item {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-
-    padding: 10px;
-    cursor: pointer;
-
-    &:hover {
-      .group-name-link {
-        color: $brand-color;
-      }
-    }
-
-    &.selected {
-      .group-name-link {
-        font-size: $body2-font-size;
-        font-weight: 600;
-      }
-    }
-  }
-
-  .group-icon-container {
-    margin-right: 10px;
-  }
-
-  .group-cancel-icon-container {
-    // the 'Leave group' icon is shifted down slightly
-    // so that it lines up vertically with the 'chat heads' icon on the
-    // left-hand side of the groups list
-    padding-top: 3px;
-    margin-right: 2px;
-  }
-
-  .group-details {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-
-  .new-group-btn {
-    background-color: $gray-lightest;
-
-    .group-item {
-      padding-top: 12px;
-      padding-bottom: 12px;
-    }
-
-    .h-icon-add {
-      font-weight: bold;
-    }
-  }
-}
-
-// the icon indicating the type of group currently selected at
-// the top of the groups list
-.group-list-label__icon {
-  color: $color-gray;
-  display: inline-block;
-  margin-right: 4px;
-  vertical-align: baseline;
-
-  // align the base of the chat-heads icon for groups
-  // with the baseline of the group name label
-  transform: translateY(1px);
-}
-
-// the label showing the currently selected group which opens
-// the drop-down list when clicked
-.group-list-label__label {
-  font-size: $body2-font-size;
-  font-weight:bold;
-}
-
-// 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;
-  color: inherit;
-}
-
-/* The user account dropdown menu */
-.user-picker {
-  .avatar {
-    border-radius: 2px;
-  }
-
-  .dropdown-toggle {
-    .provider {
-      color: $gray-light;
-      display: none;
-    }
-    &:hover {
-      .provider {
-        display: inline;
-      }
-    }
-  }
-
-  .dropdown.open .provider {
-    display: inline;
-  }
-}

h/static/styles/common.scss

-@import 'compass/typography/text/force-wrap';
 @import 'compass/layout/stretching';
-@import 'base';
-
-@import 'mixins/responsive';
-@import 'grid';
-@import 'annotations';
-@import 'forms';
-@import 'markdown-editor';
-@import 'spinner';
-@import 'threads';
-@import 'styled-text';
-@import 'tags-input';
-@import 'page';
+@import 'compass/typography/text/force-wrap';
+
+@import './base';
+@import './forms';
+@import './grid';
+@import './mixins/responsive';
+@import './page';
+@import './styled-text';
 
 //ELEMENT STYLES////////////////////////////////
 body {

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

+@import './primary-action-btn';
+
 // the primary action button for a form
 .dropdown-menu-btn {
   $text-color: $color-seashell;
@@ -12,7 +14,7 @@
   position: relative;
 
   &__btn {
-    @extend .primary-action-btn;
+    @include primary-action-btn;
 
     // the label occupies the entire space of the button and
     // shows a darker state on hover

h/static/styles/group-list.scss

+/* The groups dropdown list. */
+
+$group-list-width: 270px;
+$group-list-spacing-below: 50px;
+
+.group-list {
+  .dropdown {
+    white-space: nowrap;
+  }
+
+  .dropdown-menu {
+    width: $group-list-width;
+    max-height: 500px;  // fallback for browsers lacking support for vh/calc
+    max-height: calc(100vh - #{$top-bar-height} - #{$group-list-spacing-below});
+    overflow-y: auto;
+
+    .group-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: $group-list-width - 30px;
+    }
+  }
+
+  .group-item {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+
+    padding: 10px;
+    cursor: pointer;
+
+    &:hover {
+      .group-name-link {
+        color: $brand-color;
+      }
+    }
+
+    &.selected {
+      .group-name-link {
+        font-size: $body2-font-size;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .group-icon-container {
+    margin-right: 10px;
+  }
+
+  .group-cancel-icon-container {
+    // the 'Leave group' icon is shifted down slightly
+    // so that it lines up vertically with the 'chat heads' icon on the
+    // left-hand side of the groups list
+    padding-top: 3px;
+    margin-right: 2px;
+  }
+
+  .group-details {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .new-group-btn {
+    background-color: $gray-lightest;
+
+    .group-item {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    .h-icon-add {
+      font-weight: bold;
+    }
+  }
+}
+
+// the icon indicating the type of group currently selected at
+// the top of the groups list
+.group-list-label__icon {
+  color: $color-gray;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: baseline;
+
+  // align the base of the chat-heads icon for groups
+  // with the baseline of the group name label
+  transform: translateY(1px);
+}
+
+// the label showing the currently selected group which opens
+// the drop-down list when clicked
+.group-list-label__label {
+  font-size: $body2-font-size;
+  font-weight:bold;
+}
+
+// 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;
+  color: inherit;
+}

h/static/styles/primary-action-btn.scss

-// A dark grey button used for the primary action
-// in a form
-.primary-action-btn {
+@mixin primary-action-btn {
   // note that there is currently some duplication here between
   // the styling for this element and <dropdown-menu-btn>
   color: $color-seashell;
@@ -24,6 +22,12 @@
   }
 }
 
+// A dark grey button used for the primary action
+// in a form
+.primary-action-btn {
+  @include primary-action-btn;
+}
+
 .primary-action-btn--short {
   height: 30px;
 }

h/static/styles/signin-control.scss

@@ -2,3 +2,26 @@
   font-size: $body2-font-size;
   padding-left: 6px;
 }
+
+/* The user account dropdown menu */
+.signin-control-menu {
+  .avatar {
+    border-radius: 2px;
+  }
+
+  .dropdown-toggle {
+    .provider {
+      color: $gray-light;
+      display: none;
+    }
+    &:hover {
+      .provider {
+        display: inline;
+      }
+    }
+  }
+
+  .dropdown.open .provider {
+    display: inline;
+  }
+}

h/templates/client/signin_control.html

@@ -7,7 +7,7 @@
   / <a href="" ng-click="vm.onLogin()">Sign in</a>
 </span>
 <div ng-if="vm.newStyle"
-     class="pull-right user-picker"
+     class="pull-right signin-control-menu"
      dropdown
      keyboard-nav>
   <a role="button"
@@ -47,7 +47,7 @@
   <a href="" ng-click="vm.onLogin()">Sign in</a>
 </span>
 <div ng-if="!vm.newStyle"
-     class="pull-right user-picker"
+     class="pull-right signin-control-menu"
      dropdown
      keyboard-nav>
   <span role="button" data-toggle="dropdown" dropdown-toggle>