Tema

Fizemos nossa SDK com uma abordagem de alto nível de personalização, onde toda a configuração da UI pode ser feita em tempo de execução através de configurações usando o construtor da classe ou através do método setConfig.

Em resumo, o objeto de configuração possui duas propriedades para trabalhar o tema:

theme: Mapeado para o tipo IConfigTheme
enableComponents: Mapeado para o tipo IConfigEnableComponents

Abaixo, você pode ver a tipagem dessas duas propriedades de maneira expandida.

typescript

type BoxShadow = {
	offsetX: string;
	offsetY: string;
	color?: string;
	blur?: string;
	spread?: string;
	inset?: boolean;
};

type Border = {
	width: string;
	color: string;
	style: string;
	radius: string;
};

interface IConfigTheme {
	widget: {
		background: string;
		option: {
			foreground: string;
			hoverBackground: string;
			activeBackground: string;
			focusRingColor: string;
		};
		closeButton: {
			foreground: string;
			hoverBackground: string;
			activeBackground: string;
			focusRingColor: string;
		};
		border: Border;
		shadow: BoxShadow[];
	};

	translationWindow: {
		layout: "relative" | "absolute" | "fixed";
		draggable: boolean;
		position: {
			preset:
				| "topLeft"
				| "top"
				| "topRight"
				| "middleLeft"
				| "middleRight"
				| "bottomLeft"
				| "bottom"
				| "bottomRight"
				| "custom";
			top?: string;
			left?: string;
			right?: string;
			bottom?: string;
		};
		background: string;
		width: string;
		height: string;
		border: Border;
		shadow: BoxShadow[];
	};

	rateWindow: {
		background: string;
		foreground: string;
		titleFontSize: string;
		descriptionFontSize: string;
		border: Border;
		shadow: BoxShadow[];
	};

	loading: {
		internal: {
			color: string;
			background: string;
			border: {
				width: string;
				color: string;
				style: string;
				radius: string;
			};
		};
		external: {
			color: string;
		};
	};

	caption: {
		color: string;
		fontSize: string;
	};

	iconButtonContainer: {
		background: string;
		border: Border;
		shadow: BoxShadow[];
	};

	header: {
		background: string;
		foreground: string;
		border: Border;
		shadow: BoxShadow[];
	};

	button: {
		background: string;
		foreground: string;
		hoverBackground: string;
		activeBackground: string;
		focusRingColor: string;
		border: Border;
		shadow: BoxShadow[];
	};

	rateButton: {
		foreground: string;
		hoverBackground: string;
		activeBackground: string;
		focusRingColor: string;
	};

	iconButton: {
		foreground: string;
		hoverBackground: string;
		activeBackground: string;
		focusRingColor: string;
		border: {
			radius: string;
		};
	};

	errorMessage: {
		background: string;
		foreground: string;
		titleFontSize: string;
		iconColor: string;
		descriptionFontSize: string;
		border: Border;
		shadow: BoxShadow[];
	};
}

interface IConfigEnableComponents {
	changeSpeedButton: boolean;
	pauseAnimationButton: boolean;
	stopAnimationButton: boolean;
	repeatAnimationButton: boolean;
	rateAnimationButton: boolean;
	widget: boolean;
	header: boolean;
	caption: boolean;
	zoom: boolean;
	rotate: boolean;
}

Propriedades em Comum

Algumas propriedades em certos componentes são iguais entre si e podem acabar tendo estruturas complexas. Para evitar muita repetição de grandes estruturas, iremos apresenta-las abaixo:

shadow

tipo: BoxShadow[]

É um array de objetos, onde cada objeto possui as seguintes propriedades:

offsetX: string
offsetY: string
blur: string
spread: string
color: string
inset: boolean

Ele serve para definir várias sombras em um elemento.

border

tipo: Border

É um objeto com as seguintes propriedades:

width: string
color: string
style: string
radius: string

Ele serve para definir todas as propriedades de borda de um elemento.

enableComponents

