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">
      <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-toggle="task.showEdit"
              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);">
          <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 ?'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"
                   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">
      <label>Notes</label>
      <textarea ng-model="task.notes"
                rows="5"
                md-auto-focus
                md-select-on-focus></textarea>
    </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>