Update Conpherence Main UI

Summary: Uses standard sidenav width, more spacing in labels, added background around textarea, make background work in Firefox.

Test Plan:
Test Desktop, Mobile, and Tablet break points. Test Firefox and Chrome.

{F331201}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -45,8 +45,8 @@ return array(
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => '3b836442',
-    'rsrc/css/application/conpherence/menu.css' => '73774137',
+    'rsrc/css/application/conpherence/menu.css' => 'c6ac5299',
-    'rsrc/css/application/conpherence/message-pane.css' => '17a9517f',
+    'rsrc/css/application/conpherence/message-pane.css' => '5930260a',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
     'rsrc/css/application/conpherence/widget-pane.css' => '3d575438',
@@ -513,8 +513,8 @@ return array(
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => '3b836442',
-    'conpherence-menu-css' => '73774137',
+    'conpherence-menu-css' => 'c6ac5299',
-    'conpherence-message-pane-css' => '17a9517f',
+    'conpherence-message-pane-css' => '5930260a',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '3d575438',

src/applications/conpherence/controller/ConpherenceViewController.php

@@ -105,7 +105,7 @@ final class ConpherenceViewController extends
         ->setValue($draft->getDraft()))
       ->appendChild(
         id(new AphrontFormSubmitControl())
-          ->setValue(pht('Send Message')))
+          ->setValue(pht('Send')))
       ->appendChild(
         javelin_tag(
           'input',

src/infrastructure/internationalization/translation/PhabricatorVeryWowEnglishTranslation.php

@@ -15,7 +15,7 @@ final class PhabricatorVeryWowEnglishTranslation
       'Cancel' => 'Nope!',
       'Advanced Search' => 'Much Search!',
       'No search results.' => 'No results! Wow!',
-      'Send Message' => 'Bark! Bark Bark!',
+      'Send' => 'Bark Bark!',
     );
   }
 

webroot/rsrc/css/application/conpherence/menu.css

@@ -39,11 +39,16 @@
   overflow-y: auto;
   top: 0;
   bottom: 0;
+  background: #dbdde0;
+  border-right: 1px solid {$hovergrey}
 }
 
-.device-desktop .conpherence-layout .conpherence-menu-pane,
+.conpherence-menu-pane.phabricator-side-menu .phui-list-item-type-label {
-.device-desktop .conpherence-layout .phabricator-nav-column-background {
+  padding: 12px 0 8px 6px;
-  width: 239px;
+}
+
+.device-desktop .conpherence-layout .conpherence-menu-pane {
+  width: 204px;
 }
 
 .device .conpherence-menu-pane {
@@ -60,7 +65,6 @@
 
 .conpherence-layout .phabricator-nav-column-background {
   display: block;
-  width: 100%;
 }
 
 .device .phabricator-nav-column-background {
@@ -73,7 +77,7 @@
 }
 
 .device-desktop .conpherence-content-pane {
-  margin-left: 240px;
+  margin-left: 205px;
 }
 
 .conpherence-content-pane {
@@ -94,12 +98,10 @@
   overflow: hidden;
   position: relative;
   text-decoration: none;
-  border-left: 4px solid transparent;
 }
 
 .conpherence-menu .conpherence-selected {
   background: {$hovergrey};
-  border-left: 4px solid {$sky};
 }
 
 .device-desktop .conpherence-menu
@@ -137,7 +139,7 @@
   color: {$darkbluetext};
   text-shadow: 0px 1px 1px #fff;
   overflow: hidden;
-  width: 160px;
+  width: 150px;
   text-overflow: ellipsis;
 }
 

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -7,7 +7,7 @@
 .loading .messages-loading-icon,
 .conpherence-layout .conpherence-no-threads {
   position: fixed;
-  left: 240px;
+  left: 205px;
   right: 241px;
   top: 76px;
   bottom: 0px;
@@ -52,10 +52,10 @@
 
 .conpherence-message-pane .conpherence-messages {
   position: fixed;
-  left: 240px;
+  left: 205px;
   right: 241px;
   top: 76px;
-  bottom: 185px;
+  bottom: 172px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -81,14 +81,20 @@
 .conpherence-message-pane .phui-form-view {
   border-width: 0;
   background-color: {$lightgreybackground};
-  height: 185px;
+  height: 156px;
-  padding: 0;
+  padding: 8px;
   position: fixed;
   bottom: 0;
-  left: 240px;
+  border-top: 1px solid {$thinblueborder};
+  left: 205px;
   right: 241px;
 }
 
+.conpherence-message-pane .aphront-form-control-submit button,
+.conpherence-message-pane .aphront-form-control-submit a.button {
+  margin-top: 6px;
+}
+
 /**
  * When entering "Fullscreen Mode" in the remarkup control, we need to drop
  * all of the "position: fixed" on parent elements or Chrome doesn't put the
@@ -101,6 +107,10 @@
   position: static;
 }
 
+.conpherence-message-pane .remarkup-assist-bar {
+  border-color: {$lightblueborder};
+}
+
 .device .conpherence-message-pane .remarkup-assist-bar {
   height: 0px;
 }
@@ -205,20 +215,11 @@
   padding: 0;
 }
 
-.conpherence-message-pane .aphront-form-control-submit {
-  margin: 0 8px 0 0;
-}
-.conpherence-message-pane .remarkup-assist-bar {
-  border-width: 1px 0 0;
-  border-color: {$hovergrey};
-  border-bottom: transparent;
-}
-
 .conpherence-message-pane .remarkup-assist-textarea {
-  height: 124px;
+  height: 100px;
   padding: 6px;
-  border-width: 1px 0;
+  border-color: {$lightblueborder};
-  border-color: {$thinblueborder};
+  border-top-color: {$thinblueborder};
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -226,10 +227,10 @@
 }
 
 .device .conpherence-message-pane .remarkup-assist-textarea {
-  margin: 4px 8px;
+  margin: 0px 0px;
   padding: 8px;
   width: 97%;
-  height: 28px;
+  height: 34px;
   resize: none;
 }
 
@@ -237,6 +238,11 @@
   outline: none;
 }
 
+.device .conpherence-message-pane .aphront-form-control {
+  padding: 0 8px 0 0;
+  float: left;
+}
+
 .device .conpherence-message-pane .aphront-form-control-textarea {
   float: left;
   height: 2em;