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.

Sign up for GitHub

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-6754: add system-ui font option to UIO #1098

Merged
merged 11 commits into from
Jul 25, 2024
Merged

FLUID-6754: add system-ui font option to UIO #1098

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3c44b43
FLUID-6754: add system-ui font option to UIO
jobara Nov 18, 2022
db01956
FLUID-6754: rename labels for default options and system font
jobara Nov 21, 2022
1e1a143
FLUID-6754: Add Spanish translation
jobara Nov 22, 2022
3554fa0
FLUID-6754: Add Farsi translation
jobara Dec 7, 2022
a309c00
Merge branch 'main' into FLUID-6754
jobara Dec 13, 2022
d196f0e
FLUID-6754: Add pt-br translation
jobara Dec 13, 2022
e3a2c90
FLUID-6754: Adding the French translation
jobara Dec 14, 2022
7c5d70a
FLUID-6754: Add missing contrast translations
jobara Dec 15, 2022
00f6270
Merge branch 'main' into FLUID-6754
jobara Jul 24, 2024
88e0ba2
FLUID-6754: update the tests
jobara Jul 24, 2024
ecdb80e
FLUID-6754: remove option element styles
jobara Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/framework/preferences/css/sass/PrefsEditor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@ $icon-font: 'PrefsFramework-Icons';
margin: 0 auto;

