From da97c4cee0764d8ee61ed7eed4c165de46c09bf2 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sun, 4 Mar 2018 17:06:11 +0100
Subject: [PATCH] feat(focusMode): add ui for component

---
 .../pomodoro-focus/_pomodoro-focus-c.scss     |  57 +++++++-
 .../pomodoro-focus/pomodoro-focus-c.html      | 131 ++++++++++++++----
 .../pomodoro-focus/pomodoro-focus-c.js        |   8 +-
 3 files changed, 164 insertions(+), 32 deletions(-)

diff --git a/app-src/scripts/dialogs/pomodoro-focus/_pomodoro-focus-c.scss b/app-src/scripts/dialogs/pomodoro-focus/_pomodoro-focus-c.scss
index 660a4c951e..f60cafde09 100644
--- a/app-src/scripts/dialogs/pomodoro-focus/_pomodoro-focus-c.scss
+++ b/app-src/scripts/dialogs/pomodoro-focus/_pomodoro-focus-c.scss
@@ -1,14 +1,67 @@
 .pomodoro-focus-dialog {
+  text-align: center;
+
+  .md-dialog-content {
+  }
+  .inner-wrapper {
+    max-width: $component-max-width;
+    margin: auto;
+  }
+
   .timer {
     font-weight: bold;
     text-align: center;
     font-size: 34px;
-    margin: 20px 0;
+    margin: 5px 0 0;
   }
 
-  .task {
+  .task.is-current {
+    border: none;
+    background: transparent;
+
     .title {
+      &,
+      input {
+        text-align: center;
+      }
+    }
+
+    md-progress-linear {
+      // needed to overwrite ng-materials default styles
+      margin-bottom: 10px !important;
+      border-bottom: 1px dashed #bcbcbc;
+
+      .md-bar,
+      .md-container {
+        height: 8px;
+      }
+    }
+
+    .time {
       text-align: center;
+      font-size: 16px;
+      margin-bottom: 15px;
+    }
+
+    .notes {
+      margin-top: 15px;
+      inline-markdown {
+        text-align: left;
+      }
+    }
+
+    task-local-links {
+      li {
+        display: inline-block;
+        a {
+          display: inline-block;
+          white-space: nowrap;
+        }
+
+        .trash-button {
+          margin-left: 5px;
+        }
+      }
     }
   }
 }
diff --git a/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.html b/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.html
index 7813c1dcf1..6f19388023 100644
--- a/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.html
+++ b/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.html
@@ -4,7 +4,7 @@
   <md-toolbar>
     <div class="md-toolbar-tools">
       <h2>
-        <ng-md-icon icon="free_breakfast"></ng-md-icon>
+        <ng-md-icon icon="my_location"></ng-md-icon>
         Focus Mode
       </h2>
       <span flex></span>
@@ -20,36 +20,113 @@
                      style="position: relative;"
                      flex>
     <div class="md-dialog-content">
-      <div class="timer"
-           ng-bind="(vm.pomodoroData.currentSessionTime | date:'mm:ss')"></div>
+      <div class="inner-wrapper">
+        <div class="timer"
+             ng-bind="(vm.pomodoroData.currentSessionTime | date:'mm:ss')"></div>
 
-      <div class="task">
-        <h2 ng-bind="vm.currentTask.title"
-            edit-on-click="vm.currentTask.title"
-            class="title"></h2>
-        <section>
-          <div class="md-caption"
-               ng-bind="vm.currentTask.originalId ? 'Description': 'Notes'"></div>
-          <div md-whiteframe="4">
-            <inline-markdown ng-model="vm.currentTask.notes"
-                             on-edit-finished="$ctrl.onTaskNotesEditFinished(newVal, isChanged, vm.currentTask)"></inline-markdown>
+        <div class="task is-current">
+          <h2 edit-on-click="vm.task.title"
+              class="title"></h2>
+          <md-progress-linear md-mode="determinate"
+                              value="{{vm.task.progress}}"></md-progress-linear>
+          <div class="time"
+               ng-bind="(vm.task.timeSpent|duration) +' / ' + (vm.task.timeEstimate|duration)"></div>
+
+          <div class="controls">
+            <md-button class="md-fab md-raised md-primary"
+                       aria-label="play/pause"
+                       tabindex="2"
+                       ng-class="{'md-accent':vm.task.id === vm.currentTask.id}"
+                       ng-click="vm.togglePlay()">
+              <ng-md-icon icon="{{vm.task.id === vm.currentTask.id ? 'pause':'play_arrow'}}"
+                          aria-label="play/pause"></ng-md-icon>
+              <md-tooltip md-direction="top">Start/Pause working</md-tooltip>
+            </md-button>
+            <!--<md-button class="md-fab md-raised md-primary"-->
+            <!--tabindex="2"-->
+            <!--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-fab md-raised md-primary"
+                       aria-label="link"
+                       tabindex="2"
+                       target="_blank"
+                       ng-if="::vm.task.originalLink"
+                       external-link
+                       ng-href="{{ ::vm.task.originalLink }}">
+              <ng-md-icon icon="{{vm.task.originalType ==='GITHUB' ? 'github-circle':'link'}}"
+                          aria-label="link"></ng-md-icon>
+              <md-tooltip md-direction="top">Go to issue page</md-tooltip>
+            </md-button>
+            <md-button class="md-fab md-raised md-primary"
+                       tabindex="2"
+                       aria-label="Mark as done and start next task"
+                       ng-click="vm.estimateTime()">
+              <ng-md-icon icon="check"
+                          aria-label="Mark as done and start next task"></ng-md-icon>
+              <md-tooltip md-direction="top">Mark as done and start next task</md-tooltip>
+            </md-button>
           </div>
-        </section>
+
+
+          <section class="notes">
+            <div class="md-headline"
+                 ng-bind="vm.task.originalId ? 'Description': 'Notes'"></div>
+            <inline-markdown ng-model="vm.task.notes"
+                             md-whiteframe="4"
+                             on-edit-finished="vm.onTaskNotesEditFinished(newVal, isChanged, vm.task)"></inline-markdown>
+          </section>
+
+          <section ng-if="vm.task.localAttachments && vm.task.localAttachments.length">
+            <collapsible collapsible-title="Local attachments and links"
+                         is-initially-expanded="'true'">
+              <task-local-links local-links="vm.task.localAttachments"></task-local-links>
+            </collapsible>
+          </section>
+
+          <section ng-if="vm.task.originalAssigneeKey"
+                   class="assignee">
+            <div class="md-caption">Assignee: <span ng-bind="vm.task.originalAssigneeKey"></span></div>
+          </section>
+
+          <section ng-if="vm.task.originalAttachment.length > 0">
+            <collapsible collapsible-title="Attachments ({{ ::vm.task.originalAttachment.length }})"
+                         is-initially-expanded="'true'">
+              <ul class="attachments">
+                <li ng-repeat="attachment in vm.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>
+            </collapsible>
+          </section>
+
+          <section ng-if="vm.task.originalComments.length > 0">
+            <collapsible collapsible-title="Comments ({{:: vm.task.originalComments.length }})"
+                         is-initially-expanded="'true'">
+              <md-divider></md-divider>
+              <ul class="comments">
+                <li ng-repeat="comment in vm.task.originalComments"
+                    class="comment">
+                  <strong class="author">[<span ng-bind="::comment.author"></span>]: </strong>
+                  <span marked="comment.body"></span>
+                </li>
+              </ul>
+            </collapsible>
+          </section>
+        </div>
       </div>
     </div>
-
-
-    <md-dialog-actions>
-      <md-button ng-click="vm.continue()"
-                 class="md-primary md-raised">
-        <span ng-if="!vm.isFocusDone">But I want to work (skip break)!!</span>
-        <span ng-if="vm.isFocusDone">Go back to work!</span>
-      </md-button>
-      <md-button class="md-raised"
-                 ng-click="vm.cancel()">
-        Hide me
-      </md-button>
-    </md-dialog-actions>
   </md-dialog-content>
 
 </md-dialog>
diff --git a/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.js b/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.js
index 185064d080..058bb0e759 100644
--- a/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.js
+++ b/app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.js
@@ -14,16 +14,18 @@
     .controller('PomodoroFocusCtrl', PomodoroFocusCtrl);
 
   /* @ngInject */
-  function PomodoroFocusCtrl($mdDialog, $rootScope, theme, pomodoroData, pomodoroConfig, $scope, $timeout, IS_ELECTRON, PomodoroButton, Notifier) {
+  function PomodoroFocusCtrl($mdDialog, $rootScope, theme, pomodoroData, pomodoroConfig, $scope, $timeout, IS_ELECTRON, PomodoroButton, Notifier, Tasks) {
     this.r = $rootScope.r;
     this.theme = theme;
     this.pomodoroData = pomodoroData;
     this.isShowDistractionsOnFocus = pomodoroConfig.isShowDistractionsOnFocus;
     this.isFocusDone = false;
-    this.currentTask = this.r.currentTask;
+
+    this.currentTask = Tasks.getCurrent();
+    this.task = Tasks.getCurrent() || Tasks.getLastCurrent();
 
     console.log(this.r);
-    
+
     if (IS_ELECTRON) {
       window.ipcRenderer.send('SHOW_OR_FOCUS');
     }