From 5ef99dba2afc9f9ed3ca77707366a78be15f4871 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 11 Mar 2015 11:52:27 -0700 Subject: [PATCH] Visual update to Conpherence Durable Column Summary: Numerous visual updates to the Durable Column, mostly to emulate current Conpherence look and feel. Test Plan: Lots of little pixel chasing. Also Chrome, Firefox. Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12041 --- resources/celerity/map.php | 49 ++- .../view/ConpherenceDurableColumnView.php | 3 + .../layout/PhabricatorTransactionView.php | 2 +- src/view/page/PhabricatorStandardPageView.php | 1 - .../css/application/base/main-menu-view.css | 1 - .../conpherence/durable-column.css | 292 +++--------------- .../rsrc/css/font/font-source-sans-pro.css | 1 + webroot/rsrc/css/phui/phui-fontkit.css | 4 +- 8 files changed, 68 insertions(+), 285 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 7c8f8f2049..18477da9de 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,8 +7,8 @@ */ return array( 'names' => array( - 'core.pkg.css' => '70320e8a', - 'core.pkg.js' => '28ef0e70', + 'core.pkg.css' => '856b962f', + 'core.pkg.js' => '5f50c01b', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '1940be3f', 'differential.pkg.js' => '53c1ccc2', @@ -34,7 +34,7 @@ return array( 'rsrc/css/aphront/typeahead.css' => '0e403212', 'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af', 'rsrc/css/application/auth/auth.css' => '1e655982', - 'rsrc/css/application/base/main-menu-view.css' => 'f9f5cd1b', + 'rsrc/css/application/base/main-menu-view.css' => '58db7ad2', 'rsrc/css/application/base/notification-menu.css' => '6aa0a74b', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f', 'rsrc/css/application/base/standard-page-view.css' => 'df338a4b', @@ -44,7 +44,7 @@ return array( 'rsrc/css/application/config/config-welcome.css' => '6abd79be', 'rsrc/css/application/config/setup-issue.css' => '22270af2', 'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2', - 'rsrc/css/application/conpherence/durable-column.css' => '9207426d', + 'rsrc/css/application/conpherence/durable-column.css' => '51235e34', 'rsrc/css/application/conpherence/menu.css' => 'c6ac5299', 'rsrc/css/application/conpherence/message-pane.css' => '5930260a', 'rsrc/css/application/conpherence/notification.css' => '04a6e10a', @@ -110,7 +110,7 @@ return array( 'rsrc/css/core/z-index.css' => '2db67397', 'rsrc/css/diviner/diviner-shared.css' => '38813222', 'rsrc/css/font/font-awesome.css' => 'ae9a7b4d', - 'rsrc/css/font/font-source-sans-pro.css' => '0d859f60', + 'rsrc/css/font/font-source-sans-pro.css' => '4a2430d7', 'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3', 'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82', 'rsrc/css/layout/phabricator-hovercard-view.css' => '893f4783', @@ -128,7 +128,7 @@ return array( 'rsrc/css/phui/phui-crumbs-view.css' => '594d719e', 'rsrc/css/phui/phui-document.css' => '0f83a7df', 'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5', - 'rsrc/css/phui/phui-fontkit.css' => 'd30f4fa3', + 'rsrc/css/phui/phui-fontkit.css' => '1fa79503', 'rsrc/css/phui/phui-form-view.css' => '78d729fe', 'rsrc/css/phui/phui-form.css' => 'f535f938', 'rsrc/css/phui/phui-header-view.css' => '083669db', @@ -353,7 +353,7 @@ return array( 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', 'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de', 'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'efef202b', - 'rsrc/js/application/conpherence/behavior-durable-column.js' => '1eef9f26', + 'rsrc/js/application/conpherence/behavior-durable-column.js' => 'aa3b6c22', 'rsrc/js/application/conpherence/behavior-menu.js' => 'e476c952', 'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861', 'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3', @@ -514,7 +514,7 @@ return array( 'changeset-view-manager' => '88be0133', 'config-options-css' => '7fedf08b', 'config-welcome-css' => '6abd79be', - 'conpherence-durable-column-view' => '9207426d', + 'conpherence-durable-column-view' => '51235e34', 'conpherence-menu-css' => 'c6ac5299', 'conpherence-message-pane-css' => '5930260a', 'conpherence-notification-css' => '04a6e10a', @@ -534,7 +534,7 @@ return array( 'diffusion-source-css' => '66fdf661', 'diviner-shared-css' => '38813222', 'font-fontawesome' => 'ae9a7b4d', - 'font-source-sans-pro' => '0d859f60', + 'font-source-sans-pro' => '4a2430d7', 'global-drag-and-drop-css' => '697324ad', 'harbormaster-css' => '49d64eb4', 'herald-css' => '826075fa', @@ -585,7 +585,7 @@ return array( 'javelin-behavior-diffusion-locate-file' => '6d3e1947', 'javelin-behavior-diffusion-pull-lastmodified' => '2b228192', 'javelin-behavior-doorkeeper-tag' => 'e5822781', - 'javelin-behavior-durable-column' => '1eef9f26', + 'javelin-behavior-durable-column' => 'aa3b6c22', 'javelin-behavior-error-log' => '6882e80a', 'javelin-behavior-fancy-datepicker' => 'c51ae228', 'javelin-behavior-global-drag-and-drop' => '07f199d8', @@ -730,7 +730,7 @@ return array( 'phabricator-hovercard-view-css' => '893f4783', 'phabricator-keyboard-shortcut' => '1ae869f2', 'phabricator-keyboard-shortcut-manager' => 'c1700f6f', - 'phabricator-main-menu-view' => 'f9f5cd1b', + 'phabricator-main-menu-view' => '58db7ad2', 'phabricator-nav-view-css' => '7aeaf435', 'phabricator-notification' => '0c6946e7', 'phabricator-notification-css' => '9c279160', @@ -783,7 +783,7 @@ return array( 'phui-document-view-css' => '0f83a7df', 'phui-feed-story-css' => 'c9f3a0b5', 'phui-font-icon-base-css' => '3dad2ae3', - 'phui-fontkit-css' => 'd30f4fa3', + 'phui-fontkit-css' => '1fa79503', 'phui-form-css' => 'f535f938', 'phui-form-view-css' => '78d729fe', 'phui-header-view-css' => '083669db', @@ -954,15 +954,6 @@ return array( 'javelin-dom', 'javelin-reactor-dom', ), - '1eef9f26' => array( - 'javelin-behavior', - 'javelin-dom', - 'javelin-stratcom', - 'javelin-scrollbar', - 'javelin-quicksand', - 'phabricator-keyboard-shortcut', - 'conpherence-thread-manager', - ), '1feea462' => array( 'javelin-install', 'javelin-dom', @@ -1150,6 +1141,9 @@ return array( 'javelin-request', 'javelin-util', ), + '4a2430d7' => array( + 'phui-fontkit-css', + ), '4d94d9c3' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1206,10 +1200,6 @@ return array( 'javelin-vector', 'javelin-dom', ), - '5bc2cb21' => array( - 'javelin-behavior', - 'javelin-stratcom', - ), '5c1c758c' => array( 'javelin-install', ), @@ -1664,6 +1654,15 @@ return array( 'javelin-util', 'phabricator-prefab', ), + 'aa3b6c22' => array( + 'javelin-behavior', + 'javelin-dom', + 'javelin-stratcom', + 'javelin-scrollbar', + 'javelin-quicksand', + 'phabricator-keyboard-shortcut', + 'conpherence-thread-manager', + ), 'b1f0ccee' => array( 'javelin-install', 'javelin-dom', diff --git a/src/applications/conpherence/view/ConpherenceDurableColumnView.php b/src/applications/conpherence/view/ConpherenceDurableColumnView.php index 9968ddb09a..9154853698 100644 --- a/src/applications/conpherence/view/ConpherenceDurableColumnView.php +++ b/src/applications/conpherence/view/ConpherenceDurableColumnView.php @@ -63,6 +63,8 @@ final class ConpherenceDurableColumnView extends AphrontTagView { protected function getTagContent() { $column_key = PhabricatorUserPreferences::PREFERENCE_CONPHERENCE_COLUMN; + require_celerity_resource('conpherence-durable-column-view'); + require_celerity_resource('font-source-sans-pro'); Javelin::initBehavior( 'durable-column', @@ -240,6 +242,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView { ->addClass('core-menu-item') ->addSigil('conpherence-settings-menu') ->setID($bubble_id) + ->setHref('#') ->setAural(pht('Settings')) ->setOrder(300); $settings_button = id(new PHUIListView()) diff --git a/src/view/layout/PhabricatorTransactionView.php b/src/view/layout/PhabricatorTransactionView.php index f0eeb42962..c2f9cf8f83 100644 --- a/src/view/layout/PhabricatorTransactionView.php +++ b/src/view/layout/PhabricatorTransactionView.php @@ -63,7 +63,7 @@ final class PhabricatorTransactionView extends AphrontView { $transaction_id = $this->anchorName ? 'anchor-'.$this->anchorName : null; $header = phutil_tag_div( - 'phabricator-transaction-header', + 'phabricator-transaction-header grouped', array($info, $actions)); return phutil_tag( diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 4ab0e67d88..9cf9ebb1ff 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -160,7 +160,6 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { require_celerity_resource('phui-form-css'); require_celerity_resource('sprite-gradient-css'); require_celerity_resource('phabricator-standard-page-view'); - require_celerity_resource('conpherence-durable-column-view'); Javelin::initBehavior('workflow', array()); diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css index 86c4db8c94..457e55e8d7 100644 --- a/webroot/rsrc/css/application/base/main-menu-view.css +++ b/webroot/rsrc/css/application/base/main-menu-view.css @@ -11,7 +11,6 @@ */ .phabricator-main-menu { - background: #2d3236; background-repeat: repeat-x; position: relative; min-height: 44px; diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css index 9f3364ae04..6d69b648d5 100644 --- a/webroot/rsrc/css/application/conpherence/durable-column.css +++ b/webroot/rsrc/css/application/conpherence/durable-column.css @@ -17,10 +17,10 @@ .conpherence-durable-column .loading-mask { position: absolute; - top: 0; + top: 90px; bottom: 0; - right: 0; - width: 300px; + right: 1px; + width: 298px; background: #fff; display: none; opacity: .6; @@ -33,7 +33,6 @@ .conpherence-durable-column-header { height: 44px; - border-left: 1px solid #000; } .conpherence-durable-column-header .conpherence-settings-dropdown { @@ -48,41 +47,36 @@ width: 230px; } -.conpherence-durable-column-header-text:hover { - color: #fff; - text-decoration: none; -} - .conpherence-durable-column-icon-bar { - height: 34px; - padding: 5px 12px; - border-bottom: 1px solid {$thinblueborder}; + height: 38px; + padding: 4px 8px; + background-color: {$lightgreybackground}; } .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon { float: left; display: block; - width: 30px; - height: 30px; - margin: 0px 8px 0px 0px; + width: 34px; + height: 34px; + margin: 0 4px 0 0; border: 2px solid transparent; border-radius: 3px; } .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon.selected { - border-color: {$blueborder}; + border-color: {$sky}; } .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon span { position: relative; display: block; - width: 26px; - height: 26px; + width: 30px; + height: 30px; top: 2px; left: 2px; - background-size: 26px 26px; + background-size: 30px 30px; } .conpherence-durable-column-body { @@ -96,12 +90,13 @@ .conpherence-durable-column-main { position: absolute; - top: 44px; - bottom: 136px; + top: 46px; + bottom: 134px; left: 0; right: 0; overflow-x: hidden; overflow-y: auto; + border-top: 1px solid {$thinblueborder}; } .conpherence-durable-column-transactions { @@ -110,7 +105,7 @@ .conpherence-durable-column-transactions .phabricator-transaction-view { background: none; - margin: 0 10px 0 0; + margin: 0; padding: 4px 0; min-height: 0; } @@ -131,9 +126,26 @@ background: none; padding: 0; } + +.conpherence-durable-column-transactions .date-marker { + border-top: 1px solid {$thinblueborder}; + margin: 20px 0px 4px; +} + +.conpherence-durable-column-transactions .date-marker .date { + position: relative; + top: -11px; + left: 8px; + background-color: #fff; + color: {$lightgreytext}; + font-size: 12px; + padding: 0 4px; +} + .conpherence-durable-column-transactions .phabricator-transaction-detail .phabricator-transaction-header .phabricator-transaction-info { margin: 3px 0px 0px 0px; + color: {$lightgreytext}; } .conpherence-durable-column-transactions .phabricator-transaction-detail @@ -145,7 +157,7 @@ position: absolute; left: 0; right: 0; - bottom: 36px; + bottom: 34px; height: 100px; margin: 0; border-width: 1px 0; @@ -164,239 +176,6 @@ box-shadow: none; } -/* participants widget */ - -.conpherence-durable-column-body .person-entry { - padding: 8px 0 0 8px; -} - -.conpherence-durable-column-body .person-entry a { - float: left; - font-weight: bold; - line-height: 20px; -} - -.conpherence-durable-column-body .person-entry a img { - height: 35px; - width: 35px; -} - -.conpherence-durable-column-body .person-entry .pic { - float: left; - margin: 0 8px 0 0; - width: 35px; - padding: 0; -} - -.conpherence-durable-column-body .person-entry .remove { - float: right; - width: 20px; - font-size: 18px; - padding: 5px 0 8px 0; -} - -.conpherence-durable-column-body .person-entry .remove:hover { - text-decoration: none; -} - -.conpherence-durable-column-body .person-entry .remove .close-icon { - color: #bfbfbf; -} - -.conpherence-durable-column-body .person-entry .remove:hover .close-icon { - color: #000; -} - -/* files widget */ - -.conpherence-durable-column-body .no-files { - width: 100%; - padding: 20px 0px; - text-align: center; - color: #555; -} - -.conpherence-durable-column-body .file-entry { - padding: 10px 0; - margin: 0 5px 0 10px; - border-bottom: 1px solid #e7e7e7; -} -.conpherence-durable-column-body .file-icon { - width: 32px; - height: 32px; - float: left; - font-size: 30px; -} -.conpherence-durable-column-body .file-title { - display: block; - position: relative; - top: -4px; - left: 2px; - overflow-x: hidden; - width: 180px; - font-weight: bold; - text-overflow: ellipsis; - white-space: nowrap; -} -.conpherence-durable-column-body .file-uploaded-by { - color: #a1a5a9; - position: relative; - top: 0px; - left: 2px; - width: 170px; - font-size: 11px; -} - -/* calendar widget */ - -.conpherence-durable-column-body .aphront-multi-column-view { - width: 100%; -} - -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column { - background: white; - border-right: 1px solid #bfbfbf; - text-align: center; -} - -.conpherence-durable-column-body .no-events { - color: {$lightgreytext}; -} - -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column-last { - border-right: 0; -} -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .day-column, -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .day-column-active { - color: #bfbfbf; - background-color: white; - font-weight: bold; - padding: 0px 0px 10px 0px; -} -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .day-column-active { - color: black; -} -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .present , -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .sporadic , -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .away { - height: 10px; - margin: 5px 0px 5px 0px; - width: 100%; -} -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .present { - background-color: white; -} -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .sporadic { - background-color: rgb(222, 226, 232); -} -.conpherence-durable-column-body .aphront-multi-column-view -.aphront-multi-column-column .away { - background-color: rgb(102, 204, 255); -} -.conpherence-durable-column-body .aphront-multi-column-view - .day-name { - padding: 5px 0px 0px 0px; - font-size: 12px; -} -.conpherence-durable-column-body .aphront-multi-column-view - .day-number { - font-size: 16px; - padding: 0 0 5px 0; -} - -.conpherence-durable-column-body .day-header { - overflow: hidden; - background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - border-top: 1px solid #e7e7e7; - border-bottom: 1px solid #d7d7d7; - padding: 5px 10px 5px 10px; -} - -.conpherence-durable-column-body .day-header.today { - background-image: linear-gradient(to bottom, #3b86c4, #2b628f); - background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f); - border-top: none; - border-bottom: none; -} - -.conpherence-durable-column-body .day-header.today .day-name, -.conpherence-durable-column-body .day-header.today .day-date { - color: #fff; -} - -.conpherence-durable-column-body .day-header .day-name { - float: left; - color: #555759; - font-weight: bold; - text-transform: uppercase; - font-size: 11px; -} - -.conpherence-durable-column-body .day-header .day-date { - float: right; - color: #555759; - font-size: 11px; -} - -.conpherence-durable-column-body .top-border { - border-top: 1px solid #E7E7E7; -} - -.conpherence-durable-column-body .user-status { - padding: 10px 0px 10px 0px; - margin: 0px 0px 0px 10px; -} - -.conpherence-durable-column-body .user-status .icon { - border-radius: 8px; - height: 14px; - width: 14px; - margin-top: 7px; - float: left; -} - -.conpherence-durable-column-body .sporadic .icon { - background-color: rgb(222, 226, 232); -} - -.conpherence-durable-column-body .away .icon { - background-color: rgb(102, 204, 255); -} - -.conpherence-durable-column-body .user-status .description { - width: 195px; - text-overflow: ellipsis; - margin: 0 0 0px 20px; -} - -.conpherence-durable-column-body .user-status .participant { - font-size: 11px; - color: {$lightgreytext}; - padding-top: 2px; -} - -/* settings widget */ - -.conpherence-durable-column-body .notifications-update { - margin: 0px 12px; -} - -.conpherence-durable-column-body .aphront-form-input { - margin: 8px 12px; - width: 100%; -} - .conpherence-durable-column-footer { position: absolute; height: 26px; @@ -404,6 +183,7 @@ left: 0; right: 0; bottom: 0; + background-color: {$lightgreybackground}; } .conpherence-durable-column-footer button { diff --git a/webroot/rsrc/css/font/font-source-sans-pro.css b/webroot/rsrc/css/font/font-source-sans-pro.css index 2414049f13..4576b1ae9f 100644 --- a/webroot/rsrc/css/font/font-source-sans-pro.css +++ b/webroot/rsrc/css/font/font-source-sans-pro.css @@ -1,5 +1,6 @@ /** * @provides font-source-sans-pro + * @requires phui-fontkit-css */ @font-face { diff --git a/webroot/rsrc/css/phui/phui-fontkit.css b/webroot/rsrc/css/phui/phui-fontkit.css index 397d113396..d90a66424c 100644 --- a/webroot/rsrc/css/phui/phui-fontkit.css +++ b/webroot/rsrc/css/phui/phui-fontkit.css @@ -10,7 +10,9 @@ } .phui-font-source-sans.conpherence-message-pane, -.phui-font-source-sans.conpherence-message-pane .remarkup-assist-textarea { +.phui-font-source-sans.conpherence-message-pane .remarkup-assist-textarea, +.conpherence-durable-column-body, +.conpherence-durable-column-body .remarkup-assist-textarea { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 14px;