-
[[localize('nav-privacy')]]
-
[[localize('nav-terms')]]
-
[[localize('nav-licenses')]]
+
@@ -471,6 +494,8 @@ export class AppRoot extends mixinBehaviors
return {
// Properties language and useKeyIfMissing are used by Polymer.AppLocalizeBehavior.
language: {type: String, readonly: true},
+ // An array of {id, name, dir} language objects.
+ supportedLanguages: {type: Array, readonly: true},
useKeyIfMissing: {type: Boolean},
serverList: {type: Array},
selectedServer: {type: Object},
@@ -507,6 +532,7 @@ export class AppRoot extends mixinBehaviors
/** @type {DisplayServer} */
this.selectedServer = undefined;
this.language = '';
+ this.supportedLanguages = [];
this.useKeyIfMissing = true;
/** @type {DisplayServer[]} */
this.serverList = [];
@@ -515,7 +541,6 @@ export class AppRoot extends mixinBehaviors
this.currentPage = 'intro';
this.shouldShowSideBar = false;
-
this.addEventListener('RegionSelected', this.handleRegionSelected);
this.addEventListener(
'SetUpGenericCloudProviderRequested', this.handleSetUpGenericCloudProviderRequested);
@@ -526,17 +551,18 @@ export class AppRoot extends mixinBehaviors
/**
* Sets the language and direction for the application
- * @param {string} newLanguage
- * @param {string} langDir
+ * @param {string} language
+ * @param {string} direction
*/
- setLanguage(newLanguage, langDir) {
- const messagesUrl = `./messages/${newLanguage}.json`;
- this.loadResources(messagesUrl, newLanguage);
- if (langDir === 'rtl') {
- this.$.appDrawer.align = 'right';
- this.$.sideBar.align = 'right';
- }
- this.language = newLanguage;
+ setLanguage(language, direction) {
+ const messagesUrl = `./messages/${language}.json`;
+ this.loadResources(messagesUrl, language);
+
+ const alignDir = direction === 'ltr' ? 'left' : 'right';
+ this.$.appDrawer.align = alignDir;
+ this.$.sideBar.align = alignDir;
+
+ this.language = language;
}
showIntro() {
@@ -740,10 +766,12 @@ export class AppRoot extends mixinBehaviors
submitFeedbackTapped() {
this.$.feedbackDialog.open();
+ this.maybeCloseDrawer();
}
aboutTapped() {
this.$.aboutDialog.open();
+ this.maybeCloseDrawer();
}
signOutTapped() {
diff --git a/src/server_manager/web_app/ui_components/outline-language-picker.js b/src/server_manager/web_app/ui_components/outline-language-picker.js
new file mode 100644
index 00000000..21653490
--- /dev/null
+++ b/src/server_manager/web_app/ui_components/outline-language-picker.js
@@ -0,0 +1,93 @@
+/*
+ Copyright 2018 The Outline Authors
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/iron-icon/iron-icon.js';
+import '@polymer/iron-icons/iron-icons.js';
+import './cloud-install-styles.js';
+
+import {html, PolymerElement} from '@polymer/polymer';
+
+export class OutlineLanguagePicker extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+
+
+
+ {{lang.name}}
+
+
+
+
+ `;
+ }
+
+ static get is() {
+ return 'outline-language-picker';
+ }
+
+ static get properties() {
+ return {
+ selectedLanguage: {type: String},
+ // An array of {id, name, dir} language objects.
+ languages: {type: Array, readonly: true},
+ };
+ }
+
+ constructor() {
+ super();
+ this.selectedLanguage = '';
+ /** @type {Array<{id: string, name: string, dir: "rtl"|"ltr"}>} */
+ this.languages = [];
+ }
+
+ _shouldHideCheckmark(language, languageCode) {
+ return language !== languageCode;
+ }
+
+ _languageChanged(event) {
+ const languageCode = event.detail.value;
+ const languageDir = this.languages.find((lang) => {return lang.id === languageCode}).dir;
+
+ const params = {bubbles: true, composed: true, detail: {languageCode, languageDir}};
+ const customEvent = new CustomEvent('SetLanguageRequested', params);
+ this.dispatchEvent(customEvent);
+ }
+}
+
+customElements.define(OutlineLanguagePicker.is, OutlineLanguagePicker);