From d0867a7cee5e0e90bf7a778390457d8f3c358f47 Mon Sep 17 00:00:00 2001 From: Rayron Victor Date: Sat, 29 Sep 2018 06:46:58 -0300 Subject: [PATCH] Using dropdown to select the language and localized to Brazilian Portuguese (#2384) * using dropdown to select the language * Brazilian portuguese idiome * lang: change the select language dropdown label to "Languages" instead of showing the current language. * lang: change the select language dropdown label to "Languages" instead of showing the current language. * Select language from login and register * Refactored SelectLang component * Localized login to portuguese --- src/components/GlobalHeader/RightContent.js | 27 +-- src/components/Login/index.less | 42 ++-- src/components/SelectLang/index.js | 29 +++ src/components/SelectLang/index.less | 14 ++ src/layouts/UserLayout.js | 4 + src/layouts/UserLayout.less | 12 +- src/locales/en-US.js | 2 +- src/locales/pt-BR.js | 239 ++++++++++++++++++++ src/locales/zh-CN.js | 2 +- 9 files changed, 326 insertions(+), 45 deletions(-) create mode 100644 src/components/SelectLang/index.js create mode 100644 src/components/SelectLang/index.less create mode 100644 src/locales/pt-BR.js diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js index a77190fa..74d49454 100644 --- a/src/components/GlobalHeader/RightContent.js +++ b/src/components/GlobalHeader/RightContent.js @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react'; -import { FormattedMessage, formatMessage, setLocale, getLocale } from 'umi/locale'; -import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip, Button } from 'antd'; +import { FormattedMessage, formatMessage } from 'umi/locale'; +import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd'; import moment from 'moment'; import groupBy from 'lodash/groupBy'; import NoticeIcon from '../NoticeIcon'; import HeaderSearch from '../HeaderSearch'; +import SelectLang from '../SelectLang'; import styles from './index.less'; export default class GlobalHeaderRight extends PureComponent { @@ -39,15 +40,6 @@ export default class GlobalHeaderRight extends PureComponent { return groupBy(newNotices, 'type'); } - changLang = () => { - const locale = getLocale(); - if (!locale || locale === 'zh-CN') { - setLocale('en-US'); - } else { - setLocale('zh-CN'); - } - }; - render() { const { currentUser, @@ -156,18 +148,7 @@ export default class GlobalHeaderRight extends PureComponent { ) : ( )} - + ); } diff --git a/src/components/Login/index.less b/src/components/Login/index.less index e0a984cd..e94adc47 100644 --- a/src/components/Login/index.less +++ b/src/components/Login/index.less @@ -1,20 +1,6 @@ @import '~antd/lib/style/themes/default.less'; .login { - .tabs { - padding: 0 2px; - margin: 0 -2px; - :global { - .ant-tabs-tab { - font-size: 16px; - line-height: 24px; - } - .ant-input-affix-wrapper .ant-input:not(:first-child) { - padding-left: 34px; - } - } - } - :global { .ant-tabs .ant-tabs-bar { border-bottom: 0; @@ -27,16 +13,34 @@ } } + .icon { + font-size: 24px; + color: rgba(0, 0, 0, 0.2); + margin-left: 16px; + vertical-align: middle; + cursor: pointer; + transition: color 0.3s; + + &:hover { + color: @primary-color; + } + } + + .other { + text-align: left; + margin-top: 24px; + line-height: 22px; + + .register { + float: right; + } + } + .prefixIcon { font-size: @font-size-base; color: @disabled-color; } - .getCaptcha { - display: block; - width: 100%; - } - .submit { width: 100%; margin-top: 24px; diff --git a/src/components/SelectLang/index.js b/src/components/SelectLang/index.js new file mode 100644 index 00000000..f0b074ea --- /dev/null +++ b/src/components/SelectLang/index.js @@ -0,0 +1,29 @@ +import React, { PureComponent } from 'react'; +import { FormattedMessage, setLocale, getLocale } from 'umi/locale'; +import { Menu, Icon, Dropdown } from 'antd'; +import classNames from 'classnames'; +import styles from './index.less'; + +export default class SelectLang extends PureComponent { + changLang = ({ key }) => { + setLocale(key); + }; + + render() { + const { className } = this.props; + const langMenu = ( + + 中文 + English + Português + + ); + return ( + + + + + + ); + } +} diff --git a/src/components/SelectLang/index.less b/src/components/SelectLang/index.less new file mode 100644 index 00000000..8dcf29c4 --- /dev/null +++ b/src/components/SelectLang/index.less @@ -0,0 +1,14 @@ +@import '~antd/lib/style/themes/default.less'; + +.menu { + :global(.anticon) { + margin-right: 8px; + } + :global(.ant-dropdown-menu-item) { + width: 160px; + } +} + +.dropdown { + cursor: pointer; +} diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js index 55b0ab1c..16b70ac7 100644 --- a/src/layouts/UserLayout.js +++ b/src/layouts/UserLayout.js @@ -3,6 +3,7 @@ import { formatMessage } from 'umi/locale'; import Link from 'umi/link'; import { Icon } from 'antd'; import GlobalFooter from '@/components/GlobalFooter'; +import SelectLang from '@/components/SelectLang'; import styles from './UserLayout.less'; import logo from '../assets/logo.svg'; @@ -47,6 +48,9 @@ class UserLayout extends React.PureComponent { return ( // @TODO
+
+ +
diff --git a/src/layouts/UserLayout.less b/src/layouts/UserLayout.less index 7f68b07b..386b1c82 100644 --- a/src/layouts/UserLayout.less +++ b/src/layouts/UserLayout.less @@ -8,6 +8,16 @@ background: @layout-body-background; } +.lang { + text-align: right; + width: 100%; + height: 40px; + line-height: 44px; + :global(.ant-dropdown-trigger) { + margin-right: 8px; + } +} + .content { padding: 32px 0; flex: 1; @@ -22,7 +32,7 @@ } .content { - padding: 112px 0 24px 0; + padding: 72px 0 24px 0; } } diff --git a/src/locales/en-US.js b/src/locales/en-US.js index a05cdc27..5526359a 100644 --- a/src/locales/en-US.js +++ b/src/locales/en-US.js @@ -1,5 +1,5 @@ export default { - 'navbar.lang': '中文', + 'navbar.lang': 'Languages', 'layout.user.link.help': 'help', 'layout.user.link.privacy': 'privacy', 'layout.user.link.terms': 'terms', diff --git a/src/locales/pt-BR.js b/src/locales/pt-BR.js new file mode 100644 index 00000000..14191006 --- /dev/null +++ b/src/locales/pt-BR.js @@ -0,0 +1,239 @@ +export default { + 'navbar.lang': 'Idiomas', + 'layout.user.link.help': 'ajuda', + 'layout.user.link.privacy': 'política de privacidade', + 'layout.user.link.terms': 'termos de serviços', + 'validation.email.required': 'Por favor insira seu email!', + 'validation.email.wrong-format': 'O email está errado!', + 'validation.password.required': 'Por favor insira sua senha!', + 'validation.password.twice': 'As senhas não estão iguais!', + 'validation.password.strength.msg': + 'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.', + 'validation.password.strength.strong': 'Força: forte', + 'validation.password.strength.medium': 'Força: média', + 'validation.password.strength.short': 'Força: curta', + 'validation.confirm-password.required': 'Por favor confirme sua senha!', + 'validation.phone-number.required': 'Por favor insira seu telefone!', + 'validation.phone-number.wrong-format': 'Formato de telefone errado!', + 'validation.verification-code.required': 'Por favor insira seu código de verificação!', + 'form.email.placeholder': 'Email', + 'form.password.placeholder': 'Senha', + 'form.confirm-password.placeholder': 'Confirme a senha', + 'form.phone-number.placeholder': 'Telefone', + 'form.verification-code.placeholder': 'Código de verificação', + 'component.globalHeader.search': 'Busca', + 'component.globalHeader.search.example1': 'Exemplo de busca 1', + 'component.globalHeader.search.example2': 'Exemplo de busca 2', + 'component.globalHeader.search.example3': 'Exemplo de busca 3', + 'component.globalHeader.help': 'Ajuda', + 'component.globalHeader.notification': 'Notificação', + 'component.globalHeader.notification.empty': 'Você visualizou todas as notificações.', + 'component.globalHeader.message': 'Mensagem', + 'component.globalHeader.message.empty': 'Você visualizou todas as mensagens.', + 'component.globalHeader.event': 'Evento', + 'component.globalHeader.event.empty': 'Você visualizou todos os eventos.', + 'component.noticeIcon.clear': 'Limpar', + 'component.noticeIcon.cleared': 'Limpo', + 'component.noticeIcon.empty': 'Sem notificações', + 'menu.home': 'Início', + 'menu.dashboard': 'Dashboard', + 'menu.dashboard.analysis': 'Análise', + 'menu.dashboard.monitor': 'Monitor', + 'menu.dashboard.workplace': 'Ambiente de Trabalho', + 'menu.form': 'Formulário', + 'menu.form.basicform': 'Formulário Básico', + 'menu.form.stepform': 'Formulário Assistido', + 'menu.form.stepform.info': 'Formulário Assistido(gravar informações de transferência)', + 'menu.form.stepform.confirm': 'Formulário Assistido(confirmar informações de transferência)', + 'menu.form.stepform.result': 'Formulário Assistido(finalizado)', + 'menu.form.advancedform': 'Formulário Avançado', + 'menu.list': 'Lista', + 'menu.list.searchtable': 'Tabela de Busca', + 'menu.list.basiclist': 'Lista Básica', + 'menu.list.cardlist': 'Lista de Card', + 'menu.list.searchlist': 'Lista de Busca', + 'menu.list.searchlist.articles': 'Lista de Busca(artigos)', + 'menu.list.searchlist.projects': 'Lista de Busca(projetos)', + 'menu.list.searchlist.applications': 'Lista de Busca(aplicações)', + 'menu.profile': 'Perfil', + 'menu.profile.basic': 'Perfil Básico', + 'menu.profile.advanced': 'Perfil Avançado', + 'menu.result': 'Resultado', + 'menu.result.success': 'Sucesso', + 'menu.result.fail': 'Falha', + 'menu.exception': 'Exceção', + 'menu.exception.not-permission': '403', + 'menu.exception.not-find': '404', + 'menu.exception.server-error': '500', + 'menu.exception.trigger': 'Disparar', + 'menu.account': 'Conta', + 'menu.account.center': 'Central da Conta', + 'menu.account.settings': 'Configurar Conta', + 'menu.account.trigger': 'Disparar Erro', + 'menu.account.logout': 'Sair', + 'app.login.tab-login-credentials': 'Credenciais', + 'app.login.tab-login-mobile': 'Telefone', + 'app.login.remember-me': 'Lembre-me', + 'app.login.forgot-password': 'Esqueceu sua senha?', + 'app.login.sign-in-with': 'Login com', + 'app.login.signup': 'Cadastre-se', + 'app.login.login': 'Login', + 'app.register.register': 'Cadastro', + 'app.register.get-verification-code': 'Recuperar código', + 'app.register.sing-in': 'Já tem uma conta?', + 'app.register-result.msg': 'Conta：registrada em {email}', + 'app.register-result.activation-email': + 'Um email de ativação foi enviado para o seu email e é válido por 24 horas. Por favor entre no seu email e clique no link de ativação da conta.', + 'app.register-result.back-home': 'Voltar ao Início', + 'app.register-result.view-mailbox': 'Visualizar a caixa de email', + 'app.home.introduce': 'introduzir', + 'app.analysis.test': 'Gongzhuan No.{no} shop', + 'app.analysis.introduce': 'Introduzir', + 'app.analysis.total-sales': 'Vendas Totais', + 'app.analysis.day-sales': 'Vendas do Dia', + 'app.analysis.visits': 'Visitas', + 'app.analysis.visits-trend': 'Tendência de Visitas', + 'app.analysis.visits-ranking': 'Ranking de Visitas', + 'app.analysis.day-visits': 'Visitas do Dia', + 'app.analysis.week': 'Taxa Semanal', + 'app.analysis.day': 'Taxa Diária', + 'app.analysis.payments': 'Pagamentos', + 'app.analysis.conversion-rate': 'Taxa de Conversão', + 'app.analysis.operational-effect': 'Efeito Operacional', + 'app.analysis.sales-trend': 'Tendência de Vendas das Lojas', + 'app.analysis.sales-ranking': 'Ranking de Vendas', + 'app.analysis.all-year': 'Todo ano', + 'app.analysis.all-month': 'Todo mês', + 'app.analysis.all-week': 'Toda semana', + 'app.analysis.all-day': 'Todo dia', + 'app.analysis.search-users': 'Pesquisa de Usuários', + 'app.analysis.per-capita-search': 'Busca Per Capta', + 'app.analysis.online-top-search': 'Mais Buscadas Online', + 'app.analysis.the-proportion-of-sales': 'The Proportion Of Sales', + 'app.analysis.channel.all': 'Tudo', + 'app.analysis.channel.online': 'Online', + 'app.analysis.channel.stores': 'Lojas', + 'app.analysis.sales': 'Vendas', + 'app.analysis.traffic': 'Tráfego', + 'app.analysis.table.rank': 'Rank', + 'app.analysis.table.search-keyword': 'Palavra chave', + 'app.analysis.table.users': 'Usuários', + 'app.analysis.table.weekly-range': 'Faixa Semanal', + 'app.settings.menuMap.basic': 'Configurações Básicas', + 'app.settings.menuMap.security': 'Configurações de Segurança', + 'app.settings.menuMap.binding': 'Vinculação de Conta', + 'app.settings.menuMap.notification': 'Mensagens de Notificação', + 'app.settings.basic.avatar': 'Alterar avatar', + 'app.settings.basic.email': 'Email', + 'app.settings.basic.email-message': 'Por favor insira seu email!', + 'app.settings.basic.nickname': 'Nome de usuário', + 'app.settings.basic.nickname-message': 'Por favor insira seu nome de usuário!', + 'app.settings.basic.profile': 'Perfil pessoal', + 'app.settings.basic.profile-message': 'Por favor insira seu perfil pessoal!', + 'app.settings.basic.profile-placeholder': 'Breve introdução sua', + 'app.settings.basic.country': 'País/Região', + 'app.settings.basic.country-message': 'Por favor insira país!', + 'app.settings.basic.geographic': 'Província, estado ou cidade', + 'app.settings.basic.geographic-message': 'Por favor insira suas informações geográficas!', + 'app.settings.basic.address': 'Endereço', + 'app.settings.basic.address-message': 'Por favor insira seu endereço!', + 'app.settings.basic.phone': 'Número de telefone', + 'app.settings.basic.phone-message': 'Por favor insira seu número de telefone!', + 'app.settings.basic.update': 'Atualizar Informações', + 'app.settings.security.strong': 'Forte', + 'app.settings.security.medium': 'Média', + 'app.settings.security.weak': 'Fraca', + 'app.settings.security.password': 'Senha da Conta', + 'app.settings.security.password-description': 'Força da senha', + 'app.settings.security.phone': 'Telefone de Seguraça', + 'app.settings.security.phone-description': 'Telefone vinculado', + 'app.settings.security.question': 'Pergunta de Segurança', + 'app.settings.security.question-description': + 'A pergunta de segurança não está definida e a política de segurança pode proteger efetivamente a segurança da conta', + 'app.settings.security.email': 'Email de Backup', + 'app.settings.security.email-description': 'Email vinculado', + 'app.settings.security.mfa': 'Dispositivo MFA', + 'app.settings.security.mfa-description': + 'O dispositivo MFA não vinculado, após a vinculação, pode ser confirmado duas vezes', + 'app.settings.security.modify': 'Modificar', + 'app.settings.security.set': 'Atribuir', + 'app.settings.security.bind': 'Vincular', + 'app.settings.binding.taobao': 'Vincular Taobao', + 'app.settings.binding.taobao-description': 'Atualmente não vinculado à conta Taobao', + 'app.settings.binding.alipay': 'Vincular Alipay', + 'app.settings.binding.alipay-description': 'Atualmente não vinculado à conta Alipay', + 'app.settings.binding.dingding': 'Vincular DingTalk', + 'app.settings.binding.dingding-description': 'Atualmente não vinculado à conta DingTalk', + 'app.settings.binding.bind': 'Vincular', + 'app.settings.notification.password': 'Senha da Conta', + 'app.settings.notification.password-description': + 'Mensagens de outros usuários serão notificadas na forma de uma estação de letra', + 'app.settings.notification.messages': 'Mensagens de Sistema', + 'app.settings.notification.messages-description': + 'Mensagens de sistema serão notificadas na forma de uma estação de letra', + 'app.settings.notification.todo': 'Notificação de To-do', + 'app.settings.notification.todo-description': + 'A lista de to-do será notificada na forma de uma estação de letra', + 'app.settings.open': 'Aberto', + 'app.settings.close': 'Fechado', + 'app.exception.back': 'Voltar para Início', + 'app.exception.description.403': 'Desculpe, você não tem acesso a esta página', + 'app.exception.description.404': 'Desculpe, a página que você visitou não existe', + 'app.exception.description.500': 'Desculpe, o servidor está reportando um erro', + 'app.result.error.title': 'A Submissão Falhou', + 'app.result.error.description': + 'Por favor, verifique e modifique as seguintes informações antes de reenviar.', + 'app.result.error.hint-title': 'O conteúdo que você enviou tem o seguinte erro:', + 'app.result.error.hint-text1': 'Sua conta foi congelada', + 'app.result.error.hint-btn1': 'Descongele imediatamente', + 'app.result.error.hint-text2': 'Sua conta ainda não está qualificada para se candidatar', + 'app.result.error.hint-btn2': 'Atualizar imediatamente', + 'app.result.error.btn-text': 'Retornar para modificar', + 'app.result.success.title': 'A Submissão foi um Sucesso', + 'app.result.success.description': + 'A página de resultados de envio é usada para fornecer os resultados de uma série de tarefas operacionais. Se for uma operação simples, use o prompt de feedback de Mensagem global. Esta área de texto pode mostrar uma explicação suplementar simples. Se houver um requisito semelhante para exibir "documentos", a área cinza a seguir pode apresentar um conteúdo mais complicado.', + 'app.result.success.operate-title': 'Nome do Projeto', + 'app.result.success.operate-id': 'ID do Projeto：', + 'app.result.success.principal': 'Principal：', + 'app.result.success.operate-time': 'Tempo efetivo：', + 'app.result.success.step1-title': 'Criar projeto', + 'app.result.success.step1-operator': 'Qu Lili', + 'app.result.success.step2-title': 'Revisão preliminar do departamento', + 'app.result.success.step2-operator': 'Zhou Maomao', + 'app.result.success.step2-extra': 'Urge', + 'app.result.success.step3-title': 'Revisão financeira', + 'app.result.success.step4-title': 'Terminar', + 'app.result.success.btn-return': 'Voltar a lista', + 'app.result.success.btn-project': 'Ver projeto', + 'app.result.success.btn-print': 'imprimir', + 'app.setting.pagestyle': 'Configuração de estilo da página', + 'app.setting.pagestyle.dark': 'Dark style', + 'app.setting.pagestyle.light': 'Light style', + 'app.setting.content-width': 'Largura do conteúdo', + 'app.setting.content-width.fixed': 'Fixo', + 'app.setting.content-width.fluid': 'Fluido', + 'app.setting.themecolor': 'Cor do Tema', + 'app.setting.themecolor.dust': 'Dust Red', + 'app.setting.themecolor.volcano': 'Volcano', + 'app.setting.themecolor.sunset': 'Sunset Orange', + 'app.setting.themecolor.cyan': 'Cyan', + 'app.setting.themecolor.green': 'Polar Green', + 'app.setting.themecolor.daybreak': 'Daybreak Blue (default)', + 'app.setting.themecolor.geekblue': 'Geek Glue', + 'app.setting.themecolor.purple': 'Golden Purple', + 'app.setting.navigationmode': 'Modo de Navegação', + 'app.setting.sidemenu': 'Leioute de Menu Lateral', + 'app.setting.topmenu': 'Leioute de Menu Superior', + 'app.setting.fixedheader': 'Cabeçalho fixo', + 'app.setting.fixedsidebar': 'Barra lateral fixa', + 'app.setting.fixedsidebar.hint': 'Funciona no leioute de menu lateral', + 'app.setting.hideheader': 'Esconder o cabeçalho quando rolar', + 'app.setting.hideheader.hint': 'Funciona quando o esconder cabeçalho está abilitado', + 'app.setting.othersettings': 'Outras configurações', + 'app.setting.weakmode': 'Weak Mode', + 'app.setting.copy': 'Copiar Configuração', + 'app.setting.copyinfo': + 'copiado com sucesso，por favor trocar o defaultSettings em src/models/setting.js', + 'app.setting.production.hint': + 'O painel de configuração apenas é exibido no ambiente de desenvolvimento, por favor modifique manualmente o', +}; diff --git a/src/locales/zh-CN.js b/src/locales/zh-CN.js index 7207de2a..b50ece0c 100644 --- a/src/locales/zh-CN.js +++ b/src/locales/zh-CN.js @@ -1,7 +1,7 @@ // import zhMessages from '../../locales/zh.json'; export default { - 'navbar.lang': 'English', + 'navbar.lang': '语言', 'layout.user.link.help': '帮助', 'layout.user.link.privacy': '隐私', 'layout.user.link.terms': '条款', -- GitLab