tipo: IConfigEnableComponents
padrão:

json

{
	"caption": true,
	"changeSpeedButton": true,
	"header": true,
	"pauseAnimationButton": true,
	"rateAnimationButton": true,
	"repeatAnimationButton": true,
	"stopAnimationButton": true,
	"widget": true,
	"zoom": true,
	"rotate": true
}

Esse campo serve para habilitar ou desabilitar os componentes da biblioteca. Cada campo é opcional e não é necessário informar todos os valores. Recomendamos utilizar essa propriedade, caso deseje desativar os componentes que a biblioteca fornece e criar suas próprias implementações.

DICA

É possível remover todos os elementos da interface, sendo o avatar 3D o único elemento visível disponível, não podendo ser removido.

caption

tipo: boolean
padrão: true

Habilita ou desabilita a legenda durante traduções.

changeSpeedButton

tipo: boolean
padrão: true

Habilita ou desabilita a o botão que troca a velocidade de tradução.

tipo: boolean
padrão: true

Habilita ou desabilita o cabeçalho da janela de tradução.

pauseAnimationButton

tipo: boolean
padrão: true

Habilita ou desabilita o botão de pausar a tradução.

rateAnimationButton

tipo: boolean
padrão: true

Habilita ou desabilita o botão para abrir a janela de avaliação, seja pelo widget ou pela janela de tradução.

repeatAnimationButton

tipo: boolean
padrão: true

Habilita ou desabilita o botão para repetir a última tradução.

stopAnimationButton

tipo: boolean
padrão: true

Habilita ou desabilita o botão para parar uma tradução.

tipo: boolean
padrão: true

Habilita ou desabilita o widget da biblioteca.

zoom

tipo: boolean
padrão: true

Habilita ou desabilita o zoom no avatar.

rotate

tipo: boolean
padrão: true

Habilita ou desabilita a rotação no avatar.

theme

tipo: object
padrão:

json

{
	"widget": {
		"background": "#EDEDED",
		"border": {
			"color": "#BDBDBD",
			"radius": "12px",
			"style": "solid",
			"width": "1px"
		},
		"option": {
			"foreground": "#2E2E2E",
			"hoverBackground": "#e1e1e1",
			"activeBackground": "#c9c9c9",
			"focusRingColor": "#C64F01"
		},
		"closeButton": {
			"foreground": "#C22929",
			"hoverBackground": "#e1e1e1",
			"activeBackground": "#c9c9c9",
			"focusRingColor": "#C64F01"
		},
		"shadow": [
			{
				"offsetX": "0px",
				"offsetY": "2px",
				"blur": "6px",
				"spread": "2px",
				"color": "rgba(0, 0, 0, 0.15)",
				"inset": false
			},
			{
				"offsetX": "0px",
				"offsetY": "1px",
				"blur": "2px",
				"spread": "0px",
				"color": "rgba(0, 0, 0, 0.08)",
				"inset": false
			}
		]
	},
	"translationWindow": {
		"layout": "fixed",
		"draggable": true,
		"position": {
			"preset": "topRight",
			"top": "",
			"left": "",
			"right": "",
			"bottom": ""
		}
	},
	"loading": {
		"external": {
			"color": "#c64f01"
		},
		"internal": {
			"color": "#FFFFFF",
			"background": "#333333d9",
			"border": {
				"color": "#FFFFFF",
				"width": "0.75px",
				"radius": "10px",
				"style": "solid"
			}
		}
	},
	"caption": { "color": "#2E2E2E2E", "fontSize": "14px" },
	"iconButtonContainer": {
		"background": "#FFFFFF",
		"border": {
			"color": "transparent",
			"radius": "12px",
			"style": "solid",
			"width": "0"
		},
		"shadow": [
			{
				"offsetX": "0px",
				"offsetY": "2px",
				"blur": "6px",
				"spread": "2px",
				"color": "rgba(0, 0, 0, 0.15)",
				"inset": false
			},
			{
				"offsetX": "0px",
				"offsetY": "1px",
				"blur": "2px",
				"spread": "0px",
				"color": "rgba(0, 0, 0, 0.08)",
				"inset": false
			}
		]
	},
	"header": {
		"background": "#FFFFFF",
		"foreground": "#2E2E2E",
		"border": {
			"color": "transparent",
			"radius": "0px",
			"style": "solid",
			"width": "0"
		},
		"shadow": [
			{
				"offsetX": "0px",
				"offsetY": "2px",
				"blur": "6px",
				"spread": "2px",
				"color": "rgba(0, 0, 0, 0.15)",
				"inset": false
			},
			{
				"offsetX": "0px",
				"offsetY": "1px",
				"blur": "2px",
				"spread": "0px",
				"color": "rgba(0, 0, 0, 0.08)",
				"inset": false
			}
		]
	},
	"button": {
		"background": "#c64f01",
		"foreground": "#FFFFFF",
		"hoverBackground": "#b24701",
		"activeBackground": "#9e3f01",
		"focusRingColor": "#c64f01",
		"border": {
			"color": "transparent",
			"radius": "12px",
			"style": "solid",
			"width": "0"
		},
		"shadow": []
	},
	"rateButton": {
		"foreground": "#2E2E2E",
		"hoverBackground": "#e1e1e1",
		"activeBackground": "#c9c9c9",
		"focusRingColor": "#C64F01"
	},
	"iconButton": {
		"foreground": "#2E2E2E",
		"hoverBackground": "#e1e1e1",
		"activeBackground": "#c9c9c9",
		"focusRingColor": "#C64F01",
		"border": {
			"radius": "12px"
		}
	},
	"errorMessage": {
		"background": "#FFF1C5",
		"foreground": "#472201",
		"titleFontSize": "14px",
		"descriptionFontSize": "12px",
		"iconColor": "#BA6A03",
		"shadow": [],
		"border": {
			"color": "#BA6A03",
			"radius": "8px",
			"style": "solid",
			"width": "1px"
		}
	}
}

