Merge pull request #1197 from hypothesis/remove-old-dropdown

Remove old dropdown menu implementation

src/sidebar/index.js

@@ -131,7 +131,6 @@ function startAngularApp(config) {
       // Angular addons which do not export the Angular module
       // name via module.exports
       ['ngTagsInput', require('ng-tags-input')][0],
-      ['ui.bootstrap', require('./vendor/ui-bootstrap-custom-tpls-0.13.4')][0],
 
       // Local addons
       'ngRaven',

src/sidebar/templates/sort-dropdown.html

-<span dropdown keyboard-nav>
-  <button
-    type="button"
-    class="top-bar__btn"
-    dropdown-toggle
-    title="Sort by {{vm.sortKey}}">
-    <i class="h-icon-sort"></i>
-  </button>
-  <div class="dropdown-menu__top-arrow"></div>
-  <ul class="dropdown-menu pull-right" role="menu">
-    <li class="dropdown-menu__row"
-        ng-repeat="key in vm.sortKeysAvailable"
-        ng-click="vm.onChangeSortKey({sortKey: key})"
-        ><span class="dropdown-menu-radio"
-               ng-class="{'is-selected' : vm.sortKey === key}"
-        ></span><a class="dropdown-menu__link" href="">{{key}}</a></li>
-  </ul>
-</span>

src/styles/mixins/forms.scss

@@ -82,8 +82,6 @@
 }
 
 @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;
   background-color: $color-dove-gray;
   height: 35px;

src/styles/sidebar/common.scss

@@ -33,11 +33,6 @@ html {
   font-size: $body1-font-size;
 }
 
-//Candidate for cleanup
-.pull-right {
-  float: right;
-}
-
 //CLOSER////////////////////////////////
 .close {
   cursor: pointer;
@@ -67,221 +62,6 @@ html {
   }
 }
 
-//DROPDOWNS////////////////////////////////
-.dropdown {
-  position: relative;
-  span {
-    cursor: pointer;
-    &:hover {
-      color: black;
-    }
-  }
-}
-
-.dropdown-toggle {
-  cursor: pointer;
-
-  &:active {
-    outline: 0;
-  }
-}
-
-.dropdown-menu {
-  visibility: hidden;
-  background: $white;
-  border: solid 1px $gray-lighter;
-  margin-top: 6px;
-  top: 100%;
-  float: left;
-  position: absolute;
-  z-index: 2;
-
-  &__link {
-    color: inherit;
-
-    display: block;
-    line-height: 1;
-    white-space: nowrap;
-    font-size: $body2-font-size;
-    cursor: pointer;
-
-    &:hover {
-      color: $brand-color;
-    }
-  }
-
-  &__link--subtle {
-    &:hover {
-      color: $color-gray;
-    }
-  }
-
-  &__link--disabled {
-    &:hover {
-      cursor: default;
-      color: inherit;
-    }
-  }
-
-  // These psuedo-elements add the speech bubble tail / triangle.
-  &:before,
-  &:after {
-    // http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox
-    transform: scale(0.9999);
-    border-color: rgba(0, 0, 0, 0);
-
-    border-style: solid;
-    border-width: 0 7px 6px 7px;
-    content: '';
-    position: absolute;
-    height: 0;
-    left: 0;
-    width: 0;
-  }
-
-  &:before {
-    border-bottom-color: $gray-lighter;
-    top: -7px;
-  }
-
-  &:after {
-    border-bottom-color: $white;
-    top: -6px;
-    z-index: 3;
-  }
-
-  // Aligns the dropdown menu to right
-  &.pull-right {
-    right: 0;
-    left: auto;
-    text-align: right;
-
-    // Align the tail
-    &:before,
-    &:after {
-      left: auto;
-      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%;
-    }
-  }
-
-  // Hides the dropdown menu's default ▲ indicator.
-  // This is used for cases where a separate element is used
-  // as the indicator
-  &.pull-none {
-    &:before,
-    &:after {
-      display: none;
-    }
-  }
-}
-
-.open {
-  & > .dropdown-menu {
-    @include smallshadow;
-    visibility: visible;
-  }
-}
-
-// A 'standalone' arrow for the top of a dropdown menu.
-// .dropdown-menu has a "built-in" arrow using CSS :before,:after.
-//
-// The standalone arrow is used when the dropdown menu arrow needs
-// to be positioned relative to the item which opens the menu rather
-// than relative to the dropdown menu content.
-//
-// When using the standalone arrow, the built-in arrow is hidden using
-// the .pull-none class
-.dropdown-menu__top-arrow {
-  // the element itself forms the outer border of the arrow
-  $arrow-size: 7px;
-  $bottom-offset: $arrow-size - 1px;
-  visibility: hidden;
-
-  width: 0px;
-  height: 0px;
-  border-top: none;
-  border-left: $arrow-size solid transparent;
-  border-right: $arrow-size solid transparent;
-  border-bottom: $arrow-size solid $gray-lighter;
-  position: absolute;
-  right: 0px;
-  bottom: -$bottom-offset;
-
-  z-index: 3;
-
-  // :after is used to create another arrow of the same size at a 1px
-  // vertical offset, forming the fill and base of the arrow
-  &:after {
-    width: 0px;
-    height: 0px;
-    border-top: none;
-    border-left: $arrow-size solid transparent;
-    border-right: $arrow-size solid transparent;
-    border-bottom: $arrow-size solid white;
-    content: '';
-    position: absolute;
-    left: 0 - $arrow-size;
-    top: 1px;
-  }
-}
-
-.open > .dropdown-menu__top-arrow {
-  visibility: visible;
-}
-
-// Row in a dropdown menu
-.dropdown-menu__row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 8px;
-  padding-right: 16px;
-
-  min-height: 40px;
-  min-width: 120px;
-
-  &:not(:first-child) {
-    border-top: dotted 1px $gray-lighter;
-  }
-}
-
-// Row in a dropdown menu
-.dropdown-menu__row--no-border {
-  border: none;
-}
-
-.dropdown-menu__row--unpadded {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-// Radio button in a dropdown menu
-.dropdown-menu-radio {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  margin-left: 8px;
-  margin-right: 8px;
-
-  border: 1px solid $color-silver;
-}
-
-.dropdown-menu-radio.is-selected {
-  border: 4px solid $color-dove-gray;
-}
-
 //TABS////////////////////////////////
 .nav-tabs {
   margin-bottom: 0.7em;