super-productivity/app/scripts/task-list/task-list-d.html

<ul class="task-list"
    as-sortable="vm.dragControlListeners"
    ng-model="vm.tasks">
  <li class="task"
      as-sortable-item
      ng-class="{'is-current': vm.currentTask.id === task.id, 'is-done':task.isDone}"
      ng-repeat="task in vm.tasks|limitTo:vm.limitTo|filter:vm.filter track by task.id"
      tabindex="1"
      md-whiteframe="1"
      ng-keydown="vm.handleKeyPress($event, task)">

    <div class="first-line"
         layout="row"
         as-sortable-item-handle
         layout-align="center center">
      <md-button class="md-icon-button "
                 aria-label="is updated"
                 ng-click="task.showNotes = true; task.isUpdated=false;"
                 ng-if="task.isUpdated">
        <ng-md-icon class="update update-icon"
                    flex="none"
                    icon="update"></ng-md-icon>
      </md-button>


      <ng-md-icon class="handle"
                  flex="none"
                  icon="drag_handle"></ng-md-icon>

      <md-button class="md-icon-button play-btn"
                 aria-label="mark as current"
                 ng-click="(vm.currentTask.id === task.id) ? vm.currentTask=undefined :vm.currentTask=task"
                 ng-show="vm.allowTaskSelection && (!task.subTasks.length ||task.subTasks.length===0) ">
        <ng-md-icon icon="{{vm.currentTask.id === task.id ? 'pause_circle_filled':'play_circle_fill'}}"
                    aria-label="mark as current"></ng-md-icon>
      </md-button>

      <div class="title"
           flex="auto"
           layout="row"
           layout-align="center center">

        <span class="text"
              tabindex="2"
              edit-on-click-on-edit-finished="vm.focusLastFocusedTaskEl()"
              edit-on-click-ev-id="{{ task.id }}"
              edit-on-click="task.title">{{ task.title }}</span>
      </div>

      <div class="time"
           data-ng-show="task.timeEstimate || task.timeSpent">
        <span ng-if="!task.subTasks.length">
        <span edit-on-click-toggle="task.showEdit"
              edit-on-click-on-change="vm.onChangeTimeSpent(task, $value)"
              edit-on-click-type="DURATION"
              edit-on-click="task.timeSpent"></span>
        <span ng-show="task.timeEstimate">/</span>
        <span edit-on-click-toggle="task.showEdit"
              edit-on-click-type="DURATION"
              edit-on-click="task.timeEstimate"></span>
          </span>
        <span ng-if="task.subTasks.length>0">
          ∑ {{ task.timeSpent |duration}} <span ng-show="task.timeEstimate">/</span> {{ task.timeEstimate |duration}}
        </span>
      </div>


      <div class="controls">
        <md-button class="md-icon-button"
                   tabindex="2"
                   ng-disabled="task.subTasks.length>0"
                   aria-label="time estimation"
                   ng-click="vm.estimateTime(task)">
          <ng-md-icon icon="access_time"
                      aria-label="time estimation"></ng-md-icon>
        </md-button>
        <md-button class="md-icon-button"
                   aria-label="add sub task"
                   ng-if="!vm.isSubTasksDisabled"
                   tabindex="2"
                   ng-click="vm.addSubTask(task, $event);">
          <ng-md-icon icon="playlist_add"
                      aria-label="add sub task"></ng-md-icon>
        </md-button>
        <md-button class="md-icon-button"
                   aria-label="notes"
                   tabindex="2"
                   ng-class="{'is-active':task.showNotes}"
                   ng-click="task.showNotes=!task.showNotes">
          <ng-md-icon icon="{{(task.notes||task.originalKey) ?'insert_comment': 'mode_comment'}}"
                      aria-label="notes"></ng-md-icon>
        </md-button>
        <md-button class="md-icon-button"
                   aria-label="link"
                   tabindex="2"
                   target="_blank"
                   external-link
                   ng-show="task.originalLink"
                   ng-href="{{ task.originalLink }}">
          <ng-md-icon icon="link"
                      aria-label="link"></ng-md-icon>
        </md-button>
        <md-button class="md-icon-button"
                   aria-label="delete"
                   tabindex="2"
                   ng-click="vm.deleteTask(task, $index)">
          <ng-md-icon icon="delete_forever"
                      aria-label="delete"
                      style="fill: #dc2d3d;"></ng-md-icon>
        </md-button>
        <md-checkbox ng-model="task.isDone"
                     tabindex="2"
                     aria-label="un-/mark as done">
        </md-checkbox>
      </div>
    </div>


    <md-progress-linear md-mode="determinate"
                        ng-show="task.progress"
                        value="{{task.progress}}"></md-progress-linear>

    <div class="notes"
         flex="100"
         ng-if="task.showNotes===true">
      <section>
        <label class="md-caption">Notes</label>
        <div md-whiteframe="4">
      <textarea ng-model="task.notes"
                class="md-body-1"
                rows="5"
                md-auto-focus
                md-select-on-focus></textarea>
        </div>
      </section>

      <section ng-if="task.originalAttachment.length > 0">
        <div class="md-caption">Attachments</div>
        <md-divider></md-divider>
        <ul class="attachments">
          <li ng-repeat="attachment in task.originalAttachment">
            <a href="{{ attachment}}"
               external-link
               target="_blank"
               class="md-accent">{{ attachment}}</a>
            <a href="{{ attachment}}"
               download="{{ attachment}}"
               class="md-accent">
              <ng-md-icon icon="file_download"
                          aria-label="download file directly"></ng-md-icon>
            </a>
          </li>
        </ul>
      </section>

      <section ng-if="task.originalComments.length > 0">
        <div class="md-caption">Comments</div>
        <md-divider></md-divider>
        <ul class="comments">
          <li ng-repeat="comment in task.originalComments"
              class="comment">{{ comment }}
          </li>
        </ul>
      </section>

      <section ng-if="task.status || task.originalStatus"
           class="status">
        <div class="md-caption">Status</div>
        <md-divider></md-divider>
        <div class="md-body-1">
          {{ task.originalStatus.name }}
          <ng-md-icon icon="arrow_forward"
                      aria-label="arrow forward"></ng-md-icon>
          {{ task.status }}
        </div>
      </section>

    </div>

    <sub-task-list ng-if="task.subTasks.length > 0"
                   allow-task-selection="{{vm.allowTaskSelection}}"
                   is-tasks-for-today="{{vm.isTasksForToday}}"
                   current-task="vm.currentTask"
                   task="task"></sub-task-list>
  </li>
</ul>