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
- if WorkspaceStore.layoutMode() is "list" + if @state.layoutMode WorkspaceStore.topSheet().root else true @@ -179,6 +180,7 @@ class MultiselectList extends React.Component props ?= @props state = @state ? {} + layoutMode = WorkspaceStore.layoutMode() view = props.dataStore?.view() return {} unless view @@ -186,14 +188,14 @@ class MultiselectList extends React.Component # it will cause a re-render of the entire ListTabular. To know whether our # computed columns are still valid, we store the original columns in our state # along with the computed ones. - if props.columns isnt state.columns + if props.columns isnt state.columns or layoutMode isnt state.layoutMode computedColumns = [].concat(props.columns) - if WorkspaceStore.layoutMode() is 'list' + if layoutMode is 'list' computedColumns.splice(0, 0, @_getCheckmarkColumn()) else computedColumns = state.computedColumns - if WorkspaceStore.layoutMode() is 'list' + if layoutMode is 'list' handler = new MultiselectListInteractionHandler(view, props.collection) else handler = new MultiselectSplitInteractionHandler(view, props.collection) @@ -203,6 +205,7 @@ class MultiselectList extends React.Component ready: view.loaded() columns: props.columns computedColumns: computedColumns + layoutMode: layoutMode selectedIds: view.selection.ids() focusedId: FocusedContentStore.focusedId(props.collection) keyboardCursorId: FocusedContentStore.keyboardCursorId(props.collection) diff --git a/static/images/thread-list/icon-star-action-hover-@2x.png b/static/images/thread-list/icon-star-action-hover-@2x.png new file mode 100644 index 000000000..86027144b Binary files /dev/null and b/static/images/thread-list/icon-star-action-hover-@2x.png differ