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

Common Colors, Spacing for Menus and Typeaheads

Browse source 
Summary: Adds more consistent colors and spacing to notifications, conpherence dropdowns, search dropdowns, and typeaheads.

Test Plan: Tested Notifications, menu and page. Conpherence, menu and page, Search, and Typeaheads.

Reviewers: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9313
This commit is contained in:
Chad Little 2014-05-27 15:26:16 -07:00
parent 87411f5b29
commit c4add5af9b
7 changed files with 66 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/celerity/map.php
View file

@ -7,7 +7,7 @@
return array(
'names' =>
array(
'core.pkg.css' => '8b46eb01',
'core.pkg.css' => '45c8100d',
'core.pkg.js' => '7db41c19',
'darkconsole.pkg.js' => 'ca8671ce',
'differential.pkg.css' => 'fbf57382',
@ -34,19 +34,19 @@ return array(
'rsrc/css/aphront/tooltip.css' => '9c90229d',
'rsrc/css/aphront/transaction.css' => 'ce491938',
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
'rsrc/css/aphront/typeahead.css' => '1f4c9e23',
'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
'rsrc/css/application/auth/auth.css' => '1e655982',
'rsrc/css/application/base/main-menu-view.css' => '5f0e9e05',
'rsrc/css/application/base/notification-menu.css' => '99ffef72',
'rsrc/css/application/base/main-menu-view.css' => '5f08823b',
'rsrc/css/application/base/notification-menu.css' => '8637a3db',
'rsrc/css/application/base/phabricator-application-launch-view.css' => '137e794e',
'rsrc/css/application/base/standard-page-view.css' => '517cdfb1',
'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
'rsrc/css/application/config/config-options.css' => '7fedf08b',
'rsrc/css/application/config/config-template.css' => '25d446d6',
'rsrc/css/application/config/setup-issue.css' => '69e640e7',
'rsrc/css/application/conpherence/menu.css' => 'c5fe56f9',
'rsrc/css/application/conpherence/menu.css' => '3690ec7a',
'rsrc/css/application/conpherence/message-pane.css' => '7703a9a9',
'rsrc/css/application/conpherence/notification.css' => '403cf598',
'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
'rsrc/css/application/conpherence/update.css' => '1099a660',
'rsrc/css/application/conpherence/widget-pane.css' => 'bf275a6c',
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
@ -501,12 +501,12 @@ return array(
'aphront-tokenizer-control-css' => '36903077',
'aphront-tooltip-css' => '9c90229d',
'aphront-two-column-view-css' => '16ab3ad2',
'aphront-typeahead-control-css' => '1f4c9e23',
'aphront-typeahead-control-css' => 'a989b5b3',
'auth-css' => '1e655982',
'config-options-css' => '7fedf08b',
'conpherence-menu-css' => 'c5fe56f9',
'conpherence-menu-css' => '3690ec7a',
'conpherence-message-pane-css' => '7703a9a9',
'conpherence-notification-css' => '403cf598',
'conpherence-notification-css' => '04a6e10a',
'conpherence-update-css' => '1099a660',
'conpherence-widget-pane-css' => 'bf275a6c',
'differential-changeset-view-css' => 'f234b888',
@ -710,11 +710,11 @@ return array(
'phabricator-jump-nav' => 'f0c5e726',
'phabricator-keyboard-shortcut' => '1ae869f2',
'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
'phabricator-main-menu-view' => '5f0e9e05',
'phabricator-main-menu-view' => '5f08823b',
'phabricator-nav-view-css' => '9283c2df',
'phabricator-notification' => '0c6946e7',
'phabricator-notification-css' => 'ef2c9b34',
'phabricator-notification-menu-css' => '99ffef72',
'phabricator-notification-menu-css' => '8637a3db',
'phabricator-object-selector-css' => '029a133d',
'phabricator-phtize' => 'd254d646',
'phabricator-prefab' => '41ed7994',

2
src/infrastructure/celerity/CelerityResourceTransformer.php
View file

@ -194,6 +194,8 @@ final class CelerityResourceTransformer {
'charcoal' => '#4b4d51',
'backdrop' => '#c4cde0',
'hovergrey' => '#c5cbcf',
'hoverblue' => '#eceff5',
'hoverborder' => '#dfe1e9',
// Base Greys
'lightgreyborder' => '#C7CCD9',

11
webroot/rsrc/css/aphront/typeahead.css
View file

@ -9,7 +9,7 @@ div.jx-typeahead-hardpoint {
div.jx-typeahead-results {
position: absolute;
border: 1px solid #96a6c7;
border: 1px solid {$hoverborder};
border-top: 0px;
padding: 0;
background: #fefefe;
@ -25,19 +25,16 @@ div.jx-typeahead-results {
}
div.jx-typeahead-results a.jx-result {
color: #333;
color: {$darkgreytext};
display: block;
font-size: 13px;
border-bottom: 1px solid #e7e7e7;
border-top: 1px solid #fff;
border-top: 1px solid {$hoverborder};
}
div.jx-typeahead-results a.jx-result:hover,
div.jx-typeahead-results a.focused {
display: block;
background: {$lightblue};
border-top: 1px solid {$thinblueborder};
border-bottom: 1px solid {$thinblueborder};
background: {$hoverblue};
text-decoration: none;
}

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

@ -197,25 +197,25 @@
background: #ffffff;
word-wrap: break-word;
overflow-y: auto;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
border: 2px solid #33393d;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
border: {$blueborder};
border-radius: 3px;
margin-left: 40px;
}
.phabricator-main-search-typeahead-result {
display: block;
padding: 6px 12px 6px 46px;
background-position: 12px 9px;
background-size: 25px 25px;
padding: 6px 8px 8px 44px;
background-position: 8px;
background-size: 30px 30px;
background-repeat: no-repeat;
}
.phabricator-main-search-typeahead-result .result-name {
display: block;
font-size: 12px;
font-size: 13px;
font-weight: bold;
color: #333;
color: {$darkgreytext};
}
.phabricator-main-search-typeahead-result .result-type {

30
webroot/rsrc/css/application/base/notification-menu.css
View file

@ -3,13 +3,12 @@
*/
.phabricator-notification-menu {
background: #ffffff;
background: #fff;
font-size: 11px;
word-wrap: break-word;
overflow-y: auto;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
border: 2px solid #33393d;
border-top-width: 0;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
border: 1px solid {$blueborder};
border-radius: 3px;
}
@ -32,7 +31,7 @@
}
.device-phone .phabricator-notification-menu {
border-bottom: 1px solid #222222;
border-bottom: 1px solid {$thinblueborder};
width: 94%;
max-width: 390px;
top: 42px !important;
@ -42,7 +41,7 @@
}
.phabricator-notification {
padding: 6px;
padding: 6px 8px;
}
.phabricator-notification-menu .phabricator-notification {
@ -50,11 +49,11 @@
}
.device-desktop .phabricator-notification-menu .phabricator-notification:hover {
background: #e6ebf5;
background: {$hoverblue};
}
.phabricator-notification + .phabricator-notification {
border-top: 1px solid #e9e9e9;
border-top: 1px solid {$hoverborder};
}
.no-notifications {
@ -63,15 +62,14 @@
.phabricator-notification-list .phabricator-notification-unread,
.phabricator-notification-menu .phabricator-notification-unread {
background: #eceff5;
border-color: #e3e8f0;
background: {$hoverblue};
}
.phabricator-notification-header {
font-weight: bold;
padding: 6px;
padding: 10px 8px;
font-size: 12px;
border-bottom: 1px solid #e9e9e9;
border-bottom: 1px solid {$thinblueborder};
}
.phabricator-notification-header a {
@ -81,14 +79,16 @@
.phabricator-notification-header .phabricator-notification-clear-all {
color: #18559D;
float: right;
font-weight: normal;
}
.phabricator-notification-view-all {
text-align: center;
font-weight: bold;
background: #f7f7f7;
border-top: 1px solid #e9e9e9;
background: {$greybackground};
border-top: 1px solid {$thinblueborder};
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
padding: 6px;
padding: 8px;
font-size: 12px;
}

15
webroot/rsrc/css/application/conpherence/menu.css
View file

@ -132,7 +132,7 @@
color: {$darkbluetext};
text-shadow: 0px 1px 1px #fff;
overflow: hidden;
width: 180px;
width: 160px;
text-overflow: ellipsis;
}
@ -147,14 +147,13 @@
.conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-unread-count {
position: absolute;
left: 35px;
top: 3px;
background: {$red};
border-radius: 10px;
color: #FFF;
right: 8px;
top: 15px;
background: {$blue};
border-radius: 2px;
color: #fff;
font-weight: bold;
padding: 1px 5px 2px;
border: 1px solid #333;
padding: 0 5px 1px;
font-size: 11px;
}

52
webroot/rsrc/css/application/conpherence/notification.css
View file

@ -9,7 +9,7 @@
.phabricator-notification .conpherence-menu-item-view {
display: block;
height: 55px;
height: 46px;
overflow: hidden;
position: relative;
text-decoration: none;
@ -20,60 +20,48 @@
.phabricator-notification .conpherence-menu-item-view
.conpherence-menu-item-image {
top: 6px;
left: 6px;
top: 8px;
left: 8px;
display: block;
position: absolute;
width: 35px;
height: 35px;
background-size: 35px;
border: 4px solid #e7e7e7;
border-radius: 3px;
width: 30px;
height: 30px;
background-size: 30px;
}
.phabricator-notification .conpherence-menu-item-view
.conpherence-menu-item-title {
display: block;
margin-top: 12px;
margin-left: 58px;
margin-top: 8px;
margin-left: 46px;
text-align: left;
font-weight: bold;
font-size: 13px;
color: #333;
overflow: hidden;
width: 220px;
color: {$darkgreytext};
width: 280px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.phabricator-notification .conpherence-menu-item-view
.conpherence-menu-item-subtitle {
display: block;
color: #a1a5a9;
color: {$lightgreytext};
font-size: 11px;
margin-top: 2px;
margin-left: 58px;
font-style: italic;
margin-left: 46px;
}
.phabricator-notification .conpherence-menu-item-view
.conpherence-menu-item-unread-count {
position: absolute;
left: 35px;
top: 3px;
background: {$red};
border-radius: 10px;
color: #FFF;
font-weight: bold;
padding: 1px 5px 2px;
border: 1px solid #333;
font-size: 11px;
}
.phabricator-notification .conpherence-menu-item-view
.conpherence-menu-item-date {
position: absolute;
right: 8px;
top: 15px;
right: 16px;
color: #a1a5a9;
background: {$blue};
border-radius: 2px;
color: #fff;
font-weight: bold;
padding: 0 5px 1px;
font-size: 11px;
}