revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 16:30:59 +01:00
Code Issues Releases Wiki Activity

Redesign sidenav, crumbs

Browse source
This commit is contained in:
Chad Little 2014-05-24 21:56:45 -07:00
parent c1a4b102cc
commit 3aec1b1159
13 changed files with 65 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
resources/sprite/gradients/dark-menu-label.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 999 B

BIN
resources/sprite/gradients/menu-label.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

12
resources/sprite/manifest/gradient.json
View file

@ -16,11 +16,6 @@
"rule" : ".gradient-dark-grey-header",
"hash" : "e8762dd2849410a7e4fba8f972f946ff"
},
"gradient-dark-menu-label" : {
"name" : "gradient-dark-menu-label",
"rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label",
"hash" : "8a11efa454f788aa2419ed8c745dece2"
},
"gradient-green-header" : {
"name" : "gradient-green-header",
"rule" : ".gradient-green-header",
@ -36,11 +31,6 @@
"rule" : ".gradient-lightblue-header",
"hash" : "e7753a6ce63c6822a559266eef9e255b"
},
"gradient-menu-label" : {
"name" : "gradient-menu-label",
"rule" : ".gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label",
"hash" : "e2aa8e74c3b2c0b18de34d336d318b5c"
},
"gradient-red-header" : {
"name" : "gradient-red-header",
"rule" : ".gradient-red-header",
@ -55,6 +45,6 @@
"scales" : [
1
],
"header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n\n",
"header" : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient {\n background-image: url(\/rsrc\/image\/sprite-gradient.png);\n background-repeat: repeat-x;\n}\n\n\n",
"type" : "repeat-x"
}

4
src/applications/home/controller/PhabricatorHomeController.php
View file

@ -111,10 +111,6 @@ abstract class PhabricatorHomeController extends PhabricatorController {
idx($status, get_class($application), array()))
->setUser($user);
if ($tile_display == PhabricatorApplication::TILE_FULL) {
$tile->setFullWidth(true);
}
$tiles[] = $tile;
}

32
src/applications/meta/view/PhabricatorApplicationLaunchView.php
View file

