Skip to content

Commit

Permalink
Merge pull request #21 from wilsonpage/1124582
Browse files Browse the repository at this point in the history 
Bug 1124582 - [RTL][Video]The title '1 selected' does not read right to left
  • Loading branch information
@wilsonpage
wilsonpage committed Jan 30, 2015
2 parents af0dd21 + f1fcc81 commit fd2d4a6
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 25 deletions.
29 changes: 25 additions & 4 deletions dist/gaia-header.js
View file
Expand Up @@ -735,17 +735,22 @@ module.exports = component.register('gaia-header', {
* Fit text and center a title between
* the buttons before and after.
*
* Right now, because gaia-header is not
* fully rtl-compatible (due to Gaia),
* we're using `marginLeft` etc. These
* will be changed to `marginStart` etc
* when we become fully RTL.
*
* @param {HTMLH1Element} title
* @param {Number} space
* @return {Promise}
* @private
*/
setTitleStyle: function(el, style) {
debug('set title style', style);
this.observerStop();
el.style.MozMarginStart = style.marginStart + 'px';
el.style.MozPaddingStart = style.padding.start + 'px';
el.style.MozPaddingEnd = style.padding.end + 'px';
el.style.marginLeft = style.marginStart + 'px';
el.style.paddingLeft = style.padding.start + 'px';
el.style.paddingRight = style.padding.end + 'px';
el.style.fontSize = style.fontSize + 'px';
setStyleId(el, style.id);
this.observerStart();
Expand Down Expand Up @@ -1224,6 +1229,22 @@ module.exports = component.register('gaia-header', {
inherit))));
}
/**
* [dir=rtl]
*
* When the document is in RTL mode we still
* want the <h1> text to be reversed to that
* strings like '1 selected' become 'selected 1'.
*
* When we're happy for gaia-header to be fully
* RTL responsive we won't need this rule anymore,
* but this depends on all Gaia apps being ready.
*/
:host-context([dir=rtl]) ::content h1 {
direction: rtl;
}
/** Buttons
---------------------------------------------------------*/
Expand Down
29 changes: 25 additions & 4 deletions gaia-header.js
View file
Expand Up @@ -270,17 +270,22 @@ module.exports = component.register('gaia-header', {
* Fit text and center a title between
* the buttons before and after.
*
* Right now, because gaia-header is not
* fully rtl-compatible (due to Gaia),
* we're using `marginLeft` etc. These
* will be changed to `marginStart` etc
* when we become fully RTL.
*
* @param {HTMLH1Element} title
* @param {Number} space
* @return {Promise}
* @private
*/
setTitleStyle: function(el, style) {
debug('set title style', style);
this.observerStop();
el.style.MozMarginStart = style.marginStart + 'px';
el.style.MozPaddingStart = style.padding.start + 'px';
el.style.MozPaddingEnd = style.padding.end + 'px';
el.style.marginLeft = style.marginStart + 'px';
el.style.paddingLeft = style.padding.start + 'px';
el.style.paddingRight = style.padding.end + 'px';
el.style.fontSize = style.fontSize + 'px';
setStyleId(el, style.id);
this.observerStart();
Expand Down Expand Up @@ -759,6 +764,22 @@ module.exports = component.register('gaia-header', {
inherit))));
}
/**
* [dir=rtl]
*
* When the document is in RTL mode we still
* want the <h1> text to be reversed to that
* strings like '1 selected' become 'selected 1'.
*
* When we're happy for gaia-header to be fully
* RTL responsive we won't need this rule anymore,
* but this depends on all Gaia apps being ready.
*/
:host-context([dir=rtl]) ::content h1 {
direction: rtl;
}
/** Buttons
---------------------------------------------------------*/
Expand Down
6 changes: 6 additions & 0 deletions index.html
View file
Expand Up @@ -106,6 +106,12 @@ <h1><span>Ḿḗḗşşȧȧɠḗḗş</span></h1>
<button data-icon="compose"></button>
</gaia-header>

<gaia-header>
<h1>1 Selected</h1>
<button>Refresh</button>
</gaia-header>


<div id="message"></div>