Esse campo serve para personalizar o estilo dos elementos da biblioteca. Cada campo é opcional e não é necessário informar todos os valores.

background

tipo: string
padrão: #EDEDED

Define a cor de fundo do widget e do menu de opções.

border

Padrões:
- width: 1px
- radius: 12px
- style: solid
- color: #BDBDBD

Veja a estrutura do campo border.

option

tipo: object
padrão:

json

{
	"foreground": "#2E2E2E",
	"hoverBackground": "#e1e1e1",
	"activeBackground": "#c9c9c9",
	"focusRingColor": "#C64F01"
}

Define a estilização de cada opções dentro do menu de opções.

foreground

tipo: string
padrão: #2E2E2E

Define a cor dos textos e ícone do elemento.

hoverBackground

tipo: string
padrão: #e1e1e1

Define a cor de fundo do elemento quando o usuário passar o mouse em cima.

activeBackground

tipo: string
padrão: #c9c9c9

Define a cor de fundo do elemento quando o usuário clicar no elemento.

focusRingColor

tipo: string
padrão: #C64F01

Define a cor do contorno do elemento quando o usuário estiver com o elemento em foco.

closeButton

tipo: object
padrão:

json

{
	"foreground": "#C22929",
	"hoverBackground": "#e1e1e1",
	"activeBackground": "#c9c9c9",
	"focusRingColor": "#C64F01"
}

Define a estilização de uma opção específica do menu de opções: Botão para fechar aplicação.

foreground

tipo: string
padrão: #C22929

Define a cor dos textos e ícone do elemento.

hoverBackground

tipo: string
padrão: #e1e1e1

Define a cor de fundo do elemento quando o usuário passar o mouse em cima.

activeBackground

tipo: string
padrão: #c9c9c9

Define a cor de fundo do elemento quando o usuário clicar no elemento.

focusRingColor

tipo: string
padrão: #C64F01

Define a cor do contorno do elemento quando o usuário estiver com o elemento em foco.

