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

Spiffy up new sidebar, simplify UI

Browse source 
Summary: Mostly a visual spacing pass, also adds in circle icons for edit, collapse. For now removing the fixed position on the icons for simplicity while the basics are being polished.

Test Plan: Projects, Profiles, wide and narrow.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15081
This commit is contained in:
Chad Little 2016-01-21 14:07:09 -08:00
parent d37153f003
commit 6a701c1988
8 changed files with 58 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/celerity/map.php
View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '005bc22f',
'core.pkg.css' => 'cea85605',
'core.pkg.js' => '573e6664',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '2de124c9',
@ -143,7 +143,7 @@ return array(
'rsrc/css/phui/phui-object-item-list-view.css' => '26c30d3f',
'rsrc/css/phui/phui-pager.css' => 'bea33d23',
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
'rsrc/css/phui/phui-profile-menu.css' => '84966ae9',
'rsrc/css/phui/phui-profile-menu.css' => '2168816d',
'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
'rsrc/css/phui/phui-spacing.css' => '042804d6',
@ -152,7 +152,7 @@ return array(
'rsrc/css/phui/phui-text.css' => 'cf019f54',
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
'rsrc/css/phui/phui-two-column-view.css' => '39ecafb1',
'rsrc/css/phui/phui-workboard-view.css' => '8330bca5',
'rsrc/css/phui/phui-workboard-view.css' => 'f488d036',
'rsrc/css/phui/phui-workpanel-view.css' => 'adec7699',
'rsrc/css/sprite-login.css' => '60e8560e',
'rsrc/css/sprite-menu.css' => '9dd65b92',
@ -819,7 +819,7 @@ return array(
'phui-object-item-list-view-css' => '26c30d3f',
'phui-pager-css' => 'bea33d23',
'phui-pinboard-view-css' => '2495140e',
'phui-profile-menu-css' => '84966ae9',
'phui-profile-menu-css' => '2168816d',
'phui-property-list-view-css' => '27b2849e',
'phui-remarkup-preview-css' => '1a8f2591',
'phui-spacing-css' => '042804d6',
@ -829,7 +829,7 @@ return array(
'phui-theme-css' => '981a58f8',
'phui-timeline-view-css' => '2efceff8',
'phui-two-column-view-css' => '39ecafb1',
'phui-workboard-view-css' => '8330bca5',
'phui-workboard-view-css' => 'f488d036',
'phui-workpanel-view-css' => 'adec7699',
'phuix-action-list-view' => 'b5c256b8',
'phuix-action-view' => '8cf6d262',

16
src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
View file

@ -191,18 +191,10 @@ final class CelerityDefaultPostprocessor
// Background color for "dark" themes.
'page.background.dark' => '#ebecee',
// NOTE: We can't just do these with an alpha channel because the
// fixed items in the footer may render on top of other items, so the
// backgrounds must be opaque.
// This is the base background color.
'menu.profile.background' => '#525868',
// This is premultiplied 7.5% alpha.
'menu.profile.background.hover' => '#4c5160',
// This is premultiplied 15% alpha.
'menu.profile.background.selected' => '#464b59',
'menu.profile.background' => '#525867',
'menu.profile.background.hover' => '#464b58',
'menu.profile.background.selected' => '#393d48',
'menu.profile.text' => '#c6c7cb',
'menu.profile.text.selected' => '#ffffff',
@ -211,7 +203,7 @@ final class CelerityDefaultPostprocessor
'menu.main.height' => '44px',
'menu.profile.width' => '240px',
'menu.profile.width.collapsed' => '80px',
'menu.profile.width.collapsed' => '88px',
'menu.profile.item.height' => '46px',
);

8
src/applications/search/engine/PhabricatorProfilePanelEngine.php
View file

@ -327,12 +327,12 @@ abstract class PhabricatorProfilePanelEngine extends Phobject {
$object,
PhabricatorPolicyCapability::CAN_EDIT);
$expanded_edit_icon = id(new PHUIIconView())
$expanded_edit_icon = id(new PHUIIconCircleView())
->addClass('phui-list-item-icon')
->addClass('phui-profile-menu-visible-when-expanded')
->setIconFont('fa-pencil');
$collapsed_edit_icon = id(new PHUIIconView())
$collapsed_edit_icon = id(new PHUIIconCircleView())
->addClass('phui-list-item-icon')
->addClass('phui-profile-menu-visible-when-collapsed')
->setIconFont('fa-pencil')
@ -386,12 +386,12 @@ abstract class PhabricatorProfilePanelEngine extends Phobject {
'settingsURI' => $settings_uri,
));
$collapse_icon = id(new PHUIIconView())
$collapse_icon = id(new PHUIIconCircleView())
->addClass('phui-list-item-icon')
->addClass('phui-profile-menu-visible-when-expanded')
->setIconFont('fa-angle-left');
$expand_icon = id(new PHUIIconView())
$expand_icon = id(new PHUIIconCircleView())
->addClass('phui-list-item-icon')
->addClass('phui-profile-menu-visible-when-collapsed')
->addSigil('has-tooltip')

4
src/applications/uiexample/examples/PHUIIconExample.php
View file

@ -115,7 +115,7 @@ final class PHUIIconExample extends PhabricatorUIExample {
foreach ($circles as $circle) {
$circleview[] =
id(new PHUIIconCircleView())
->setIcon($circle)
->setIconFont($circle)
->setHref('#')
->addClass('mmr');
}
@ -124,7 +124,7 @@ final class PHUIIconExample extends PhabricatorUIExample {
foreach ($circles as $circle) {
$circleview[] =
id(new PHUIIconCircleView())
->setIcon($circle)
->setIconFont($circle)
->setSize(PHUIIconCircleView::MEDIUM)
->setHref('#')
->addClass('mmr');

2
src/view/phui/PHUIIconCircleView.php
View file

@ -15,7 +15,7 @@ final class PHUIIconCircleView extends AphrontTagView {
return $this;
}
public function setIcon($icon) {
public function setIconFont($icon) {
$this->icon = $icon;
return $this;
}

3
src/view/phui/PHUIListItemView.php
View file

@ -160,7 +160,7 @@ final class PHUIListItemView extends AphrontTagView {
return $this;
}
public function addIcon(PHUIIconView $icon) {
public function addIcon($icon) {
$this->icons[] = $icon;
return $this;
}
@ -275,6 +275,7 @@ final class PHUIListItemView extends AphrontTagView {
if ($this->profileImage) {
$icon = id(new PHUIIconView())
->setHeadSize(PHUIIconView::HEAD_SMALL)
->addClass('phui-list-item-icon')
->setImage($this->profileImage);
}

97
webroot/rsrc/css/phui/phui-profile-menu.css
View file

@ -45,29 +45,27 @@
.phui-profile-menu .phabricator-side-menu .phui-list-item-href {
display: block;
text-decoration: none;
padding: 12px 8px 12px 48px;
font-size: 15px;
padding: 0 8px 0 48px;
height: 48px;
font-size: {$biggerfontsize};
-webkit-font-smoothing: antialiased;
color: {$menu.profile.text};
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
/* NOTE: We must have an opaque background on these items so the footer
items appear opaque when the render over normal items. */
background: {$menu.profile.background};
line-height: 48px;
}
.phui-profile-menu .phabricator-side-menu .phui-list-item-icon,
.phui-profile-menu .phabricator-side-menu
.phui-list-item-href .phui-icon-view {
.phui-list-item-href .phui-list-item-icon {
position: absolute;
top: 12px;
left: 13px;
font-size: 20px;
width: 22px;
height: 22px;
line-height: 22px;
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
color: {$menu.profile.text};
background-size: 100%;
@ -76,9 +74,10 @@
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-list-item-href {
text-align: center;
padding: 42px 8px 12px;
font-size: 11px;
line-height: 13px;
padding: 42px 4px 14px;
line-height: 14px;
height: auto;
font-size: {$smallerfontsize};
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
@ -91,9 +90,9 @@
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-list-item-icon,
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-list-item-href .phui-icon-view {
top: 10px;
left: 29px;
.phui-list-item-href .phui-list-item-icon {
top: 14px;
left: 31px;
}
.phui-profile-menu .phabricator-side-menu
@ -130,10 +129,9 @@
color: {$menu.profile.text.selected};
}
.phui-profile-menu .phabricator-side-menu .phui-divider {
margin: 4px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.200);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.phui-profile-menu .phabricator-side-menu .phui-motivator {
@ -154,54 +152,37 @@
height: {$menu.profile.item.height};
}
.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer {
position: fixed;
box-sizing: border-box;
width: {$menu.profile.width};
bottom: 0px;
}
.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-1 {
left: 0;
}
.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-2 {
left: 120px;
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer {
width: 40px;
height: {$menu.profile.item.height};
bottom: 0px;
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer-1 {
left: 0;
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer-2 {
left: 40px;
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer
.phui-list-item-name {
display: none;
}
.phui-profile-menu .phui-profile-menu-collapsed .phabricator-side-menu
.phui-profile-menu-footer
.phui-list-item-icon {
top: 10px;
left: 10px;
}
.phui-profile-menu .phui-profile-menu-expanded
.phui-profile-menu-visible-when-collapsed,
.phui-profile-menu .phui-profile-menu-collapsed
.phui-profile-menu-visible-when-expanded {
display: none;
}
.phui-profile-menu .phui-profile-menu-footer .phui-icon-circle {
border-color: {$menu.profile.text};
}
.phui-profile-menu .phui-profile-menu-footer .phui-icon-circle .phui-icon-view {
color: {$menu.profile.text};
}
.phui-profile-menu .phui-profile-menu-footer:hover .phui-icon-circle {
border-color: #fff;
}
.phui-profile-menu .phui-profile-menu-footer:hover .phui-icon-circle
.phui-icon-view {
color: #fff;
}
.phui-profile-menu .phui-profile-menu-footer
.phui-icon-circle.phui-list-item-icon {
font-size: 11px;
}

2
webroot/rsrc/css/phui/phui-workboard-view.css
View file

@ -43,7 +43,7 @@
.device-desktop .phui-profile-menu-collapsed .project-board-wrapper
.phui-workboard-view-shadow {
left: 93px;
left: 101px;
}
.device-desktop .phui-workboard-view .aphront-multi-column-fixed