diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 957910a984..787dde68fa 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '30ec4610', + 'core.pkg.css' => 'f020a5d6', 'core.pkg.js' => '55716d41', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '8af45893', @@ -39,7 +39,7 @@ return array( 'rsrc/css/application/base/main-menu-view.css' => '7bb9c588', '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' => '661ae3e3', + 'rsrc/css/application/base/standard-page-view.css' => '8db344ee', 'rsrc/css/application/chatlog/chatlog.css' => '852140ff', 'rsrc/css/application/config/config-options.css' => '7fedf08b', 'rsrc/css/application/config/config-template.css' => '25d446d6', @@ -342,6 +342,7 @@ return array( 'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761', 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', 'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de', + 'rsrc/js/application/conpherence/behavior-durable-column.js' => 'acad7376', 'rsrc/js/application/conpherence/behavior-menu.js' => 'f0a41b9f', 'rsrc/js/application/conpherence/behavior-pontificate.js' => '2f6efe18', 'rsrc/js/application/conpherence/behavior-widget-pane.js' => '40b1ff90', @@ -574,6 +575,7 @@ return array( 'javelin-behavior-diffusion-locate-file' => '6d3e1947', 'javelin-behavior-diffusion-pull-lastmodified' => '2b228192', 'javelin-behavior-doorkeeper-tag' => 'e5822781', + 'javelin-behavior-durable-column' => 'acad7376', 'javelin-behavior-error-log' => '6882e80a', 'javelin-behavior-fancy-datepicker' => 'c51ae228', 'javelin-behavior-global-drag-and-drop' => '07f199d8', @@ -731,7 +733,7 @@ return array( 'phabricator-side-menu-view-css' => '7e8c6341', 'phabricator-slowvote-css' => '266df6a1', 'phabricator-source-code-view-css' => '7d346aa4', - 'phabricator-standard-page-view' => '661ae3e3', + 'phabricator-standard-page-view' => '8db344ee', 'phabricator-textareautils' => '5c93c52c', 'phabricator-title' => '5c1c758c', 'phabricator-tooltip' => '1d298e3a', @@ -1601,6 +1603,13 @@ return array( 'javelin-util', 'phabricator-prefab', ), + 'acad7376' => array( + 'javelin-behavior', + 'javelin-dom', + 'javelin-stratcom', + 'javelin-scrollbar', + 'phabricator-keyboard-shortcut', + ), 'b07b009f' => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index aa9f656f23..03e1409b25 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1137,6 +1137,7 @@ 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', 'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php', 'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php', 'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php', @@ -4315,6 +4316,7 @@ phutil_register_library_map(array( 'PHUICrumbsView' => 'AphrontView', 'PHUIDocumentExample' => 'PhabricatorUIExample', 'PHUIDocumentView' => 'AphrontTagView', + 'PHUIDurableColumn' => 'AphrontTagView', 'PHUIFeedStoryExample' => 'PhabricatorUIExample', 'PHUIFeedStoryView' => 'AphrontView', 'PHUIFormDividerControl' => 'AphrontFormControl', diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 77d181d1c2..0ab40d97b6 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/src/view/page/PhabricatorStandardPageView.php @@ -16,6 +16,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { private $pageObjects = array(); private $applicationMenu; private $showFooter = true; + private $showDurableColumn = true; public function setShowFooter($show_footer) { $this->showFooter = $show_footer; @@ -73,6 +74,15 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { } } + public function setShowDurableColumn($show) { + $this->showDurableColumn = $show; + return $this; + } + + public function getShowDurableColumn() { + return $this->showDurableColumn; + } + public function getTitle() { $use_glyph = true; @@ -364,6 +374,11 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { )), )); + $durable_column = null; + if ($this->getShowDurableColumn()) { + $durable_column = new PHUIDurableColumn(); + } + return phutil_tag( 'div', array( @@ -371,6 +386,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView { ), array( $main_page, + $durable_column, )); } diff --git a/src/view/phui/PHUIDurableColumn.php b/src/view/phui/PHUIDurableColumn.php new file mode 100644 index 0000000000..bc93c7cc7a --- /dev/null +++ b/src/view/phui/PHUIDurableColumn.php @@ -0,0 +1,106 @@ + 'durable-column', + 'class' => 'phui-durable-column', + ); + } + + protected function getTagContent() { + Javelin::initBehavior('durable-column'); + + $classes = array(); + $classes[] = 'phui-durable-column-header'; + $classes[] = 'sprite-main-header'; + $classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color'); + + $header = phutil_tag( + 'div', + array( + 'class' => implode(' ', $classes), + ), + phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-header-text', + ), + pht('Column Prototype'))); + + $icon_bar = phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-icon-bar', + ), + null); // <-- TODO: Icon buttons go here. + + $copy = pht( + 'This is a very early prototype of a persistent column. It is not '. + 'expected to work yet, and leaving it open will activate other new '. + 'features which will break things. Press "\\" (backslash) on your '. + 'keyboard to close it now.'); + + $content = phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-main', + ), + phutil_tag( + 'div', + array( + 'id' => 'phui-durable-column-content', + 'class' => 'phui-durable-column-frame', + ), + phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-content', + ), + $copy))); + + $input = phutil_tag( + 'textarea', + array( + 'class' => 'phui-durable-column-textarea', + 'placeholder' => pht('Box for text...'), + )); + + $footer = phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-footer', + ), + array( + phutil_tag( + 'button', + array( + 'class' => 'grey', + ), + pht('Send')), + phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-status', + ), + pht('Status Text')), + )); + + return array( + $header, + phutil_tag( + 'div', + array( + 'class' => 'phui-durable-column-body', + ), + array( + $icon_bar, + $content, + $input, + $footer, + )), + ); + } + +} diff --git a/webroot/rsrc/css/application/base/standard-page-view.css b/webroot/rsrc/css/application/base/standard-page-view.css index 8fb217fd66..a9d7b5d688 100644 --- a/webroot/rsrc/css/application/base/standard-page-view.css +++ b/webroot/rsrc/css/application/base/standard-page-view.css @@ -199,3 +199,97 @@ 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/js/application/conpherence/behavior-durable-column.js b/webroot/rsrc/js/application/conpherence/behavior-durable-column.js new file mode 100644 index 0000000000..9e53a28b77 --- /dev/null +++ b/webroot/rsrc/js/application/conpherence/behavior-durable-column.js @@ -0,0 +1,27 @@ +/** + * @provides javelin-behavior-durable-column + * @requires javelin-behavior + * javelin-dom + * javelin-stratcom + * javelin-scrollbar + * phabricator-keyboard-shortcut + */ + +JX.behavior('durable-column', function() { + + var frame = JX.$('phabricator-standard-page'); + var show = false; + + new JX.KeyboardShortcut('\\', 'Toggle Column (Prototype)') + .setHandler(function() { + show = !show; + JX.DOM.alterClass(frame, 'with-durable-column', show); + JX.$('durable-column').style.display = (show ? 'block' : 'none'); + JX.Stratcom.invoke('resize'); + }) + .register(); + + new JX.Scrollbar(JX.$('phui-durable-column-content')); + + +});