Checklist interfere com balas

Experiência do Usuário
1

Quando tenho uma lista com marcadores que inclui caixas de seleção, os marcadores não são renderizados. Não tenho certeza se isso é um recurso ou um bug. É um pouco complicado de controlar, com certeza.

1. [] item numerado normal com caixa de seleção
   - marcador normal
    - [] caixa de seleção com marcador de exemplo
[] item com marcador de exemplo 2
- [] item com marcador de exemplo 3
   - [] item com marcador de exemplo 4
         - [] item com marcador de exemplo 5

gera:

  1. item numerado normal com caixa de seleção
    • marcador normal
    • caixa de seleção com marcador de exemplo
      item com marcador de exemplo 2
  • item com marcador de exemplo 3
    • item com marcador de exemplo 4
      - item com marcador de exemplo 5
1 curtida
2

É um recurso, mas talvez possa ser refinado. Posso ver o CSS para .has-checkbox, ele é deliberadamente omitido devido ao ruído visual.

6 curtidas
3

Eu acabei de tentar com o número correto de espaços de prefixo.
Claro que os marcadores ainda estão faltando, mas agora está bem bonito!

1. [] item numerado normal com caixa de seleção A (0 espaços de prefixo)
    - marcador normal A.1 (4 espaços de prefixo)
      - [] exemplo de marcador com caixa de seleção A.1 (4 + 2 = 6 espaços de prefixo)
    - marcador normal A.2 (4 espaços de prefixo)
      - [] exemplo de marcador com caixa de seleção A.2 (4 + 2 = 6 espaços de prefixo)

Nota: nova linha adicionada aqui entre listas de tipos diferentes

- [] item de marcador de exemplo B (0 espaços de prefixo)
  - [] item de marcador de exemplo B.1 (2 espaços de prefixo)
    - [] item de marcador de exemplo B.1.1 (2 + 2 = 4 espaços de prefixo)
      - [] item de marcador de exemplo B.1.1.1 (2 + 2 + 2 = 6 espaços de prefixo)
      - [] item de marcador de exemplo B.1.1.2 (2 + 2 + 2 = 6 espaços de prefixo)
    - [] item de marcador de exemplo B.1.2 (2 + 2 = 4 espaços de prefixo)
  - [] item de marcador de exemplo B.2 (2 espaços de prefixo)
    - [] item de marcador de exemplo B.2.1 (2 + 2 = 4 espaços de prefixo)
    - [] item de marcador de exemplo B.2.2 (2 + 2 = 4 espaços de prefixo)
  1. item numerado normal com caixa de seleção A
    • marcador normal A.1
      • exemplo de marcador com caixa de seleção A.1
    • marcador normal A.2
      • exemplo de marcador com caixa de seleção A.2
  • item de marcador de exemplo B
    • item de marcador de exemplo B.1
      • item de marcador de exemplo B.1.1
        • item de marcador de exemplo B.1.1.1
        • item de marcador de exemplo B.1.1.2
      • item de marcador de exemplo B.1.2
    • item de marcador de exemplo B.2
      • item de marcador de exemplo B.2.1
      • item de marcador de exemplo B.2.2
3 curtidas
4

Como se obtém um marcador E uma caixa de seleção? Você obtém isso com números, mas eu quero com marcadores.

1. []
   1. []
   - []

Sugestão

Eu adoraria que um [] fosse apresentado em listas como:

  1. como um substituto de marcador se usado sem um denotador de marcador
1.
   []
  1. como um marcador + uma caixa de seleção se usado com um denotador de marcador
1.
   - []

ou seja, marcadores são tratados da mesma forma que números

5

Recuo muito alto?

  • Lista
    - Teste
    • Teste
    • Teste
  • Teste
- Lista
      - [] Teste
    - [] Teste
  - [] Teste
- [] Teste

Não marca assim, mas deixa para trás o traço que parece quase um marcador.

Na verdade, aqui está uma solução real:

  • Lista
    • ​ Item A
      • ​ Item A.1
        • ​ Item A.1.1
          • ​ Item A.1.1.1
    • ​ Item B

Qualquer ␆ neste exemplo deve ser substituído por um espaço de largura zero

- Lista
  - ␆[] Item A
    - ␆[] Item A.1
      - ␆[] Item A.1.1
        - ␆[] Item A.1.1.1
  - ␆[] Item B

Espaço de largura zero para copiar para teste:

​
3 curtidas
6

@Firepup650 Boa descoberta! Qualquer caractere adicionado na frente da caixa de seleção tornará os marcadores visíveis.

  • Lista
    • . Ponto
      • ' Aspas simples (como no Excel texto sem formatação)
        • | Pipe

Para uma solução geral: adicione este CSS personalizado à sua instância do Discourse.

ul li.has-checkbox .list-item-checkbox {
  position: relative;
  left: 0;
}

.cooked ul li.has-checkbox,
.d-editor-preview ul li.has-checkbox {
  position: relative;
  list-style-type: disc;
}

.cooked ul ul li.has-checkbox,
.d-editor-preview ul ul li.has-checkbox {
  list-style-type: circle;
}

.cooked ul ul ul li.has-checkbox,
.d-editor-preview ul ul ul li.has-checkbox {
  list-style-type: square;
}
2 curtidas
7

Essa é uma solução, e funciona. Mas, honestamente… me dá dor de cabeça porque me lembra fortemente como o Excel força a marcação de células de texto :rofl:

8

Então vamos fazer deste um pedido de funcionalidade:

Funcionalidade: adicionar notação especial para manter marcadores em listas de caixas de seleção

Se houver uma lista de caixas de seleção no momento, a lista é exibida sem marcadores.

- [] ponto 1
  - [] ponto 2
    - [] ponto 3
      - [] ponto 4
  • ponto 1
    • ponto 2
      • ponto 3
        • ponto 4

Adicionar uma aspa simples (por exemplo, Excel texto sem formatação) na frente da caixa de seleção já desabilita essa funcionalidade e os marcadores ficam visíveis, mas adicionalmente a aspa simples deve ser removida.

- '[] ponto 1
  - '[] ponto 2
    - '[] ponto 3
      - '[] ponto 4
  • ' ponto 1
    • ' ponto 2
      • ' ponto 3
        • ' ponto 4

<!--
Este código markdown:
-->

- '[] ponto

<!-- deve se tornar HTML: (nota: nenhuma aspa simples visível) -->
<ul>
  <li><span class="chcklst-box fa fa-square-o fa-fw"></span> ponto</li>
</ul>

<!-- em vez deste HTML: (nota: aspa simples ainda visível) -->
<ul>
  <li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> ponto</li>
</ul>
2 curtidas
9

Uma correção / organização mais simples para isso poderia ser que um segundo espaço (como um espaço normal, não um espaço de 0 pt) pode indicar que ele deve exibir tanto o marcador quanto a caixa de seleção.

Claro, isso pode ser um grande problema para codificar!