<button id="append">Append a header</button>
Expand Down
34 changes: 17 additions & 17 deletions test/test.js
View file
Expand Up @@ -142,14 +142,14 @@ suite('GaiaHeader', function() {

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.fontSize, '', 'font-size should not have been set');
assert.equal(h1.style.MozMarginStart, '', 'margin should not have been set');
assert.equal(h1.style.marginLeft, '', 'margin should not have been set');

h1.textContent = 'Localized title';
return afterNext(el, 'runFontFit');
}).then(() => {
sinon.assert.calledOnce(this.fontFit);
assert.equal(h1.style.fontSize, '24px', 'font-size has been set');
assert.equal(h1.style.MozMarginStart, '-50px', 'margin has been set');
assert.equal(h1.style.marginLeft, '-50px', 'margin has been set');
}).then(done, done);
});

Expand All @@ -161,7 +161,7 @@ suite('GaiaHeader', function() {

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.fontSize, '', 'font-size should not have been set');
assert.equal(h1.style.MozMarginStart, '', 'margin should not have been set');
assert.equal(h1.style.marginLeft, '', 'margin should not have been set');
sinon.assert.notCalled(this.fontFit);
}).then(done, done);
});
Expand All @@ -174,7 +174,7 @@ suite('GaiaHeader', function() {

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.fontSize, '24px');
assert.equal(h1.style.MozMarginStart, '-50px');
assert.equal(h1.style.marginLeft, '-50px');

h1.textContent = 'Title';
h1.setAttribute('foo', 'bar');
Expand Down Expand Up @@ -360,31 +360,31 @@ suite('GaiaHeader', function() {
});

test('are correctly taken into account', function() {
assert.equal(h1.style.MozMarginStart, '50px');
assert.equal(h1.style.marginLeft, '50px');
});

test('changing start attribute is taken into account', function(done) {
el.setAttribute('title-start', '0');

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.MozMarginStart, '100px');
assert.equal(h1.style.marginLeft, '100px');
el.removeAttribute('title-start');
return afterNext(el, 'runFontFit');
}).then(() => {
assert.equal(h1.style.MozMarginStart, '100px');
assert.equal(h1.style.marginLeft, '100px');
}).then(done, done);
});

test('changing end attribute is taken into account', function(done) {
assert.equal(h1.style.MozMarginStart, '50px');
assert.equal(h1.style.marginLeft, '50px');
el.setAttribute('title-end', '0');

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.MozMarginStart, '-50px');
assert.equal(h1.style.marginLeft, '-50px');
el.removeAttribute('title-end');
return afterNext(el, 'runFontFit');
}).then(() => {
assert.equal(h1.style.MozMarginStart, '-50px');
assert.equal(h1.style.marginLeft, '-50px');
}).then(done, done);
});

Expand Down Expand Up @@ -704,7 +704,7 @@ suite('GaiaHeader', function() {
var h1 = el.querySelector('h1');

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.MozMarginStart, '50px');
assert.equal(h1.style.marginLeft, '50px');

this.dom.innerHTML = `<gaia-header action="menu">
<h1>Header title</h1>
Expand All @@ -715,7 +715,7 @@ suite('GaiaHeader', function() {

return afterNext(el, 'runFontFit');
}).then(() => {
assert.equal(h1.style.MozMarginStart, '-50px');
assert.equal(h1.style.marginLeft, '-50px');
}).then(done, done);
});

Expand All @@ -730,7 +730,7 @@ suite('GaiaHeader', function() {
var h1 = el.querySelector('h1');

afterNext(el, 'runFontFit').then(() => {
assert.equal(h1.style.MozMarginStart, '0px');
assert.equal(h1.style.marginLeft, '0px');
}).then(done, done);
});

Expand Down Expand Up @@ -878,17 +878,17 @@ suite('GaiaHeader', function() {
var title2 = el.querySelector('.title-2');

afterNext(el, 'runFontFit').then(() => {
assert.equal(title1.style.MozMarginStart, '50px');
assert.equal(title2.style.MozMarginStart, '50px');
assert.equal(title1.style.marginLeft, '50px');
assert.equal(title2.style.marginLeft, '50px');
}).then(() => {
this.fontFit.reset();
title1.hidden = true;
title2.hidden = false;
return afterNext(el, 'runFontFit');
}).then(() => {
sinon.assert.notCalled(this.fontFit, 'font-fit not required');
assert.equal(title1.style.MozMarginStart, '50px');
assert.equal(title2.style.MozMarginStart, '50px');
assert.equal(title1.style.marginLeft, '50px');
assert.equal(title2.style.marginLeft, '50px');
}).then(done, done);
});

Expand Down

0 comments on commit fd2d4a6

Please sign in to comment.