Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/edit community contacts #740

Merged
merged 26 commits into from
May 15, 2022
Merged

Conversation

henriquecbuss
Copy link
Member

@henriquecbuss henriquecbuss commented Apr 29, 2022

What issue does this PR close

Closes #713

Changes Proposed ( a list of new changes introduced by this PR)

  • Add card on the community settings page that points to the new page
  • Add the screen to add community contacts
    • Create basic layout
    • Layout form structure
    • Create new fields on demand
    • Remove fields on demand
    • Integrate with existing contact types and functions
  • Show community contacts on the footer

To make things better with our current architecture, I created a new Contact module to organize the contact form and related types, functions and views. That means we now have Contact and Profile.Contact, where Contact is used for community contacts, and Profile.Contact is used for profile contacts. In order to not clutter this PR too much, I will leave the work of removing Profile.Contact in favor of Contact for another issue/PR

How to test ( a list of instructions on how to test this PR)

  • Log in to a community you're the admin of
  • Before adding contacts, check that the footer looks right (it shouldn't have contacts yet)
  • Go to the settings page
  • Go to the community contacts page
  • Interact with the form: add, edit and remove contacts to test it out
  • Save the form
  • Check the footer again to see if it looks right (now it should have contacts displayed there)
  • Click on the link to use the community contacts. Check it when your community has a single contact option, and when it has more than one (a modal should be displayed, to allow you to choose which contact you want to use)
  • Delete all contacts and make sure the footer doesn't show the contacts link again

@netlify
Copy link

netlify bot commented Apr 29, 2022

Deploy Preview for cambiatus-elm-book ready!

Name Link
🔨 Latest commit fdb6328
🔍 Latest deploy log https://app.netlify.com/sites/cambiatus-elm-book/deploys/62802d8ee6460e000a69adc4
😎 Deploy Preview https://deploy-preview-740--cambiatus-elm-book.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@henriquecbuss henriquecbuss marked this pull request as ready for review May 4, 2022 00:02
@lucca65
Copy link
Member

lucca65 commented May 10, 2022

working good, I think the label is too small for certain screens, not really readable, but as far as functionality goes, it is getting awesome!

@henriquecbuss
Copy link
Member Author

I adjusted the size of the form inputs. I'd say the idea is that the labels should be short and descriptive, and I think the small form input encourages that. On the other hand, it might be frustratingly small 😬

@henriquecbuss
Copy link
Member Author

Maybe @juramos-2020 can help us out here ☝️

lucca65
lucca65 previously approved these changes May 10, 2022
Copy link
Member

@lucca65 lucca65 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, forgot to approve the PR. @juramos-2020 I think we could have a minimum font size to make readability possible.

@juramos-2020
Copy link

Ah, esqueci de aprovar o PR.@juramos-2020Acho que poderíamos ter um tamanho mínimo de fonte para tornar a legibilidade possível.

@lucca65 @NeoVier de qual fonte vocês estão falando? em qual componente?

@juramos-2020
Copy link

@NeoVier quanto de largura vc está usando nesse board branco? Podemos usar 810px conforme layout
Também acho que nessa primeira tela não precisa ter o botão de salvar pelo fato de ainda não ter nada para salvar.
image

@juramos-2020
Copy link

juramos-2020 commented May 12, 2022

@NeoVier

⚠Teria como termos aqueles espaçamentos automáticos quando a gente preenche um campo de telefone?
Não sei se to sabendo explicar direito... mas seria algo assim, ex: digito 11 do DDD e aí automaticamente se cria os "()" e o espaço em branco.
Você sabe como é? 🙈🙈😅

⚠Uma outra coisa que aconteceu foi que, ao terminar de digitar o e-mail eu cliquei no "ENTER", como de costume, e apareceu esse alerta de erro.

image

@juramos-2020
Copy link

⚠E agora estou tentando salvar o formulário com os campos preenchidos corretamente mas não está salvando. Está dando erro.

image

@juramos-2020
Copy link

⚠ Quando eu adiciono uma opção nova de conta ela já abre com um alerta de erro:

image

@henriquecbuss
Copy link
Member Author

quanto de largura vc está usando nesse board branco? Podemos usar 810px

Ele está alinhado com o resto do conteúdo do app. Eu deixei ele maior para termos mais espaço para os campos de label, pois com 810px não tem espaço para colocar labels maiores (inclusive também aumentei o tamanho dos campos).

Podemos alterar se quiser, mas acredito que seria bom termos mais espaço para a label


Também acho que nessa primeira tela não precisa ter o botão de salvar pelo fato de ainda não ter nada para salvar.

Pode ser que a comunidade tinha contatos, mas decidiu apagá-los. Nesse caso, tem que ter a opção de salvar os contatos como uma lista vazia


Teria como termos aqueles espaçamentos automáticos quando a gente preenche um campo de telefone?

Sei sim, isso seria a máscara 😅. O problema é que, no outro form de contatos (que usamos no perfil), o usuário escolhe o país, e com isso conseguimos saber qual máscara aplicar (padrão brasileiro, Costa Rica, etc.). Nesse form, temos apenas um campo de texto, sem o seletor de país. Como cada país tem seu padrão de número, temos que saber o país para poder aplicar a máscara.

Podemos tentar usar o código de país (+55, +1, etc.) pra mudar a máscara enquanto o usuário digita, mas isso pode causar alguns problemas com o cursor de texto.

Ou então podemos aplicar a máscara somente quando o usuário termina de digitar, e vai para outro campo.


Vou investigar os outros erros 🏃‍♂️

@juramos-2020
Copy link

juramos-2020 commented May 12, 2022

OI @NeoVier

Podemos alterar se quiser, mas acredito que seria bom termos mais espaço para a label

Qual seria o tamanho máximo que vc acha que podemos ter para uma label? Podemos falar melhor sobre isso aqui no figma? acho que fica melhor para eu entender e poder sugerir algo melhor.
Estamos tentando seguir um padrão de design nas telas, principalmente na versão desktop aonde temos um "problema bom" de muito espaço rsrsrs.

Copy link
Member

@lucca65 lucca65 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NeoVier O que acha da gente deixar o valor padrão da label como vazia mas com um placeholder? Se o usuário não colocar nada fica com o valor padrão. Hoje está vindo preenchido com texto direto. Acho que o placeholder faria mais sentido aqui

@juramos-2020
Copy link

@NeoVier

segue a versão desk atualizada.

Sobre a fonte dos rótulos dos icones sugiro seguirmos com essas especificações:
Font: Nunito Sans
Size: 12px
Line height: 22px

Acabei de fazer o teste na versão mobile e funcionou tudo como o esperado 🎉
Esta faltando só o ajuste da fonte do label do ícone 😎

@henriquecbuss henriquecbuss requested review from lucca65 May 14, 2022 22:38
Copy link
Member

@lucca65 lucca65 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incrível adorei essa funcionalidade 🏅

@henriquecbuss henriquecbuss merged commit 2927e27 into master May 15, 2022
@henriquecbuss henriquecbuss deleted the feature/edit-community-contacts branch May 15, 2022 01:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add community contacts
3 participants