From 814ae1e1e0cb2ae29b35dd3a6ac964a47b2e1ca7 Mon Sep 17 00:00:00 2001
From: Max Goodman <max@reddit.com>
Date: Fri, 19 Jul 2013 02:50:18 -0700
Subject: [PATCH] Listing chooser collapse grippy usability improvements.

* Increase thickness of grippy.
* Grippy icons with arrows pointing in the direction of show/hide.
* Invisible extra width for easy targeting.
---
 r2/r2/public/static/css/reddit.less         |  84 ++++++++++++++------
 r2/r2/public/static/sidebar-grippy-hide.png | Bin 0 -> 314 bytes
 r2/r2/public/static/sidebar-grippy-show.png | Bin 0 -> 312 bytes
 3 files changed, 59 insertions(+), 25 deletions(-)
 create mode 100644 r2/r2/public/static/sidebar-grippy-hide.png
 create mode 100644 r2/r2/public/static/sidebar-grippy-show.png

diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less
index 0cb9de844..b37b0fc1c 100755
--- a/r2/r2/public/static/css/reddit.less
+++ b/r2/r2/public/static/css/reddit.less
@@ -7073,6 +7073,9 @@ body.gold .buttons li.comment-save-button { display: inline; }
 @lc-shadow-width: 6px;
 @lc-grippy-width: 8px;
 body.with-listing-chooser {
+    @grippy-image-width: 6px;
+    @grippy-image-height: 65px;
+    @grippy-fudge: 6px;  // extra width for easy targeting
     position: relative;
 
     & #header .tabmenu {
@@ -7098,56 +7101,76 @@ body.with-listing-chooser {
         left: 0;
         bottom: 0;
         width: @lc-width;
-        border-right: 1px dotted #e5e5e5;
-        padding-right: @lc-grippy-width;
+        padding-right: @lc-grippy-width + @grippy-fudge;
         background: #f7f7f7;
         overflow: hidden;
 
         &.initialized {
             .transition(width, .25s);
-        }
 
-        &:after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            left: @lc-width - @lc-shadow-width;
-            box-shadow: (-@lc-shadow-width - @lc-grippy-width) 0 2*@lc-shadow-width -@lc-shadow-width rgba(0, 0, 0, .25) inset;
-            z-index: 20;
+            .grippy, .grippy:before, .grippy:after {
+                // the 0.03s delay here is intended to prevent flashes when the
+                // mouse is passing over en route to a tab.
+                .transition(all, 0.1s, ease, 0.03s);
+            }
         }
 
         .grippy {
             position: absolute;
             right: 0;
-            width: @lc-grippy-width;
+            width: @lc-grippy-width + @grippy-fudge;
             height: 100%;
             background: white;
             border-left: 1px solid #ccc;
+            box-shadow: 0 0 @lc-shadow-width rgba(0, 0, 0, .2);
             z-index: 25;
             cursor: pointer;
 
-            &:after {
-                @height: 50px;
+            &:before {
                 content: '';
                 display: block;
                 position: fixed;
                 top: 50%;
-                margin-left: (@lc-grippy-width - 2px) / 2;
-                margin-top: -@height / 2;
-                border-left: 2px dotted #ccc;
-                height: @height;
+                width: @lc-grippy-width;
+                height: @grippy-image-height;
+                margin-top: -@grippy-image-height / 2;
+                background-image: url(../sidebar-grippy-hide.png);  /* SPRITE */
+                background-repeat: no-repeat;
+                margin-left: (@lc-grippy-width - @grippy-image-width) / 2;
+                opacity: .5;
+            }
+
+            &:after {
+                content: '';
+                display: block;
+                position: absolute;
+                height: 100%;
+                right: @grippy-fudge - 1;
+                width: @lc-grippy-width;
+                border-right: 1px dotted #e5e5e5;
+                z-index: -1;
             }
 
             &:hover {
-                background: #f4f4f4;
+                &:before {
+                    opacity: 1;
+                }
+
+                &:after {
+                    background: #f4f4f4;
+                }
+            }
+        }
+
+        &:hover {
+            .grippy:before {
+                opacity: .8;
             }
         }
     }
 
     &.listing-chooser-collapsed {
-        @lc-grippy-width: 8px;
+        @lc-grippy-width: 9px;
 
         & #header .tabmenu {
             margin-left: 0;
@@ -7163,13 +7186,24 @@ body.with-listing-chooser {
 
         .listing-chooser {
             width: 0;
-            padding-right: @lc-grippy-width;
-            border-right: 1px solid #ccc;
+            padding-right: @lc-grippy-width + @grippy-fudge;
+            z-index: -1;
+
             .grippy {
                 z-index: 40;
-                width: @lc-grippy-width;
+                width: @lc-grippy-width + @grippy-fudge;
+
+                &:before {
+                    background-image: url(../sidebar-grippy-show.png);  /* SPRITE */
+                    background-repeat: no-repeat;
+                    margin-left: (@lc-grippy-width - @grippy-image-width) / 2;
+                    width: @lc-grippy-width;
+                }
+
                 &:after {
-                    margin-left: (@lc-grippy-width - 2px) / 2;
+                    right: @grippy-fudge - 1;
+                    width: @lc-grippy-width;
+                    border-right: 1px solid #ccc;
                 }
             }
         }
diff --git a/r2/r2/public/static/sidebar-grippy-hide.png b/r2/r2/public/static/sidebar-grippy-hide.png
new file mode 100644
index 0000000000000000000000000000000000000000..73b5bf9f323295de344c3eb74b97d4087261e5aa
GIT binary patch
literal 314
zcmeAS@N?(olHy`uVBq!ia0vp^Y(VVD0U|$5ygCO+u@pObhHwBu4M$1`kk47*5m^jW
ze;tGwoit`w00kvWTq8<?^V3So6N^$A%FE03GV`*FlM@S4_413-XTP(N0xH_>>Eak-
z(ff9aA=e=X0oVI%{t6soa!w_oA1s8--E>$l3Ugdz+}!Q4PMK?-yGpVmhoN?tnV95^
zG`YjGGxrGz)`;5hTP?0#%u<r_ctKe&w}ZPGo6u5~iiUlKxeAOS2Maem-hAMYw*AsH
z<}<}R=4&dozVn^DtYd-QzsLI<%=9iFOU*a0tJqK!(s%0P^8|@^uT&Q(OUE_UgfZOh
zG;Pp5x>{)4k4K^rl~0dfS=0FRbcJloy05W&?lD}M+dVD){C{4c7Z^NU{an^LB{Ts5
DY*})7

literal 0
HcmV?d00001

diff --git a/r2/r2/public/static/sidebar-grippy-show.png b/r2/r2/public/static/sidebar-grippy-show.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c55a7a489aa58d6e5c9622b5b60bbb76123e633
GIT binary patch
literal 312
zcmeAS@N?(olHy`uVBq!ia0vp^Y(VVD0U|$5ygCO+u@pObhHwBu4M$1`kk47*5m^jW
ze;tGwoit`w00kvWTq8<?^V3So6N^$A%FE03GV`*FlM@S4_413-XTP(N0xH_->Eak-
z(VP6||9^XCvjayC95|3L#Ux&2HH+}+`5KeIM2boX{g?c2Y-C`tMcLbE;miwp)68zm
zIX6vgT=@3Nnk&sOgw8HcUlw|}^8f$;=>}(KX?^_vzn(4SOviQk=I}!*x!;^7Z@J0M
z`D(#|=EY?_w+yq6D@@toHB-AK^pW`G{SlLUX1YRc_>=y|)Ng)h*Hu0@wl=*rN41%m
xo!PfN+WPp+nJr!x?}6s?Jk#8qs-YjpIFY?$+8fdH%0Le=c)I$ztaD0e0suAYeB%HB

literal 0
HcmV?d00001