-
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
Name |
Last commit
|
Last update |
---|---|---|
.. | ||
static | ||
templates/client |