From dd72dd1bca5f040cf15d55199218e6731c0e1d13 Mon Sep 17 00:00:00 2001
From: Paradox <paradox460@gmail.com>
Date: Mon, 11 Jul 2011 11:43:27 -0700
Subject: [PATCH] Set up messages and inbox to use options-expandos

---
 r2/r2/public/static/compact/unread.png | Bin 0 -> 970 bytes
 r2/r2/public/static/css/compact.scss   |  89 +++++++++++++------------
 r2/r2/templates/message.compact        |  38 ++++-------
 3 files changed, 61 insertions(+), 66 deletions(-)
 create mode 100644 r2/r2/public/static/compact/unread.png

diff --git a/r2/r2/public/static/compact/unread.png b/r2/r2/public/static/compact/unread.png
new file mode 100644
index 0000000000000000000000000000000000000000..c691921dd045441f7cc8ab29dfc1022b3ce67d41
GIT binary patch
literal 970
zcmV;*12z1KP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#Y)M2xRCwB~RZB=)K@^?Dhu!#zX;l;h
z38*oPijY-xVJe7NYByb!?(D`aT$zo_HcLh8&MK%_C<dj{kQ4>M4=vP%24jU%KTuIf
ziAJMh)acXKb02T$G$!@aUO1U|&&=F2nYnXErzi>|)9G|BtJT`*bUN=XEiHW>7#Mig
z+}zwyTwL7C1Z!z&DWulzc28$zWm!4DwzlT%?(X*E(+A7|uhk9`APf%=e^-9n2aR_q
zmyOSvPT(B~m$|*YebC?EAI7&!6}Y&#;8*~r0kgne3DMviv=~ZXUmuC6|F!|>xJl4d
z0^DM;*cTF^#j>8Bp23NUiRk(HIlB##8F({LLElnQQPJI+ni>N?>{}RZLje%rL|R(f
zIvPrjj}rR_lO(CsX0yGuSS-e|v9TdaF5WjgJNrBs4Blazo12|yXJ-n)ZUR_oRaMp8
z?(VKk^O1!SaCR<0oFB$cPfyK&17Oz$55BXrBg0oXmY0_waRKsuJ|Eo+RkbM|k24V(
zpP7VLgGV9}8NR}Ce0;o!*1!db+t}FXWG<JhqrJU7baHaSIAAa9>+6^E^Yh=6h`^Ut
zR#wj8GRg22j-#WaMYIO-eBe6(GxK`AeyGz57=c#q@pvM{;gDinga_Z++LE>LDv<Mw
zXbnknph?{Y62J;*6^t-7HT6{URV*wl#By_U$0>L?9G1mC9Pl@^$%3=Cwzd%JRtF0N
z0==RDU_LxN+!q6(ki`>&Yhx->r7(@5#Y<&nWgc9zpF-a{Dr>bY%b##zXlqzOK|wk%
zj9Se((ChWp@PnxYcu|z_GozJP(Siu@geqp@#Onm-0w$9wq|eC6XaeSiGR!dpybw9m
zmjn8D6r6K^5pd&u@#scJNBy<6wU6n|Nio);fozbrQ0&B`lS+f`(Tc=ZlAWDhxWB(2
zN-{9n7G7BZ>+0%;R##WwNaf|_E5x+6w$k$#V*kMqvtwjrq!gKF((Uc-nZb2YB{Uce
zCMvt&t}TQ)m$qhda&p>kw^IgMSTq_{L4OMm{*RK9lCSulr+O~*&5IED-h@6ocn6>W
zU1~|^vLGne&D=*xNEiC-$ySf*`5-SZ?>_g($H#3sIXUkz{vlfR+;q6^;v5oa<QGoM
s8nRajvAN$UE(+!~8jXM4k6!`|03u_9KfyeHV*mgE07*qoM6N<$f&uu%cmMzZ

literal 0
HcmV?d00001

diff --git a/r2/r2/public/static/css/compact.scss b/r2/r2/public/static/css/compact.scss
index 3368ec236..b9c002605 100644
--- a/r2/r2/public/static/css/compact.scss
+++ b/r2/r2/public/static/css/compact.scss
@@ -141,54 +141,56 @@ button.button {
 
 /*Options expando*/
 
-.link .options_expando, .comment .options_expando {
-    background: hsl(210,35%,20%);
-    margin:  35px -5px -1px;
-    border-top:  1px solid hsl(210,35%,10%);
-    display: none;
-    @include box-orient(horizontal);
-    @include box-align(center);
-    @include box-pack(center);
-    @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
-    text-shadow: 0px -1px 0px hsla(0,0%,0%,.8);
+.link, .comment, .message {
+    .options_expando {
+        background: hsl(210,35%,20%);
+        margin:  35px -5px -1px;
+        border-top:  1px solid hsl(210,35%,10%);
+        display: none;
+        @include box-orient(horizontal);
+        @include box-align(center);
+        @include box-pack(center);
+        @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
+        text-shadow: 0px -1px 0px hsla(0,0%,0%,.8);
 
-    a {
-        display: block;
-        color: white;
-        text-decoration: none;
-        font-size: 11px;
-        padding: 10px;
-        width: 40px;
-        text-align: center;
-        border-right:  1px solid hsl(210,35%,10%);
-        border-left:  1px solid hsl(210,35%,30%);
-        @include transition(all, 100ms, ease-in);
+        a {
+            display: block;
+            color: white;
+            text-decoration: none;
+            font-size: 11px;
+            padding: 10px;
+            width: 40px;
+            text-align: center;
+            border-right:  1px solid hsl(210,35%,10%);
+            border-left:  1px solid hsl(210,35%,30%);
+            @include transition(all, 100ms, ease-in);
 
-        &:active {
-            background-color: hsl(210,35%,30%);
-            border-left: 1px solid hsl(210,35%,40%);
-        }
+            &:active {
+                background-color: hsl(210,35%,30%);
+                border-left: 1px solid hsl(210,35%,40%);
+            }
 
-        &:hover {
-            background-color: hsl(210,25%,20%);
-            @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
-            border-left: 1px solid hsl(210,35%,40%);
-            padding: {
-                top: 15px;
-                bottom: 5px;
+            &:hover {
+                background-color: hsl(210,25%,20%);
+                @include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
+                border-left: 1px solid hsl(210,35%,40%);
+                padding: {
+                    top: 15px;
+                    bottom: 5px;
+                }
+            }
+
+            &:first-child {
+                border-left: none;
+            }
+            &:last-child {
+                border-right: none;
             }
         }
 
-        &:first-child {
-            border-left: none;
+        &.expanded {
+            @include display-box;
         }
-        &:last-child {
-            border-right: none;
-        }
-    }
-
-    &.expanded {
-        @include display-box;
     }
 }
 .comment .options_expando {
@@ -196,7 +198,7 @@ button.button {
 }
 
 .email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon, .edit-icon, .reply-icon, .permalink-icon,
-.collapse-icon, .context-icon, .parent-icon {
+.collapse-icon, .context-icon, .parent-icon, .unread-icon {
     display: block;
     width: 24px;
     height: 24px;
@@ -239,6 +241,9 @@ button.button {
 .parent-icon {
     background-image: url('/static/compact/context.png'); /* SPRITE */
 }
+.unread-icon {
+    background-image: url('/static/compact/unread.png'); /* SPRITE */
+}
 
 /*Toolbar*/
 #topbar {
diff --git a/r2/r2/templates/message.compact b/r2/r2/templates/message.compact
index 9e3883dff..9986ce400 100644
--- a/r2/r2/templates/message.compact
+++ b/r2/r2/templates/message.compact
@@ -70,36 +70,26 @@
      author = updated_author % dict(author = author, subreddit = subreddit)
   %>
     <div class="tagline">
-      <div class="options_triangle_parent">
-        <div class="options_triangle hidden">
-         <%
-            is_author = (c.user_is_loggedin and thing.author and
-                         c.user.name == thing.author.name)
-           %>
-         %if c.user_is_loggedin:
-          <a href="javascript:void(0)" class="group_button button"
-             onclick="return reply(this)">Reply</a>
-         %endif
-           ${plain_link(_("permalink"), thing.permalink, _class = "group_button button")}
-           %if thing.was_comment:
-              ${plain_link(_("context"), thing.permalink + "?context=3",
-                _class = "button")}
-           %endif
-           <a href="javascript:void(0)"  class="group_button button"
-              onclick="change_state(this, 'unread_message', unread_thing, true)">
-             mark unread
-           </a>
-       </div>
-     </div>
-     <a href="javascript:void(0)" class="triangle_link button">
-       <span class="button_contents"></span>
-     </a>
 
       ${unsafe(taglinetext % dict(when = thing.timesince, 
                                 author= u"<b>%s</b>" % author,
                   dest = u"<b>%s</b>" % (thing.to.name if thing.to else "")))}
     </div>
+    <a href="javascript:void(0)" class="options_link"></a>
     ${unsafe(safemarkdown(thing.body))}
+    <div class="clear options_expando hidden">
+        <%
+            is_author = (c.user_is_loggedin and thing.author and c.user.name == thing.author.name)
+        %>
+        %if c.user_is_loggedin:
+            <a href="javascript:void(0);" onclick="return reply(this)"><div class="reply-icon"></div>Reply</a>
+        %endif
+        <a href="${thing.permalink}"><div class="permalink-icon"></div>Permalink</a>
+        %if thing.was_comment:
+            <a href="${thing.permalink}?context=3"><div class="context-icon"></div>Context</a>
+        %endif
+        <a href="javascript:void(0)" onclick="change_state(this, 'unread_message', unread_thing, true)"><div class="unread-icon"></div>mark unread</a>
+       </div>
   </div>
   <div style="clear: both;"></div>
   <div class="child">