A versão 24.07 dos ícones que compõem a navegação dos módulos desktop dos produtos TOTVS Varejo Supermercados - Linha Consinco e TOTVS Varejo Supermercados WMS foram atualizados para melhorar a experiência dos nossos usuários. Agora, usamos desenhos que representam melhor suas ações, o que facilitará a compreensão de novos usuários no sistema.
Os ícones têm um papel fundamental na experiência dos usuários com as interfaces de nossos produtos desktop. Nesta nova versão, iremos atualizar os conceitos de simbologia para que eles sigam as tendências de estilo de iconografia mais comuns do nosso dia a dia, o que facilitará a identificação das ações e tarefas, independentemente da aplicação ou sistema que o usuário estiver acessando. É importante salientar que a posição dos ícones e as suas funções permanecem as mesmas, sendo que as alterações referem-se apenas ao seu aspecto visual.
A fim de demonstrar as diferenças entre os ícones antigos e os novos, criamos uma documentação, disponível abaixo:
Button | ||||||
---|---|---|---|---|---|---|
|
HTML |
---|
<style>
div.theme-default .ia-splitter #main {
}
#main {
}
.aui-header-primary .aui-nav {
margin-left: none !important;
}
.expand-control-text {
color: #000000;
font-size: 14px !important;
font-weight:bold !important;
}
.expand-icon, .aui-icon, .aui-icon-small, .aui-iconfont-chevron-right {
color: #FF8000;
}
/* o código abaixo deixa transparente a imagem do banner*/
.composition-banner-overlay{
background:rgba(0,0,0,0.0);
position:relative;
border-radius:5px;
}
/* o código abaixo deixa o botão "clique aqui" na cor preta (ou na cor desejada)*/
.aui-button.aui-button-primary, .aui-button.aui-button-primary:visited {
background-color: #000000;
color: #111111;
display: block;
margin-left: 20px;
margin-right: auto;
/* os 3 códigos abaixo está relacionado a transparencia do banner, (elemento composition-banner)*/
}
.composition-banner-title{
color: #000000!important;
}
.composition-banner-desc{
color: #000000!important;
}
.composition-banner-content {
width:100%;
}
/* o código abaixo é responsável pelo efeito da imagem*/
.composition-banner{
opacity: 1.0 !important;
filter: alpha(opacity=50); /* For IE8 and earlier */
min-height: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
}
.composition-banner:hover,
span.confluence-embedded-file-wrapper.confluence-embedded-manual-size .confluence-embedded-image.confluence-thumbnail:hover{
opacity: 0.5 !important;
cursor: pointer;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.wiki-content img.confluence-embedded-image{
cursor: pointer !important;
}
</style> |
HTML |
---|
<script>
jQuery(document).ready(function() {
jQuery(".wiki-content a").attr("target", "_blank");
});
</script> |