[Rt-commit] rt branch, 4.4/search-results-header-order-indicator, created. rt-4.4.3-54-g66804347c
Maureen Mirville
maureen at bestpractical.com
Mon Dec 10 09:02:18 EST 2018
The branch, 4.4/search-results-header-order-indicator has been created
at 66804347c8aef5f5b6ce3cd3c3cca5473b247a7d (commit)
- Log -----------------------------------------------------------------
commit a1e7460a793ceb95e46cb81afb5920b37b2bc603
Author: sunnavy <sunnavy at bestpractical.com>
Date: Tue Oct 2 02:38:06 2018 +0800
Add order indicator to search results header
diff --git a/devel/third-party/README b/devel/third-party/README
index 8d151d357..b29436d3d 100644
--- a/devel/third-party/README
+++ b/devel/third-party/README
@@ -49,3 +49,7 @@ Description: keyboard shortcuts
Origin: https://github.com/ccampbell/mousetrap
License: Apache
+* noun_arrow_1920806.svg
+Description: arrow
+Origin: https://thenounproject.com/search/?q=arrow&i=1920806 (Arrow by Rose Alice Design from the Noun Project)
+License: CC BY 3.0
diff --git a/devel/third-party/noun_arrow_1920806.svg b/devel/third-party/noun_arrow_1920806.svg
new file mode 100644
index 000000000..5d77cdb4f
--- /dev/null
+++ b/devel/third-party/noun_arrow_1920806.svg
@@ -0,0 +1 @@
+<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><path d="M95.4,45L66.1,15.7c-2.7-2.7-7.2-2.7-9.9,0c-2.7,2.7-2.7,7.2,0,9.9L73.5,43h-64c-3.9,0-7,3.1-7,7s3.1,7,7,7h64L56.2,74.3 c-2.7,2.7-2.7,7.2,0,9.9c1.4,1.4,3.2,2.1,5,2.1s3.6-0.7,5-2.1L95.4,55c1.3-1.3,2.1-3.1,2.1-5C97.5,48.1,96.8,46.3,95.4,45z"/></g></switch><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Rose Alice Design</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight
="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
\ No newline at end of file
diff --git a/share/html/Elements/CollectionAsTable/Header b/share/html/Elements/CollectionAsTable/Header
index 6ab35b485..8a9529841 100644
--- a/share/html/Elements/CollectionAsTable/Header
+++ b/share/html/Elements/CollectionAsTable/Header
@@ -70,6 +70,20 @@ my $generic_query_args = $GenericQueryArgs || {map { $_ => $ARGS{$_} } @PassArgu
$generic_query_args->{'Format'} = $FormatString if grep $_ eq 'Format', @PassArguments;
my $item = 0;
+
+my %order_desc = (
+ 1 => loc('first'),
+ 2 => loc('second'),
+ 3 => loc('third'),
+ 4 => loc('fourth'),
+);
+
+my %order_by;
+for my $i ( 0 .. $#OrderBy ) {
+ $order_by{ $OrderBy[ $i ] }{index} = $i + 1;
+ $order_by{ $OrderBy[ $i ] }{class} = ( $Order[ $i ] || 'ASC' ) =~ /ASC/i ? 'asc' : 'desc';
+}
+
foreach my $col ( @Format ) {
my $attr = $col->{'attribute'} || $col->{'last_attribute'};
@@ -149,6 +163,16 @@ foreach my $col ( @Format ) {
), 'h')
. '">'. $loc_title .'</a>'
);
+
+ if ( $order_by{$attr} ) {
+ my $title = loc(
+ "Results are [_1] ordered by [_2] in [_3] order.",
+ $order_desc{ $order_by{$attr}{index} } || $order_by{$attr}{index},
+ loc( $attr ),
+ $order_by{$attr}{class} eq 'asc' ? loc('ascending') : loc('descending')
+ );
+ $m->out( qq! <span class="order" title="$title">($order_by{$attr}{index}<i class="$order_by{$attr}{class}"></i>)</span>! );
+ }
}
else {
$m->out( $loc_title );
diff --git a/share/static/css/base/collection.css b/share/static/css/base/collection.css
index a06199977..44974ac24 100644
--- a/share/static/css/base/collection.css
+++ b/share/static/css/base/collection.css
@@ -24,3 +24,18 @@ table.collection td:first-child, table.collection th:first-child {
.results-count::before {
content: '\a0\a0\a0\a0';
}
+
+th.collection-as-table span.order i {
+ display: inline-block;
+ background-size: 6px;
+ width: 6px;
+ height: 8px;
+}
+
+th.collection-as-table span.order i.asc {
+ background-image: url(../../../static/images/css/arrow-up.png);
+}
+
+th.collection-as-table span.order i.desc {
+ background-image: url(../../../static/images/css/arrow-down.png);
+}
diff --git a/share/static/images/css/arrow-down.png b/share/static/images/css/arrow-down.png
new file mode 100644
index 000000000..0f2b69020
Binary files /dev/null and b/share/static/images/css/arrow-down.png differ
diff --git a/share/static/images/css/arrow-up.png b/share/static/images/css/arrow-up.png
new file mode 100644
index 000000000..dea9a9747
Binary files /dev/null and b/share/static/images/css/arrow-up.png differ
commit a433c7b853d925d50e9c2232d84ccb2447447880
Author: sunnavy <sunnavy at bestpractical.com>
Date: Tue Oct 2 02:53:31 2018 +0800
Test order indicator in search results header
diff --git a/t/web/query_builder.t b/t/web/query_builder.t
index 89e89f570..cc79d5077 100644
--- a/t/web/query_builder.t
+++ b/t/web/query_builder.t
@@ -312,6 +312,7 @@ diag "make sure skipped order by field doesn't break search";
$agent->follow_link_ok({id => 'page-edit_search'});
$agent->form_name('BuildQuery');
+ $agent->field('Order', 'DESC', 1);
$agent->field("OrderBy", 'Requestor.EmailAddress', 3);
$agent->submit;
$agent->form_name('BuildQuery');
@@ -320,6 +321,11 @@ diag "make sure skipped order by field doesn't break search";
is $agent->value('OrderBy', 3), 'Requestor.EmailAddress';
$agent->follow_link_ok({id => 'page-results'});
+ $agent->text_contains('# (1', 'order number 1');
+ $agent->content_contains('1<i class="desc"></i>', 'arrow 1');
+ $agent->text_contains('Requestor (2', 'order number 2');
+ $agent->content_contains('2<i class="asc"></i>', 'arrow 2');
+
ok( $agent->find_link(
text => $t->id,
url_regex => qr{/Ticket/Display\.html},
commit 66804347c8aef5f5b6ce3cd3c3cca5473b247a7d
Author: Maureen E. Mirville <maureen at bestpractical.com>
Date: Fri Dec 7 16:35:48 2018 -0500
Update query builder docs to include sort order indicator
diff --git a/docs/images/.DS_Store b/docs/images/.DS_Store
new file mode 100644
index 000000000..5008ddfcf
Binary files /dev/null and b/docs/images/.DS_Store differ
diff --git a/docs/images/qb-search-results-with-newline.png b/docs/images/qb-search-results-with-newline.png
new file mode 100644
index 000000000..ac608e9a3
Binary files /dev/null and b/docs/images/qb-search-results-with-newline.png differ
diff --git a/docs/images/qb-search-results-without-newline.png b/docs/images/qb-search-results-without-newline.png
new file mode 100644
index 000000000..794c2af69
Binary files /dev/null and b/docs/images/qb-search-results-without-newline.png differ
diff --git a/docs/images/qb-search-results.png b/docs/images/qb-search-results.png
new file mode 100644
index 000000000..798c947d8
Binary files /dev/null and b/docs/images/qb-search-results.png differ
diff --git a/docs/images/search-results.png b/docs/images/search-results.png
deleted file mode 100644
index cd8383650..000000000
Binary files a/docs/images/search-results.png and /dev/null differ
diff --git a/docs/images/with-newline.png b/docs/images/with-newline.png
deleted file mode 100644
index d20686211..000000000
Binary files a/docs/images/with-newline.png and /dev/null differ
diff --git a/docs/images/without-newline.png b/docs/images/without-newline.png
deleted file mode 100644
index 799da54bc..000000000
Binary files a/docs/images/without-newline.png and /dev/null differ
diff --git a/docs/query_builder.pod b/docs/query_builder.pod
index da08d93be..f2858c528 100644
--- a/docs/query_builder.pod
+++ b/docs/query_builder.pod
@@ -15,10 +15,9 @@ searches yourself.
=head1 Example
Let's look for tickets in the "RT" queue (RT's bugtracker for itself) that have
-been resolved in the last year. (These examples assume it's currently mid June,
-2015). To do that, we specify the search criteria (Queue is RT, Status is
-resolved, and Resolved after 2014-06-15) in the upper left hand section of the
-Query Builder.
+been resolved since mid June 2014. To do that, we specify the search criteria
+(Queue is RT, Status is resolved, and Resolved after 2014-06-15) in the upper
+left hand section of the Query Builder.
=for html <img alt="Search Criteria"
src="images/search-criteria.png">
@@ -81,11 +80,11 @@ the way down and press 'Update format and Search'. This search should turn up
a full page of tickets. Here's the top portion of the list:
=for html <img alt="Search Results"
-src="images/search-results.png">
+src="images/qb-search-results.png">
-=for :text [Search Results F<docs/images/search-results.png>]
+=for :text [Search Results F<docs/images/qb-search-results.png>]
-=for :man [Search Results F<docs/images/search-results.png>]
+=for :man [Search Results F<docs/images/qb-search-results.png>]
This is the default view of your results. However, like nearly everything in RT,
it's configurable. You can select additional columns to appear in your results,
@@ -109,7 +108,14 @@ in a meaningful way. This is where the multiple sort criteria comes in handy.
You can use a second sorting criteria to sort within the set of tickets owned by
a single user. For example, you could add a sort by due date to see tickets
sorted first by owner, and then tickets with the same order are ordered by due
-date.
+date. Each of the columns on the results page will display a number, indicative
+of the sort order. Next to each number, there is also an arrow pointing upwards
+when the sort order is set to ascending (ASC), and downwards when set to descending
+(DESC). These orders can quickly be reversed on the results page by clicking on
+the column title you would like to update. Note, that when you have multiple sorts
+set, reversing them in this way will reset the sort options back to one column.
+Alternatively, you can navigate back to the query builder and update the Sorting
+fields accordingly.
The Display Columns tab allows you to add or eliminate information displayed in
the results of your search. NEWLINE indicates a line break, or new row, in how
@@ -119,11 +125,11 @@ up underneath id in the following screenshot).
Here is a search with NEWLINE where it is by default:
=for html <img alt="With NEWLINE"
-src="images/with-newline.png">
+src="images/qb-search-results-with-newline.png">
-=for :text [With NEWLINE F<docs/images/with-newline.png>]
+=for :text [With NEWLINE F<docs/images/qb-search-results-with-newline.png>]
-=for :man [With NEWLINE F<docs/images/with-newline.png>]
+=for :man [With NEWLINE F<docs/images/qb-search-results-with-newline.png>]
Notice that the structure of the data that's displayed is stacked: Subject on
top of Requestor, Status on top of Created, etc.. Because we're displaying a
@@ -133,11 +139,11 @@ important for the results more comprehensible.
Here is that same search but without the NEWLINE:
=for html <img alt="Without NEWLINE"
-src="images/without-newline.png">
+src="images/qb-search-results-without-newline.png">
-=for :text [Without NEWLINE F<docs/images/without-newline.png>]
+=for :text [Without NEWLINE F<docs/images/qb-search-results-without-newline.png>]
-=for :man [Without NEWLINE F<docs/images/without-newline.png>]
+=for :man [Without NEWLINE F<docs/images/qb-search-results-without-newline.png>]
The same pieces of information are now spread across the display next to one
another, which can be harder to read. So when you tell RT to display a lot of
-----------------------------------------------------------------------
More information about the rt-commit
mailing list