shadow

Padrões:

json

[
	{
		"offsetX": "0px",
		"offsetY": "2px",
		"blur": "6px",
		"spread": "2px",
		"color": "rgba(0, 0, 0, 0.15)",
		"inset": false
	},
	{
		"offsetX": "0px",
		"offsetY": "1px",
		"blur": "2px",
		"spread": "0px",
		"color": "rgba(0, 0, 0, 0.08)",
		"inset": false
	}
]

Veja a estrutura do campo shadow.

translationWindow

layout

tipo: "relative" | "absolute" | "fixed"
padrão: fixed

Define como a janela de tradução vai ser alocado na página, por padrão, ela é fixada na tela.

draggable

tipo: boolean
padrão: true

Define se a janela de tradução (e o widget) pode ser arrastada.

position

tipo: object
padrão:

json

{
	"preset": "topRight",
	"top": "",
	"left": "",
	"right": "",
	"bottom": ""
}

Exemplo de posicionamento

Propriedade que define a posição da janela de tradução em relação ao elemento pai. Por padrão, a janela se posiciona no canto superior direito. É possível utilizar presets de posicionamento e/ou definir as coordenadas top, left, right e bottom diretamente.

presets: "topLeft" | "top" | "topRight" | "middleLeft" | "middleRight" | "bottomLeft" | "bottom" | "bottomRight" | "custom"

Cada preset vai posicionar o elemento em uma das 8 posições, podendo ser utilizada em conjunto com os campos top, left, right e bottom que irão substituir os posicionamentos setados pelos presets.

Caso não queira usar nenhum preset e definir somente os campos top, left, right e bottom, basta setar o preset com o valor custom.

background

tipo: string
padrão: #EDEDED

Define a cor de fundo da janela de tradução.

width

tipo: string
padrão: 200px

Define a largura da janela de tradução.

height

tipo: string
padrão: 310px

Define a altura da janela de tradução.

border

Padrões:
- width: 1px
- radius: 16px
- style: solid
- color: #BDBDBD

Define a borda da janela de tradução.

Veja a estrutura do campo border.

shadow

Padrões:

json

[
	{
		"offsetX": "0px",
		"offsetY": "2px",
		"blur": "6px",
		"spread": "2px",
		"color": "rgba(0, 0, 0, 0.15)",
		"inset": false
	},
	{
		"offsetX": "0px",
		"offsetY": "1px",
		"blur": "2px",
		"spread": "0px",
		"color": "rgba(0, 0, 0, 0.08)",
		"inset": false
	}
]

Define as sombras da janela de tradução.

Veja a estrutura do campo shadow.

rateWindow

Esse componente serve como uma interface para avaliação da qualidade das traduções e é possível exibi-lo sempre ao final de uma tradução ainda não avaliada na sessão. Ele é composto por outros mini-componentes que também possuem personalização.

background

tipo: string
padrão: #FFFFFF

Define a cor de fundo do elemento.

foreground

tipo: string
padrão: #2E2E2E

Define a cor do elementos textuais internos.

titleFontSize

tipo: string
padrão: 12px

Define a fonte do título do elemento.

descriptionFontSize

tipo: string
padrão: 12px

Define a fonte da descrição do elemento.

border

Padrões:
- width: 0
- radius: 16px 16px 0 0
- style: solid
- color: #000

Veja a estrutura do campo border.

shadow

Padrões:

json

[
	{
		"offsetX": "0px",
		"offsetY": "2px",
		"blur": "6px",
		"spread": "2px",
		"color": "rgba(0, 0, 0, 0.15)",
		"inset": false
	},
	{
		"offsetX": "0px",
		"offsetY": "1px",
		"blur": "2px",
		"spread": "0px",
		"color": "rgba(0, 0, 0, 0.08)",
		"inset": false
	}
]

Veja a estrutura do campo shadow.

loading

O componente de carregamento é dividido entre internal e external.

external: É usado para carregar os dados iniciais do SDK.
internal: É usado entre traduções.