option {
&.fl-font-system-ui {
font-family: var(--fl-font-family, system-ui);
}

&.fl-font-times {
font-family: var(--fl-font-family, "Times New Roman", serif);
}
Expand Down
1 change: 1 addition & 0 deletions src/framework/preferences/css/sass/utils/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

$fonts: (
".fl-font-arial": "Arial",
".fl-font-system-ui": "system-ui",
Copy link
Member

Choose a reason for hiding this comment

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

To avoid confusing ourselves in future, should we rename all these uses of "system" to "device" also?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good question. The actual generic font-family is called system-ui. So the right hand side can't be changed. We could change the name of the class to device if that's preferred. I'm fine either way, I guess we need to decide if we want the class name to reflect the font family or the name exposed via the adjuster.

".fl-font-verdana": "Verdana",
".fl-font-times": "Georgia, Times, Times New Roman, serif",
".fl-font-comic-sans": "Comic Sans MS, sans-serif",
Expand Down
4 changes: 3 additions & 1 deletion src/framework/preferences/js/StarterGrades.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ fluid.defaults("fluid.uiEnhancer.cssClassEnhancerBase", {
classnameMap: {
"textFont": {
"default": "",
"system": "fl-font-system-ui",
"times": "fl-font-times",
"comic": "fl-font-comic-sans",
"arial": "fl-font-arial",
Expand Down Expand Up @@ -245,6 +246,7 @@ fluid.defaults("fluid.prefs.starterPanels", {
stringArrayIndex: {
textFont: [
"textFont-default",
"textFont-system",
"textFont-times",
"textFont-comic",
"textFont-arial",
Expand All @@ -253,7 +255,7 @@ fluid.defaults("fluid.prefs.starterPanels", {
]
},
controlValues: {
textFont: ["default", "times", "comic", "arial", "verdana", "open-dyslexic"]
textFont: ["default", "system", "times", "comic", "arial", "verdana", "open-dyslexic"]
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion src/framework/preferences/js/StarterSchemas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ fluid.defaults("fluid.prefs.auxSchema.textFont", {
type: "fluid.prefs.enactor.textFont",
classes: {
"default": "",
"system": "fl-font-system-ui",
"times": "fl-font-times",
"comic": "fl-font-comic-sans",
"arial": "fl-font-arial",
Expand All @@ -87,6 +88,7 @@ fluid.defaults("fluid.prefs.auxSchema.textFont", {
classnameMap: {
"textFont": {
"default": "",
"system": "fl-font-system-ui",
"times": "fl-font-times",
"comic": "fl-font-comic-sans",
"arial": "fl-font-arial",
Expand Down Expand Up @@ -223,9 +225,10 @@ fluid.defaults("fluid.prefs.schemas.textFont", {
"fluid.prefs.textFont": {
"type": "string",
"default": "default",
"enum": ["default", "times", "comic", "arial", "verdana", "open-dyslexic"],
"enum": ["default", "system", "times", "comic", "arial", "verdana", "open-dyslexic"],
"enumLabels": [
"textFont-default",
"textFont-system",
"textFont-times",
"textFont-comic",
"textFont-arial",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Default",
"contrast-default": "No Preference",
"contrast-bw": "Black on white",
"contrast-wb": "White on black",
"contrast-by": "Black on yellow",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Default",
"contrast-default": "No Preference",
"contrast-bw": "Black on white",
"contrast-wb": "White on black",
"contrast-by": "Black on yellow",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_en_CA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Default",
"contrast-default": "No Preference",
"contrast-bw": "Black on white",
"contrast-wb": "White on black",
"contrast-by": "Black on yellow",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_en_US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Default",
"contrast-default": "No Preference",
"contrast-bw": "Black on white",
"contrast-wb": "White on black",
"contrast-by": "Black on yellow",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Defecto",
"contrast-default": "Sin cambios",
"contrast-bw": "Negro sobre blanco",
"contrast-wb": "Blanco sobre negro",
"contrast-by": "Negro sobre amarillo",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_fa.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "پیش فرض",
"contrast-default": "بدون اولویت",
"contrast-bw": "متن سیاه روی زمینه سفید",
"contrast-wb": "متن سفید روی زمینه سیاه",
"contrast-by": "متن سیاه روی زمینه زرد",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Défaut",
"contrast-default": "Pas de préférence",
"contrast-bw": "Noir sur blanc",
"contrast-wb": "Blanc sur noir",
"contrast-by": "Noir sur jaune",
Expand Down
2 changes: 1 addition & 1 deletion src/framework/preferences/messages/contrast_pt_BR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"contrast-default": "Padrão",
"contrast-default": "Sem Preferência",
"contrast-bw": "Preto sobre branco",
"contrast-wb": "Branco sobre preto",
"contrast-by": "Preto sobre amarelo",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Default",
"textFont-default": "No Preference",
"textFont-system": "Device Font",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Default",
"textFont-default": "No Preference",
"textFont-system": "Device Font",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_en_CA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Default",
"textFont-default": "No Preference",
"textFont-system": "Device Font",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_en_US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Default",
"textFont-default": "No Preference",
"textFont-system": "Device Font",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Defecto",
"textFont-default": "Sin cambios",
"textFont-system": "Letras del dispositivo",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_fa.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "پیش فرض",
"textFont-default": "بدون اولویت",
"textFont-system": "فونت پیش فرض",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Défaut",
"textFont-default": "Pas de préférence",
"textFont-system": "Police de l’appareil",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/textFont_pt_BR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Padrão",
"textFont-default": "Sem Preferência",
"textFont-system": "Fonte do Dispositivo",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
1 change: 1 addition & 0 deletions tests/framework-tests/preferences/data/textFont_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"textFont-default": "Default",
"textFont-system": "Device Font",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand Down
10 changes: 6 additions & 4 deletions tests/framework-tests/preferences/js/IntegrationTestsCommon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,10 @@ fluid.tests.prefs.enhancerOptions = {
}
};

fluid.tests.prefs.testStrings = ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6"];
fluid.tests.prefs.testControlValues = ["a", "b", "c", "d", "e", "f"];
// TODO: The number of values in these arrays is dependent on the starter grades stringArrayIndex
// This should be refactored so that it isn't so tightly coupled.
fluid.tests.prefs.testStrings = ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6", "Test7"];
fluid.tests.prefs.testControlValues = ["a", "b", "c", "d", "e", "f", "g"];

fluid.tests.prefs.testComponentIntegration = function (prefsEditor) {
var body = $("body");
Expand All @@ -199,11 +201,11 @@ fluid.tests.prefs.testComponentIntegration = function (prefsEditor) {
var actualTextFontStrings = prefsEditor.textFont.options.strings.textFont;
var actualTextFontControlValues = prefsEditor.textFont.options.controlValues.textFont;

jqUnit.assertEquals("There are 6 elements in the text font string list", 6, actualTextFontStrings.length);
jqUnit.assertEquals("There are 7 elements in the text font string list", 7, actualTextFontStrings.length);
jqUnit.assertEquals("The first text font string value matches", testStrings[0], actualTextFontStrings[0]);
jqUnit.assertEquals("The sixth text font string value matches", testStrings[5], actualTextFontStrings[5]);

jqUnit.assertEquals("There are 6 elements in the text font control value list", 6, actualTextFontControlValues.length);
jqUnit.assertEquals("There are 7 elements in the text font control value list", 7, actualTextFontControlValues.length);
jqUnit.assertEquals("The first text font control value matches", testControlValues[0], actualTextFontControlValues[0]);
jqUnit.assertEquals("The sixth text font control value matches", testControlValues[5], actualTextFontControlValues[5]);
};
Expand Down
15 changes: 9 additions & 6 deletions tests/framework-tests/preferences/js/PanelsTests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1039,7 +1039,8 @@ fluid.tests.prefsPaneltemplatePrefix = "../../../../src/framework/preferences/ht
fluid.defaults("fluid.tests.prefs.panel.textFont", {
gradeNames: ["fluid.prefs.panel.textFont", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
messageBase: {
"textFont-default": "default",
"textFont-default": "No Preference",
"textFont-system": "Device Font",
"textFont-times": "Times New Roman",
"textFont-comic": "Comic Sans",
"textFont-arial": "Arial",
Expand All @@ -1059,6 +1060,7 @@ fluid.defaults("fluid.tests.prefs.panel.textFont", {
classnameMap: {
"textFont": {
"default": "",
"system": "fl-font-system-ui",
"times": "fl-font-times",
"comic": "fl-font-comic-sans",
"arial": "fl-font-arial",
Expand All @@ -1069,6 +1071,7 @@ fluid.defaults("fluid.tests.prefs.panel.textFont", {
stringArrayIndex: {
textFont: [
"textFont-default",
"textFont-system",
"textFont-times",
"textFont-comic",
"textFont-arial",
Expand All @@ -1077,7 +1080,7 @@ fluid.defaults("fluid.tests.prefs.panel.textFont", {
]
},
controlValues: {
textFont: ["default", "times", "comic", "arial", "verdana", "open-dyslexic"]
textFont: ["default", "system", "times", "comic", "arial", "verdana", "open-dyslexic"]
}
});

Expand Down Expand Up @@ -1115,14 +1118,14 @@ fluid.setLogging(true);
fluid.defaults("fluid.tests.textFontTester", {
gradeNames: ["fluid.test.testCaseHolder"],
testOptions: {
expectedNumOfOptions: 6,
expectedNumOfOptions: 7,
defaultValue: "default",
newValue: "comic"
},
modules: [{
name: "Test the text font settings panel",
tests: [{
expect: 10,
expect: 11,
name: "Test the rendering of the text font panel",
sequence: [{
listener: "fluid.tests.textFontPanel.testDefault",
Expand Down Expand Up @@ -1201,8 +1204,8 @@ fluid.defaults("fluid.tests.textFontOverrideTester", {
fluid.defaults("fluid.tests.prefs.panel.contrast", {
gradeNames: ["fluid.prefs.panel.contrast", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
messageBase: {
"contrast": ["Default", "Black on white", "White on black", "Black on yellow", "Yellow on black", "Low contrast"],
"contrast-default": "Default",
"contrast": ["No Preference", "Black on white", "White on black", "Black on yellow", "Yellow on black", "Low contrast"],
"contrast-default": "No Preference",
"contrast-bw": "Black on white",
"contrast-wb": "White on black",
"contrast-by": "Black on yellow",
Expand Down
2 changes: 1 addition & 1 deletion tests/framework-tests/preferences/js/PrefsEditorTests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ fluid.tests.prefs.assertInit = function (prefsEditor) {
jqUnit.assertEquals("Initialization: The first theme is default", "default", themeValues[0]);

var fontValues = prefsEditor.textFont.options.controlValues.textFont;
jqUnit.assertEquals("Initialization: There are 6 font values in font style adjuster", 6, fontValues.length);
jqUnit.assertEquals("Initialization: There are 7 font values in font style adjuster", 7, fontValues.length);
jqUnit.assertTrue("Initialization: There is a default font value", fontValues.indexOf("default") !== -1);

jqUnit.assertEquals("Initialization: The onPrefsEditorRefresh event has been called once", 1, prefsEditor.refreshCount);
Expand Down