Better display for tags in document list

This commit is contained in:
jendib 2013-08-07 13:51:29 +02:00
parent 395b528b4b
commit 1deda6e993
4 changed files with 38 additions and 1 deletions

View File

@ -45,6 +45,7 @@
<script src="js/service/User.js" type="text/javascript"></script> <script src="js/service/User.js" type="text/javascript"></script>
<script src="js/service/Tag.js" type="text/javascript"></script> <script src="js/service/Tag.js" type="text/javascript"></script>
<script src="js/filter/Newline.js" type="text/javascript"></script> <script src="js/filter/Newline.js" type="text/javascript"></script>
<script src="js/filter/Shorten.js" type="text/javascript"></script>
<script src="js/directive/File.js" type="text/javascript"></script> <script src="js/directive/File.js" type="text/javascript"></script>
<script src="js/directive/SelectTag.js" type="text/javascript"></script> <script src="js/directive/SelectTag.js" type="text/javascript"></script>
<script src="js/directive/InlineEdit.js" type="text/javascript"></script> <script src="js/directive/InlineEdit.js" type="text/javascript"></script>

View File

@ -0,0 +1,13 @@
'use strict';
/**
* Filter shortening text in one letter uppercase.
*/
App.filter('shorten', function() {
return function(text) {
if (!text) {
return '';
}
return text.substring(0, 1).toUpperCase();
}
})

View File

@ -49,7 +49,9 @@
<td>{{ document.title }}</td> <td>{{ document.title }}</td>
<td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td> <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
<td class="hidden-phone cell-tags"> <td class="hidden-phone cell-tags">
<span class="label label-info" ng-repeat="tag in document.tags">{{ tag.name }}</span> <div class="tags">
<span class="label label-info" ng-repeat="tag in document.tags"><span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span></span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

View File

@ -18,6 +18,27 @@
.label { .label {
margin-left: 2px; margin-left: 2px;
.full {
display: none;
}
}
&:hover {
.tags {
position: absolute;
margin-top: -10px;
.label {
.full {
display: inline;
}
.shorten {
display: none;
}
}
}
} }
} }
} }