@ -4,12 +4,6 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
private $application;
private $status;
private $fullWidth;
public function setFullWidth($full_width) {
$this->fullWidth = $full_width;
return $this;
}
public function setApplication(PhabricatorApplication $application) {
$this->application = $application;
@ -48,14 +42,12 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
"\xCE\xB2");
}
if ($this->fullWidth) {
$content[] = phutil_tag(
'span',
array(
'class' => 'phabricator-application-launch-description',
),
$application->getShortDescription());
}
$content[] = phutil_tag(
'span',
array(
'class' => 'phabricator-application-launch-description',
),
$application->getShortDescription());
$counts = array();
$text = array();
@ -116,7 +108,7 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
} else {
$icon = $application->getIconName();
$classes[] = 'sprite-apps-large';
$classes[] = 'apps-'.$icon.'-light-large';
$classes[] = 'apps-'.$icon.'-dark-large';
}
$icon = phutil_tag(
@ -130,21 +122,13 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
$classes = array();
$classes[] = 'phabricator-application-launch-container';
if ($this->fullWidth) {
$classes[] = 'application-tile-full';
}
$title = null;
if ($application && !$this->fullWidth) {
$title = $application->getShortDescription();
}
$classes[] = 'application-tile-full';
$app_button = phutil_tag(
$application ? 'a' : 'div',
array(
'class' => implode(' ', $classes),
'href' => $application ? $application->getBaseURI() : null,
'title' => $title,
),
array(
$icon,

15
src/infrastructure/celerity/CeleritySpriteGenerator.php
View file

@ -453,9 +453,7 @@ final class CeleritySpriteGenerator {
$template = new PhutilSprite();
$unusual_heights = array(
'dark-menu-label' => 25,
'breadcrumbs' => 31,
'menu-label' => 24,
'red-header' => 70,
'blue-header' => 70,
'green-header' => 70,
@ -465,20 +463,13 @@ final class CeleritySpriteGenerator {
'lightblue-header' => 240,
);
$extra_css = array(
'dark-menu-label' =>
', .phabricator-dark-menu .phui-list-item-type-label',
'menu-label' =>
', .phabricator-side-menu .phui-list-item-type-label',
);
$sprites = array();
foreach ($gradients as $gradient) {
$path = $this->getPath('gradients/'.$gradient.'.png');
$sprite = id(clone $template)
->setName('gradient-'.$gradient)
->setSourceFile($path)
->setTargetCSS('.gradient-'.$gradient.idx($extra_css, $gradient));
->setTargetCSS('.gradient-'.$gradient);
$sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
@ -488,9 +479,7 @@ final class CeleritySpriteGenerator {
$sheet = $this->buildSheet(
'gradient',
false,
PhutilSpriteSheet::TYPE_REPEAT_X,
', .phabricator-dark-menu .phui-list-item-type-label, '.
'.phabricator-side-menu .phui-list-item-type-label');
PhutilSpriteSheet::TYPE_REPEAT_X);
foreach ($sprites as $sprite) {
$sheet->addSprite($sprite);
}

17
webroot/rsrc/css/aphront/phabricator-nav-view.css
View file

@ -22,9 +22,9 @@
then draw with the texture after the action completes. Just make the
element extend off the bottom of the screen to prevent this. */
bottom: -480px;
width: 205px;
background: #303539;
box-shadow: inset -3px 0 3px rgba(0, 0, 0, 0.5);
width: 204px;
background: rgba(205, 207, 211, 0.5);
border-right: 1px solid rgba(205, 207, 211, 1);
}
.phabricator-nav-column-background,
@ -49,7 +49,6 @@
position: absolute;
left: 0;
white-space: nowrap;
overflow-x: hidden;
overflow-y: auto;
}
@ -82,16 +81,6 @@
margin-left: 205px;
}
.phabricator-side-menu-home .phabricator-nav-column-background,
.phabricator-side-menu-home .phabricator-nav-local {
width: 240px;
}
.device-desktop .phabricator-side-menu-home .phabricator-nav-content,
.device-tablet .phabricator-side-menu-home .phabricator-nav-content {
margin-left: 240px;
}
.device-phone .phabricator-side-menu-home .phabricator-nav-content {
display: none;
}

1
webroot/rsrc/css/application/base/main-menu-view.css
View file

@ -14,7 +14,6 @@
background: #2d3236;
background-repeat: repeat-x;
position: relative;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
min-height: 44px;
}

55
webroot/rsrc/css/application/base/phabricator-application-launch-view.css
View file

@ -25,21 +25,12 @@ a.phabricator-application-launch-container,
div.phabricator-application-launch-container {
display: block;
float: left;
width: 78px;
height: 66px;
overflow: hidden;
position: relative;
border: 1px solid #1c1e22;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
a.application-tile-full {
width: 100%;
height: 48px;
border-bottom: none;
border-left: none;
border-right: none;
height: 46px;
}
.device-phone div.phabricator-application-launch-container {
@ -49,52 +40,40 @@ a.application-tile-full {
.phabricator-application-launch-icon {
display: block;
position: absolute;
left: 25px;
top: 10px;
width: 28px;
height: 28px;
}
.application-tile-full .phabricator-application-launch-icon {
top: 10px;
left: 10px;
top: 8px;
left: 8px;
}
.device-desktop a.phabricator-application-launch-container:hover {
background-color: #1e2225;
background-color: #C5C8CF;
text-decoration: none;
}
.phabricator-application-launch-name {
display: block;
margin-top: 42px;
font-weight: bold;
font-size: 11px;
text-align: center;
color: #ffffff;
text-shadow: 0px 1px 1px #000000;
}
.application-tile-full .phabricator-application-launch-name {
color: {$darkbluetext};
font-size: 13px;
margin-top: 9px;
text-align: left;
margin-left: 48px;
margin-top: 7px;
margin-left: 44px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
.application-tile-full .phabricator-application-launch-description {
color: #bfbfbf;
.phabricator-application-launch-description {
color: {$darkbluetext};
font-size: 11px;
margin-top: 24px;
margin-left: 48px;
margin-left: 44px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
.phabricator-application-beta {
position: absolute;
top: 4px;
left: 4px;
color: #fff;
color: {$bluetext};
font-size: 11px;
}
@ -102,20 +81,20 @@ a.application-tile-full {
position: absolute;
top: 6px;
right: 4px;
color: white;
color: {$darkbluetext};
font-weight: bold;
font-size: 11px;
}
.phabricator-application-attention-count {
background-color: #1e2225;
color: {$yellow};
background-color: rgba(0,0,0,.1);
color: {$orange};
border-radius: 2px;
padding: 1px 6px 2px;
}
.phabricator-application-warning-count {
background-color: #1e2225;
background-color: rgba(0,0,0,.1);
border-radius: 2px;
padding: 1px 6px 2px;
}

8
webroot/rsrc/css/layout/phabricator-crumbs-view.css
View file

@ -3,14 +3,12 @@
*/
.phabricator-crumbs-view {
background-color: #d8dce2;
background-color: #ebecee;
background-image: none !important;
height: 31px;
overflow: hidden;
vertical-align: top;
border-bottom: 1px solid #aaa;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid rgba(205, 207, 211, 1);
/* TODO: Position this over the slider for Differential's file tree view.
Remove this once that gets sorted out. */
position: relative;

38
webroot/rsrc/css/layout/phabricator-side-menu-view.css
View file

@ -7,52 +7,36 @@
white-space: nowrap;
text-decoration: none;
font-size: 13px;
-webkit-font-smoothing: antialiased;
}
.phabricator-side-menu .phui-list-item-href {
display: block;
padding: 6px 8px 6px 24px;
color: #e1e2e5;
text-shadow: rgba(0, 0, 0, 1) 0px 1px 1px;
color: {$darkbluetext};
}
.phabricator-side-menu .phui-list-item-selected,
.device-desktop .phui-side-menu
.phui-list-item-selected.phui-list-item-href:hover {
background-color: #305c85;
color: #fff;
background-color: #C5C8CF;
border-left: 4px solid {$blue};
}
.phabricator-side-menu .phui-list-item-selected .phui-list-item-href {
padding-left: 20px;
}
.phabricator-side-menu .phui-list-item-type-label {
padding: 6px 8px 4px 12px;
color: #f7f7f7;
color: {$darkbluetext};
text-transform: uppercase;
font-size: 11px;
font-size: 12px;
font-weight: bold;
border-style: solid;
background-color: #000;
}
.phabricator-dark-menu .phui-list-item-type-button,
.phabricator-side-menu .phui-list-item-type-button {
width: 50%;
padding: 5px 8px;
display: block;
border-radius: 4px;
border: 2px solid #000;
margin: 10px auto;
color: #fff;
font-size: 14px;
text-shadow: 0px 1px 1px #000000;
font-weight: bold;
text-align: center;
}
.phabricator-side-menu .phui-list-item-type-button:hover {
background-color: #1e2225;
}
.device-desktop .phabricator-side-menu a.phui-list-item-href:hover {
text-decoration: none;
background-color: #1e2225;
background-color: #C5C8CF;
}

48
webroot/rsrc/css/sprite-gradient.css
View file

@ -3,7 +3,7 @@
* @generated
*/
.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {
.sprite-gradient {
background-image: url(/rsrc/image/sprite-gradient.png);
background-repeat: repeat-x;
}
@ -12,41 +12,33 @@
.gradient-blue-header {
background-position: 0px -83px;
background-position: 0px -32px;
}
.gradient-breadcrumbs {
background-position: 0px -51px;
}
.gradient-dark-grey-header {
background-position: 0px -154px;
}
.gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label {
background-position: 0px -25px;
}
.gradient-green-header {
background-position: 0px -225px;
}
.gradient-grey-header {
background-position: 0px -296px;
}
.gradient-lightblue-header {
background-position: 0px -509px;
}
.gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label {
background-position: 0px 0px;
}
.gradient-dark-grey-header {
background-position: 0px -103px;
}
.gradient-green-header {
background-position: 0px -174px;
}
.gradient-grey-header {
background-position: 0px -245px;
}
.gradient-lightblue-header {
background-position: 0px -458px;
}
.gradient-red-header {
background-position: 0px -367px;
background-position: 0px -316px;
}
.gradient-yellow-header {
background-position: 0px -438px;
background-position: 0px -387px;
}

BIN
webroot/rsrc/image/sprite-gradient.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 574 B

After

Width:  |  Height:  |  Size: 503 B