[Redesign] Clean up Slowvote

Summary: Ref T8099, A cleaner, more standard UI for Slowvotes. Because Slowvote is important.

Test Plan: Test a number of poll layouts and embeds.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099

Differential Revision: https://secure.phabricator.com/D13445

resources/celerity/map.php

@@ -104,7 +104,7 @@ return array(
     'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
     'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
     'rsrc/css/application/search/search-results.css' => '7dea472c',
-    'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
+    'rsrc/css/application/slowvote/slowvote.css' => '7c27f0f9',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'a76cefc9',
@@ -736,7 +736,7 @@ return array(
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '4f2cd343',
-    'phabricator-slowvote-css' => '266df6a1',
+    'phabricator-slowvote-css' => '7c27f0f9',
     'phabricator-source-code-view-css' => '098e9b75',
     'phabricator-standard-page-view' => '43045fb4',
     'phabricator-textareautils' => '5c93c52c',

src/applications/slowvote/controller/PhabricatorSlowvotePollController.php

@@ -67,12 +67,7 @@ final class PhabricatorSlowvotePollController
       array(
         $crumbs,
         $object_box,
-        phutil_tag(
+        $poll_view,
-          'div',
-          array(
-            'class' => 'mlt mml mmr',
-          ),
-          $poll_view),
         $timeline,
         $add_comment,
       ),

src/applications/slowvote/view/SlowvoteEmbedView.php

@@ -71,21 +71,8 @@ final class SlowvoteEmbedView extends AphrontView {
     if ($this->headless) {
       $header = null;
     } else {
-      $header = phutil_tag(
+      $header = id(new PHUIHeaderView())
-        'div',
+        ->setHeader($link_to_slowvote);
-        array(
-          'class' => 'slowvote-header',
-        ),
-        phutil_tag(
-          'div',
-          array(
-            'class' => 'slowvote-header-content',
-          ),
-          array(
-            'V'.$poll->getID(),
-            ' ',
-            $link_to_slowvote,
-          )));
 
       $description = null;
       if ($poll->getDescription()) {
@@ -147,7 +134,7 @@ final class SlowvoteEmbedView extends AphrontView {
               'button',
               array(
               ),
-              pht('Engage in Deliberations')),
+              pht('Enrage in Deliberations')),
           )));
     }
 
@@ -168,7 +155,7 @@ final class SlowvoteEmbedView extends AphrontView {
         $submit,
       ));
 
-    return javelin_tag(
+    $embed = javelin_tag(
       'div',
       array(
         'class' => 'slowvote-embed',
@@ -177,7 +164,11 @@ final class SlowvoteEmbedView extends AphrontView {
           'pollID' => $poll->getID(),
         ),
       ),
-      array($header, $body));
+      array($body));
+
+    return id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->appendChild($embed);
   }
 
   private function renderLabel(PhabricatorSlowvoteOption $option, $selected) {
@@ -213,9 +204,9 @@ final class SlowvoteEmbedView extends AphrontView {
               ),
               array(
                 $this->renderControl($option, $selected),
-              )),
-          )),
                 $status,
+              )),
+          )),
         $voters,
       ));
   }

webroot/rsrc/css/application/slowvote/slowvote.css

@@ -3,14 +3,9 @@
  */
 
 .slowvote-embed {
-  margin: 24px 12px;
+  background: #fff;
-  background: #ffffff;
+  border-color: {$lightblueborder};
-  border-color: {$lightgreytext};
+  border-radius: 3px;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 4px;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.20),
-              inset 0 0 2px rgba(0, 0, 0, 0.10);
 }
 
 .slowvote-header {
@@ -21,30 +16,31 @@
 
 .slowvote-description {
   color: {$greytext};
-  padding: 8px;
+  font-size: 14px;
-  border-bottom: 1px solid #bbbbbb;
+  padding: 12px 4px 4px;
 }
 
 .slowvote-header-content {
   padding: 8px;
 }
 
-.slowvote-body {
-}
-
 .slowvote-body-content {
-  padding: 4px 16px;
+  padding: 8px 4px 0;
 }
 
 .slowvote-option-label {
-  border: 1px solid {$greytext};
+  border: 1px solid {$sh-lightgreyborder};
   display: block;
   position: relative;
   padding: 8px 4px;
   cursor: pointer;
   font-weight: bold;
   overflow: hidden;
-  background-color: {$lightblue};
+  background-color: {$lightgreybackground};
+}
+
+.device-desktop .slowvote-option-label:hover {
+  border-color: {$sh-blueborder};
 }
 
 .slowvote-bar {
@@ -53,7 +49,7 @@
   left: 0;
   bottom: 0;
   overflow: hidden;
-  background-color: {$blue};
+  background-color: {$sh-bluebackground};
 }
 
 .slowvote-control-offset {
@@ -62,17 +58,12 @@
   left: 32px;
   top: 8px;
   width: 100%;
-  color: #000000;
+  color: {$darkbluetext};
-  text-shadow: 0 1px 0 #ffffff;
+  text-shadow: {$whitetextshadow};
-}
-
-.slowvote-bar .slowvote-control-offset {
-  color: #ffffff;
-  text-shadow: 0 1px 0 #000000;
 }
 
 .slowvote-option-label-group {
-  margin: 8px 0 16px;
+  margin: 0 0 12px;
 }
 
 .slowvote-option-label input[type="radio"],
@@ -86,27 +77,36 @@
 }
 
 .slowvote-status {
-  text-align: right;
+  color: {$darkbluetext};
-  color: #333333;
   font-weight: normal;
   padding: 2px 0;
   line-height: 15px;
   text-align: right;
-  font-size: 11px;
+  font-size: 12px;
+  top: 0;
+  right: 8px;
+  position: absolute;
+  text-shadow: {$whitetextshadow};
+}
+
+.slowvote-voters {
+  padding-top: 8px;
 }
 
 .slowvote-voter {
   display: inline-block;
   width: 25px;
   height: 25px;
-  background: #f3f3f3;
   background-size: 25px 25px;
+  border-radius: 3px;
+  margin: 0 4px;
+  box-shadow: {$borderinset};
 }
 
 .slowvote-footer {
   border-top-width: 1px;
   border-top-style: solid;
-  border-top-color: #bbbbbb;
+  border-top-color: {$thinblueborder};
   position: relative;
 }