diff --git a/internal_packages/thread-list/lib/thread-list.cjsx b/internal_packages/thread-list/lib/thread-list.cjsx index 81442d77e..5d7922628 100644 --- a/internal_packages/thread-list/lib/thread-list.cjsx +++ b/internal_packages/thread-list/lib/thread-list.cjsx @@ -182,7 +182,7 @@ class ThreadList extends React.Component # Additional Commands _onArchive: => - if @_viewingFocusedThread() or ThreadListStore.view().selection.count() is 0 + if ThreadListStore.view().selection.count() is 0 Actions.archive() else Actions.archiveSelection() diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less index 637b4b87c..1bc84e024 100644 --- a/internal_packages/thread-list/stylesheets/thread-list.less +++ b/internal_packages/thread-list/stylesheets/thread-list.less @@ -4,7 +4,7 @@ // MIXINS .inverseContent() { - // Note: these styles are also applied below + // Note: these styles are also applied below // subpixel antialiasing looks awful against dark background colors -webkit-font-smoothing: antialiased; @@ -230,16 +230,19 @@ .thread-list .list-item.focused:hover .list-column-HoverActions .inner { background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%); + .action { + -webkit-filter: invert(100%) brightness(300%); + } } // stars -.thread-icon-star-on-hover:hover, .thread-list .list-item:hover .thread-icon-star-on-hover:hover { - background-image:url(../static/images/thread-list/icon-star-@2x.png); + background-image:url(../static/images/thread-list/icon-star-action-hover-@2x.png); background-size: 16px; } +.thread-icon-star-on-hover:hover, .thread-list .list-item:hover .thread-icon-star-on-hover { background-image:url(../static/images/thread-list/icon-star-hover-@2x.png); background-size: 16px; @@ -275,6 +278,8 @@ } } +// selection looks like focus in split mode + .thread-list.handler-split { .list-item { &.selected { @@ -283,4 +288,10 @@ .inverseContent; } } + .list-item.selected:hover .list-column-HoverActions .inner { + background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%); + .action { + -webkit-filter: invert(100%) brightness(300%); + } + } } diff --git a/src/components/multiselect-list.cjsx b/src/components/multiselect-list.cjsx index a483d6e64..4ecf7cb52 100644 --- a/src/components/multiselect-list.cjsx +++ b/src/components/multiselect-list.cjsx @@ -97,24 +97,25 @@ class MultiselectList extends React.Component # className = @props.className className += " ready" if @state.ready - className += " " + @state.handler.cssClass() - @itemPropsProvider ?= (item) => - props = @props.itemPropsProvider(item) - props.className ?= '' - props.className += " " + classNames - 'selected': item.id in @state.selectedIds - 'focused': @state.handler.shouldShowFocus() and item.id is @state.focusedId - 'keyboard-cursor': @state.handler.shouldShowKeyboardCursor() and item.id is @state.keyboardCursorId - props + if @state.dataView and @state.handler + className += " " + @state.handler.cssClass() - emptyElement = [] - if @props.emptyComponent - emptyElement = <@props.emptyComponent - visible={@state.ready && @state.dataView.count() is 0} - dataView={@state.dataView} /> + @itemPropsProvider ?= (item) => + props = @props.itemPropsProvider(item) + props.className ?= '' + props.className += " " + classNames + 'selected': item.id in @state.selectedIds + 'focused': @state.handler.shouldShowFocus() and item.id is @state.focusedId + 'keyboard-cursor': @state.handler.shouldShowKeyboardCursor() and item.id is @state.keyboardCursorId + props + + emptyElement = [] + if @props.emptyComponent + emptyElement = <@props.emptyComponent + visible={@state.ready && @state.dataView.count() is 0} + dataView={@state.dataView} /> - if @state.dataView