<div dir="ltr">Hi,<br><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Oct 19, 2016 at 10:07 AM, SJ Cox <span dir="ltr"><<a href="mailto:sjcox@redhat.com" target="_blank">sjcox@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr">Thank you for all the feedback! <div><br></div><div>And I agree with option 2 as well. Catherine, to answer your questions, that bar is always there. That bar is shared to show filters and selection and just updates as filters are added and selection changes.</div><div><br></div><div>This is also the reason that selection is on the right as opposed to the left. When filters are added, they appear under the filter field, which is on the left. That is another con with this design is that it could potentially run out of room in that bar when a certain amount of filters are added. In that case should we add another row for filters of just truncate the filters with a ... and then have a way to show all (Which would still add another row, or perhaps a drop down?).</div></div></blockquote><div><br></div><div><div>Just wondering about the table selection labels themselves. Do we have a standpoint on the language used? They seem more narrative ("Select all 90 items in this table."), versus something less verbose like: </div><div><p class="gmail-m_-5890018340245862179gmail-p1">Selection: 18 (of 90) | <font color="#3d85c6">Select All</font></p><p class="gmail-m_-5890018340245862179gmail-p1">Selection: All (90 of 90) | <font color="#3d85c6">Clear </font><font color="#3d85c6"><br></font><font color="#000000"><br>or something like that... Something more concise might be useful when the applied filters are in view. </font></p></div></div><div>Liz C.</div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr"><div><br></div><div>Also Matt, item selection should be consistent across all data views so thanks for bringing that to our attention!</div><div><br></div><div>Thank you!</div><div>SJ</div></div><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Oct 19, 2016 at 6:37 AM, Matt Carrano <span dir="ltr"><<a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr"><div><div>I also like option 2 as I don't see a need to insert a new row. But I have a similar question to Catherine's. My expectation is that this Select All action is always there (no need to prompt). I also think you could shorten this to drop the "in this table" from the end. So the row would be something like: 18 of 90 Items Selected | <u>Select All 90 Items </u>I've done something similar to this in my Storage designs.<br><u><br></u></div>I'm also wondering why this text is on the right rather than the left (I've been putting it on the left). Looking at the PF library, I notice this is on the left for list view but on the right for table view. Is that inconsistency intentional?<br><br></div>Matt<br></div><div class="gmail_extra"><div><div class="gmail-m_8810010101473651260h5"><br><div class="gmail_quote">On Wed, Oct 19, 2016 at 9:25 AM, Catherine Robson <span dir="ltr"><<a href="mailto:crobson@redhat.com" target="_blank">crobson@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr">Option 2 makes more sense around having consolidated content about your selections, but when does that bar show up? Is that bar always there and has 0 out of 90 items selected by default, and then just updates as selections change? </div><div class="gmail-m_8810010101473651260m_4605720137772489152HOEnZb"><div class="gmail-m_8810010101473651260m_4605720137772489152h5"><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Oct 18, 2016 at 6:01 PM, Allie Jacobs <span dir="ltr"><<a href="mailto:ajacobs@redhat.com" target="_blank">ajacobs@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr">Hey SJ,<div><br></div><div>Great job thinking through the pros and cons. Option 1 seems familiar (gmail) but I think option 2 is more elegant. It may not be as obvious / familiar but the select all link is readily available in an area that makes sense. </div><div><br></div><div>Allie</div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div class="gmail-m_8810010101473651260m_4605720137772489152m_771671770038693631h5">On Tue, Oct 18, 2016 at 2:36 PM, SJ Cox <span dir="ltr"><<a href="mailto:sjcox@redhat.com" target="_blank">sjcox@redhat.com</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div><div class="gmail-m_8810010101473651260m_4605720137772489152m_771671770038693631h5"><div dir="ltr">Hello fellow PatternFlyers!<div><br></div><div>This sprint I'm working on the conceptual design for pagination across data tables (includes card and list view)</div><div><br></div><div>I wanted to share my thoughts and progress and see if anyone had any concerns or feedback based on what is being done with tables in products to date. What works, what doesn't?</div><div><br></div><div>With the addition of pagination, all elements/controls related to pagination would be found on the bottom of the table. This includes:</div><div><div><ul><li>See the number of items on a page and total number of pages<br></li><li>See how many pages of data there is.<br></li><li>View which page you are on (current location)<br></li><li>Modify how many pages are being displayed.<br></li><li>Skip to the next or previous page.<br></li><li>Skip multiple pages.<br></li><li>Navigate to the first/last page.</li></ul></div></div><div>With this story we wanted to add the ability to select all items across multiple pages. Initially, if you select all on a page, it will select all items only on that page. Then it would prompt the user to select all items across the table. I came up with two options for the "select all" option.</div><div><br></div><div><b>OPTION 1</b></div><div><br></div><div><img src="cid:ii_157d901f1fda6730" alt="Inline image 2" width="523" height="399"> <img src="cid:ii_157d9026585be9dc" alt="Inline image 3" width="523" height="415"><br></div><div>The first option above shows a new row appearing within the table under the row headers, in the form of a message. This message informs you of how many items are selected and gives you the ability to select all. Once all are selected, you have the ability to clear selection from the within the same message. </div><div><br></div><div>Also, what would happen as you page through the table? I've seen it behave differently. In google, as you page through, the selection is cleared. In this design I didn't think that would be a great experience. </div><div><br></div><div><u>Option 1 Pros</u>: the addition of the message row is obvious and will draw the users attention.</div><div><u>Option 1 Cons:</u> Table height would have to adjust to accommodate new message row. Also, does the placement of the message make sense under the row headers? Furthermore, it's redundant to show the number of items shown twice (upper right, and in message)</div><div><br></div><div><br></div><div><b>OPTION 2</b></div><div><b><br></b></div><div>Option two addresses the cons of option 1. When selecting all items within a page, you get prompted to select all items within the table next to where it shows you total number of items selected. Same with clearing selection.</div><div><br></div><div><img src="cid:ii_157d90841ec4fc9d" alt="Inline image 5" width="523" height="400"><br></div><div><img src="cid:ii_157d9086098ef52d" alt="Inline image 6" width="523" height="399"><br></div><div><br></div><div><u>Option 2 Pros</u>: No need for creating a new message row and shifting the table down. No redundant info.</div><div><u>Option 3 Cons</u>: Might not be obvious that you can select all items. Does is seem hidden?</div><div><br></div><div><br></div><div>Let me know your thoughts, thank you!</div><span class="gmail-m_8810010101473651260m_4605720137772489152m_771671770038693631m_-6462836521891410816HOEnZb"><font color="#888888"><div><br><div><div><br></div>-- <br><div class="gmail-m_8810010101473651260m_4605720137772489152m_771671770038693631m_-6462836521891410816m_-5512385946235657224gmail_signature"><div dir="ltr">
<table style="border-collapse:collapse;border:none;font-family:'helvetica neue';font-size:14px" width="530" cellspacing="0" cellpadding="0">
<tbody><tr><td style="border:0px solid rgb(1,1,1)" width="257" valign="top" align="left"><div align="left"><font color="#cc0000"><font size="2" face="Arial"><span style="font-size:10pt"><b>Sarah Jane Cox</b></span></font> </font><font color="#010101" face="Calibri"><span style="font-size:11pt"><br></span></font> <font color="#999999"><font size="1" face="Arial"><span style="font-size:9pt">User Interaction Designer</span></font> <font face="Calibri"><span style="font-size:11pt"><br></span></font> </font><font size="1" face="Arial"><span style="font-size:9pt"><font color="#999999">User Experience Design Team<br></font><br></span></font><a href="http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&" target="_blank"><font size="2" color="#3d85c6" face="arial, helvetica, sans-serif">Red Hat, Inc.</font></a><font size="1" color="#404040" face="Arial"><span style="font-size:9pt"><br></span></font></div></td><td style="border:0px solid rgb(1,1,1)" width="272" valign="top" align="left"><div align="left"><br></div></td></tr></tbody></table></div></div>
</div></div></font></span></div>
<br></div></div>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><span class="gmail-m_8810010101473651260m_4605720137772489152m_771671770038693631HOEnZb"><font color="#888888"><br><br clear="all"><div><br></div>-- <br><div class="gmail-m_8810010101473651260m_4605720137772489152m_771671770038693631m_-6462836521891410816gmail_signature"><div dir="ltr"><div><br></div>
Allie Jacobs<br>UXD
<p><span><a href="https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York" target="_blank">calendar</a></span></p></div></div>
</font></span></div>
<br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><br></div>
</div></div><br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><br><br clear="all"><span class="gmail-HOEnZb"><font color="#888888"><br>-- <br></font></span></div></div><span class="gmail-HOEnZb"><font color="#888888"><span class="gmail-m_8810010101473651260HOEnZb"><font color="#888888"><div class="gmail-m_8810010101473651260m_4605720137772489152gmail_signature"><div dir="ltr"><div><div><div>Matt Carrano<br></div>Sr. Interaction Designer<br></div>Red Hat, Inc.<br></div><a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@redhat.com</a><br></div></div>
</font></span></font></span></div><span class="gmail-HOEnZb"><font color="#888888">
</font></span></blockquote></div><span class="gmail-HOEnZb"><font color="#888888"><br><br clear="all"><div><br></div>-- <br><div class="gmail-m_8810010101473651260gmail_signature"><div dir="ltr">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:none;font-family:'helvetica neue';font-size:14px" width="530">
<tbody><tr><td align="left" style="border:0px solid rgb(1,1,1)" valign="top" width="257"><div align="left"><font color="#cc0000"><font face="Arial" size="2"><span style="font-size:10pt"><b>Sarah Jane Cox</b></span></font> </font><font color="#010101" face="Calibri"><span style="font-size:11pt"><br></span></font> <font color="#999999"><font face="Arial" size="1"><span style="font-size:9pt">User Interaction Designer</span></font> <font face="Calibri"><span style="font-size:11pt"><br></span></font> </font><font face="Arial" size="1"><span style="font-size:9pt"><font color="#999999">User Experience Design Team<br></font><br></span></font><a href="http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&" target="_blank"><font face="arial, helvetica, sans-serif" size="2" color="#3d85c6">Red Hat, Inc.</font></a><font color="#404040" face="Arial" size="1"><span style="font-size:9pt"><br></span></font></div></td><td align="left" style="border:0px solid rgb(1,1,1)" valign="top" width="272"><div align="left"><br></div></td></tr></tbody></table></div></div>
</font></span></div>
<br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/<wbr>mailman/listinfo/patternfly</a><br>
<br></blockquote></div><br></div></div>