feat(thumbnails): add thumbnails

This commit is contained in:
Johannes Millan 2018-03-08 22:59:56 +01:00
parent bbdeb5c266
commit 05fb01ff24
3 changed files with 65 additions and 4 deletions

View file

@ -44,7 +44,7 @@
if (isNew) {
if (vm.selectedTask) {
Tasks.addLocalAttachment(vm.selectedTask, link);
Tasks.addLocalAttachment(vm.selectedTask, vm.linkCopy);
} else {
GlobalLinkList.addItem(vm.linkCopy);
}

View file

@ -1,5 +1,4 @@
task-local-links {
li {
display: flex;
flex-wrap: wrap;
@ -16,4 +15,35 @@ task-local-links {
ng-md-icon {
}
}
li.thumbnail-box {
max-width: 32%;
display: block;
float: left;
margin-bottom: 10px;
margin-right: 1%;
img {
max-width: 100%;
height: auto;
}
.status-line {
white-space: nowrap;
overflow: hidden;
a,
.md-button.md-icon-button {
display: inline-block;
margin-left: 0;
ng-md-icon {
}
}
}
}
.thumbnail-box + .normal-link {
padding-top: 20px;
clear: left;
}
}

View file

@ -1,5 +1,35 @@
<ul class="attachments">
<li ng-repeat="link in $ctrl.localLinks track by $index">
<!-- images -->
<li ng-repeat="link in $ctrl.localLinks |filter:{type:'IMG'} track by $index"
class="thumbnail-box">
<img src="{{::link.path}}">
<div class="status-line">
<md-button class="md-icon-button md-raised md-warn trash-button"
ng-click="$ctrl.removeLink($index)"
aria-label="remove link">
<ng-md-icon icon="delete_forever"
size="22"></ng-md-icon>
</md-button>
<a external-link
class="md-accent"
href="{{::link.path}}"
type="{{::link.type}}"
target="_blank"
tabindex="1"
draggable="false"
aria-label="open global link">
<div>
<span ng-bind="link.title"></span>
</div>
</a>
</div>
</li>
<!-- non images -->
<li ng-repeat="link in $ctrl.localLinks |filter:{type:'!IMG'} track by $index"
class="normal-link">
<a external-link
class="md-accent"
href="{{::link.path}}"
@ -29,7 +59,8 @@
<md-button class="md-icon-button md-raised md-warn trash-button"
ng-click="$ctrl.removeLink($index)"
aria-label="remove link">
<ng-md-icon icon="delete_forever" size="22"></ng-md-icon>
<ng-md-icon icon="delete_forever"
size="22"></ng-md-icon>
</md-button>
</li>
</ul>