mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-29 10:40:12 +00:00
feat(focusMode): add ui for component
This commit is contained in:
Johannes Millan
parent
8943f1bd76
commit
da97c4cee0
3 changed files with 164 additions and 32 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue