Merge pull request #16 from Hand-Talk/dev

v3.6.7
Hand-Talk · Sep 20, 2018 · 6dd5454 · 6dd5454
2 parents 9f433b6 + 6e86ca2
commit 6dd5454
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "start": "npm run clear-build & gulp serve",
     "clear-build": "rm -r build/",
     "build": "gulp",
-    "deploy": "./deploy.sh"
+    "deploy": "npm run clear-build && ./deploy.sh"
   },
   "repository": {
     "type": "git",

diff --git a/source/images/screenshoots/tradutor-mobile.jpg b/source/images/screenshoots/tradutor-mobile.jpg
diff --git a/source/includes/text-translator.md b/source/includes/text-translator.md
@@ -110,9 +110,9 @@ Você pode passar parâmetros especificos para dispositivos movéis, para isso b
 
 Consulte o exemplo ao lado.
 
-<h2 id='customizando-botao-mobile'>Customizando o botão na versão mobile</h2>
+<h2 id='customizando-botao-acessibilidade-mobile'>Customizando o botão de acessibilidade na versão mobile</h2>
 
-> Exemplo de customização do botão
+> Exemplo de customização do botão de acessibilidade mobile
 
 ```html
 <body>
@@ -161,6 +161,43 @@ Você pode utilizar o parâmetro `customButtonStyle` para aplicar uma customiza
 
 Ao invocar `HT`, no parâmetro `mobileConfig`, defina também o objeto `customButtonStyle`. Consulte os exemplos ao lado.
 
+> Exemplo de parâmetro de customização do botão de acessibilidade
+
+```html
+<body>
+
+  <!-- Pega a ultima versão do plugin Hand Talk -->
+  <script src="https://api.handtalk.me/plugin/latest/handtalk.min.js"></script>
+
+  <script>
+  var ht = new HT({
+    // Troque por seu token de acesso
+    token: "<TOKEN>",
+    mobileConfig: {
+      // Aplica uma customizacão no botão de acessibilidade
+      customButtonStyle: {
+        borderRadius: '6px'
+      }
+    }
+  });
+  </script>
+</body>
+```
+
+```javascript
+var ht = new HT({
+  // Troque por seu token de acesso
+  token: 'SEU TOKEN',
+  // Define uma configuração especifica para a versão mobile
+  mobileConfig: {
+    // Aplica uma customizacão no botão de acessibilidade
+    customButtonStyle: {
+      borderRadius: '6px'
+    }
+  }
+});
+```
+
 O objeto `customButtonStyle` suporta os parâmetros:
 
 | Configurações    | Descrição                                                                         | Valores | Padrão    |
@@ -176,7 +213,11 @@ O objeto `customButtonStyle` suporta os parâmetros:
 
 </aside>
 
-> Exemplo de parâmetro de customização do botão
+Você pode definir apenas o parâmetro que deseja aplicar. Com o exemplo ao lado, apenas a borda arredondada será aplicada ao botão. Os demais parâmetros ficarão com os valores padrões da Hand Talk.
+
+<h2 id='alinhamento-botoes-acao-mobile'>Alinhamento dos botões de ação na versão mobile</h2>
+
+> Exemplo de alinhamento dos botões de ação na versão mobile
 
 ```html
 <body>
@@ -188,11 +229,10 @@ O objeto `customButtonStyle` suporta os parâmetros:
   var ht = new HT({
     // Troque por seu token de acesso
     token: "<TOKEN>",
+    // Define uma configuração especifica para a versão mobile
     mobileConfig: {
-      // Aplica uma customizacão no botão de acessibilidade
-      customButtonStyle: {
-        borderRadius: '6px'
-      }
+      // Alinha os botões de ação no topo
+      actionsAlign: 'top'
     }
   });
   </script>
@@ -205,15 +245,24 @@ var ht = new HT({
   token: 'SEU TOKEN',
   // Define uma configuração especifica para a versão mobile
   mobileConfig: {
-    // Aplica uma customizacão no botão de acessibilidade
-    customButtonStyle: {
-      borderRadius: '6px'
-    }
+    // Alinha os botões de ação no topo
+    actionsAlign: 'top'
   }
 });
 ```
 
-Você pode definir apenas o parâmetro que deseja aplicar. Com o exemplo ao lado, apenas a borda arredondada será aplicada ao botão. Os demais parâmetros ficarão com os valores padrões da Hand Talk.
+![](images/screenshoots/custom-button-actions.png)
+
+Os botões de ação incluem o botão **Fechar** e o spin **Carregando**.
+Você pode utilizar o parâmetro `actionsAlign` para alinhar os botões de ação na versão mobile.
+
+Ao invocar `HT`, no parâmetro `mobileConfig`, defina também o atributo `actionsAlign`. Consulte os exemplos ao lado.
+
+Definição de `actionsAlign` suporta os valores:
+
+| Configurações    | Descrição                                                                         | Valores | Padrão    |
+| ---------------- | --------------------------------------------------------------------------------- | ------- | --------- |
+| actionsAlign             | Alinhamento do botões de ação                    | 'bottom' ou 'top'   | 'bottom' |
 
 
 <h2 id='eventos-tradutor-de-sites'>Eventos</h2>