internal

tipo: object
padrão:

json

{
	"color": "#FFFFFF",
	"background": "#333333d9",
	"border": {
		"color": "#FFFFFF",
		"width": "0.75px",
		"radius": "10px",
		"style": "solid"
	}
}

Define como o loading entre traduções deve ser personalizado.

color

tipo: string
padrão: #FFFFFF

Define a cor do spinner em rotação;

background

tipo: string
padrão: #333333d9

Define a cor de fundo do spinner em rotação;

border

Padrões:
- width: 0.75px
- radius: 10px
- style: solid
- color: #FFFFFF

Veja a estrutura do campo border.

external

tipo: object
padrão:

json

{
	"color": "#FFFFFF"
}

Define como o loading para carregamento de dados iniciais do SDK deve ser personalizado.

color

tipo: string
padrão: #FFFFFF

Define a cor do spinner em rotação;

caption

O componente de legenda da tradução atual.

color

tipo: string
padrão: #2E2E2E2E

Define a cor do texto da legenda;

iconButtonContainer

O componente de container para os componentes IconButton.

background

tipo: string
padrão: #FFFFFF

Define a cor de fundo do elemento.

border

Padrões:
- width: 0
- radius: 12px
- style: solid
- color: transparent

Veja a estrutura do campo border.

shadow

Padrões:

json

[
	{
		"offsetX": "0px",
		"offsetY": "2px",
		"blur": "6px",
		"spread": "2px",
		"color": "rgba(0, 0, 0, 0.15)",
		"inset": false
	},
	{
		"offsetX": "0px",
		"offsetY": "1px",
		"blur": "2px",
		"spread": "0px",
		"color": "rgba(0, 0, 0, 0.08)",
		"inset": false
	}
]

Veja a estrutura do campo shadow.

header

O componente de cabeçalho da aplicação, aparecendo durante o estado ready.

background

tipo: string
padrão: #FFFFFF

Define a cor de fundo do elemento.

foreground

tipo: string
padrão: #2E2E2E

Define a cor do elementos textuais internos.

border

Padrões:
- width: 0
- radius: 0
- style: solid
- color: transparent

Veja a estrutura do campo border.

shadow

Padrões:

json

[
	{
		"offsetX": "0px",
		"offsetY": "2px",
		"blur": "6px",
		"spread": "2px",
		"color": "rgba(0, 0, 0, 0.15)",
		"inset": false
	},
	{
		"offsetX": "0px",
		"offsetY": "1px",
		"blur": "2px",
		"spread": "0px",
		"color": "rgba(0, 0, 0, 0.08)",
		"inset": false
	}
]

Veja a estrutura do campo shadow.

button

Esse componente faz parte do RateWindow e serve como o botão de envio da avaliação

background

tipo: string
padrão: #c64f01

Define a cor de fundo do elemento.

hoverBackground

tipo: string
padrão: #b24701

Define a cor de fundo do elemento quando o usuário passar o mouse por cima.

activeBackground

tipo: string
padrão: #9e3f01

Define a cor de fundo do elemento quando o usuário clicar nele.

focusRingColor

tipo: string
padrão: #c64f01

Define a cor do contorno do elemento quando o usuário estiver com o elemento em foco.

border

Padrões:
- width: 0
- radius: 12px
- style: solid
- color: transparent

Veja a estrutura do campo border.

shadow

Padrões:

json

[]

Veja a estrutura do campo shadow.

rateButton

Esse componente faz parte do RateWindow e serve como o botão para selecionar se a qualidade da avaliação foi boa ou ruim.

foreground

tipo: string
padrão: #2E2E2E

Define a cor do texto e do ícone do elemento quando ainda não estiver selecionado.

hoverBackground

tipo: string
padrão: #e1e1e1

Define a cor de fundo do elemento quando o usuário passar o mouse por cima.

activeBackground

tipo: string
padrão: #c9c9c9

Define a cor de fundo do elemento quando o usuário clicar nele.

