vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-11-25 23:27:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Closes #332: tag text color legibility

Browse Source
This commit is contained in:
bgamard 2020-02-15 23:00:35 +01:00
parent 4233f4dd88
commit 4c7f3166d4
5 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs-web/src/main/webapp/src/app/docs/directive/InvertTextColor.js Normal file
View File

@ -0,0 +1,25 @@
'use strict';
/**
* Invert text color for more legibility directive.
*/
angular.module('docs').directive('invertTextColor', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
attrs.$observe('invertTextColor', function(hex) {
if (!hex || hex.length !== 7) {
return;
}
hex = hex.slice(1);
var r = parseInt(hex.slice(0, 2), 16),
g = parseInt(hex.slice(2, 4), 16),
b = parseInt(hex.slice(4, 6), 16);
element.css('color', (r * 0.299 + g * 0.587 + b * 0.114) > 186
? '#000000'
: '#FFFFFF');
});
}
}
});

1
docs-web/src/main/webapp/src/index.html
View File

@ -107,6 +107,7 @@
<script src="app/docs/directive/AclEdit.js" type="text/javascript"></script> <script src="app/docs/directive/AclEdit.js" type="text/javascript"></script>
<script src="app/docs/directive/Pell.js" type="text/javascript"></script> <script src="app/docs/directive/Pell.js" type="text/javascript"></script>
<script src="app/docs/directive/AddSpaceBetween.js" type="text/javascript"></script> <script src="app/docs/directive/AddSpaceBetween.js" type="text/javascript"></script>
<script src="app/docs/directive/InvertTextColor.js" type="text/javascript"></script>
<!-- endref --> <!-- endref -->
</head> </head>
<body translate-cloak ng-cloak> <body translate-cloak ng-cloak>

2
docs-web/src/main/webapp/src/partial/docs/directive.selecttag.html
View File

@ -1,7 +1,7 @@
<div> <div>
<ul class="list-inline"> <ul class="list-inline">
<li ng-repeat="tag in tags"> <li ng-repeat="tag in tags">
<span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }} <span class="label label-info" ng-style="{ 'background': tag.color }" invert-text-color="{{ tag.color }}">{{ tag.name }}
<span class="fas fa-times" ng-click="deleteTag(tag)" ng-show="!ngDisabled"></span> <span class="fas fa-times" ng-click="deleteTag(tag)" ng-show="!ngDisabled"></span>
</span> </span>
</li> </li>

2
docs-web/src/main/webapp/src/partial/docs/document.html
View File

@ -258,7 +258,7 @@
</div> </div>
<div class="tags small"> <div class="tags small">
<span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }" add-space-between> <span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }" invert-text-color="{{ tag.color }}" add-space-between>
{{ tag.name }} {{ tag.name }}
</span> </span>
</div> </div>

2
docs-web/src/main/webapp/src/partial/docs/document.view.html
View File

@ -63,7 +63,7 @@
<ul class="list-inline"> <ul class="list-inline">
<li ng-repeat="tag in document.tags"> <li ng-repeat="tag in document.tags">
<span class="label label-info pointer" ng-click="setSearch('tag:' + tag.name)" ng-style="{ 'background': tag.color }">{{ tag.name }}</span> <span class="label label-info pointer" ng-click="setSearch('tag:' + tag.name)" ng-style="{ 'background': tag.color }" invert-text-color="{{ tag.color }}">{{ tag.name }}</span>
</li> </li>
</ul> </ul>
</div> </div>