1. 15 Jun, 2016 5 commits
  2. 13 Jun, 2016 8 commits
  3. 10 Jun, 2016 14 commits
  4. 09 Jun, 2016 9 commits
  5. 07 Jun, 2016 3 commits
  6. 06 Jun, 2016 1 commit
    • Robert Knight's avatar
      Implement new design for hovered conversation threads (#3376) · a3f910d3
      Robert Knight authored
      * Implement new design for hovered conversation threads
      
      Implement the new design for hovered replies from
      https://trello.com/c/aXCXxzx2 .
      
      The most visible effect is that conversation threads have a grey
      background when hovered.
      
      In the process of implementing the new styling, there is some cleanup
      of the CSS:
      
       * Use `--reply`/`--top-reply` modifier classes on <annotation> and
         <annotation-thread> elements to style annotations, top-level replies
         and nested replies differently. This makes the CSS simpler and
         reduces the risk of unexpected side effects that come with descendant
         selectors.
      
       * Rename `thread` CSS classes to match the name of the component
         that they are used in, `annotation-thread`.
      
      * Move 'annotation-unavailable-message' styling to app.scss
      
      This class is used in the root template (viewer.html) not the
      <annotation-thread> component.
      
      * Darken expand/collapse toggle arrow only when annotation itself is hovered
      
      Darken the expand/collapse arrow when an annotation is hovered but not
      when its replies are hovered.
      
      * Remove no-op CSS class
      
      The `clear: both` styling had no effect because <annotation-thread>
      is now using flexbox rather than floats for layout.
      
      * Do not show 'Hide replies' link for replies
      
      For replies there were two different ways to collapse the annotation
      card, the expand/collapse toggle arrow and the 'Hide replies' link.
      
      Removing the 'Hide replies' link avoids having two ways to do the same
      thing and makes the cards look cleaner.
      
      * Remove the light grey background for hovered replies
      
      Following design review, remove the grey background for hovered replies.
      
      * Make rendering of dashed lines to the left of replies better in Chrome
      
      Previously the dashed line started at the top of the <annotation-thread>
      component and the top part was covered up by the thread expand/collapse
      toggle.
      
      In Chrome the alignment of dashes within a dashed border varies as the
      height of the element changes [1]. Therefore depending on the height of
      the reply, this could result in the visible part of the line below the
      collapse/expand toggle starting at either a gap or dash in the line.
      
      By instead moving the dashed line to a separate element which is
      positioned beneath the expand/collapse toggle, the first visible dash in
      the reply line always appears in the same place and is aligned correctly
      with the annotation content to its right.
      
      [1] See http://www.impressivewebs.com/comparison-css-border-style/
          for a visual representation of why this is done.
      a3f910d3