{"id":90,"date":"2021-07-18T23:53:19","date_gmt":"2021-07-18T23:53:19","guid":{"rendered":"https:\/\/blogs.scummvm.org\/av-dx\/?p=90"},"modified":"2021-07-18T23:53:19","modified_gmt":"2021-07-18T23:53:19","slug":"starting-with-grouped-list-week-6-progress","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/av-dx\/2021\/07\/18\/starting-with-grouped-list-week-6-progress\/","title":{"rendered":"Starting with grouped list (Week 6 progress)"},"content":{"rendered":"\n

Task 1: Group items in the list view<\/h2>\n\n\n\n

Before I can tackle the complexity of grouping items in the grid view, I first had to add grouping feature to the list view. This led to the creation of a new widget : GroupedListWidget. The widget only does one level of grouping, i.e., no nested groups. <\/p>\n\n\n\n

The widget is unaware of the entire metadata of its entries, and only knows about the values of attribute on which to perform the grouping (as long as those values are strings). This attribute values list needs to be passed from the dialog. This gives the widget some flexibility in case it is to be used elsewhere.<\/p>\n\n\n\n

First I grouped the entries within the code using hashmaps, then created a linear list out of that, making slight adjustment to its contents, and displayed it just through the existing ListWidgets draw() method.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Task 2: Toggle-able groups<\/h2>\n\n\n\n

Groups should be able to expand and collapse. Currently I am using double click to toggle the group between those two states. As a test earlier, I had just appended a “[+]” or “[-]” to the list items string, but this is not neat as it could be confused to be the part of the string and not an icon belonging to the widget.<\/p>\n\n\n\n

Here I have experimented with two designs, the one on the left is simpler in look (currently implemented with “>” and “<” chars, but later can be converted to vector symbols), but the one on the right makes it clearer that it is a symbol belonging to the widget.<\/p>\n\n\n\n

\n
\n
\"\"
The design on the right should have triangle facing right instead of up, the right facing triangle isn’t implemented yet \ud83d\ude1b<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Other design aspects need to be experimented with. Should the group headers be on a differently colored background? Should the header have bigger font? etc.<\/p>\n\n\n\n

Anyways, let me know in the comments which design looks better to you.<\/p>\n","protected":false},"excerpt":{"rendered":"

Task 1: Group items in the list view Before I can tackle the complexity of grouping items in the grid view, I first had to add grouping feature to the list view. This led to the creation of a new widget : GroupedListWidget. The widget only does one level of grouping, i.e., no nested groups.… Continue reading Starting with grouped list (Week 6 progress)<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/90\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}