mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 01:08:50 +02:00
Refactor the main menu in preparation for a mobile application menu
Summary:
As per discussion, this primes the existing mobile menu / menu button for "phabricator" and "application" menus.
Design here is very rough, I'm just trying to get everything laid in functionally first. It's based on `frame_v3.png` but missing a lot of touches.
Test Plan:
{F26143}
{F26144}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4058
This commit is contained in:
epriestley
parent
dd94512837
commit
e3f6bbfff8
14 changed files with 466 additions and 310 deletions
|
|
@ -2602,7 +2602,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-main-menu-view' =>
|
||||
array(
|
||||
'uri' => '/res/9d3b519e/rsrc/css/application/base/main-menu-view.css',
|
||||
'uri' => '/res/864ad89e/rsrc/css/application/base/main-menu-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -2620,15 +2620,6 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'disk' => '/rsrc/js/application/core/DropdownMenuItem.js',
|
||||
),
|
||||
'phabricator-menu-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/d72130a1/rsrc/css/layout/phabricator-menu-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
),
|
||||
'disk' => '/rsrc/css/layout/phabricator-menu-view.css',
|
||||
),
|
||||
'phabricator-nav-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/68187089/rsrc/css/aphront/phabricator-nav-view.css',
|
||||
|
|
@ -2806,6 +2797,15 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'disk' => '/rsrc/js/application/core/ShapedRequest.js',
|
||||
),
|
||||
'phabricator-side-menu-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/9453a468/rsrc/css/layout/phabricator-side-menu-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
),
|
||||
'disk' => '/rsrc/css/layout/phabricator-side-menu-view.css',
|
||||
),
|
||||
'phabricator-slowvote-css' =>
|
||||
array(
|
||||
'uri' => '/res/94d20443/rsrc/css/application/slowvote/slowvote.css',
|
||||
|
|
@ -3172,7 +3172,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'58a04024' =>
|
||||
'ad64af49' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
|
@ -3211,7 +3211,7 @@ celerity_register_resource_map(array(
|
|||
31 => 'phabricator-filetree-view-css',
|
||||
32 => 'phabricator-nav-view-css',
|
||||
),
|
||||
'uri' => '/res/pkg/58a04024/core.pkg.css',
|
||||
'uri' => '/res/pkg/ad64af49/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'd0aed73b' =>
|
||||
|
|
@ -3401,21 +3401,21 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => '7839ae2d',
|
||||
'aphront-crumbs-view-css' => '58a04024',
|
||||
'aphront-dialog-view-css' => '58a04024',
|
||||
'aphront-error-view-css' => '58a04024',
|
||||
'aphront-form-view-css' => '58a04024',
|
||||
'aphront-crumbs-view-css' => 'ad64af49',
|
||||
'aphront-dialog-view-css' => 'ad64af49',
|
||||
'aphront-error-view-css' => 'ad64af49',
|
||||
'aphront-form-view-css' => 'ad64af49',
|
||||
'aphront-headsup-action-list-view-css' => '47549184',
|
||||
'aphront-headsup-view-css' => '58a04024',
|
||||
'aphront-list-filter-view-css' => '58a04024',
|
||||
'aphront-pager-view-css' => '58a04024',
|
||||
'aphront-panel-view-css' => '58a04024',
|
||||
'aphront-side-nav-view-css' => '58a04024',
|
||||
'aphront-table-view-css' => '58a04024',
|
||||
'aphront-tokenizer-control-css' => '58a04024',
|
||||
'aphront-tooltip-css' => '58a04024',
|
||||
'aphront-typeahead-control-css' => '58a04024',
|
||||
'autosprite-css' => '58a04024',
|
||||
'aphront-headsup-view-css' => 'ad64af49',
|
||||
'aphront-list-filter-view-css' => 'ad64af49',
|
||||
'aphront-pager-view-css' => 'ad64af49',
|
||||
'aphront-panel-view-css' => 'ad64af49',
|
||||
'aphront-side-nav-view-css' => 'ad64af49',
|
||||
'aphront-table-view-css' => 'ad64af49',
|
||||
'aphront-tokenizer-control-css' => 'ad64af49',
|
||||
'aphront-tooltip-css' => 'ad64af49',
|
||||
'aphront-typeahead-control-css' => 'ad64af49',
|
||||
'autosprite-css' => 'ad64af49',
|
||||
'differential-changeset-view-css' => '47549184',
|
||||
'differential-core-view-css' => '47549184',
|
||||
'differential-inline-comment-editor' => '7ecd31fa',
|
||||
|
|
@ -3498,42 +3498,42 @@ celerity_register_resource_map(array(
|
|||
'javelin-util' => '20727878',
|
||||
'javelin-vector' => '20727878',
|
||||
'javelin-workflow' => '20727878',
|
||||
'lightbox-attachment-css' => '58a04024',
|
||||
'lightbox-attachment-css' => 'ad64af49',
|
||||
'maniphest-task-summary-css' => '7839ae2d',
|
||||
'maniphest-transaction-detail-css' => '7839ae2d',
|
||||
'phabricator-app-buttons-css' => '58a04024',
|
||||
'phabricator-app-buttons-css' => 'ad64af49',
|
||||
'phabricator-busy' => 'd0aed73b',
|
||||
'phabricator-content-source-view-css' => '47549184',
|
||||
'phabricator-core-buttons-css' => '58a04024',
|
||||
'phabricator-core-css' => '58a04024',
|
||||
'phabricator-directory-css' => '58a04024',
|
||||
'phabricator-core-buttons-css' => 'ad64af49',
|
||||
'phabricator-core-css' => 'ad64af49',
|
||||
'phabricator-directory-css' => 'ad64af49',
|
||||
'phabricator-drag-and-drop-file-upload' => '7ecd31fa',
|
||||
'phabricator-dropdown-menu' => 'd0aed73b',
|
||||
'phabricator-file-upload' => 'd0aed73b',
|
||||
'phabricator-filetree-view-css' => '58a04024',
|
||||
'phabricator-flag-css' => '58a04024',
|
||||
'phabricator-form-view-css' => '58a04024',
|
||||
'phabricator-header-view-css' => '58a04024',
|
||||
'phabricator-jump-nav' => '58a04024',
|
||||
'phabricator-filetree-view-css' => 'ad64af49',
|
||||
'phabricator-flag-css' => 'ad64af49',
|
||||
'phabricator-form-view-css' => 'ad64af49',
|
||||
'phabricator-header-view-css' => 'ad64af49',
|
||||
'phabricator-jump-nav' => 'ad64af49',
|
||||
'phabricator-keyboard-shortcut' => 'd0aed73b',
|
||||
'phabricator-keyboard-shortcut-manager' => 'd0aed73b',
|
||||
'phabricator-main-menu-view' => '58a04024',
|
||||
'phabricator-main-menu-view' => 'ad64af49',
|
||||
'phabricator-menu-item' => 'd0aed73b',
|
||||
'phabricator-nav-view-css' => '58a04024',
|
||||
'phabricator-nav-view-css' => 'ad64af49',
|
||||
'phabricator-notification' => 'd0aed73b',
|
||||
'phabricator-notification-css' => '58a04024',
|
||||
'phabricator-notification-menu-css' => '58a04024',
|
||||
'phabricator-notification-css' => 'ad64af49',
|
||||
'phabricator-notification-menu-css' => 'ad64af49',
|
||||
'phabricator-object-selector-css' => '47549184',
|
||||
'phabricator-paste-file-upload' => 'd0aed73b',
|
||||
'phabricator-prefab' => 'd0aed73b',
|
||||
'phabricator-project-tag-css' => '7839ae2d',
|
||||
'phabricator-remarkup-css' => '58a04024',
|
||||
'phabricator-remarkup-css' => 'ad64af49',
|
||||
'phabricator-shaped-request' => '7ecd31fa',
|
||||
'phabricator-standard-page-view' => '58a04024',
|
||||
'phabricator-standard-page-view' => 'ad64af49',
|
||||
'phabricator-textareautils' => 'd0aed73b',
|
||||
'phabricator-tooltip' => 'd0aed73b',
|
||||
'phabricator-transaction-view-css' => '58a04024',
|
||||
'sprite-icon-css' => '58a04024',
|
||||
'syntax-highlighting-css' => '58a04024',
|
||||
'phabricator-transaction-view-css' => 'ad64af49',
|
||||
'sprite-icon-css' => 'ad64af49',
|
||||
'syntax-highlighting-css' => 'ad64af49',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -12,19 +12,14 @@ final class PhabricatorApplicationAuth extends PhabricatorApplication {
|
|||
|
||||
$items = array();
|
||||
|
||||
if ($controller instanceof PhabricatorLogoutController) {
|
||||
$class = 'main-menu-item-icon-logout-selected';
|
||||
} else {
|
||||
$class = 'main-menu-item-icon-logout';
|
||||
}
|
||||
|
||||
if ($user->isLoggedIn()) {
|
||||
$item = new PhabricatorMainMenuIconView();
|
||||
$item = new PhabricatorMenuItemView();
|
||||
$item->setName(pht('Log Out'));
|
||||
$item->addClass('autosprite main-menu-item-icon '.$class);
|
||||
$item->setIcon('logout');
|
||||
$item->setWorkflow(true);
|
||||
$item->setHref('/logout/');
|
||||
$item->setSortOrder(1.0);
|
||||
$item->setSortOrder(2.0);
|
||||
$item->setSelected(($controller instanceof PhabricatorLogoutController));
|
||||
$items[] = $item;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,10 +40,9 @@ final class PhabricatorApplicationDiviner extends PhabricatorApplication {
|
|||
}
|
||||
|
||||
if ($application && $application->getHelpURI()) {
|
||||
$class = 'main-menu-item-icon-help';
|
||||
$item = new PhabricatorMainMenuIconView();
|
||||
$item = new PhabricatorMenuItemView();
|
||||
$item->setName(pht('%s Help', $application->getName()));
|
||||
$item->addClass('autosprite main-menu-item-icon '.$class);
|
||||
$item->setIcon('help');
|
||||
$item->setHref($application->getHelpURI());
|
||||
$item->setSortOrder(0.1);
|
||||
$items[] = $item;
|
||||
|
|
|
|||
|
|
@ -48,23 +48,29 @@ final class PhabricatorApplicationPeople extends PhabricatorApplication {
|
|||
|
||||
$items = array();
|
||||
|
||||
if (($controller instanceof PhabricatorPeopleProfileController) &&
|
||||
($controller->getProfileUser()) &&
|
||||
($controller->getProfileUser()->getPHID() == $user->getPHID())) {
|
||||
$class = 'main-menu-item-icon-profile-selected';
|
||||
} else {
|
||||
$class = 'main-menu-item-icon-profile-not-selected';
|
||||
}
|
||||
|
||||
if ($user->isLoggedIn()) {
|
||||
$image = $user->loadProfileImageURI();
|
||||
|
||||
$item = new PhabricatorMainMenuIconView();
|
||||
$item = new PhabricatorMenuItemView();
|
||||
$item->setName($user->getUsername());
|
||||
$item->addClass('main-menu-item-icon-profile '.$class);
|
||||
$item->addStyle('background-image: url('.$image.')');
|
||||
$item->setHref('/p/'.$user->getUsername().'/');
|
||||
$item->setSortOrder(0.0);
|
||||
$item->addClass('phabricator-core-menu-item-profile');
|
||||
|
||||
$classes = array(
|
||||
'phabricator-core-menu-icon',
|
||||
'phabricator-core-menu-profile-image',
|
||||
);
|
||||
|
||||
$item->appendChild(
|
||||
phutil_render_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
'style' => 'background-image: url('.$image.')',
|
||||
),
|
||||
''));
|
||||
|
||||
$items[] = $item;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,16 +33,12 @@ final class PhabricatorApplicationSettings extends PhabricatorApplication {
|
|||
|
||||
$items = array();
|
||||
|
||||
if ($controller instanceof PhabricatorSettingsMainController) {
|
||||
$class = 'main-menu-item-icon-settings-selected';
|
||||
} else {
|
||||
$class = 'main-menu-item-icon-settings';
|
||||
}
|
||||
|
||||
if ($user->isLoggedIn()) {
|
||||
$item = new PhabricatorMainMenuIconView();
|
||||
$selected = ($controller instanceof PhabricatorSettingsMainController);
|
||||
$item = new PhabricatorMenuItemView();
|
||||
$item->setName(pht('Settings'));
|
||||
$item->addClass('autosprite main-menu-item-icon '.$class);
|
||||
$item->setIcon('settings');
|
||||
$item->setSelected($selected);
|
||||
$item->setHref('/settings/');
|
||||
$item->setSortOrder(0.90);
|
||||
$items[] = $item;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ final class AphrontSideNavFilterView extends AphrontView {
|
|||
private $menu;
|
||||
|
||||
public function __construct() {
|
||||
$this->menu = new PhabricatorMenuView();
|
||||
$this->menu = id(new PhabricatorMenuView());
|
||||
}
|
||||
|
||||
public function setActive($active) {
|
||||
|
|
@ -131,6 +131,8 @@ final class AphrontSideNavFilterView extends AphrontView {
|
|||
$selected_item->addClass('phabricator-menu-item-selected');
|
||||
}
|
||||
|
||||
require_celerity_resource('phabricator-side-menu-view-css');
|
||||
|
||||
if ($this->flexNav) {
|
||||
return $this->renderFlexNav();
|
||||
} else {
|
||||
|
|
@ -174,7 +176,8 @@ final class AphrontSideNavFilterView extends AphrontView {
|
|||
$local_menu = phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phabricator-nav-col phabricator-nav-local',
|
||||
'class' => 'phabricator-nav-col phabricator-nav-local '.
|
||||
'phabricator-side-menu',
|
||||
'id' => $local_id,
|
||||
),
|
||||
self::renderSingleView($this->menu));
|
||||
|
|
@ -228,7 +231,7 @@ final class AphrontSideNavFilterView extends AphrontView {
|
|||
require_celerity_resource('aphront-side-nav-view-css');
|
||||
|
||||
return
|
||||
'<table class="aphront-side-nav-view">'.
|
||||
'<table class="aphront-side-nav-view phabricator-side-menu">'.
|
||||
'<tr>'.
|
||||
'<th class="aphront-side-nav-navigation">'.
|
||||
self::renderSingleView($this->menu).
|
||||
|
|
|
|||
|
|
@ -12,6 +12,28 @@ final class PhabricatorMenuItemView extends AphrontView {
|
|||
private $isExternal;
|
||||
private $key;
|
||||
private $classes = array();
|
||||
private $workflow;
|
||||
private $sortOrder = 1.0;
|
||||
private $icon;
|
||||
private $selected;
|
||||
|
||||
public function setSelected($selected) {
|
||||
$this->selected = $selected;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getSelected() {
|
||||
return $this->selected;
|
||||
}
|
||||
|
||||
public function setIcon($icon) {
|
||||
$this->icon = $icon;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getIcon() {
|
||||
return $this->icon;
|
||||
}
|
||||
|
||||
public function setKey($key) {
|
||||
$this->key = $key;
|
||||
|
|
@ -63,8 +85,18 @@ final class PhabricatorMenuItemView extends AphrontView {
|
|||
return $this;
|
||||
}
|
||||
|
||||
protected function canAppendChild() {
|
||||
return false;
|
||||
public function setWorkflow($workflow) {
|
||||
$this->workflow = $workflow;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setSortOrder($order) {
|
||||
$this->sortOrder = $order;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getSortOrder() {
|
||||
return $this->sortOrder;
|
||||
}
|
||||
|
||||
public function render() {
|
||||
|
|
@ -73,20 +105,31 @@ final class PhabricatorMenuItemView extends AphrontView {
|
|||
'phabricator-menu-item-'.$this->type,
|
||||
);
|
||||
|
||||
$classes = array_merge($classes, $this->classes);
|
||||
|
||||
$name = null;
|
||||
if ($this->name) {
|
||||
$external = null;
|
||||
if ($this->isExternal) {
|
||||
$external = " \xE2\x86\x97";
|
||||
}
|
||||
|
||||
$classes = array_merge($classes, $this->classes);
|
||||
|
||||
return phutil_render_tag(
|
||||
$this->href ? 'a' : 'div',
|
||||
$name = phutil_render_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
'href' => $this->href,
|
||||
'class' => 'phabricator-menu-item-name',
|
||||
),
|
||||
phutil_escape_html($this->name.$external));
|
||||
}
|
||||
|
||||
return javelin_render_tag(
|
||||
$this->href ? 'a' : 'div',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
'href' => $this->href,
|
||||
'sigil' => $this->workflow ? 'workflow' : null,
|
||||
),
|
||||
$this->renderChildren().
|
||||
$name);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ final class PhabricatorMenuView extends AphrontView {
|
|||
|
||||
private $items = array();
|
||||
private $map = array();
|
||||
private $classes = array();
|
||||
|
||||
public function addClass($class) {
|
||||
$this->classes[] = $class;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function addMenuItem(PhabricatorMenuItemView $item) {
|
||||
$key = $item->getKey();
|
||||
|
|
@ -30,11 +36,13 @@ final class PhabricatorMenuView extends AphrontView {
|
|||
}
|
||||
|
||||
public function render() {
|
||||
require_celerity_resource('phabricator-menu-view-css');
|
||||
$classes = $this->classes;
|
||||
$classes[] = 'phabricator-menu-view';
|
||||
|
||||
return phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phabricator-menu-view',
|
||||
'class' => implode(' ', $classes),
|
||||
),
|
||||
$this->renderChildren());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,11 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
|
|||
require_celerity_resource('javelin-behavior-error-log');
|
||||
}
|
||||
|
||||
$this->menuContent = $this->renderMainMenu();
|
||||
$this->menuContent = id(new PhabricatorMainMenuView())
|
||||
->setUser($request->getUser())
|
||||
->setController($this->getController())
|
||||
->setDefaultSearchScope($this->getSearchDefaultScope())
|
||||
->render();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -363,46 +367,6 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
|
|||
return $this->getRequest()->getApplicationConfiguration()->getConsole();
|
||||
}
|
||||
|
||||
private function renderMainMenu() {
|
||||
$request = $this->getRequest();
|
||||
$user = $request->getUser();
|
||||
|
||||
$menu = new PhabricatorMainMenuView();
|
||||
$menu->setUser($user);
|
||||
|
||||
$keyboard_config = array(
|
||||
'helpURI' => '/help/keyboardshortcut/',
|
||||
);
|
||||
|
||||
if ($user->isLoggedIn()) {
|
||||
$search = new PhabricatorMainMenuSearchView();
|
||||
$search->setUser($user);
|
||||
$search->setScope($this->getSearchDefaultScope());
|
||||
$menu->appendChild($search);
|
||||
|
||||
$pref_shortcut = PhabricatorUserPreferences::PREFERENCE_SEARCH_SHORTCUT;
|
||||
if ($user->loadPreferences()->getPreference($pref_shortcut, true)) {
|
||||
$keyboard_config['searchID'] = $search->getID();
|
||||
}
|
||||
}
|
||||
|
||||
Javelin::initBehavior('phabricator-keyboard-shortcuts', $keyboard_config);
|
||||
|
||||
$applications = PhabricatorApplication::getAllInstalledApplications();
|
||||
$icon_views = array();
|
||||
foreach ($applications as $application) {
|
||||
$icon_views[] = $application->buildMainMenuItems(
|
||||
$this->getRequest()->getUser(),
|
||||
$this->getController());
|
||||
}
|
||||
$icon_views = array_mergev($icon_views);
|
||||
$icon_views = msort($icon_views, 'getSortOrder');
|
||||
|
||||
$menu->appendChild($icon_views);
|
||||
|
||||
return $menu->render();
|
||||
}
|
||||
|
||||
public function renderFooter() {
|
||||
$console = $this->getConsole();
|
||||
|
||||
|
|
|
|||
|
|
@ -79,10 +79,7 @@ final class PhabricatorMainMenuSearchView extends AphrontView {
|
|||
$target.
|
||||
'</div>');
|
||||
|
||||
$group = new PhabricatorMainMenuGroupView();
|
||||
$group->addClass('phabricator-main-menu-search');
|
||||
$group->appendChild($form);
|
||||
return $group->render();
|
||||
return $form;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,34 @@
|
|||
final class PhabricatorMainMenuView extends AphrontView {
|
||||
|
||||
private $user;
|
||||
private $defaultSearchScope;
|
||||
private $controller;
|
||||
|
||||
public function setController(PhabricatorController $controller) {
|
||||
$this->controller = $controller;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getController() {
|
||||
return $this->controller;
|
||||
}
|
||||
|
||||
public function setDefaultSearchScope($default_search_scope) {
|
||||
$this->defaultSearchScope = $default_search_scope;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getDefaultSearchScope() {
|
||||
return $this->defaultSearchScope;
|
||||
}
|
||||
|
||||
public function setUser(PhabricatorUser $user) {
|
||||
$this->user = $user;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getUser() {
|
||||
return $this->user;
|
||||
}
|
||||
|
||||
public function render() {
|
||||
|
|
@ -14,7 +39,7 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
require_celerity_resource('phabricator-main-menu-view');
|
||||
|
||||
$header_id = celerity_generate_unique_node_id();
|
||||
$extra = '';
|
||||
$menus = array();
|
||||
|
||||
$group = new PhabricatorMainMenuGroupView();
|
||||
$group->addClass('phabricator-main-menu-group-logo');
|
||||
|
|
@ -27,13 +52,13 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
'class' => 'phabricator-main-menu-logo',
|
||||
'href' => '/',
|
||||
),
|
||||
'<span>Phabricator</span>'));
|
||||
''));
|
||||
|
||||
if (PhabricatorEnv::getEnvConfig('notification.enabled') &&
|
||||
$user->isLoggedIn()) {
|
||||
list($menu, $dropdown) = $this->renderNotificationMenu();
|
||||
$group->appendChild($menu);
|
||||
$extra .= $dropdown;
|
||||
$menus[] = $dropdown;
|
||||
}
|
||||
|
||||
$group->appendChild(
|
||||
|
|
@ -44,21 +69,163 @@ final class PhabricatorMainMenuView extends AphrontView {
|
|||
'sigil' => 'jx-toggle-class',
|
||||
'meta' => array(
|
||||
'map' => array(
|
||||
$header_id => 'phabricator-main-menu-reveal',
|
||||
$header_id => 'phabricator-core-menu-expand',
|
||||
),
|
||||
),
|
||||
),
|
||||
'<span>Expand</span>'));
|
||||
''));
|
||||
$logo = $group->render();
|
||||
|
||||
$phabricator_menu = $this->renderPhabricatorMenu();
|
||||
// $menus[] = $this->renderApplicationMenu();
|
||||
|
||||
|
||||
|
||||
|
||||
$actions = '';
|
||||
|
||||
return phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phabricator-main-menu',
|
||||
'id' => $header_id,
|
||||
),
|
||||
$logo.$this->renderChildren()).
|
||||
$extra;
|
||||
self::renderSingleView(
|
||||
array(
|
||||
$logo,
|
||||
$phabricator_menu,
|
||||
))).
|
||||
self::renderSingleView($menus);
|
||||
}
|
||||
|
||||
private function renderSearch() {
|
||||
$user = $this->user;
|
||||
|
||||
$result = null;
|
||||
|
||||
$keyboard_config = array(
|
||||
'helpURI' => '/help/keyboardshortcut/',
|
||||
);
|
||||
|
||||
if ($user->isLoggedIn()) {
|
||||
$search = new PhabricatorMainMenuSearchView();
|
||||
$search->setUser($user);
|
||||
$search->setScope($this->getDefaultSearchScope());
|
||||
$result = $search;
|
||||
|
||||
$pref_shortcut = PhabricatorUserPreferences::PREFERENCE_SEARCH_SHORTCUT;
|
||||
if ($user->loadPreferences()->getPreference($pref_shortcut, true)) {
|
||||
$keyboard_config['searchID'] = $search->getID();
|
||||
}
|
||||
}
|
||||
|
||||
Javelin::initBehavior('phabricator-keyboard-shortcuts', $keyboard_config);
|
||||
|
||||
if ($result) {
|
||||
$result = id(new PhabricatorMenuItemView())
|
||||
->addClass('phabricator-main-menu-search')
|
||||
->appendChild($result);
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
|
||||
private function renderPhabricatorMenu() {
|
||||
$user = $this->getUser();
|
||||
$controller = $this->getController();
|
||||
|
||||
$applications = PhabricatorApplication::getAllInstalledApplications();
|
||||
$applications = msort($applications, 'getName');
|
||||
|
||||
$core = array();
|
||||
$more = array();
|
||||
$actions = array();
|
||||
|
||||
$group_core = PhabricatorApplication::GROUP_CORE;
|
||||
foreach ($applications as $application) {
|
||||
if ($application->shouldAppearInLaunchView()) {
|
||||
$item = id(new PhabricatorMenuItemView())
|
||||
->setName($application->getName())
|
||||
->setHref($application->getBaseURI());
|
||||
if ($application->getApplicationGroup() == $group_core) {
|
||||
$core[] = $item;
|
||||
} else {
|
||||
$more[] = $item;
|
||||
}
|
||||
}
|
||||
|
||||
$app_actions = $application->buildMainMenuItems($user, $controller);
|
||||
foreach ($app_actions as $action) {
|
||||
$actions[] = $action;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$view = new PhabricatorMenuView();
|
||||
$view->addClass('phabricator-core-menu');
|
||||
|
||||
$search = $this->renderSearch();
|
||||
$view->appendChild($search);
|
||||
|
||||
if ($core) {
|
||||
$view->addMenuItem(
|
||||
id(new PhabricatorMenuItemView())
|
||||
->addClass('phabricator-core-item-device')
|
||||
->setType(PhabricatorMenuItemView::TYPE_LABEL)
|
||||
->setName(pht('Core Applications')));
|
||||
foreach ($core as $item) {
|
||||
$item->addClass('phabricator-core-item-device');
|
||||
$view->addMenuItem($item);
|
||||
}
|
||||
}
|
||||
|
||||
if ($actions) {
|
||||
$actions = msort($actions, 'getSortOrder');
|
||||
$view->addMenuItem(
|
||||
id(new PhabricatorMenuItemView())
|
||||
->addClass('phabricator-core-item-device')
|
||||
->setType(PhabricatorMenuItemView::TYPE_LABEL)
|
||||
->setName(pht('Actions')));
|
||||
foreach ($actions as $action) {
|
||||
$icon = $action->getIcon();
|
||||
if ($icon) {
|
||||
$classes = array(
|
||||
'phabricator-core-menu-icon',
|
||||
'autosprite',
|
||||
);
|
||||
|
||||
if ($action->getSelected()) {
|
||||
$classes[] = 'main-menu-item-icon-'.$icon.'-selected';
|
||||
} else {
|
||||
$classes[] = 'main-menu-item-icon-'.$icon;
|
||||
}
|
||||
|
||||
$action->appendChild(
|
||||
phutil_render_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => implode(' ', $classes),
|
||||
),
|
||||
''));
|
||||
}
|
||||
$view->addMenuItem($action);
|
||||
}
|
||||
}
|
||||
|
||||
if ($more) {
|
||||
$view->addMenuItem(
|
||||
id(new PhabricatorMenuItemView())
|
||||
->addClass('phabricator-core-item-device')
|
||||
->setType(PhabricatorMenuItemView::TYPE_LABEL)
|
||||
->setName(pht('More Applications')));
|
||||
foreach ($more as $item) {
|
||||
$item->addClass('phabricator-core-item-device');
|
||||
$view->addMenuItem($item);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return $view;
|
||||
}
|
||||
|
||||
private function renderNotificationMenu() {
|
||||
|
|
|
|||
|
|
@ -13,49 +13,17 @@
|
|||
.phabricator-main-menu {
|
||||
background: #2d3236;
|
||||
background-image: url(/rsrc/image/main_texture.png);
|
||||
background-repeat: repeat-x;
|
||||
position: relative;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
height: 44px;
|
||||
z-index: 6;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.phabricator-main-menu a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-main-menu {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* - Main Menu Group -----------------------------------------------------------
|
||||
|
||||
Container representing a single item on the main menu. For desktops these lay
|
||||
out horizontally; on phones they switch to vertical.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-main-menu-group {
|
||||
height: 44px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-main-menu-group {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-group,
|
||||
.device-phone .phabricator-main-menu-group {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-group + .phabricator-main-menu-group,
|
||||
.device-phone .phabricator-main-menu-group + .phabricator-main-menu-group {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
|
||||
/* - Logo ----------------------------------------------------------------------
|
||||
|
||||
|
|
@ -76,11 +44,6 @@
|
|||
background: 6px 9px url(/rsrc/image/header_logo.png) no-repeat;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-logo span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* - Expand/Collapse Button ----------------------------------------------------
|
||||
|
||||
On phones, the menu switches to a vertical layout and uses a button to expand
|
||||
|
|
@ -113,75 +76,11 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-expand-button span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-reveal .phabricator-main-menu-expand-button {
|
||||
.phabricator-core-menu-expand .phabricator-main-menu-expand-button {
|
||||
background-color: #55595d;
|
||||
}
|
||||
|
||||
|
||||
/* - Icon Menus ----------------------------------------------------------------
|
||||
|
||||
These are the small icons for actions like "Settings" and "Log Out" which
|
||||
appear on the right side of the main menu. On tablets and phones these layout
|
||||
vertically.
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-main-menu-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 9px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-main-menu-icon-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-icon-label,
|
||||
.device-phone .phabricator-main-menu-icon-label {
|
||||
font-weight: bold;
|
||||
color: #eeeeee;
|
||||
position: absolute;
|
||||
display: block;
|
||||
line-height: 44px;
|
||||
left: 60px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-icon,
|
||||
.device-phone .phabricator-main-menu-icon {
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main-menu-item-icon-profile {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
|
||||
.device-desktop .main-menu-item-icon-profile {
|
||||
background-position: 12px 9px;
|
||||
margin: 0 6px;
|
||||
padding: 0 12px;
|
||||
height: 44px;
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
border-color: #44494d;
|
||||
}
|
||||
|
||||
.main-menu-item-icon-profile-not-selected:hover {
|
||||
background-color: #44494d;
|
||||
}
|
||||
|
||||
.main-menu-item-icon-profile-selected {
|
||||
background-color: #44494d;
|
||||
}
|
||||
|
||||
/* - Search --------------------------------------------------------------------
|
||||
|
||||
The main search input in the menu bar.
|
||||
|
|
@ -309,30 +208,6 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* - Collapsible ---------------------------------------------------------------
|
||||
|
||||
By default, groups are collapsible, which means they'll be hidden on phones
|
||||
and respond to the menu toggle button.
|
||||
|
||||
*/
|
||||
|
||||
.device-tablet .phabricator-main-menu-collapsible,
|
||||
.device-phone .phabricator-main-menu-collapsible {
|
||||
background: #44494d;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phabricator-main-menu-reveal {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-main-menu-reveal .phabricator-main-menu-collapsible,
|
||||
.device-phone .phabricator-main-menu-reveal .phabricator-main-menu-collapsible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* - Alert ---------------------------------------------------------------------
|
||||
|
||||
Alert menus are like icon menus but don't obey collapse rules.
|
||||
|
|
@ -381,3 +256,106 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
|
|||
.alert-unread .phabricator-main-menu-alert-count {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* - Core Menu -----------------------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
.phabricator-core-menu-icon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.phabricator-core-menu-profile-image {
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu,
|
||||
.device-tablet .phabricator-core-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu-expand .phabricator-core-menu,
|
||||
.device-tablet .phabricator-core-menu-expand .phabricator-core-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu,
|
||||
.device-tablet .phabricator-core-menu,
|
||||
.device-phone .phabricator-core-menu a.phabricator-menu-item-type-link,
|
||||
.device-tablet .phabricator-core-menu a.phabricator-menu-item-type-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu .phabricator-menu-item-view,
|
||||
.device-tablet .phabricator-core-menu .phabricator-menu-item-view {
|
||||
display: block;
|
||||
padding: 4px 0;
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #35383b transparent #282b2d;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu .phabricator-menu-item-type-label,
|
||||
.device-tablet .phabricator-core-menu .phabricator-menu-item-type-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
background: #151719;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu .phabricator-menu-item-type-link,
|
||||
.device-tablet .phabricator-core-menu .phabricator-menu-item-type-link {
|
||||
font-size: 15px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu
|
||||
.phabricator-menu-item-type-link .phabricator-menu-item-name,
|
||||
.device-tablet .phabricator-core-menu
|
||||
.phabricator-menu-item-type-link .phabricator-menu-item-name {
|
||||
margin-left: 40px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-core-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-core-menu .phabricator-menu-item-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-core-menu .phabricator-menu-item-view {
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-width: 38px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-core-menu .phabricator-core-item-device {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-core-menu-icon {
|
||||
top: 9px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.device-phone .phabricator-core-menu-icon,
|
||||
.device-tablet .phabricator-core-menu-icon {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-core-menu .phabricator-core-menu-item-profile {
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
border-color: #44494d;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
/**
|
||||
* @provides phabricator-menu-view-css
|
||||
*/
|
||||
|
||||
.phabricator-menu-item-view {
|
||||
display: block;
|
||||
margin: 0 0 2px;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.phabricator-menu-item-type-link {
|
||||
padding: 3px 8px 3px 24px;
|
||||
}
|
||||
|
||||
.phabricator-menu-item-type-label {
|
||||
padding: 6px 8px 3px 12px;
|
||||
color: #333333;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.phabricator-menu-item-type-spacer {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.device-desktop a.phabricator-menu-item-type-link:hover {
|
||||
text-decoration: none;
|
||||
/* TODO: Swap this back to #e7e7e7? */
|
||||
background: #a1bbe5;
|
||||
}
|
||||
|
||||
.phabricator-menu-item-selected,
|
||||
.device-desktop a.phabricator-menu-item-selected:hover {
|
||||
background: #d7d7d7;
|
||||
}
|
||||
38
webroot/rsrc/css/layout/phabricator-side-menu-view.css
Normal file
38
webroot/rsrc/css/layout/phabricator-side-menu-view.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* @provides phabricator-side-menu-view-css
|
||||
*/
|
||||
|
||||
.phabricator-side-menu .phabricator-menu-item-view {
|
||||
display: block;
|
||||
margin: 0 0 2px;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.phabricator-side-menu .phabricator-menu-item-type-link {
|
||||
padding: 3px 8px 3px 24px;
|
||||
}
|
||||
|
||||
.phabricator-side-menu .phabricator-menu-item-type-label {
|
||||
padding: 6px 8px 3px 12px;
|
||||
color: #333333;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.phabricator-side-menu .phabricator-menu-item-type-spacer {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover {
|
||||
text-decoration: none;
|
||||
/* TODO: Swap this back to #e7e7e7? */
|
||||
background: #a1bbe5;
|
||||
}
|
||||
|
||||
.phabricator-side-menu .phabricator-menu-item-selected,
|
||||
.device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover {
|
||||
background: #d7d7d7;
|
||||
}
|
||||
Loading…
Reference in a new issue