1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Provide a mobile application menu

Summary:
Adds a right-hand-side application menu, based roughly on `frame_v3.png`.

This has the same icon as the left menu until we get real design in, but is functionally reasonable.

Test Plan: {F26170} {F26169}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

Differential Revision: https://secure.phabricator.com/D4061
This commit is contained in:
epriestley 2012-12-07 13:34:44 -08:00
parent e3f6bbfff8
commit f910e38ecc
7 changed files with 200 additions and 34 deletions

View file

@ -169,6 +169,11 @@ abstract class PhabricatorController extends AphrontController {
$view->appendChild($page->renderFooter());
}
$application_menu = $this->buildApplicationMenu();
if ($application_menu) {
$page->setApplicationMenu($application_menu);
}
$response = new AphrontWebpageResponse();
return $response->setContent($page->render());
}
@ -238,4 +243,8 @@ abstract class PhabricatorController extends AphrontController {
return implode('<br />', $items);
}
protected function buildApplicationMenu() {
return null;
}
}

View file

@ -31,4 +31,8 @@ abstract class PhabricatorPasteController extends PhabricatorController {
return $nav;
}
public function buildApplicationMenu() {
return $this->buildSideNavView(null)->getMenu();
}
}

View file

@ -31,7 +31,7 @@ final class AphrontSideNavFilterView extends AphrontView {
private $menu;
public function __construct() {
$this->menu = id(new PhabricatorMenuView());
$this->menu = new PhabricatorMenuView();
}
public function setActive($active) {
@ -59,6 +59,10 @@ final class AphrontSideNavFilterView extends AphrontView {
return $this;
}
public function getMenu() {
return $this->menu;
}
public function addFilter(
$key,
$name,

View file

@ -11,6 +11,27 @@ final class PhabricatorMenuView extends AphrontView {
return $this;
}
public function newLabel($name) {
$item = id(new PhabricatorMenuItemView())
->setType(PhabricatorMenuItemView::TYPE_LABEL)
->setName($name);
$this->addMenuItem($item);
return $item;
}
public function newLink($name, $href) {
$item = id(new PhabricatorMenuItemView())
->setType(PhabricatorMenuItemView::TYPE_LINK)
->setName($name)
->setHref($href);
$this->addMenuItem($item);
return $item;
}
public function addMenuItem(PhabricatorMenuItemView $item) {
$key = $item->getKey();
if ($key !== null) {

View file

@ -15,6 +15,16 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
private $disableConsole;
private $searchDefaultScope;
private $pageObjects = array();
private $applicationMenu;
public function setApplicationMenu(PhabricatorMenuView $application_menu) {
$this->applicationMenu = $application_menu;
return $this;
}
public function getApplicationMenu() {
return $this->applicationMenu;
}
public function setApplicationName($application_name) {
$this->applicationName = $application_name;
@ -142,11 +152,16 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
require_celerity_resource('javelin-behavior-error-log');
}
$this->menuContent = id(new PhabricatorMainMenuView())
$menu = id(new PhabricatorMainMenuView())
->setUser($request->getUser())
->setController($this->getController())
->setDefaultSearchScope($this->getSearchDefaultScope())
->render();
->setDefaultSearchScope($this->getSearchDefaultScope());
if ($this->getApplicationMenu()) {
$menu->setApplicationMenu($this->getApplicationMenu());
}
$this->menuContent = $menu->render();
}

View file

@ -5,6 +5,17 @@ final class PhabricatorMainMenuView extends AphrontView {
private $user;
private $defaultSearchScope;
private $controller;
private $applicationMenu;
public function setApplicationMenu(PhabricatorMenuView $application_menu) {
$this->applicationMenu = $application_menu;
return $this;
}
public function getApplicationMenu() {
return $this->applicationMenu;
}
public function setController(PhabricatorController $controller) {
$this->controller = $controller;
@ -84,6 +95,12 @@ final class PhabricatorMainMenuView extends AphrontView {
$actions = '';
$application_menu = $this->getApplicationMenu();
if ($application_menu) {
$application_menu->addClass('phabricator-dark-menu');
$application_menu->addClass('phabricator-application-menu');
}
return phutil_render_tag(
'div',
array(
@ -92,8 +109,12 @@ final class PhabricatorMainMenuView extends AphrontView {
),
self::renderSingleView(
array(
$logo,
$this->renderPhabricatorMenuButton($header_id),
$this->renderApplicationMenuButton($header_id),
$this->renderPhabricatorLogo(),
$alerts,
$phabricator_menu,
$application_menu,
))).
self::renderSingleView($menus);
}
@ -130,6 +151,38 @@ final class PhabricatorMainMenuView extends AphrontView {
return $result;
}
private function renderPhabricatorMenuButton($header_id) {
return javelin_render_tag(
'a',
array(
'class' => 'phabricator-main-menu-expand-button '.
'phabricator-expand-core-menu',
'sigil' => 'jx-toggle-class',
'meta' => array(
'map' => array(
$header_id => 'phabricator-core-menu-expanded',
),
),
),
'');
}
public function renderApplicationMenuButton($header_id) {
return javelin_render_tag(
'a',
array(
'class' => 'phabricator-main-menu-expand-button '.
'phabricator-expand-application-menu',
'sigil' => 'jx-toggle-class',
'meta' => array(
'map' => array(
$header_id => 'phabricator-application-menu-expanded',
),
),
),
'');
}
private function renderPhabricatorMenu() {
$user = $this->getUser();
$controller = $this->getController();
@ -162,6 +215,7 @@ final class PhabricatorMainMenuView extends AphrontView {
$view = new PhabricatorMenuView();
$view->addClass('phabricator-dark-menu');
$view->addClass('phabricator-core-menu');
$search = $this->renderSearch();

View file

@ -53,8 +53,7 @@
.phabricator-main-menu-expand-button {
position: absolute;
right: 10px;
top: 10px;
top: 7px;
display: block;
width: 40px;
height: 28px;
@ -67,6 +66,14 @@
0 1px 0 rgba(255, 255, 255, 0.075);
}
.phabricator-expand-core-menu {
left: 10px;
}
.phabricator-expand-application-menu {
right: 10px;
}
.device-desktop .phabricator-main-menu-expand-button {
display: none;
}
@ -76,11 +83,14 @@
display: block;
}
.phabricator-core-menu-expand .phabricator-main-menu-expand-button {
.phabricator-core-menu-expanded .phabricator-expand-core-menu,
.phabricator-application-menu-expanded .phabricator-expand-application-menu {
background-color: #55595d;
}
/* - Search --------------------------------------------------------------------
The main search input in the menu bar.
@ -257,8 +267,48 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
display: block;
}
/* - Dark Menu -----------------------------------------------------------------
Styles shared between the "core" menu (left button on mobile) and
"application" menu (right button on mobile). These styles give the menu a
white-on-black appearance.
*/
.device-phone .phabricator-dark-menu,
.device-tablet .phabricator-dark-menu,
.device-phone .phabricator-dark-menu a.phabricator-menu-item-type-link,
.device-tablet .phabricator-dark-menu a.phabricator-menu-item-type-link {
color: #ffffff;
}
.device-phone .phabricator-dark-menu .phabricator-menu-item-view,
.device-tablet .phabricator-dark-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-dark-menu .phabricator-menu-item-type-label,
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label {
text-transform: uppercase;
font-size: 11px;
background: #151719;
padding-left: 12px;
}
.device-phone .phabricator-dark-menu .phabricator-menu-item-type-spacer,
.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-spacer {
display: none;
}
/* - Core Menu -----------------------------------------------------------------
Styles unique to the core menu (left button on mobile).
*/
.phabricator-core-menu-icon {
@ -277,35 +327,11 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
display: none;
}
.device-phone .phabricator-core-menu-expand .phabricator-core-menu,
.device-tablet .phabricator-core-menu-expand .phabricator-core-menu {
.device-phone .phabricator-core-menu-expanded .phabricator-core-menu,
.device-tablet .phabricator-core-menu-expanded .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;
@ -359,3 +385,36 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
border-color: #44494d;
margin: 0 8px;
}
/* - Application Menu ----------------------------------------------------------
Styles unique to the application menu (right button on mobile).
*/
.device-phone .phabricator-application-menu-expanded
.phabricator-application-menu,
.device-tablet .phabricator-application-menu-expanded
.phabricator-application-menu {
display: block;
padding-top: 44px;
}
.phabricator-application-menu {
display: none;
}
.phabricator-application-menu .phabricator-menu-item-type-link
.phabricator-menu-item-name {
padding-left: 12px;
}
.device-phone .phabricator-application-menu-expanded
.phabricator-application-menu,
.device-tablet .phabricator-application-menu-expanded
.phabricator-application-menu {
display: block;
padding-top: 44px;
}