Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-01-23 02:36:05 +00:00
Code Issues Projects Releases Wiki Activity

beautify daily planner with angular material

Browse source
This commit is contained in:
Johannes Millan 2016-12-31 01:17:43 +01:00
parent c93a1df27c
commit 71315337fb
7 changed files with 152 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/index.html
View file

@ -21,6 +21,8 @@ TODO configure more restrictive Content-Security-Policy
<!-- build:css({.tmp,app}) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/angular-material-icons/angular-material-icons.css" />
<!-- endbower -->
<!-- endbuild -->
@ -58,6 +60,9 @@ TODO configure more restrictive Content-Security-Policy
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
<!-- endbower -->
<!-- endbuild -->

10
app/scripts/_app.js
View file

@ -17,6 +17,12 @@
'ngResource',
'ui.router',
'ngStorage',
'dndLists'
]);
'dndLists',
'ngMaterial',
'ngMdIcons'
])
.run(checkIfStartedTodayAndInit);
function checkIfStartedTodayAndInit($localStorage) {
}
})();

30
app/scripts/daily-planner/_daily-planner-d.scss
View file

@ -1,12 +1,17 @@
daily-planner {
display: block;
md-input-container {
overflow: hidden;
}
.task-list {
min-height: 100px;
list-style: none;
// add a little padding to top and bottom, to make drag dropping easier
padding: 20px 0;
padding: 5px 0;
margin: 0;
.dndDraggingSource {
display: none;
@ -17,7 +22,6 @@ daily-planner {
min-height: 42px;
}
&__backlog {
border: 1px dashed gray;
}
}
@ -26,13 +30,31 @@ daily-planner {
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
&.is-selected {
background-color: #dff0d8;
color: #3c763d;
}
.handle {
margin-right: 10px;
}
textarea,
input {
width: 100%;
display: block;
box-shadow: inset 1px 3px 7px -6px;
height: 30px;
padding: 4px 10px;
}
.notes {
width: 100%;
margin-left: 10px;
textarea {
min-height: 100px;
}
}
}
}

126
app/scripts/daily-planner/daily-planner-d.html
View file

@ -1,84 +1,144 @@
<div class="daily-planner">
<h1 class="md-headline">Plan your day!</h1>
<div ng-if="!vm.step || vm.step ===0">
<div class="input">
<div class="info">
<p>What do you want to do today?</p>
<p>If you're done, you should spend some time prioritizing your tasks, by ordering them via drag and drop.</p>
</div>
<form ng-submit="vm.addTask()">
<input class="text-input"
autofocus
ng-model="vm.newTask">
<md-input-container md-no-float
class="md-block"
layout="row">
<ng-md-icon size="24"
icon="mode_edit"></ng-md-icon>
<input class="text-input"
md-auto-focus
md-autofocus
ng-model="vm.newTask"
placeholder="Enter a task and press enter to add">
</md-input-container>
</form>
<div class="done">
<button ng-click="done()">All done!</button>
<div class="done"
layout="row"
layout-sm="column"
layout-align="center center">
<md-button class="md-raised md-primary"
ng-click="done()">All done!
</md-button>
</div>
<h2>Tasks for today</h2>
<h2 class="md-title">Tasks for today</h2>
<ul class="task-list"
dnd-list="vm.tasks">
<li class="task"
layout="row"
layout-align="center center"
dnd-draggable="task"
dnd-effect-allowed="move"
dnd-moved="vm.tasks.splice($index, 1);"
ng-class="{'is-selected': vm.listModel.selected === task}"
ng-repeat="task in vm.tasks">
<div dnd-handle
class="handle">::::
</div>
<ng-md-icon size="24"
class="handle"
flex="none"
icon="drag_handle"></ng-md-icon>
<div class="title">
<div class="title"
flex="auto"
layout="row"
layout-align="center center">
<input type="text"
ng-model="task.title">
</div>
<div class="notes"
ng-show="vm.showNotes[$index]===true">
<textarea ng-model="task.notes"></textarea>
flex="100"
ng-show="task.showNotes===true">
<label>Notes</label>
<textarea ng-model="task.notes"
rows="5"
md-auto-focus
md-select-on-focus></textarea>
</div>
<button ng-click="vm.showNotes[$index]=!vm.showNotes[$index]">Show</button>
<button ng-click="vm.tasks.splice($index, 1)">X</button>
<md-button class="md-icon-button"
ng-click="task.showNotes=!task.showNotes">
<ng-md-icon size="24"
icon="mode_comment"
aria-label="notes"></ng-md-icon>
</md-button>
<md-button class="md-icon-button"
ng-click="vm.tasks.splice($index, 1)">
<ng-md-icon size="24"
icon="delete_forever"
aria-label="delete"
style="fill: red;"></ng-md-icon>
</md-button>
</li>
</ul>
<div class="info">
</div>
<h2>Tasks Backlog (for some other time)</h2>
<h2 class="md-title">Tasks Backlog (for some other time)</h2>
<ul class="task-list task-list__backlog"
dnd-list="vm.listModel.lists.backlog">
<li class="task"
layout="row"
layout-align="center center"
dnd-draggable="task"
dnd-effect-allowed="move"
dnd-moved="vm.listModel.lists.backlog.splice($index, 1);"
dnd-moved="vm.tasks.splice($index, 1);"
ng-class="{'is-selected': vm.listModel.selected === task}"
ng-repeat="task in vm.listModel.lists.backlog | limitTo:vm.limitBacklogTo">
<div dnd-handle
class="handle">::::
</div>
<div class="title">
ng-repeat="task in vm.backlogTasks|limitTo:vm.limitBacklogTo">
<ng-md-icon size="24"
class="handle"
flex="none"
icon="drag_handle"></ng-md-icon>
<div class="title"
flex="auto"
layout="row"
layout-align="center center">
<input type="text"
ng-model="task.title">
</div>
<div class="notes"
ng-show="vm.showNotesBacklog[$index]===true">
<textarea ng-model="task.notes"></textarea>
flex="100"
ng-show="task.showNotes===true">
<label>Notes</label>
<textarea ng-model="task.notes"
rows="5"
md-auto-focus
md-select-on-focus></textarea>
</div>
<button ng-click="vm.showNotesBacklog[$index]=!vm.showNotesBacklog[$index]">Show</button>
<button ng-click="vm.tasks.splice($index, 1)">X</button>
<md-button class="md-icon-button"
ng-click="task.showNotes=!task.showNotes">
<ng-md-icon size="24"
icon="mode_comment"
aria-label="notes"></ng-md-icon>
</md-button>
<md-button class="md-icon-button"
ng-click="vm.backlogTasks.splice($index, 1)">
<ng-md-icon size="24"
icon="delete_forever"
aria-label="delete"
style="fill: red;"></ng-md-icon>
</md-button>
</li>
</ul>
<button ng-click="vm.limitBacklogTo = false"
ng-hide="vm.limitBacklogTo === false || vm.listModel.lists.backlog.length ===0">Show All {{ vm.listModel.lists.backlog.length }} items
</button>
<md-button class="md-primary"
ng-click="vm.limitBacklogTo = false"
ng-hide="vm.limitBacklogTo === false || vm.listModel.lists.backlog.length ===0">Show All {{ vm.listModel.lists.backlog.length }} items in Backlog
</md-button>
</div>
</div>

28
app/styles/base/_page.scss
View file

@ -1,25 +1,25 @@
* {
// global reset and border-box
&,
&:after,
&:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// global reset and border-box
&,
&:after,
&:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
body,
html {
// prevent overflow
width: 100%;
max-width: 100%;
overflow-x: hidden;
font-family: sans-serif;
// prevent overflow
width: 100%;
max-width: 100%;
overflow-x: hidden;
font-family: sans-serif;
}
main {
padding: 20px;
}
article {

4
bower.json
View file

@ -22,7 +22,9 @@
"angular-ui-router": "latest",
"angular-local-storage": "^0.5.2",
"angular-drag-and-drop-lists": "^2.0.0",
"ngstorage": "^0.3.11"
"ngstorage": "^0.3.11",
"angular-material": "^1.1.1",
"angular-material-icons": "^0.7.1"
},
"devDependencies": {
"angular-mocks": "^1.5.0"

3
karma.conf.js
View file

@ -22,6 +22,9 @@ module.exports = function(config) {
'app/bower_components/angular-local-storage/dist/angular-local-storage.js',
'app/bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js',
'app/bower_components/ngstorage/ngStorage.js',
'app/bower_components/angular-messages/angular-messages.js',
'app/bower_components/angular-material/angular-material.js',
'app/bower_components/angular-material-icons/angular-material-icons.min.js',
'app/bower_components/angular-mocks/angular-mocks.js',
// endbower