tweak tracksel show/hide buttons: add arrow icons, change positions t…

…o be on the edges
GMOD · May 14, 2012 · c4a710e · c4a710e
1 parent 6f63350
commit c4a710e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/faceted_track_selector.css b/faceted_track_selector.css
@@ -17,7 +17,7 @@
     top: 0;
     left: 0;
     height: 100%;
-    width: 93%;
+    width: 95%;
 
     font-size: 120%;
 }
@@ -79,8 +79,19 @@
     font-size: 180%;
 }
 
-#faceted_tracksel_top button.faceted_tracksel_on_off {
-    padding: 5px;
+#faceted_tracksel button.faceted_tracksel_on_off {
+    padding: 5px 4px;
+
+    position: absolute;
+    top: 1.8em;
+    right: -2px;
+    width: 7%;
+
+    z-index: 5;
+}
+#faceted_tracksel button.faceted_tracksel_on_off div {
+    display: inline-block;
+    vertical-align: middle;
 }
 
 #faceted_tracksel_top div.topLink {
@@ -160,4 +171,11 @@
 /* Button that we inject into the navbox for turning the track
 selector on and off. */
 #navbox button.faceted_tracksel_on_off {
+    position: absolute;
+    top: 2em;
+    left: -5px;
+}
+#navbox button.faceted_tracksel_on_off > * {
+    display: inline-block;
+    vertical-align: middle;
 }
diff --git a/img/left_arrow.png b/img/left_arrow.png
diff --git a/img/right_arrow.png b/img/right_arrow.png
diff --git a/js/View/TrackList/Faceted.js b/js/View/TrackList/Faceted.js
@@ -137,6 +137,18 @@ dojo.declare( 'JBrowse.View.TrackList.Faceted', null,
         },
         document.body );
 
+        dojo.create('button',
+                    {
+                        className: 'faceted_tracksel_on_off',
+                        innerHTML: '<div style="width: 13%"><img src="img/left_arrow.png"></div>'
+                                 + '<div style="width: 85%">Back to browser</div>',
+                        style: {
+                        }
+                    },
+                    this.containerElem
+                   );
+
+
         this.mainContainer = new dijit.layout.BorderContainer(
             { design: 'headline', gutters: false },
             this.containerElem
@@ -145,7 +157,6 @@ dojo.declare( 'JBrowse.View.TrackList.Faceted', null,
             { region: 'top',
               id: "faceted_tracksel_top",
               content: '<div class="title">Select Tracks</div> '
-                       + '<button class="faceted_tracksel_on_off">Back to browser</button>'
                        + '<div class="topLink" style="cursor: help"><a title="Track selector help">Help</a></div>'
             });
         dojo.query('div.topLink a[title="Track selector help"]',this.topPane.domNode)
@@ -172,7 +183,8 @@ dojo.declare( 'JBrowse.View.TrackList.Faceted', null,
             this.browser.navbox.insertBefore(
                 dojo.create('button', {
                                 className: 'faceted_tracksel_on_off',
-                                innerHTML: 'Select tracks'
+                                innerHTML: '<div style="width: 7em">Select tracks</div>'
+                                    +'<div style="width: 10px;"><img src="img/right_arrow.png"></div>'
                             }),
                 this.browser.navbox.firstChild
             );