mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
Fix various app nav issues
Summary: - Fix width, corresponding to wider sprites. - Sprite the "Audit" icon. - Mark the meta-application as device-ready. - Fix some collapse/expand bugs with the draggable local navs. - Add texture to local nav. - Darken the application nav to make it more cohesive with the main nav. I think this is an improvement? Test Plan: See screenshots. Reviewers: chad, btrahan Reviewed By: btrahan CC: aran, netfoxcity Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3338
This commit is contained in:
epriestley
parent
6ed202b675
commit
bee112c575
11 changed files with 87 additions and 74 deletions
|
|
@ -108,7 +108,7 @@ $app_template_full = id(new PhutilSprite())
|
|||
->setSourceSize(60, 60);
|
||||
|
||||
$app_template_mini = id(new PhutilSprite())
|
||||
->setSourceFile($srcroot.'/application_normal_1x.png')
|
||||
->setSourceFile($srcroot.'/menu_normal_1x.png')
|
||||
->setSourceSize(30, 30);
|
||||
|
||||
$app_source_map = array(
|
||||
|
|
@ -139,6 +139,7 @@ $app_map = array(
|
|||
'conduit' => array(7, 30),
|
||||
'feed' => array(3, 11),
|
||||
'paste' => array(9, 2),
|
||||
'audit' => array(8, 19),
|
||||
);
|
||||
|
||||
$xadj = -1;
|
||||
|
|
|
|||
|
|
@ -65,8 +65,8 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'/rsrc/image/autosprite.png' =>
|
||||
array(
|
||||
'hash' => '08fb34fc4ce0cd3be882a3177423ad49',
|
||||
'uri' => '/res/08fb34fc/rsrc/image/autosprite.png',
|
||||
'hash' => '5df245706c30b098cc45a5dc05775a65',
|
||||
'uri' => '/res/5df24570/rsrc/image/autosprite.png',
|
||||
'disk' => '/rsrc/image/autosprite.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
|
|
@ -126,6 +126,13 @@ celerity_register_resource_map(array(
|
|||
'disk' => '/rsrc/image/divot.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/glyphicons.png' =>
|
||||
array(
|
||||
'hash' => '564fc282dac06bf8bb839457adaa3718',
|
||||
'uri' => '/res/564fc282/rsrc/image/glyphicons.png',
|
||||
'disk' => '/rsrc/image/glyphicons.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/grippy_texture.png' =>
|
||||
array(
|
||||
'hash' => 'a8945e12ceeaddd5b491a8d81cfa19c1',
|
||||
|
|
@ -448,6 +455,13 @@ celerity_register_resource_map(array(
|
|||
'disk' => '/rsrc/image/logo_grey.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/menu_texture.png' =>
|
||||
array(
|
||||
'hash' => '42193f24a52bd94be596c442d59a68ce',
|
||||
'uri' => '/res/42193f24/rsrc/image/menu_texture.png',
|
||||
'disk' => '/rsrc/image/menu_texture.png',
|
||||
'type' => 'png',
|
||||
),
|
||||
'/rsrc/image/search.png' =>
|
||||
array(
|
||||
'hash' => 'ff7da044e6f923b8f569dec11f97e5e5',
|
||||
|
|
@ -643,7 +657,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'autosprite-css' =>
|
||||
array(
|
||||
'uri' => '/res/07043fce/rsrc/css/autosprite.css',
|
||||
'uri' => '/res/27f100be/rsrc/css/autosprite.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -1468,7 +1482,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-phabricator-nav' =>
|
||||
array(
|
||||
'uri' => '/res/cb8979b2/rsrc/js/application/core/behavior-phabricator-nav.js',
|
||||
'uri' => '/res/2217e1e9/rsrc/js/application/core/behavior-phabricator-nav.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -2417,7 +2431,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-nav-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/ca2744bd/rsrc/css/aphront/phabricator-nav-view.css',
|
||||
'uri' => '/res/3ee38144/rsrc/css/aphront/phabricator-nav-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -2457,7 +2471,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-object-item-list-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/7a31c016/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||
'uri' => '/res/945fabe9/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ final class PhabricatorApplicationAudit extends PhabricatorApplication {
|
|||
return '/audit/';
|
||||
}
|
||||
|
||||
public function getIconURI() {
|
||||
return celerity_get_resource_uri('/rsrc/image/app/app_audit.png');
|
||||
public function getAutospriteName() {
|
||||
return 'audit';
|
||||
}
|
||||
|
||||
public function getRoutes() {
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<?php
|
||||
|
||||
/*
|
||||
* Copyright 2012 Facebook, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
abstract class PhabricatorApplicationsController extends PhabricatorController {
|
||||
|
||||
public function buildStandardPageResponse($view, array $data) {
|
||||
|
||||
$page = $this->buildStandardPageView();
|
||||
|
||||
$page->setApplicationName('Applications');
|
||||
$page->setBaseURI('/applications/');
|
||||
$page->setTitle(idx($data, 'title'));
|
||||
$page->setGlyph("\xE0\xBC\x84");
|
||||
$page->appendChild($view);
|
||||
|
||||
$response = new AphrontWebpageResponse();
|
||||
return $response->setContent($page->render());
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -56,6 +56,7 @@ final class PhabricatorApplicationsListController
|
|||
$view,
|
||||
array(
|
||||
'title' => 'Applications',
|
||||
'device' => true,
|
||||
));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
border-right: 1px solid #999c9e;
|
||||
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -23,12 +21,24 @@
|
|||
|
||||
.phabricator-nav-app {
|
||||
width: 149px;
|
||||
background: #d2d2d2;
|
||||
background: #33393d;
|
||||
border-right: 1px solid #222222;
|
||||
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app {
|
||||
top: 43px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.phabricator-nav-local {
|
||||
width: 179px;
|
||||
background: #ececec;
|
||||
|
||||
border-right: 1px solid #999c9e;
|
||||
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
|
||||
background-image: url(/rsrc/image/menu_texture.png);
|
||||
}
|
||||
|
||||
.device-tablet .phabricator-nav-local,
|
||||
|
|
@ -39,7 +49,7 @@
|
|||
.phabricator-nav-drag {
|
||||
position: fixed;
|
||||
top: 44px;
|
||||
left: 177px;
|
||||
left: 327px;
|
||||
width: 7px;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
|
|
@ -62,6 +72,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-drag {
|
||||
left: 215px;
|
||||
}
|
||||
|
||||
.phabricator-nav-col a,
|
||||
.phabricator-nav-col span {
|
||||
display: block;
|
||||
|
|
@ -72,7 +86,7 @@
|
|||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-local {
|
||||
left: 34px;
|
||||
left: 38px;
|
||||
}
|
||||
|
||||
.phabricator-nav-content {
|
||||
|
|
@ -84,12 +98,12 @@
|
|||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-content {
|
||||
margin-left: 32px;
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
.device-desktop .has-local-nav.phabricator-nav-app-collapsed
|
||||
.phabricator-nav-content {
|
||||
margin-left: 212px;
|
||||
margin-left: 216px;
|
||||
}
|
||||
|
||||
.phabricator-nav-col span {
|
||||
|
|
@ -116,7 +130,7 @@
|
|||
}
|
||||
|
||||
a.phabricator-nav-app-item {
|
||||
color: #222222;
|
||||
color: #e9e9e9;
|
||||
font-weight: normal;
|
||||
padding: 4px;
|
||||
padding-left: 40px;
|
||||
|
|
@ -124,17 +138,11 @@ a.phabricator-nav-app-item {
|
|||
line-height: 30px;
|
||||
height: 30px;
|
||||
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a.phabricator-nav-app-item-selected {
|
||||
background-color: #f3f3f3;
|
||||
box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #b0b0b0;
|
||||
background-color: #55595d;
|
||||
}
|
||||
|
||||
span.phabricator-nav-app-item-icon {
|
||||
|
|
@ -158,14 +166,14 @@ a.phabricator-nav-app-button-collapse {
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 4px;
|
||||
z-index: 2;
|
||||
background: #d9d9d9;
|
||||
z-index: 7;
|
||||
background: #44494d;
|
||||
line-height: 14px;
|
||||
border-top: 1px solid #a9a9a9;
|
||||
border-top: 1px solid #222222;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.1);
|
||||
color: #696969;
|
||||
color: #c0c0c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +182,7 @@ a.phabricator-nav-app-button-collapse {
|
|||
}
|
||||
|
||||
.phabricator-nav-app-button-expand {
|
||||
width: 25px;
|
||||
width: 29px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +192,7 @@ a.phabricator-nav-app-button-collapse {
|
|||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-app {
|
||||
width: 33px;
|
||||
width: 37px;
|
||||
}
|
||||
|
||||
.phabricator-nav-app-collapsed .phabricator-nav-app-button-collapse {
|
||||
|
|
@ -245,13 +253,12 @@ a.phabricator-nav-app-button-collapse {
|
|||
display: block;
|
||||
position: relative;
|
||||
height: 43px;
|
||||
background: #e6e6e6;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #9d9d9d;
|
||||
border-bottom: 1px solid #5d5d5d;
|
||||
text-align: center;
|
||||
box-shadow: inset 0 0px 3px rgba(0, 0, 0, 0.30),
|
||||
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.10),
|
||||
0px 1px 2px rgba(0, 0, 0, 0.10);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
|
|
|
|||
|
|
@ -243,10 +243,18 @@
|
|||
background-position: 0px -2398px;
|
||||
}
|
||||
|
||||
.action-file {
|
||||
.app-audit-full {
|
||||
background-position: 0px -2429px;
|
||||
}
|
||||
|
||||
.action-fork {
|
||||
background-position: 0px -2446px;
|
||||
.app-audit {
|
||||
background-position: 0px -2490px;
|
||||
}
|
||||
|
||||
.action-file {
|
||||
background-position: 0px -2521px;
|
||||
}
|
||||
|
||||
.action-fork {
|
||||
background-position: 0px -2538px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
}
|
||||
|
||||
.phabricator-object-item-list-header {
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 82 KiB |
BIN
webroot/rsrc/image/menu_texture.png
Normal file
BIN
webroot/rsrc/image/menu_texture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
|
|
@ -87,6 +87,24 @@ JX.behavior('phabricator-nav', function(config) {
|
|||
// - Application Menu Collapse/Expand ------------------------------------------
|
||||
|
||||
function collapse(state, skip_save) {
|
||||
// As necessary, adjust the drag bar and content positioning. Do this first,
|
||||
// so we don't end up measuring things after the collapse takes effect.
|
||||
|
||||
// This is the difference between the widths of the uncollapsed application
|
||||
// nav (150px) and the collapsed one (38px).
|
||||
var delta = 112;
|
||||
delta = state ? -delta : delta;
|
||||
if (config.dragID) {
|
||||
var drag = JX.$(config.dragID);
|
||||
var p = JX.$V(drag);
|
||||
p.x += delta;
|
||||
p.y = null;
|
||||
p.setPos(drag);
|
||||
}
|
||||
|
||||
var c = parseInt(getComputedStyle(content).marginLeft, 10);
|
||||
content.style.marginLeft = (c + delta) + 'px';
|
||||
|
||||
JX.DOM.alterClass(
|
||||
JX.$(config.mainID),
|
||||
'phabricator-nav-app-collapsed',
|
||||
|
|
@ -133,7 +151,7 @@ JX.behavior('phabricator-nav', function(config) {
|
|||
scale: 1,
|
||||
|
||||
width: JX.Vector.getDim(local).x,
|
||||
minWidth: 150,
|
||||
minWidth: 38,
|
||||
minScale: 1
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue