search

ecomplus / storefront-cms

Content and page builder for Storefront based on Netlify CMS
MIT License
0 stars 0 forks source link

Customizar UI do Netlify CMS para page builder #2

Closed leomp12 closed 2 years ago

leomp12 commented 2 years ago

Sendo um CMS de uso genérico, a UI do Netlify CMS não é tão amigável para o nosso usário final, principalmente como page builder, a intenção aqui é melhorar essa UX em geral, especialmente nos React components relacionados ao List Widget: Variable Types, usado para criar o drag&drop de seções nas páginas como a home.

O resultado final deve ser algo parecido com as demos to Tina.

  1. [x] A coluna de edição (esquerda) deve ser menor, deixando mais espaço para o preview;
  2. [x] As sections só aparecem juntas em umas lista simples, form de configuração é aberto um por vez;
  3. [x] Botão mais em destaque para adicionar outras sections;
  4. [x] ... 🤔

Screenshot 2021-12-20 at 19-55-47 Build contextual editing into your site Screenshot 2021-12-20 at 20-00-16 Build contextual editing into your site Screenshot 2021-12-20 at 20-00-41 Build contextual editing into your site

Talvez dê pra fazer isso (o básico pelo menos) com customização dos estilos dos componentes apenas.

leomp12 commented 2 years ago

@ricardocici @joaovescudero

leomp12 commented 2 years ago

Em paralelo a isso os nossos custom previews vão ser melhorados com alguns fixes, perf e implementação de seções que faltam em https://github.com/ecomplus/storefront/tree/master/%40ecomplus/storefront-template/template/js/netlify-cms/preview

oscargross commented 2 years ago

PR [https://github.com/ecomplus/storefront-cms/pull/3] Nele foram alterados: botão add, dropdown, topbar, typedList e forma de representação de typedList aberto

oscargross commented 2 years ago

https://user-images.githubusercontent.com/55117353/147471771-d001995e-4358-43c7-8d97-43dc0714d718.mp4

leomp12 commented 2 years ago

Boa @oscargross ! Acho que na frente do nome do type a gente pode colocar um ícone que indique edição (🔧 , 🖊️ ...), o que acha? E conseguiu forçar o max-width da coluna da esquerda? Idealmente só quando há preview...

oscargross commented 2 years ago

Show @leomp12
PR [https://github.com/ecomplus/storefront-cms/pull/5]

Inserido max-width para SplitPane com preview e adição de ícones editar ao lado do nome das listas, como no exemplo do video (Typed 1 Object ... Typed 2 Object... )

leomp12 commented 2 years ago

Só faltou o vídeo @oscargross haha

oscargross commented 2 years ago

Opa, agr sim https://user-images.githubusercontent.com/55117353/147677460-ce7649a4-6946-47ff-abd6-836fbbb9fcf8.mp4