commit 6048818b76c73fd766aad1bff56fef660984db36
author Deepanjan Roy <dproy@google.com> Tue Oct 15 00:27:34 2019 +0100
committer Deepanjan Roy <dproy@google.com> Tue Oct 15 00:27:34 2019 +0100
tree 6b20d6e85c300585d55ec0a14e820cbb2771e4ac
parent 8dda56311c7ded002f01dcb15bfe5310888ff5b8

Larger click target for expanding track groups

You no longer have to click the small arrow. You can click anywhere on the
label.

Bug:142254810
Change-Id: Ie13ff65842931af5efbe73791a8eb90cf290afc8

ui/src/assets/common.scss

diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index a5cc395..7057a62 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -533,8 +533,10 @@
     }
     .fold-button {
       grid-area: fold-button;
+    }
+    &:hover {
       cursor: pointer;
-      &:hover {
+      .fold-button {
         color: hsl(45, 100%, 48%);
       }
     }
@@ -543,4 +545,4 @@
 
 .time-selection-panel {
   height: 10px;
-}
\ No newline at end of file
+}

ui/src/frontend/track_group_panel.ts

diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
index 2fd1923..58f266b 100644
--- a/ui/src/frontend/track_group_panel.ts
+++ b/ui/src/frontend/track_group_panel.ts
@@ -66,20 +66,20 @@
         `.track-group-panel[collapsed=${collapsed}]`,
         {id: 'track_' + this.trackGroupId},
         m('.shell',
+          {
+            onclick: (e: MouseEvent) => {
+              globals.dispatch(Actions.toggleTrackGroupCollapsed({
+                trackGroupId: attrs.trackGroupId,
+              })),
+                  e.stopPropagation();
+            }
+          },
           m('h1',
             {
               title: name,
             },
             name),
           m('.fold-button',
-            {
-              onclick: (e: MouseEvent) => {
-                globals.dispatch(Actions.toggleTrackGroupCollapsed({
-                  trackGroupId: attrs.trackGroupId,
-                })),
-                e.stopPropagation();
-              }
-            },
             m('i.material-icons',
               this.trackGroupState.collapsed ? 'expand_more' : 'expand_less'))),
         this.summaryTrack ? m(TrackContent, {track: this.summaryTrack}) : null);