wekan/client/components/cards/checklists.jade

template(name="checklists")
  .checklists-title
    h3.card-details-item-title
      | ✅
      | {{_ 'checklists'}}
      if canModifyCard
        +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
          +addChecklistItemForm
        else
          a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
            | ➕
    if currentUser.isBoardMember
      .material-toggle-switch(title="{{_ 'hide-finished-checklist'}}")
        //span.toggle-switch-title
        if card.hideFinishedChecklistIfItemsAreHidden
          input.toggle-switch(type="checkbox" id="toggleHideFinishedChecklist" checked="checked")
        else
          input.toggle-switch(type="checkbox" id="toggleHideFinishedChecklist")
        label.toggle-label(for="toggleHideFinishedChecklist")

  .card-checklist-items
    each checklist in checklists
      if checklist.showChecklist card.hideFinishedChecklistIfItemsAreHidden
        +checklistDetail(checklist = checklist card = card)

  if canModifyCard
    +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
      +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
    else
      a.add-checklist.js-open-inlined-form(title="{{_ 'add-checklist'}}")
        | ➕

template(name="checklistDetail")
  .js-checklist.checklist.nodragscroll
    +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
      +editChecklistItemForm(checklist = checklist)
    else
      .checklist-title
        span
        if canModifyCard
          a.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")

        if canModifyCard
          h4.title.js-open-inlined-form.is-editable
            if isTouchScreenOrShowDesktopDragHandles
              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
            +viewer
              = checklist.title
        else
          h4.title
            +viewer
                = checklist.title

    if $gt finishedPercent 0
      .checklist-progress-bar-container
        .checklist-progress-text {{finishedPercent}}%
        .checklist-progress-bar
          .checklist-progress(style="width:{{finishedPercent}}%")
    +checklistItems(checklist = checklist card = card)

template(name="checklistDeletePopup")
  p {{_ 'confirm-checklist-delete-popup'}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

template(name="addChecklistItemForm")
  a(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
  textarea.js-add-checklist-item(rows='1' autofocus)
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
    a.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
    if showNewlineBecomesNewChecklistItem
      .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
        input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
        label.toggle-label(for="toggleNewlineBecomesNewChecklistItem")
        | {{_ 'newLineNewItem'}}
      if $eq position 'top'
        .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItemOriginOrder'}}")
          input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItemOriginOrder")
          label.toggle-label(for="toggleNewlineBecomesNewChecklistItemOriginOrder")
          | {{_ 'originOrder'}}

template(name="editChecklistItemForm")
  a(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
  textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
    if $eq type 'item'
      = item.title
    else
      = checklist.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
    a.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
    span(title=createdAt) {{ moment createdAt }}
    if canModifyCard
      a.js-delete-checklist-item {{_ "delete"}}...
      a.js-convert-checklist-item-to-card
        | 📋
        | {{_ 'convertChecklistItemToCardPopup-title'}}

template(name="checklistItems")
  if checklist.items.length
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist position="top")
        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
      else
        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
          | ➕
  .checklist-items.js-checklist-items
    each item in checklist.items
      +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
        +editChecklistItemForm(type = 'item' item = item checklist = checklist)
      else
        +checklistItemDetail(item = item checklist = checklist card = card)
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
        +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
      else
        a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
          | ➕

template(name='checklistItemDetail')
  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}{{#if checklist.hideAllChecklistItems}} is-checked invisible{{/if}}"
    role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
    if canModifyCard
      .check-box-container
        .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title
    else
      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title

template(name="checklistActionsPopup")
  ul.pop-over-list
    li
      a.js-delete-checklist.delete-checklist
        | 🗑️
        | {{_ "delete"}} ...
      a.js-move-checklist.move-checklist
        | ➡️
        | {{_ "moveChecklist"}} ...
      a.js-copy-checklist.copy-checklist
        | 📋
        | {{_ "copyChecklist"}} ...
      a.js-hide-checked-checklist-items
        | 🙈
        | {{_ "hideCheckedChecklistItems"}} ...
        .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
          if checklist.hideCheckedChecklistItems
            input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}" checked="checked")
          else
            input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}")
          label.toggle-label(for="toggleHideCheckedChecklistItems_{{checklist._id}}")
      a.js-hide-all-checklist-items
        | 🚫
        | {{_ "hideAllChecklistItems"}} ...
        .material-toggle-switch(title="{{_ 'hideAllChecklistItems'}}")
          if checklist.hideAllChecklistItems
            input.toggle-switch(type="checkbox" id="toggleHideAllChecklistItems_{{checklist._id}}" checked="checked")
          else
            input.toggle-switch(type="checkbox" id="toggleHideAllChecklistItems_{{checklist._id}}")
          label.toggle-label(for="toggleHideAllChecklistItems_{{checklist._id}}")

template(name="copyChecklistPopup")
  +copyAndMoveChecklist

template(name="moveChecklistPopup")
  +copyAndMoveChecklist

template(name="copyAndMoveChecklist")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
    each swimlanes
      option(value="{{_id}}" selected="{{#if isDialogOptionSwimlaneId _id}}selected{{/if}}") {{title}}

  label {{_ 'lists'}}:
  select.js-select-lists
    each lists
      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{title}}

  label {{_ 'cards'}}:
  select.js-select-cards
    each cards
      option(value="{{_id}}" selected="{{#if isDialogOptionCardId _id}}selected{{/if}}") {{title}}

  .edit-controls.clearfix
    button.primary.confirm.js-done {{_ 'done'}}