From 703a1e17424be3587709369cb61a50719dff3f7a Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Fri, 19 Jun 2015 16:07:24 -0700 Subject: [PATCH] fix(*) Minor friday fixes - see description - Delete should archive selection in split pane mode - Thread list "quick actions" should be inverted when row is dark blue - New star "action hover" state - Multiselect list state is based on WorkspaceStore.layoutMode so add it to state --- .../thread-list/lib/thread-list.cjsx | 2 +- .../thread-list/stylesheets/thread-list.less | 17 ++++++-- src/components/multiselect-list.cjsx | 41 ++++++++++-------- .../icon-star-action-hover-@2x.png | Bin 0 -> 15614 bytes 4 files changed, 37 insertions(+), 23 deletions(-) create mode 100644 static/images/thread-list/icon-star-action-hover-@2x.png 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 0000000000000000000000000000000000000000..86027144befb5bd698e0ab91c8096e6110d27cdc GIT binary patch literal 15614 zcmeI3YgiLk8pjWEk%A~Lwsa}gG%BK!OfEnm1{4T)f-GVM@zRhCBukPBnE@hd1#K<5 zuC%TT+VsTRR17B8i`tz1M9x{8XR>?A=rAUN$l{Wy7^ByZ07|KIn_ z?_4rpW>r*Vu$_&Q4FJF{G(;RtelrYjYb){-&&YU8e!Zm)iNgV~buhfmz?Qss0q}BF z#>5h_k_e#;Q?sRVECFTf)ml;wfM~j2E0raq1S0`WQfhpdt*1(u45i$MImbi7k!S-@ zg)$^VhtA4~jFDv|%e>{x>Ap51y^u_xMhPiHuU2Vrq27mS%qt{gLo>o;7$roq57W<3 zkP$11Vgz71l;OelWXU+50*1hw&Girn+y!n79*66JaQFzH!{YIU?i`^zkJ0mD`r43@ zNGDGeMvH@b%8|c(m3K1kdJ)ND-XJfh~gzN3?jc|AfkH;bvEPRoMkm^|)e7q^i zt2|;9m+6#RLWyY@hP=`QES2zKG7W`#Up?2Q*7g?C;63a}iilpSMYwDZGMGs&>-A_; zbt>b~cCLv?vmd;#jIqh6bjQmok2^t0$C+eUsBKlc8tGv7>tB5H>@P$!1&%rWq2E*D4Iq zp;7|V#bB7q*R;x_ULj-z1Q=Hp!&M@cDK!SJlSRltQ{RmDwgbdaUxr}Q~7^=YusYZr|ihaojwo)k< zCM0+#Nq%~F4-qo3d7vXosYg|@VkNnQal^Xgla-8~fgOVykyh+qMY3#LIC)3_)R!2%i=OoK9}aZw_I1vD<024zg+qC^A>Xk0K2%9zGQi3k?Z zxL_KTF^!875iFo_!89mi8W$xZSU}@~X;8*AE=okOfW`&Wpp0o;l!#yfjSHqh8Pm8Z z5y1i)7fgdPrg2dsf(0}#m~^_OCSR31^Tg$_PZOFL-%osbajc$`C=?X#Tw~|?iEvLotEFY!3EAm}hI7t0 zV+C$#v*=5_sSw+c77Pp$l>sU&7c8YpF%w{^a-nxINfnU*wm_rXin zu|8h9goce~ySBenf~%qHHk$+2BO6_;cP$ME+18__+iu5ATbx|kLR2{Xr!qev|JW$! z(s9ppqwH^dS5#lo@@Q`8k?nq|-R8rizBo4LhTEZIk64<95oXDcI!gp&Vk)|yp8KV| zgqP))%B$S!^dQ+kxn^Q$#RtnjM0MqDZEeS|UAuO;=0V+qj8#<)*Rtd~Q0L}q^Wj~E z*~)h&Xe|A0haVpHwdJoaMb}kf8m#El7Uag&b<7tjDfL{YKVZ&SpXK_Nbts4cg%iwN zK99-WY(FRPOlI)fCHWp3k`@M+`5Yg1|LEKT@ubN?r!_Yf)yUQn6IU~=|Mhu(U7pPI zRMBPmrf}Zs?eTM?!`43#5P7&2m@%WqtNy2801niA*ECOZfKz%}lho3DYuN3Il;=N+ z`NJY?=XLv~KYdyK{=@d0-!|gn>RI#uQhX(9&as2JXY=r`jxMDO z%{Yhi!zI5K#KUPrV*0rs6SEN)`7Z^zd+nSXPqkH-6&`m?TG0Ju8Mio~u8XyA#}{eG zPwZShdYfIhI!El-lHJ(4_2xaj5;d(B4ZKZ&u(4;x88j#YLhO5%)gJ5Phlj zn`~_ndCUH*<}j~>iFeEEclu-dCyfMGuD7d-4m>E8Uf3+i4J!noIrT{avzgqB5E UHjN@5WCkEKFjBnV|D)yq0}P?P761SM literal 0 HcmV?d00001