From 4ccd653cc7e74ddf37f1127f9fd1db1579aa278e Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 27 Feb 2015 11:38:33 -0800 Subject: [PATCH] Shrink side-nav on home when durable column is open Summary: This still needs some fine tuning, but wanted to get opinions. Using it on a laptop feels pretty good. This also moves `durable-column.css` into its own file since it'll likely continue to grow. Minor CSS tweaks to the near perfect rendition of durable column from pixel based mockups. Test Plan: Press \ on my laptop. Having issues with Chrome however, but FF and Safari work as expected. {F322506} Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11901 --- resources/celerity/map.php | 8 +- src/__phutil_library_map__.php | 4 +- .../view/ConpherenceDurableColumnView.php} | 26 ++--- src/view/page/PhabricatorStandardPageView.php | 3 +- .../application/base/standard-page-view.css | 94 ---------------- .../conpherence/durable-column.css | 103 ++++++++++++++++++ 6 files changed, 125 insertions(+), 113 deletions(-) rename src/{view/phui/PHUIDurableColumn.php => applications/conpherence/view/ConpherenceDurableColumnView.php} (70%) create mode 100644 webroot/rsrc/css/application/conpherence/durable-column.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 55d1502a6b..911442ff70 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'fa9788b4', + 'core.pkg.css' => '44623ac2', 'core.pkg.js' => '23d653bb', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '14f0fa92', @@ -38,13 +38,14 @@ return array( 'rsrc/css/application/base/main-menu-view.css' => 'f9f5cd1b', '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' => '926b7e2d', + 'rsrc/css/application/base/standard-page-view.css' => 'df338a4b', 'rsrc/css/application/chatlog/chatlog.css' => '852140ff', 'rsrc/css/application/config/config-options.css' => '7fedf08b', 'rsrc/css/application/config/config-template.css' => '8e6c6fcd', 'rsrc/css/application/config/config-welcome.css' => 'b0d16200', 'rsrc/css/application/config/setup-issue.css' => '22270af2', 'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2', + 'rsrc/css/application/conpherence/durable-column.css' => '12846d25', 'rsrc/css/application/conpherence/menu.css' => '73774137', 'rsrc/css/application/conpherence/message-pane.css' => '17a9517f', 'rsrc/css/application/conpherence/notification.css' => '04a6e10a', @@ -515,6 +516,7 @@ return array( 'changeset-view-manager' => '5eb5b98c', 'config-options-css' => '7fedf08b', 'config-welcome-css' => 'b0d16200', + 'conpherence-durable-column-view' => '12846d25', 'conpherence-menu-css' => '73774137', 'conpherence-message-pane-css' => '17a9517f', 'conpherence-notification-css' => '04a6e10a', @@ -744,7 +746,7 @@ return array( 'phabricator-side-menu-view-css' => '7e8c6341', 'phabricator-slowvote-css' => '266df6a1', 'phabricator-source-code-view-css' => '2ceee894', - 'phabricator-standard-page-view' => '926b7e2d', + 'phabricator-standard-page-view' => 'df338a4b', 'phabricator-textareautils' => '5c93c52c', 'phabricator-title' => '5c1c758c', 'phabricator-tooltip' => '1d298e3a', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 960c2fef4b..3267b1b506 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -229,6 +229,7 @@ phutil_register_library_map(array( 'ConpherenceCreateThreadConduitAPIMethod' => 'applications/conpherence/conduit/ConpherenceCreateThreadConduitAPIMethod.php', 'ConpherenceCreateThreadMailReceiver' => 'applications/conpherence/mail/ConpherenceCreateThreadMailReceiver.php', 'ConpherenceDAO' => 'applications/conpherence/storage/ConpherenceDAO.php', + 'ConpherenceDurableColumnView' => 'applications/conpherence/view/ConpherenceDurableColumnView.php', 'ConpherenceEditor' => 'applications/conpherence/editor/ConpherenceEditor.php', 'ConpherenceFileWidgetView' => 'applications/conpherence/view/ConpherenceFileWidgetView.php', 'ConpherenceFulltextQuery' => 'applications/conpherence/query/ConpherenceFulltextQuery.php', @@ -1138,7 +1139,6 @@ phutil_register_library_map(array( 'PHUICrumbsView' => 'view/phui/PHUICrumbsView.php', 'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php', 'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php', - 'PHUIDurableColumn' => 'view/phui/PHUIDurableColumn.php', 'PHUIErrorExample' => 'applications/uiexample/examples/PHUIErrorExample.php', 'PHUIErrorView' => 'view/form/PHUIErrorView.php', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', @@ -3368,6 +3368,7 @@ phutil_register_library_map(array( 'ConpherenceCreateThreadConduitAPIMethod' => 'ConpherenceConduitAPIMethod', 'ConpherenceCreateThreadMailReceiver' => 'PhabricatorMailReceiver', 'ConpherenceDAO' => 'PhabricatorLiskDAO', + 'ConpherenceDurableColumnView' => 'AphrontTagView', 'ConpherenceEditor' => 'PhabricatorApplicationTransactionEditor', 'ConpherenceFileWidgetView' => 'ConpherenceWidgetView', 'ConpherenceFulltextQuery' => 'PhabricatorOffsetPagedQuery', @@ -4364,7 +4365,6 @@ phutil_register_library_map(array( 'PHUICrumbsView' => 'AphrontView', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', - 'PHUIDurableColumn' => 'AphrontTagView', 'PHUIErrorExample' => 'PhabricatorUIExample', 'PHUIErrorView' => 'AphrontView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', diff --git a/src/view/phui/PHUIDurableColumn.php b/src/applications/conpherence/view/ConpherenceDurableColumnView.php similarity index 70% rename from src/view/phui/PHUIDurableColumn.php rename to src/applications/conpherence/view/ConpherenceDurableColumnView.php index bc93c7cc7a..32cae367ed 100644 --- a/src/view/phui/PHUIDurableColumn.php +++ b/src/applications/conpherence/view/ConpherenceDurableColumnView.php @@ -1,11 +1,11 @@ 'durable-column', - 'class' => 'phui-durable-column', + 'class' => 'conpherence-durable-column', ); } @@ -13,7 +13,7 @@ final class PHUIDurableColumn extends AphrontTagView { Javelin::initBehavior('durable-column'); $classes = array(); - $classes[] = 'phui-durable-column-header'; + $classes[] = 'conpherence-durable-column-header'; $classes[] = 'sprite-main-header'; $classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color'); @@ -25,14 +25,14 @@ final class PHUIDurableColumn extends AphrontTagView { phutil_tag( 'div', array( - 'class' => 'phui-durable-column-header-text', + 'class' => 'conpherence-durable-column-header-text', ), pht('Column Prototype'))); $icon_bar = phutil_tag( 'div', array( - 'class' => 'phui-durable-column-icon-bar', + 'class' => 'conpherence-durable-column-icon-bar', ), null); // <-- TODO: Icon buttons go here. @@ -45,32 +45,32 @@ final class PHUIDurableColumn extends AphrontTagView { $content = phutil_tag( 'div', array( - 'class' => 'phui-durable-column-main', + 'class' => 'conpherence-durable-column-main', ), phutil_tag( 'div', array( - 'id' => 'phui-durable-column-content', - 'class' => 'phui-durable-column-frame', + 'id' => 'conpherence-durable-column-content', + 'class' => 'conpherence-durable-column-frame', ), phutil_tag( 'div', array( - 'class' => 'phui-durable-column-content', + 'class' => 'conpherence-durable-column-content', ), $copy))); $input = phutil_tag( 'textarea', array( - 'class' => 'phui-durable-column-textarea', + 'class' => 'conpherence-durable-column-textarea', 'placeholder' => pht('Box for text...'), )); $footer = phutil_tag( 'div', array( - 'class' => 'phui-durable-column-footer', + 'class' => 'conpherence-durable-column-footer', ), array( phutil_tag( @@ -82,7 +82,7 @@ final class PHUIDurableColumn extends AphrontTagView { phutil_tag( 'div', array( - 'class' => 'phui-durable-column-status', + 'class' => 'conpherence-durable-column-status', ), pht('Status Text')), )); @@ -92,7 +92,7 @@ final class PHUIDurableColumn extends AphrontTagView { phutil_tag( 'div', array( - 'class' => 'phui-durable-column-body', + 'class' => 'conpherence-durable-column-body', ), array( $icon_bar, diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 9016fa1138..415773e325 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -133,6 +133,7 @@ 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()); @@ -377,7 +378,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { $durable_column = null; if ($this->getShowDurableColumn()) { - $durable_column = new PHUIDurableColumn(); + $durable_column = new ConpherenceDurableColumnView(); } return phutil_tag( diff --git a/webroot/rsrc/css/application/base/standard-page-view.css b/webroot/rsrc/css/application/base/standard-page-view.css index c7005782ef..f231e6c4db 100644 --- a/webroot/rsrc/css/application/base/standard-page-view.css +++ b/webroot/rsrc/css/application/base/standard-page-view.css @@ -215,97 +215,3 @@ a.handle-disabled { position: absolute; left: -50px; } - -.with-durable-column { - margin-right: 300px; -} - -.phui-durable-column { - position: absolute; - top: 0; - bottom: 0; - right: 0; - width: 300px; - background: #ffffff; - display: none; -} - -.phui-durable-column-header { - height: 44px; - border-left: 1px solid #000000; -} - -.phui-durable-column-header-text { - padding: 12px 16px; - font-size: 15px; - color: {$lightgreytext}; -} - -.phui-durable-column-icon-bar { - height: 34px; - padding: 5px 16px; - border-bottom: 1px solid {$lightblueborder}; -} - -.phui-durable-column-body { - position: absolute; - top: 44px; - bottom: 0; - right: 0; - left: 0; - border-left: 1px solid {$lightgreyborder}; -} - -.phui-durable-column-main { - position: absolute; - top: 44px; - bottom: 144px; - left: 0; - right: 0; - overflow: hidden; -} - -.phui-durable-column-content { - padding: 8px 16px; -} - -.phui-durable-column-textarea { - position: absolute; - left: 0; - right: 0; - bottom: 44px; - height: 100px; - margin: 0; - border-width: 1px 0; - border-style: solid; - border-top-color: {$lightblueborder}; - border-bottom-color: {$lightblueborder}; - padding: 8px 16px; - resize: none; -} - -.phui-durable-column-textarea:focus { - outline: 0; - border-top-color: {$sky}; - border-bottom-color: {$sky}; - box-shadow: none; -} - -.phui-durable-column-footer { - position: absolute; - height: 28px; - padding: 8px 16px; - left: 0; - right: 0; - bottom: 0; -} - -.phui-durable-column-footer button { - float: right; -} - -.phui-durable-column-status { - vertical-align: middle; - line-height: 28px; - color: {$lightgreytext}; -} diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css new file mode 100644 index 0000000000..27ac9047f0 --- /dev/null +++ b/webroot/rsrc/css/application/conpherence/durable-column.css @@ -0,0 +1,103 @@ +/** + * @provides conpherence-durable-column-view + */ + +.with-durable-column { + margin-right: 300px; +} + +.conpherence-durable-column { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 300px; + background: #fff; + display: none; +} + +.conpherence-durable-column-header { + height: 44px; + border-left: 1px solid #000; +} + +.conpherence-durable-column-header-text { + padding: 12px 16px; + font-size: 15px; + color: rgba(255,255,255,.8); +} + +.conpherence-durable-column-header-text:hover { + color: #fff; +} + +.conpherence-durable-column-icon-bar { + height: 34px; + padding: 5px 16px; + border-bottom: 1px solid {$thinblueborder}; +} + +.conpherence-durable-column-body { + position: absolute; + top: 44px; + bottom: 0; + right: 0; + left: 0; + border-left: 1px solid {$lightblueborder}; +} + +.conpherence-durable-column-main { + position: absolute; + top: 44px; + bottom: 144px; + left: 0; + right: 0; + overflow: hidden; +} + +.conpherence-durable-column-content { + padding: 8px 12px; +} + +.conpherence-durable-column-textarea { + position: absolute; + left: 0; + right: 0; + bottom: 36px; + height: 100px; + margin: 0; + border-width: 1px 0; + border-style: solid; + border-top-color: {$thinblueborder}; + border-bottom-color: {$thinblueborder}; + padding: 8px 12px; + width: 100%; + resize: none; +} + +.conpherence-durable-column-textarea:focus { + outline: 0; + border-top-color: {$sky}; + border-bottom-color: {$sky}; + box-shadow: none; +} + +.conpherence-durable-column-footer { + position: absolute; + height: 26px; + padding: 4px 8px 4px 12px; + left: 0; + right: 0; + bottom: 0; +} + +.conpherence-durable-column-footer button { + float: right; +} + +.conpherence-durable-column-status { + vertical-align: middle; + line-height: 24px; + font-size: 12px; + color: {$lightbluetext}; +}