mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-23 05:50:55 +01:00
Add a "Red/Green Colorblind" accessibility mode, make all web UIs and email respect it
Summary: Fixes T12172. Fixes T12060. This allows runtime code building CSS for mail to read CSS variables, then makes all the code do that. It reverts the non-colorblind red/green to the colors in use before T12060, which seem better for non-colorblind users since no one really complained? Test Plan: - Viewed code diffs in Web UI. - Viewed prose diffs in Web UI. - Viewed code diffs in email. - Viewed prose diffs in email. All modes respected the accessibility color scheme. Reviewers: chad Reviewed By: chad Maniphest Tasks: T12172, T12060 Differential Revision: https://secure.phabricator.com/D17269
This commit is contained in:
parent
568a3877d1
commit
84aff44bcd
7 changed files with 65 additions and 14 deletions
|
@ -12,7 +12,7 @@ return array(
|
|||
'core.pkg.css' => '12c56bd9',
|
||||
'core.pkg.js' => '1fa7c0c5',
|
||||
'darkconsole.pkg.js' => 'e7393ebb',
|
||||
'differential.pkg.css' => '4815647b',
|
||||
'differential.pkg.css' => '90b30783',
|
||||
'differential.pkg.js' => 'ddfeb49b',
|
||||
'diffusion.pkg.css' => '91c5d3a6',
|
||||
'diffusion.pkg.js' => '84c8f8fd',
|
||||
|
@ -58,7 +58,7 @@ return array(
|
|||
'rsrc/css/application/dashboard/dashboard.css' => '0921c307',
|
||||
'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
|
||||
'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
|
||||
'rsrc/css/application/differential/changeset-view.css' => '6a9bdf9c',
|
||||
'rsrc/css/application/differential/changeset-view.css' => '41af6d25',
|
||||
'rsrc/css/application/differential/core.css' => '5b7b8ff4',
|
||||
'rsrc/css/application/differential/phui-inline-comment.css' => 'be663c95',
|
||||
'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
|
||||
|
@ -572,7 +572,7 @@ return array(
|
|||
'conpherence-thread-manager' => 'c8b5ee6f',
|
||||
'conpherence-transaction-css' => '85129c68',
|
||||
'd3' => 'a11a5ff2',
|
||||
'differential-changeset-view-css' => '6a9bdf9c',
|
||||
'differential-changeset-view-css' => '41af6d25',
|
||||
'differential-core-view-css' => '5b7b8ff4',
|
||||
'differential-inline-comment-editor' => '2e3f9738',
|
||||
'differential-revision-add-comment-css' => 'c47f8c40',
|
||||
|
@ -1166,6 +1166,9 @@ return array(
|
|||
'javelin-dom',
|
||||
'javelin-reactor-dom',
|
||||
),
|
||||
'41af6d25' => array(
|
||||
'phui-inline-comment-view-css',
|
||||
),
|
||||
42126667 => array(
|
||||
'javelin-behavior',
|
||||
'javelin-dom',
|
||||
|
@ -1386,9 +1389,6 @@ return array(
|
|||
'69adf288' => array(
|
||||
'javelin-install',
|
||||
),
|
||||
'6a9bdf9c' => array(
|
||||
'phui-inline-comment-view-css',
|
||||
),
|
||||
'6ad39b6f' => array(
|
||||
'javelin-install',
|
||||
'javelin-event',
|
||||
|
|
|
@ -235,6 +235,7 @@ phutil_register_library_map(array(
|
|||
'CelerityPhysicalResourcesTestCase' => 'applications/celerity/resources/__tests__/CelerityPhysicalResourcesTestCase.php',
|
||||
'CelerityPostprocessor' => 'applications/celerity/postprocessor/CelerityPostprocessor.php',
|
||||
'CelerityPostprocessorTestCase' => 'applications/celerity/__tests__/CelerityPostprocessorTestCase.php',
|
||||
'CelerityRedGreenPostprocessor' => 'applications/celerity/postprocessor/CelerityRedGreenPostprocessor.php',
|
||||
'CelerityResourceController' => 'applications/celerity/controller/CelerityResourceController.php',
|
||||
'CelerityResourceGraph' => 'applications/celerity/CelerityResourceGraph.php',
|
||||
'CelerityResourceMap' => 'applications/celerity/CelerityResourceMap.php',
|
||||
|
@ -4911,6 +4912,7 @@ phutil_register_library_map(array(
|
|||
'CelerityPhysicalResourcesTestCase' => 'PhabricatorTestCase',
|
||||
'CelerityPostprocessor' => 'Phobject',
|
||||
'CelerityPostprocessorTestCase' => 'PhabricatorTestCase',
|
||||
'CelerityRedGreenPostprocessor' => 'CelerityPostprocessor',
|
||||
'CelerityResourceController' => 'PhabricatorController',
|
||||
'CelerityResourceGraph' => 'AbstractDirectedGraph',
|
||||
'CelerityResourceMap' => 'Phobject',
|
||||
|
|
|
@ -193,10 +193,10 @@ final class CelerityDefaultPostprocessor
|
|||
'sh-disabledbackground' => '#f3f3f3',
|
||||
|
||||
// Diffs
|
||||
'new-background' => '#eaffea',
|
||||
'new-bright' => '#a6f3a6',
|
||||
'old-background' => '#ffecec',
|
||||
'old-bright' => '#f8cbcb',
|
||||
'new-background' => 'rgba(151, 234, 151, .3)',
|
||||
'new-bright' => 'rgba(151, 234, 151, .6)',
|
||||
'old-background' => 'rgba(251, 175, 175, .3)',
|
||||
'old-bright' => 'rgba(251, 175, 175, .7)',
|
||||
'move-background' => '#fdf5d4',
|
||||
'copy-background' => '#f1c40f',
|
||||
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
<?php
|
||||
|
||||
final class CelerityRedGreenPostprocessor
|
||||
extends CelerityPostprocessor {
|
||||
|
||||
public function getPostprocessorKey() {
|
||||
return 'redgreen';
|
||||
}
|
||||
|
||||
public function getPostprocessorName() {
|
||||
return pht('Use Red/Green (Deuteranopia) Colors');
|
||||
}
|
||||
|
||||
public function buildVariables() {
|
||||
return array(
|
||||
'new-background' => 'rgba(152, 207, 235, .15)',
|
||||
'new-bright' => 'rgba(152, 207, 235, .35)',
|
||||
'old-background' => 'rgba(250, 212, 175, .3)',
|
||||
'old-bright' => 'rgba(250, 212, 175, .55)',
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -51,6 +51,10 @@ final class DifferentialChangesetOneUpMailRenderer
|
|||
protected function renderPrimitives(array $primitives, $rows) {
|
||||
$out = array();
|
||||
|
||||
$viewer = $this->getUser();
|
||||
$old_bright = $viewer->getCSSValue('old-bright');
|
||||
$new_bright = $viewer->getCSSValue('new-bright');
|
||||
|
||||
$context_style = array(
|
||||
'background: #F7F7F7;',
|
||||
'color: #74777D;',
|
||||
|
@ -72,13 +76,13 @@ final class DifferentialChangesetOneUpMailRenderer
|
|||
|
||||
if ($is_old) {
|
||||
if ($p['htype']) {
|
||||
$style = 'background: #ffd0d0;';
|
||||
$style = "background: {$old_bright};";
|
||||
} else {
|
||||
$style = null;
|
||||
}
|
||||
} else {
|
||||
if ($p['htype']) {
|
||||
$style = 'background: #d0ffd0;';
|
||||
$style = "background: {$new_bright};";
|
||||
} else {
|
||||
$style = null;
|
||||
}
|
||||
|
|
|
@ -1580,4 +1580,22 @@ final class PhabricatorUser
|
|||
return $this;
|
||||
}
|
||||
|
||||
|
||||
public function getCSSValue($variable_key) {
|
||||
$preference = PhabricatorAccessibilitySetting::SETTINGKEY;
|
||||
$key = $this->getUserSetting($preference);
|
||||
|
||||
$postprocessor = CelerityPostprocessor::getPostprocessor($key);
|
||||
$variables = $postprocessor->getVariables();
|
||||
|
||||
if (!isset($variables[$variable_key])) {
|
||||
throw new Exception(
|
||||
pht(
|
||||
'Unknown CSS variable "%s"!',
|
||||
$variable_key));
|
||||
}
|
||||
|
||||
return $variables[$variable_key];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -19,17 +19,21 @@ final class PhabricatorApplicationTransactionTextDiffDetailView
|
|||
public function renderForMail() {
|
||||
$diff = $this->buildDiff();
|
||||
|
||||
$viewer = $this->getViewer();
|
||||
$old_bright = $viewer->getCSSValue('old-bright');
|
||||
$new_bright = $viewer->getCSSValue('new-bright');
|
||||
|
||||
$old_styles = array(
|
||||
'padding: 0 2px;',
|
||||
'color: #333333;',
|
||||
'background: #f8cbcb;',
|
||||
"background: {$old_bright};",
|
||||
);
|
||||
$old_styles = implode(' ', $old_styles);
|
||||
|
||||
$new_styles = array(
|
||||
'padding: 0 2px;',
|
||||
'color: #333333;',
|
||||
'background: #a6f3a6;',
|
||||
"background: {$new_bright};",
|
||||
);
|
||||
$new_styles = implode(' ', $new_styles);
|
||||
|
||||
|
|
Loading…
Reference in a new issue