Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FLUID-6204: Letter-Spacing preference #869

Merged
merged 22 commits into from Mar 12, 2018
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
860da5f
FLUID-6203: Createing a stepper adjuster grade.
jobara Sep 28, 2017
a949e1d
FLUID-6204: Add letter space enactor and panel.
jobara Oct 2, 2017
009e369
FLUID-6204: Added letter space to prefs framework demo
jobara Oct 2, 2017
81dd4d2
Merge branch 'master' into FLUID-6204
jobara Jan 11, 2018
f1e74ac
FLUID-6204: Converted letter-spacing to use em instead of px values.
jobara Jan 11, 2018
34b48fa
FLUID-6204: building icon font.
jobara Jan 16, 2018
d5bb514
FLUID-6204: Linting
jobara Jan 16, 2018
a3e824c
FLUID-6204: Fixing build issues for font generation.
jobara Jan 16, 2018
24ace64
Merge branch 'master' into FLUID-6204
jobara Jan 17, 2018
baab9df
Merge branch 'master' into FLUID-6204
jobara Feb 12, 2018
887b585
FLUID-6204: Updating Icons, and correcting styling issues.
jobara Feb 12, 2018
0e70ac2
Merge branch 'master' into FLUID-6204
jobara Feb 13, 2018
339ebcc
FLUID-6204: Added missing dependency to test.
jobara Feb 13, 2018
720ca5c
FLUID-6204: Updating copyright statements.
jobara Feb 23, 2018
4e9babf
FLUID-6204: corrected comments
jobara Feb 23, 2018
007dba5
Merge branch 'master' into FLUID-6204
jobara Mar 6, 2018
e924865
FLUID-6204: Refactored letter-spacing enactor
jobara Mar 8, 2018
81a11cf
FLUID-6257: Updating remote model via fetch after write.
jobara Mar 9, 2018
4d4413d
Merge branch 'master' into FLUID-6204
jobara Mar 9, 2018
0ea1ada
FLUID-6204: Updating a comment
jobara Mar 12, 2018
a968d23
FLUID-6257: Commented temporary fix in prefs framework.
jobara Mar 12, 2018
0ea3517
FLUID-6204: Added overflow auto to the footer of the overview panel.
jobara Mar 12, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions demos/prefsFramework/html/SeparatedPanelPrefsEditor.html
Expand Up @@ -3,6 +3,7 @@
<ul class="fl-prefsEditor-panels">
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-text-size"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-text-font"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-letter-space"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-line-space"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-contrast"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-layout-controls"></div></li>
Expand Down
Expand Up @@ -3,6 +3,7 @@
<ul class="fl-prefsEditor-panels">
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-text-size"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-text-font"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-letter-space"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-line-space"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-contrast"></div></li>
<li class="flc-prefsEditor-panel fl-prefsEditor-panel"><div class="flc-prefsEditor-layout-controls"></div></li>
Expand Down
7 changes: 5 additions & 2 deletions demos/prefsFramework/index.html
Expand Up @@ -53,8 +53,10 @@
<script type="text/javascript" src="../../src/framework/preferences/js/PrefsEditor.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/Panels.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/SelfVoicingPanel.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/LetterSpacePanel.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/Enactors.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/SelfVoicingEnactor.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/LetterSpaceEnactor.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/SeparatedPanelPrefsEditor.js"></script>
<script type="text/javascript" src="../../src/components/slidingPanel/js/SlidingPanel.js"></script>
<script type="text/javascript" src="../../src/components/switch/js/Switch.js"></script>
Expand All @@ -63,7 +65,7 @@
<script type="text/javascript" src="../../src/framework/preferences/js/AuxBuilder.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/StarterSchemas.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/SelfVoicingSchemas.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/StarterSchemas.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/LetterSpaceSchemas.js"></script>
<script type="text/javascript" src="../../src/framework/preferences/js/Builder.js"></script>
<script type="text/javascript" src="../../src/components/uiOptions/js/UIOptions.js"></script>
<script type="text/javascript" src="../../src/components/textToSpeech/js/TextToSpeech.js"></script>
Expand All @@ -85,8 +87,9 @@
build: {
gradeNames: [
"fluid.prefs.auxSchema.starter", // this will add the starter set
"fluid.prefs.auxSchema.letterSpace", // this will add the letter space adjuster and enactor
"demo.prefsEditor.auxSchema.simplify", // this will add the simplify adjuster and enactor
"demo.prefsEditor.progressiveEnhancement" // progressive enhancment
"demo.prefsEditor.progressiveEnhancement" // progressive enhancement - may add selfVoicing
],
primarySchema: demo.prefsEditor.primarySchema
}
Expand Down
13 changes: 10 additions & 3 deletions src/framework/preferences/css/stylus/FullPrefsEditor.styl
Expand Up @@ -30,9 +30,16 @@
}

