wekan/client/components/boards/boardHeader.jade

template(name="boardHeaderBar")
  h1.header-board-menu
    with currentBoard
      if $eq title 'Templates'
        | {{_ 'templates'}}
      else
        +viewer
          = title

  .board-header-btns.left
    unless isMiniScreen
      if currentBoard
        if currentUser
          with currentBoard
            if currentUser.isBoardAdmin
              a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                | ✏️

            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
              title="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}" aria-label="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}")
              | {{#if isStarred}}⭐{{else}}☆{{/if}}
              if showStarCounter
                span
                  = currentBoard.stars

            a.board-header-btn(
              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
              title="{{_ currentBoard.permission}}")
              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/if}}
              span {{_ currentBoard.permission}}

            a.board-header-btn.js-watch-board(
              title="{{_ watchLevel }}")
              if $eq watchLevel "watching"
                | 👁️
              if $eq watchLevel "tracking"
                | 🔔
              if $eq watchLevel "muted"
                | 🔕
              span {{_ watchLevel}}
            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
              | {{sortCardsIcon}}
              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
            if isSortActive
              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                | ❌

        else
          a.board-header-btn.js-log-in(
            title="{{_ 'log-in'}}")
            | 🚪
            span {{_ 'log-in'}}

  .board-header-btns.center

  .board-header-btns.right
    if currentBoard
      if isMiniScreen
        if currentUser
          with currentBoard
            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
              | ✏️

            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
              | {{#if isStarred}}⭐{{else}}☆{{/if}}

            a.board-header-btn(
              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
              title="{{_ currentBoard.permission}}")
              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/if}}

            a.board-header-btn.js-watch-board(
              title="{{_ watchLevel }}")
              if $eq watchLevel "watching"
                | 👁️
              if $eq watchLevel "tracking"
                | 🔔
              if $eq watchLevel "muted"
                | 🔕
            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
              | {{sortCardsIcon}}
            if isSortActive
              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                | ❌

        else
          a.board-header-btn.js-log-in(
            title="{{_ 'log-in'}}")
            | 🚪

      if isSandstorm
        if currentUser
          a.board-header-btn.js-open-archived-board
            | 📦

      //if showSort
      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
      //    i.fa(class="{{directionClass}}")
      //    span {{_ 'sort'}}{{_ listSortShortDesc}}

      a.board-header-btn.js-open-filter-view(
          title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
          class="{{#if Filter.isActive}}emphasis{{/if}}")
        | 🔽
        if Filter.isActive
          a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
            | ❌

      a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
        | 🔍

      unless currentBoard.isTemplatesBoard
        a.board-header-btn.js-toggle-board-view(
          title="{{_ 'board-view'}}")
          | ▼
          if $eq boardView 'board-view-swimlanes'
            | 🏊
          if $eq boardView 'board-view-lists'
            | 📋
          if $eq boardView 'board-view-cal'
            | 📅

      if canModifyBoard
        a.board-header-btn.js-multiselection-activate(
            title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
            class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
          | ☑️
        if MultiSelection.isActive
          a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
            | ❌

      if currentUser.isBoardAdmin
        a.board-header-btn.js-restore-legacy-lists(title="{{_ 'restore-legacy-lists'}}")
          | 🔄
          | {{_ 'legacy-lists'}}

      .separator
      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
        | ☰

template(name="boardVisibilityList")
  ul.pop-over-list
    li
      with "private"
        a.js-select-visibility
          | 🔒
          | {{_ 'private'}}
          if visibilityCheck
            | ✅
          span.sub-name {{_ 'private-desc'}}
    if notAllowPrivateVisibilityOnly
      li
        with "public"
          a.js-select-visibility
            | 🌐
            | {{_ 'public'}}
            if visibilityCheck
              | ✅
            span.sub-name {{_ 'public-desc'}}

template(name="boardChangeVisibilityPopup")
  +boardVisibilityList

template(name="boardChangeWatchPopup")
  ul.pop-over-list
    li
      with "watching"
        a.js-select-watch
          | 👁️
          | {{_ 'watching'}}
          if watchCheck
            | ✅
          span.sub-name {{_ 'watching-info'}}
    li
      with "tracking"
        a.js-select-watch
          | 🔔
          | {{_ 'tracking'}}
          if watchCheck
            | ✅
          span.sub-name {{_ 'tracking-info'}}
    li
      with "muted"
        a.js-select-watch
          | 🔕
          | {{_ 'muted'}}
          if watchCheck
            | ✅
          span.sub-name {{_ 'muted-info'}}

template(name="boardChangeViewPopup")
  ul.pop-over-list
    li
      with "board-view-swimlanes"
        a.js-open-swimlanes-view
          | 🏊
          | {{_ 'board-view-swimlanes'}}
          if $eq Utils.boardView "board-view-swimlanes"
            | ✅
    li
      with "board-view-lists"
        a.js-open-lists-view
          | 📋
          | {{_ 'board-view-lists'}}
          if $eq Utils.boardView "board-view-lists"
            | ✅
    li
      with "board-view-cal"
        a.js-open-cal-view
          | 📅
          | {{_ 'board-view-cal'}}
          if $eq Utils.boardView "board-view-cal"
            | ✅

template(name="createBoard")
  form
    label
      | {{_ 'title'}}
      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
    if visibilityMenuIsOpen.get
      +boardVisibilityList
    else
      p.quiet
        if $eq visibility.get 'public'
          span 🌐
          = " "
          | {{{_ 'board-public-info'}}}
        else
          span 🔒
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
    a.flex.js-toggle-add-template-container
      .materialCheckBox#add-template-container
      span {{_ 'add-template-container'}}
    input.primary.wide(type="submit" value="{{_ 'create'}}")
    span.quiet
      | {{_ 'or'}}
      a.js-import-board {{_ 'import'}}
    span.quiet
      | /
      a.js-board-template {{_ 'template'}}

//template(name="listsortPopup")
//  h2
//   | {{_ 'list-sort-by'}}
//  hr
//  ul.pop-over-list
//    each value in allowedSortValues
//     li
//      a.js-sort-by(name="{{value.name}}")
//        if $eq sortby value.name
//           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
//        | {{_ value.label }}{{_ value.shortLabel}}
//        if $eq sortby value.name
//           | ✅

template(name="boardChangeTitlePopup")
  form
    label
      | {{_ 'title'}}
      input.js-board-name(type="text" value=title autofocus dir="auto")
    label
      | {{_ 'description'}}
      textarea.js-board-desc(dir="auto")= description
    input.primary.wide(type="submit" value="{{_ 'rename'}}")

template(name="boardCreateRulePopup")
  p {{_ 'close-board-pop'}}
  button.js-confirm.negate.full(type="submit") {{_ 'archive'}}


template(name="cardsSortPopup")
  ul.pop-over-list
    li
      a.js-sort-due
        | 📅
        | {{_ 'due-date'}}
      hr
    li
      a.js-sort-title
        | 🔤
        | {{_ 'title-alphabetically'}}
      hr
    li
      a.js-sort-created-desc
        | ⬇️
        | {{_ 'created-at-newest-first'}}
      hr
    li
      a.js-sort-created-asc
        | ⬆️
        | {{_ 'created-at-oldest-first'}}