focusRingColor

tipo: string
padrão: #C64F01

Define a cor do contorno do elemento quando o usuário estiver com o elemento em foco.

iconButton

Esse componente representa todos os botões com ícone que aparecem na aplicação. Eles podem ser usados na interface diretamente, ou podem estar dentro de um IconButtonContainer.

foreground

tipo: string
padrão: #2E2E2E

Define a cor do ícone do elemento.

hoverBackground

tipo: string
padrão: #e1e1e1

Define a cor de fundo do elemento quando o usuário passar o mouse por cima.

activeBackground

tipo: string
padrão: #c9c9c9

Define a cor de fundo do elemento quando o usuário clicar nele.

focusRingColor

tipo: string
padrão: #C64F01

Define a cor do contorno do elemento quando o usuário estiver com o elemento em foco.

border.radius

tipo: string
padrão: 12px

Para esse elemento, somente o arredondamento de borda é permitido.

errorMessage

Esse componente serve para exibir mensagens de erro na aplicação. Ele tem uma mensagem fixa e pode conter um botão para fechar a mensagem.

background

tipo: string
padrão: #FFF1C5

Define a cor de fundo do elemento.

foreground

tipo: string
padrão: #472201

Define a cor dos textos do elemento.

titleFontSize

tipo: string
padrão: 14px

Define o tamanho do título do elemento.

descriptionFontSize

tipo: string
padrão: 12px

Define o tamanho da descrição do elemento.

iconColor

tipo: string
padrão: #BA6A03

Define a cor do ícone do elemento.

border

Padrões:
- width: 1px
- radius: 8px
- style: solid
- color: #BA6A03

Veja a estrutura do campo border.

shadow

Padrões:

json

[]

Veja a estrutura do campo shadow.

Tema ​

Propriedades em Comum ​

shadow ​

border ​

enableComponents ​

caption ​

changeSpeedButton ​

header ​

pauseAnimationButton ​

rateAnimationButton ​

repeatAnimationButton ​

stopAnimationButton ​

widget ​

zoom ​

rotate ​

theme ​

background ​

border ​

option ​

foreground ​

hoverBackground ​

activeBackground ​

focusRingColor ​

closeButton ​

foreground ​

hoverBackground ​

activeBackground ​

focusRingColor ​

shadow ​

layout ​

draggable ​

position ​

background ​

width ​

height ​

border ​

shadow ​

background ​

foreground ​

titleFontSize ​

descriptionFontSize ​

border ​

shadow ​

internal ​

color ​

background ​

border ​

external ​

color ​

color ​

fontSize ​

background ​

border ​

shadow ​

background ​

foreground ​

border ​

shadow ​

background ​

hoverBackground ​

activeBackground ​

focusRingColor ​

border ​

shadow ​

foreground ​

hoverBackground ​

activeBackground ​

focusRingColor ​

foreground ​

hoverBackground ​

activeBackground ​

focusRingColor ​

border.radius ​

background ​

foreground ​

titleFontSize ​

descriptionFontSize ​

iconColor ​

border ​

shadow ​

Tema

Propriedades em Comum

shadow

border

enableComponents

caption

changeSpeedButton

header

pauseAnimationButton

rateAnimationButton

repeatAnimationButton

stopAnimationButton

widget

zoom

rotate

theme

background

border

option

foreground

hoverBackground

activeBackground

focusRingColor

closeButton

foreground

hoverBackground

activeBackground

focusRingColor

shadow

layout

draggable

position

background

width

height

border

shadow

background

foreground

titleFontSize

descriptionFontSize

border

shadow

internal

color

background

border

external

color

color

fontSize

background

border

shadow

background

foreground

border

shadow

background

hoverBackground

activeBackground

focusRingColor

border

shadow

foreground

hoverBackground

activeBackground

focusRingColor

foreground

hoverBackground

activeBackground

focusRingColor

border.radius

background

foreground

titleFontSize

descriptionFontSize

iconColor

border

shadow