revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 08:52:39 +01:00
Code Issues Releases Wiki Activity

Shrink side-nav on home when durable column is open

Browse source 
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
This commit is contained in:
Chad Little 2015-02-27 11:38:33 -08:00
parent ef90c7ed2c
commit 4ccd653cc7
6 changed files with 125 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/celerity/map.php
View file

@ -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',

4
src/__phutil_library_map__.php
View file

@ -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',

26
src/view/phui/PHUIDurableColumn.php → src/applications/conpherence/view/ConpherenceDurableColumnView.php
View file

@ -1,11 +1,11 @@
<?php
final class PHUIDurableColumn extends AphrontTagView {
final class ConpherenceDurableColumnView extends AphrontTagView {
protected function getTagAttributes() {
return array(
'id' => '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,

3
src/view/page/PhabricatorStandardPageView.php
View file

@ -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(

94
webroot/rsrc/css/application/base/standard-page-view.css
View file

@ -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};
}

103
webroot/rsrc/css/application/conpherence/durable-column.css Normal file
View file

@ -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};
}