// Section header icons
h2 img {
margin-bottom: -3px;
padding-right: 5px;
h2 {
display: flex;
align-items: center;
white-space: nowrap;
justify-content: flex-start;
white-space: normal;

[class*='fl-icon-'] {
margin: 0 0.3em 0 0;
}
}

// Text controls
Expand Down
45 changes: 28 additions & 17 deletions src/framework/preferences/css/stylus/PrefsEditor.styl
Expand Up @@ -5,9 +5,9 @@
@import "utils/Themes"

@font-face {
font-family: 'InfusionIcons';
src: url('../fonts/InfusionIcons-PrefsEditor.ttf'),
url('../fonts/InfusionIcons-PrefsEditor.eot');
font-family: 'PrefsFramework-Icons';
src: url('../fonts/PrefsFramework-Icons.ttf'),
url('../fonts/PrefsFramework-Icons.eot');
}

.fl-prefsEditor {
Expand Down Expand Up @@ -146,6 +146,7 @@
}
.fl-preview-A {
font-size: 1.7em;
letter-spacing: normal // prevents the preview content from shifting when letter-spacing is set
}

// Pseudo content to prevent AT from reading display 'a'
Expand Down Expand Up @@ -207,16 +208,17 @@
}

// Font Icons
.fl-icon-right, .fl-icon-left, .fl-icon-indicator, .fl-icon-crossout, .fl-icon-big-a, .fl-icon-small-a, .fl-icon-line-space-expanded, .fl-icon-line-space-condensed,
.fl-icon-contrast, .fl-icon-undo, .fl-icon-line-space, .fl-icon-inputs, .fl-icon-simplify, .fl-icon-font, .fl-icon-size, .fl-icon-text-to-speech, .fl-icon-toc {
font-family: 'InfusionIcons';
.fl-icon-indicator, .fl-icon-crossout, .fl-icon-big-a, .fl-icon-small-a, .fl-icon-line-space-expanded, .fl-icon-line-space-condensed,
.fl-icon-contrast, .fl-icon-undo, .fl-icon-line-space, .fl-icon-inputs, .fl-icon-simplify, .fl-icon-font, .fl-icon-size, .fl-icon-text-to-speech, .fl-icon-toc,
.fl-icon-letter-space, .fl-icon-letter-space-expanded, .fl-icon-letter-space-condensed {
font-family: 'PrefsFramework-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
margin: 0.2em 0.3em 0 0;
margin-right: 0.3em;
font-size: 1.5em;
}

Expand All @@ -231,6 +233,12 @@
.fl-icon-small-a:before {
content: "\e007";
}
.fl-icon-letter-space-expanded:before {
content: "\e000";
}
.fl-icon-letter-space-condensed:before {
content: "\e001";
}
.fl-icon-line-space-expanded:before {
content: "\e009";
}
Expand All @@ -243,16 +251,22 @@

.fl-choice {
.fl-indicator {
font-family: 'InfusionIcons' !important;
font-size: 1.3em;
margin: -0.75em 0 0 0.75em;
font-family: 'PrefsFramework-Icons' !important;
margin-top: -1.5em;
height: 1em;
width: calc(100% - 5px); // deduct the right margin from the calculation
text-align: center;
font-size: 1.25em;
}
&:last-child .fl-indicator {
width: 100%;
}

.fl-prefsEditor-themePicker-defaultThemeLabel .fl-crossout {
font-family: 'InfusionIcons' !important;
margin-top: -1.25em;
font-size: 1.85em;
font-family: 'PrefsFramework-Icons' !important;
background-color: transparent !important;
margin-top: -1.05em;
font-size: 2.2em;
}

label.fl-theme-prefsEditor-default,
Expand All @@ -265,10 +279,7 @@
}

// header icons
.fl-icon-right:before {
content: "\e001";
}
.fl-icon-left:before {
.fl-icon-letter-space:before {
content: "\e002";
}
.fl-icon-contrast:before {
Expand Down
Expand Up @@ -77,7 +77,7 @@

// Font icon for reset tab
.fl-icon-undo {
font-family: 'InfusionIcons';
font-family: 'PrefsFramework-Icons';
speak: none;
font-style: normal;
font-weight: normal;
Expand Down
Expand Up @@ -82,7 +82,6 @@ html {
}

.fl-heading-text {
padding-top: 0.2rem;
font-size: 1.3em;
font-weight: 600;
text-align: center;
Expand Down Expand Up @@ -217,6 +216,8 @@ html {
[class*='fl-icon-'] {
display: inline;
margin: 0 0.3em;
font-size: 1.4em;
padding-top: 0.3em;
}
}
}
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
50 changes: 50 additions & 0 deletions src/framework/preferences/fonts/PrefsFramwork-Icons-config.json
@@ -0,0 +1,50 @@
{
"src": [
"svg/indicator-arrow-triangle.svg",
"svg/crossout-diag-dotted-line.svg",
"svg/contrast.svg",
"svg/bigA.svg",
"svg/smallA.svg",
"svg/reset-undo-arrow.svg",
"svg/line-space-expanded.svg",
"svg/line-space-condensed.svg",
"svg/line-space.svg",
"svg/links.svg",
"svg/simplify.svg",
"svg/preferences.svg",
"svg/font-style.svg",
"svg/size.svg",
"svg/text-to-speech-no-article.svg",
"svg/table-of-contents.svg",
"svg/character-spacing-expanded.svg",
"svg/character-spacing-condensed.svg",
"svg/character-spacing.svg"
],
"options": {
"font": "PrefsFramework-Icons",
"codepoints": {
"character-spacing-expanded": "0xE000",
"character-spacing-condensed": "0xE001",
"character-spacing": "0xE002",
"indicator-arrow-triangle": "0xE003",
"crossout-diag-dotted-line": "0xE004",
"contrast": "0xE005",
"bigA": "0xE006",
"smallA": "0xE007",
"reset-undo-arrow": "0xE008",
"line-space-expanded": "0xE009",
"line-space-condensed": "0xE00a",
"line-space": "0xE00b",
"links": "0xE00c",
"simplify": "0xE00d",
"preferences": "0xE00e",
"font-style": "0xE00f",
"size": "0xE010",
"text-to-speech-no-article": "0xE011",
"table-of-contents": "0xE012"
},
"templateOptions": {
"classPrefix": "fl-icon-"
}
}
}
@@ -0,0 +1,16 @@
<div>
<h2 class="flc-prefsEditor-header">
<span class="fl-icon-letter-space"></span>
<span class="flc-prefsEditor-label fl-heading-text" id="letter-space-label"></span>
</h2>
<p class="flc-prefsEditor-descr fl-prefsEditor-panel-descr"></p>
<div class="flc-prefsEditor-textfieldStepper">
<span class="fl-icon-letter-space-condensed" role="presentation"></span>
<span class="flc-textfieldStepper-focusContainer fl-textfieldStepper-focusContainer">
<button class="flc-textfieldStepper-decrease" type="button">-</button>
<input aria-labelledby="letter-space-label" class="flc-textfieldStepper-field fl-textfieldStepper-textField" type="text">
<button class="flc-textfieldStepper-increase" type="button">+</button>
</span>
<span class="fl-icon-letter-space-expanded" role="presentation"></span>
</div>
</div>
@@ -1,10 +1,10 @@
<div>
<h2 class="flc-prefsEditor-line-space-header">
<h2 class="flc-prefsEditor-header">
<span class="fl-icon-line-space"></span>
<span class="flc-prefsEditor-line-space-label fl-heading-text" id="line-space-label"></span>
<span class="flc-prefsEditor-label fl-heading-text" id="line-space-label"></span>
</h2>
<p class="flc-prefsEditor-line-space-descr fl-prefsEditor-panel-descr"></p>
<div class="flc-prefsEditor-line-space">
<p class="flc-prefsEditor-descr fl-prefsEditor-panel-descr"></p>
<div class="flc-prefsEditor-textfieldStepper">
<span class="fl-icon-line-space-condensed" role="presentation"></span>
<span class="flc-textfieldStepper-focusContainer fl-textfieldStepper-focusContainer">
<button class="flc-textfieldStepper-decrease" type="button">-</button>
Expand Down
@@ -1,10 +1,10 @@
<div>
<h2 class="flc-prefsEditor-text-size-header">
<h2 class="flc-prefsEditor-header">
<span class="fl-icon-size"></span>
<span id="text-size-label" class="flc-prefsEditor-min-text-size-label fl-heading-text"></span>
<span id="text-size-label" class="flc-prefsEditor-label fl-heading-text"></span>
</h2>
<p class="flc-prefsEditor-text-size-descr fl-prefsEditor-panel-descr"></p>
<div class="flc-prefsEditor-min-text-size">
<p class="flc-prefsEditor-descr fl-prefsEditor-panel-descr"></p>
<div class="flc-prefsEditor-textfieldStepper">
<span class="fl-icon-small-a" role="presentation"></span>
<span class="flc-textfieldStepper-focusContainer fl-textfieldStepper-focusContainer">
<button class="flc-textfieldStepper-decrease" type="button">-</button>
Expand Down
78 changes: 78 additions & 0 deletions src/framework/preferences/js/LetterSpaceEnactor.js
@@ -0,0 +1,78 @@
/*
Copyright 2017 OCAD University

Licensed under the Educational Community License (ECL), Version 2.0 or the New
BSD license. You may not use this file except in compliance with one these
Licenses.

You may obtain a copy of the ECL 2.0 License and BSD License at
https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
*/

var fluid_3_0_0 = fluid_3_0_0 || {};

(function ($, fluid) {
"use strict";

/*******************************************************************************
* letterSpace
*
* Sets the letter space on the container to the number of units to increase
* the letter space by. If a negative number is provided, the space between
* characters will decrease. Setting the size to 0 will use the default letter
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems using the default letter space is when the size (value) is set to 1, instead of 0.

* space.``
*******************************************************************************/

// Note that the implementors need to provide the container for this view component
fluid.defaults("fluid.prefs.enactor.letterSpace", {
gradeNames: ["fluid.prefs.enactor", "fluid.viewComponent"],
preferenceMap: {
"fluid.prefs.letterSpace": {
"model.value": "default"
}
},
fontSizeMap: {}, // must be supplied by implementors
members: {
root: {
expander: {
"this": "{that}.container",
"method": "closest", // ensure that the correct document is being used. i.e. in an iframe
"args": ["html"]
}
}
},
invokers: {
set: {
funcName: "fluid.prefs.enactor.letterSpace.set",
args: ["{that}", "{arguments}.0"]
}
},
modelListeners: {
unit: {
listener: "{that}.set",
args: ["{change}.value"]
}
},
modelRelay: {
target: "unit",
singleTransform: {
type: "fluid.transforms.round",
scale: 1,
input: {
transform: {
"type": "fluid.transforms.linearScale",
"offset": -1,
"input": "{that}.model.value"
}
}
}

}
});

fluid.prefs.enactor.letterSpace.set = function (that, units) {
var targetSize = units ? units + "em" : "normal";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if letter-spacing css has already been set on the html? Shall this function fetch it and performs an multiplication on the original value instead of a straight overwrite?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cindyli and spoke about this today after I had performed some experimentation. So the situation is a bit trickier for letter spacing. There are a couple of factors 1) we don't really know the base spacing (kerning, tracking) used within a font. The letter-spacing css property actually just adds space to whatever this original value is. Meaning we don't ever do true multiplication like in font size adjustments. 2) If an original CSS value was set to say 0.2em, and user increases the letter-spacing preference in UIO by 0.5. If we do a multiplication of these values, the size would actually become 0.1em, making the space smaller. Due to all of these factors we decided to add the original value to the UIO adjustment. That is is 0.2 + 0.5 resulting in 0.7em value being set.

that.root.css("letter-spacing", targetSize);
};

})(jQuery, fluid_3_0_0);