ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use bright calendar colors for low-contrast users 

test plan:
  * disable high-contrast stylesheet
  * load calendar
  * add events for multiple contexts
  * verify that the colors used are bright

  * enable high-contrast stylesheet
  * load calendar
  * verify that the colors used are dull

Change-Id: Id8b39aa1c683994411e9111e14667aab1f157fd1
Reviewed-on: https://gerrit.instructure.com/41072
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Reviewed-by: Matthew Wheeler <mwheeler@instructure.com>
QA-Review: Steven Shepherd <sshepherd@instructure.com>
Product-Review: Braden Anderson <braden@instructure.com>
This commit is contained in:
Braden Anderson 2014-09-12 17:35:31 -06:00 committed by Braden Anderson
parent c5d2fc5d76
commit 363a24a3e1
9 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffeescripts/calendar/Calendar.coffee
View File

@ -652,7 +652,7 @@ define [
$styleContainer = $('<div />').appendTo('body')
colorizeContexts: =>
colors = colorSlicer.getColors(@contextCodes.length, 275)
colors = colorSlicer.getColors(@contextCodes.length, 275, {unsafe: !ENV.SETTINGS.use_high_contrast})
html = for contextCode, index in @contextCodes
color = colors[index]
".group_#{contextCode}{

3
app/controllers/application_controller.rb
View File

@ -108,7 +108,8 @@ class ApplicationController < ActionController::Base
:files_domain => HostUrl.file_host(@domain_root_account || Account.default, request.host_with_port),
:DOMAIN_ROOT_ACCOUNT_ID => @domain_root_account.try(:global_id),
:SETTINGS => {
open_registration: @domain_root_account.try(:open_registration?)
open_registration: @domain_root_account.try(:open_registration?),
use_high_contrast: @current_user.try(:prefers_high_contrast?)
}
}
@js_env[:lolcalize] = true if ENV['LOLCALIZE']

2
bower.json
View File

@ -9,7 +9,7 @@
"ic-ajax": "~2.0.1",
"ic-menu": "0.1.11",
"ic-styled": "1.1.6",
"color-slicer": "0.4.0",
"color-slicer": "0.8.0",
"k5uploader": "0.0.3",
"ember-qunit": "~0.1.7",
"ic-tabs": "0.1.3",

10
public/javascripts/bower/color-slicer/.bower.json
View File

@ -1,6 +1,6 @@
{
"name": "color-slicer",
"version": "0.7.0",
"version": "0.8.0",
"authors": [
"Braden Anderson <bluej100@gmail.com>"
],
@ -20,13 +20,13 @@
],
"devDependencies": {},
"homepage": "https://github.com/instructure/color-slicer",
"_release": "0.7.0",
"_release": "0.8.0",
"_resolution": {
"type": "version",
"tag": "v0.7.0",
"commit": "74a52e7e6867943ac67f715c54fd8e643e482ae1"
"tag": "v0.8.0",
"commit": "48b337a8fec31d118f47524a04347a674751de00"
},
"_source": "git://github.com/instructure/color-slicer.git",
"_target": "~0.7.0",
"_target": "0.8.0",
"_originalSource": "color-slicer"
}

2
public/javascripts/bower/color-slicer/bower.json
View File

@ -1,6 +1,6 @@
{
"name": "color-slicer",
"version": "0.7.0",
"version": "0.8.0",
"authors": [
"Braden Anderson <bluej100@gmail.com>"
],

17
public/javascripts/bower/color-slicer/dist/color-slicer.js vendored
View File

@ -14,19 +14,26 @@ module.exports = {
var l, c;
if (options.l) {
l = options.l;
c = options.c;
} else if (options.bright) {
l = 74;
c = 41;
} else if (options.unsafe) {
l = 60;
} else {
l = 49;
c = 29;
}
if (options.c) {
c = options.c;
} else {
c = 3 + l / 2;
// vary chroma to roughly match boundary of RGB-expressible colors
var delta = 17;
var delta = 5 + l/4;
var most_constrained_hue = 210;
var hr = (h - most_constrained_hue) / 360 * 2 * Math.PI;
c += delta - Math.round(delta * Math.cos(hr));
c += Math.floor(delta - delta * Math.cos(hr));
var overpower = Math.max(Math.floor(160 - (l * 8 / 5)), 0);
c = Math.min(c, overpower);
}
return [l, c, h]
},

4
public/javascripts/bower/color-slicer/dist/example.html vendored
View File

@ -21,11 +21,12 @@ var generate = function() {
var lightness = parseInt(document.getElementById('lightness').value, 10);
var chroma = parseInt(document.getElementById('chroma').value, 10);
var bright = document.getElementById('bright').checked;
var unsafe = document.getElementById('unsafe').checked;
document.body.style.color = bright ? '#fff' : '#000';
document.body.style.backgroundColor = bright ? '#000' : '#fff';
var colors = colorSlicer.getLchColors(count, start, {l: lightness, c: chroma, bright: bright});
var colors = colorSlicer.getLchColors(count, start, {l: lightness, c: chroma, bright: bright, unsafe: unsafe});
var output = document.getElementById('output');
output.innerHTML = '';
for (var i = 0; i < colors.length; i++) {
@ -59,6 +60,7 @@ window.addEventListener('load', function() {
<div><label>Lightness <input id="lightness" /></label></div>
<div><label>Chroma <input id="chroma" /></label></div>
<div><label><input id="bright" type="checkbox" /> Bright</label></div>
<div><label><input id="unsafe" type="checkbox" /> Unsafe</label></div>
</fieldset>
</form>
<ol id="output">

20
public/javascripts/bower/color-slicer/index.js
View File

@ -13,19 +13,27 @@ module.exports = {
var l, c;
if (options.l) {
l = options.l;
c = options.c;
} else if (options.bright) {
l = 74;
c = 41;
} else if (options.unsafe) {
l = 60;
} else {
l = 49;
c = 29;
}
if (options.c) {
c = options.c;
} else {
c = 3 + l / 2;
// vary chroma to roughly match boundary of RGB-expressible colors
var delta = 17;
// vary chroma to roughly match boundary of darkest RGB-expressible colors
var delta = 5 + l/4;
var most_constrained_hue = 210;
var hr = (h - most_constrained_hue) / 360 * 2 * Math.PI;
c += delta - Math.round(delta * Math.cos(hr));
c += Math.floor(delta - delta * Math.cos(hr));
// constrain chroma by lightest RGB-expressible colors
var overpower = Math.max(Math.floor(160 - (l * 8 / 5)), 0);
c = Math.min(c, overpower);
}
return [l, c, h]
},

2
public/javascripts/bower/color-slicer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "color-slicer",
"version": "0.7.0",
"version": "0.8.0",
"description": "Generate lists of readable text colors.",
"main": "index.js",
"scripts": {