1
0
Fork 0
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:
epriestley 2017-01-30 17:18:55 -08:00
parent 568a3877d1
commit 84aff44bcd
7 changed files with 65 additions and 14 deletions

View file

@ -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',

View file

@ -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',

View file

@ -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',

View file

@ -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)',
);
}
}

View file

@ -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;
}

View file

@ -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];
}
}

View file

@ -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);