Skip to content

Commit da97c4c

Browse files
johannesjojohannesjo
committed
feat(focusMode): add ui for component
1 parent 8943f1b commit da97c4c

File tree

3 files changed

+165
-33
lines changed

3 files changed

+165
-33
lines changed

‎app-src/scripts/dialogs/pomodoro-focus/_pomodoro-focus-c.scss‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,67 @@
11
.pomodoro-focus-dialog {
2+
text-align: center;
3+
4+
.md-dialog-content {
5+
}
6+
.inner-wrapper {
7+
max-width: $component-max-width;
8+
margin: auto;
9+
}
10+
211
.timer {
312
font-weight: bold;
413
text-align: center;
514
font-size: 34px;
6-
margin: 20px 0;
15+
margin: 5px 0 0;
716
}
817

9-
.task {
18+
.task.is-current {
19+
border: none;
20+
background: transparent;
21+
1022
.title {
23+
&,
24+
input {
25+
text-align: center;
26+
}
27+
}
28+
29+
md-progress-linear {
30+
// needed to overwrite ng-materials default styles
31+
margin-bottom: 10px !important;
32+
border-bottom: 1px dashed #bcbcbc;
33+
34+
.md-bar,
35+
.md-container {
36+
height: 8px;
37+
}
38+
}
39+
40+
.time {
1141
text-align: center;
42+
font-size: 16px;
43+
margin-bottom: 15px;
44+
}
45+
46+
.notes {
47+
margin-top: 15px;
48+
inline-markdown {
49+
text-align: left;
50+
}
51+
}
52+
53+
task-local-links {
54+
li {
55+
display: inline-block;
56+
a {
57+
display: inline-block;
58+
white-space: nowrap;
59+
}
60+
61+
.trash-button {
62+
margin-left: 5px;
63+
}
64+
}
1265
}
1366
}
1467
}

‎app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.html‎

Lines changed: 105 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<md-toolbar>
55
<div class="md-toolbar-tools">
66
<h2>
7-
<ng-md-icon icon="free_breakfast"></ng-md-icon>
7+
<ng-md-icon icon="my_location"></ng-md-icon>
88
Focus Mode
99
</h2>
1010
<span flex></span>
@@ -20,36 +20,113 @@ <h2>
2020
style="position: relative;"
2121
flex>
2222
<div class="md-dialog-content">
23-
<div class="timer"
24-
ng-bind="(vm.pomodoroData.currentSessionTime | date:'mm:ss')"></div>
25-
26-
<div class="task">
27-
<h2 ng-bind="vm.currentTask.title"
28-
edit-on-click="vm.currentTask.title"
29-
class="title"></h2>
30-
<section>
31-
<div class="md-caption"
32-
ng-bind="vm.currentTask.originalId ? 'Description': 'Notes'"></div>
33-
<div md-whiteframe="4">
34-
<inline-markdown ng-model="vm.currentTask.notes"
35-
on-edit-finished="$ctrl.onTaskNotesEditFinished(newVal, isChanged, vm.currentTask)"></inline-markdown>
23+
<div class="inner-wrapper">
24+
<div class="timer"
25+
ng-bind="(vm.pomodoroData.currentSessionTime | date:'mm:ss')"></div>
26+
27+
<div class="task is-current">
28+
<h2 edit-on-click="vm.task.title"
29+
class="title"></h2>
30+
<md-progress-linear md-mode="determinate"
31+
value="{{vm.task.progress}}"></md-progress-linear>
32+
<div class="time"
33+
ng-bind="(vm.task.timeSpent|duration) +' / ' + (vm.task.timeEstimate|duration)"></div>
34+
35+
<div class="controls">
36+
<md-button class="md-fab md-raised md-primary"
37+
aria-label="play/pause"
38+
tabindex="2"
39+
ng-class="{'md-accent':vm.task.id === vm.currentTask.id}"
40+
ng-click="vm.togglePlay()">
41+
<ng-md-icon icon="{{vm.task.id === vm.currentTask.id ? 'pause':'play_arrow'}}"
42+
aria-label="play/pause"></ng-md-icon>
43+
<md-tooltip md-direction="top">Start/Pause working</md-tooltip>
44+
</md-button>
45+
<!--<md-button class="md-fab md-raised md-primary"-->
46+
<!--tabindex="2"-->
47+
<!--aria-label="time estimation"-->
48+
<!--ng-click="vm.estimateTime(task)">-->
49+
<!--<ng-md-icon icon="access_time"-->
50+
<!--aria-label="time estimation"></ng-md-icon>-->
51+
<!--</md-button>-->
52+
<md-button class="md-fab md-raised md-primary"
53+
aria-label="link"
54+
tabindex="2"
55+
target="_blank"
56+
ng-if="::vm.task.originalLink"
57+
external-link
58+
ng-href="{{ ::vm.task.originalLink }}">
59+
<ng-md-icon icon="{{vm.task.originalType ==='GITHUB' ? 'github-circle':'link'}}"
60+
aria-label="link"></ng-md-icon>
61+
<md-tooltip md-direction="top">Go to issue page</md-tooltip>
62+
</md-button>
63+
<md-button class="md-fab md-raised md-primary"
64+
tabindex="2"
65+
aria-label="Mark as done and start next task"
66+
ng-click="vm.estimateTime()">
67+
<ng-md-icon icon="check"
68+
aria-label="Mark as done and start next task"></ng-md-icon>
69+
<md-tooltip md-direction="top">Mark as done and start next task</md-tooltip>
70+
</md-button>
3671
</div>
37-
</section>
38-
</div>
39-
</div>
4072

4173

42-
<md-dialog-actions>
43-
<md-button ng-click="vm.continue()"
44-
class="md-primary md-raised">
45-
<span ng-if="!vm.isFocusDone">But I want to work (skip break)!!</span>
46-
<span ng-if="vm.isFocusDone">Go back to work!</span>
47-
</md-button>
48-
<md-button class="md-raised"
49-
ng-click="vm.cancel()">
50-
Hide me
51-
</md-button>
52-
</md-dialog-actions>
74+
<section class="notes">
75+
<div class="md-headline"
76+
ng-bind="vm.task.originalId ? 'Description': 'Notes'"></div>
77+
<inline-markdown ng-model="vm.task.notes"
78+
md-whiteframe="4"
79+
on-edit-finished="vm.onTaskNotesEditFinished(newVal, isChanged, vm.task)"></inline-markdown>
80+
</section>
81+
82+
<section ng-if="vm.task.localAttachments && vm.task.localAttachments.length">
83+
<collapsible collapsible-title="Local attachments and links"
84+
is-initially-expanded="'true'">
85+
<task-local-links local-links="vm.task.localAttachments"></task-local-links>
86+
</collapsible>
87+
</section>
88+
89+
<section ng-if="vm.task.originalAssigneeKey"
90+
class="assignee">
91+
<div class="md-caption">Assignee: <span ng-bind="vm.task.originalAssigneeKey"></span></div>
92+
</section>
93+
94+
<section ng-if="vm.task.originalAttachment.length > 0">
95+
<collapsible collapsible-title="Attachments ({{ ::vm.task.originalAttachment.length }})"
96+
is-initially-expanded="'true'">
97+
<ul class="attachments">
98+
<li ng-repeat="attachment in vm.task.originalAttachment">
99+
<a href="{{ ::attachment}}"
100+
external-link
101+
target="_blank"
102+
class="md-accent">{{ ::attachment}}</a>
103+
<a href="{{ ::attachment}}"
104+
download="{{ ::attachment}}"
105+
class="md-accent">
106+
<ng-md-icon icon="file_download"
107+
aria-label="download file directly"></ng-md-icon>
108+
</a>
109+
</li>
110+
</ul>
111+
</collapsible>
112+
</section>
113+
114+
<section ng-if="vm.task.originalComments.length > 0">
115+
<collapsible collapsible-title="Comments ({{:: vm.task.originalComments.length }})"
116+
is-initially-expanded="'true'">
117+
<md-divider></md-divider>
118+
<ul class="comments">
119+
<li ng-repeat="comment in vm.task.originalComments"
120+
class="comment">
121+
<strong class="author">[<span ng-bind="::comment.author"></span>]: </strong>
122+
<span marked="comment.body"></span>
123+
</li>
124+
</ul>
125+
</collapsible>
126+
</section>
127+
</div>
128+
</div>
129+
</div>
53130
</md-dialog-content>
54131

55132
</md-dialog>

‎app-src/scripts/dialogs/pomodoro-focus/pomodoro-focus-c.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,18 @@
1414
.controller('PomodoroFocusCtrl', PomodoroFocusCtrl);
1515

1616
/* @ngInject */
17-
function PomodoroFocusCtrl($mdDialog, $rootScope, theme, pomodoroData, pomodoroConfig, $scope, $timeout, IS_ELECTRON, PomodoroButton, Notifier) {
17+
function PomodoroFocusCtrl($mdDialog, $rootScope, theme, pomodoroData, pomodoroConfig, $scope, $timeout, IS_ELECTRON, PomodoroButton, Notifier, Tasks) {
1818
this.r = $rootScope.r;
1919
this.theme = theme;
2020
this.pomodoroData = pomodoroData;
2121
this.isShowDistractionsOnFocus = pomodoroConfig.isShowDistractionsOnFocus;
2222
this.isFocusDone = false;
23-
this.currentTask = this.r.currentTask;
23+
24+
this.currentTask = Tasks.getCurrent();
25+
this.task = Tasks.getCurrent() || Tasks.getLastCurrent();
2426

2527
console.log(this.r);
26-
28+
2729
if (IS_ELECTRON) {
2830
window.ipcRenderer.send('SHOW_OR_FOCUS');
2931
}

0 commit comments

Comments
 (0)