Improve implementation of i18n for Install Flow following comments on #611
* Move install flow i18n logic to install_view.js (from options.js) * Switch to using placeholders (instead of jQuery) for i18n messages with html. * Switch to using moustache template instead of jQuery for i18n substitution. // FREEBIE
This commit is contained in:
Sam Lanning
lilia
parent
0825d3e22f
commit
ac25b62fdc
6 changed files with 99 additions and 87 deletions
|
|
@ -115,15 +115,27 @@
|
|||
"message": "Get started"
|
||||
},
|
||||
"installSignalLink": {
|
||||
"message": "First, install <a>Signal</a> on your Android phone.<br /> We'll link your devices and keep your messages in sync.",
|
||||
"description": "Prompt the user to install Signal on Android before pairing"
|
||||
"message": "First, install <a $a_params$>Signal</a> on your Android phone.<br /> We'll link your devices and keep your messages in sync.",
|
||||
"description": "Prompt the user to install Signal on Android before pairing",
|
||||
"placeholders": {
|
||||
"a_params": {
|
||||
"content": "$1",
|
||||
"example": "href='http://example.com'"
|
||||
}
|
||||
}
|
||||
},
|
||||
"installIHaveSignalButton": {
|
||||
"message": "I have Signal for Android",
|
||||
"description": "Button for the user to confirm that they have Signal for Android"
|
||||
},
|
||||
"installFollowUs": {
|
||||
"message": "<a>Follow us</a> for updates about multi-device support for iOS."
|
||||
"message": "<a $a_params$>Follow us</a> for updates about multi-device support for iOS.",
|
||||
"placeholders": {
|
||||
"a_params": {
|
||||
"content": "$1",
|
||||
"example": "href='http://example.com'"
|
||||
}
|
||||
}
|
||||
},
|
||||
"installAndroidInstructions": {
|
||||
"message": "Open Signal on your phone and navigate to Settings > Devices. Tap the button to add a new device, then scan the code above."
|
||||
|
|
|
|||
|
|
@ -158,8 +158,8 @@
|
|||
};
|
||||
|
||||
// Translate
|
||||
window.i18n = function(message) {
|
||||
return chrome.i18n.getMessage(message);
|
||||
window.i18n = function(message, substitutions) {
|
||||
return chrome.i18n.getMessage(message, substitutions);
|
||||
};
|
||||
|
||||
window.textsecure = window.textsecure || {};
|
||||
|
|
|
|||
|
|
@ -58,31 +58,4 @@
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Apply i18n
|
||||
$(document).ready(function(){
|
||||
// Basic Substitution
|
||||
$('[data-i18n]').each(function(){
|
||||
var $this = $(this);
|
||||
$this.text(i18n($this.data('i18n')));
|
||||
});
|
||||
|
||||
// Text with link to Play Store
|
||||
var $installSignalLinkContent = $('<span>' + i18n('installSignalLink') + '</span>');
|
||||
$installSignalLinkContent.find('a').attr({
|
||||
class: 'link',
|
||||
href: 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms',
|
||||
target: '_blank'
|
||||
});
|
||||
$('#installSignalLink').append($installSignalLinkContent);
|
||||
|
||||
// Text with link to Twitter
|
||||
var $installFollowUsContent = $('<span>' + i18n('installFollowUs') + '</span>');
|
||||
$installFollowUsContent.find('a').attr({
|
||||
class: 'link',
|
||||
href: 'https://twitter.com/whispersystems',
|
||||
target: '_blank'
|
||||
});
|
||||
$('#installFollowUs').append($installFollowUsContent);
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -6,8 +6,30 @@
|
|||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.InstallView = Whisper.View.extend({
|
||||
templateName: 'install_flow_template',
|
||||
render_attributes: function() {
|
||||
var installSignalHref = 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms';
|
||||
var twitterHref = 'https://twitter.com/whispersystems';
|
||||
return {
|
||||
installWelcome: i18n('installWelcome'),
|
||||
installTagline: i18n('installTagline'),
|
||||
installGetStartedButton: i18n('installGetStartedButton'),
|
||||
installSignalLink: this.i18n_with_link('installSignalLink', installSignalHref),
|
||||
installIHaveSignalButton: i18n('installIHaveSignalButton'),
|
||||
installFollowUs: this.i18n_with_link('installFollowUs', twitterHref),
|
||||
installAndroidInstructions: i18n('installAndroidInstructions'),
|
||||
installLinkingWithNumber: i18n('installLinkingWithNumber'),
|
||||
installComputerName: i18n('installComputerName'),
|
||||
installFinalButton: i18n('installFinalButton'),
|
||||
installTooManyDevices: i18n('installTooManyDevices'),
|
||||
ok: i18n('ok'),
|
||||
};
|
||||
},
|
||||
initialize: function(options) {
|
||||
this.counter = 0;
|
||||
|
||||
this.render();
|
||||
|
||||
this.$('#device-name').val(options.deviceName);
|
||||
this.$('#step1').show();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -56,6 +56,10 @@
|
|||
});
|
||||
this.$el.append(dialog.el);
|
||||
}.bind(this));
|
||||
},
|
||||
i18n_with_link: function(message, href){
|
||||
var attrs = 'class="link" href="' + encodeURI(href) + '" target="_blank"';
|
||||
return i18n(message, attrs);
|
||||
}
|
||||
},{
|
||||
// Class attributes
|
||||
|
|
|
|||
111
options.html
111
options.html
|
|
@ -8,72 +8,73 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id='install' class='main'>
|
||||
<div id='step1' class='step'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='nav'>
|
||||
<h1 data-i18n='installWelcome'></h1>
|
||||
<p data-i18n='installTagline'></p>
|
||||
<div> <a class='button step2' data-i18n='installGetStartedButton'></a> </div>
|
||||
<span class='dot step1 selected'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3'></span>
|
||||
<script type='text/x-tmpl-mustache' id='install_flow_template'>
|
||||
<div id='step1' class='step'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='nav'>
|
||||
<h1>{{ installWelcome }}</h1>
|
||||
<p>{{ installTagline }}</p>
|
||||
<div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
|
||||
<span class='dot step1 selected'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step2' class='step'>
|
||||
<img id='signal-phone' src='/images/signal-phone.png'>
|
||||
<div class='nav'>
|
||||
<p id="installSignalLink"></p>
|
||||
<div> <a class='button step3' data-i18n='installIHaveSignalButton'></a> </div>
|
||||
<p id="installFollowUs"></p>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2 selected'></span>
|
||||
<span class='dot step3'></span>
|
||||
<div id='step2' class='step'>
|
||||
<img id='signal-phone' src='/images/signal-phone.png'>
|
||||
<div class='nav'>
|
||||
<p>{{{ installSignalLink }}}</p>
|
||||
<div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
|
||||
<p>{{{ installFollowUs }}}</p>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2 selected'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step3' class='step'>
|
||||
<div id="qr"></div>
|
||||
<p data-i18n='installAndroidInstructions'></p>
|
||||
<div class='nav'>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3 selected'></span>
|
||||
<div id='step3' class='step'>
|
||||
<div id="qr"></div>
|
||||
<p>{{ installAndroidInstructions }}</p>
|
||||
<div class='nav'>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3 selected'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step4' class='step'>
|
||||
<p data-i18n='installLinkingWithNumber'></p>
|
||||
<h2 class='number'></h2>
|
||||
<img id='signal-computer' src='/images/signal-laptop.png'>
|
||||
<p data-i18n='installComputerName'></p>
|
||||
<div>
|
||||
<input type='text' id='device-name' spellcheck='false'></input>
|
||||
<div id='step4' class='step'>
|
||||
<p>{{ installLinkingWithNumber }}</p>
|
||||
<h2 class='number'></h2>
|
||||
<img id='signal-computer' src='/images/signal-laptop.png'>
|
||||
<p>{{ installComputerName }}</p>
|
||||
<div>
|
||||
<input type='text' id='device-name' spellcheck='false'></input>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button' id='sync'>{{ installFinalButton }}</a> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step5' class='step'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='progress-dialog'>
|
||||
<p class='status'></p>
|
||||
<div class='bar-container'><div class='bar progress-bar'></div></div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button' id='sync' data-i18n='installFinalButton'></a> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step5' class='step'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='progress-dialog'>
|
||||
<p class='status'></p>
|
||||
<div class='bar-container'><div class='bar progress-bar'></div></div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='stepTooManyDevices' class='step'>
|
||||
<div class='error-dialog clearfix'>
|
||||
<div class='panel' data-i18n='installTooManyDevices'></div>
|
||||
<div class='nav'>
|
||||
<button class='ok step3' data-i18n='ok'></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='stepTooManyDevices' class='step'>
|
||||
<div class='error-dialog clearfix'>
|
||||
<div class='panel'>{{ installTooManyDevices }}</div>
|
||||
<div class='nav'>
|
||||
<button class='ok step3'>{{ ok }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue