Add support for showing done/to do icon on articles.

This commit is contained in:
kor 2018-11-04 02:04:27 +13:00
parent b2a1d28b16
commit 4a47efd865
5 changed files with 34 additions and 18 deletions

View File

@ -421,15 +421,16 @@ article:hover .article-linktitle {
margin-right: var(--size-grid-gutter);
}
.article-type {
width: calc(var(--size-font-bodytypes)*2);
color: var(--color-item);
padding-bottom: var(--size-grid-gutter);
font-size: var(--size-font-bodytypes);
padding-top: var(--size-grid-gutter);
font-size: var(--size-font-bodytypes);
vertical-align: top;
text-align: center;
float: right;
text-decoration: none;
width: 30px;
padding-left: 10px;
}
.article-image .article-typeicon {
display: none;
@ -574,7 +575,7 @@ article:hover .textIcon {
left: 0;
top: 0;
/* content */
display: flex;
display: none;
align-items: center;
justify-content: center;
user-select: none;

View File

@ -12,6 +12,7 @@ const SETTINGS =
SHOWDATE: true,
SHOWAUTH: true,
SHOWTYPE: true,
SHOWDONE: true,
SHOWLINK: true,
SHOWLOWER: true,
SHOWTAGS: true,

View File

@ -145,16 +145,28 @@ function Grid()
}
// TYPE
if (SETTINGS.SHOWTYPE || SETTINGS.SHOWDONE)
{
article += `<div class="article-typecontainer">`;
if (SETTINGS.SHOWTYPE && main.util.isDefined(value.TYPE))
{
article += `<div class="article-typecontainer">`;
for (let tc = 0; tc < value.TYPE.length; tc++)
{
article += `<a class="article-type" href='#type-${value.TYPE[tc]}'>`;
article += main.util.buildIcon(value.TYPE[tc], value.TYPE[tc], 'article-typeicon');
article += `</a>`;
}
}
if (SETTINGS.SHOWDONE)
{
let done = main.util.isDefined(value.DONE) ? value.DONE : 'false';
article += `<a class="article-type" href='#done-${done}'>`;
article += main.util.buildIcon(done, done, 'article-typeicon');
article += `</a>`;
}
article += `</div>`;
}
@ -356,12 +368,4 @@ function Grid()
lightbox.load(`content/media/${file}`);
}
}
main.util.buildIcon = function(type, label, altClass)
{
if (label == undefined) { label = type; }
let labelElem = label != null ? `title="${label}" ` : ``;
let iconClass = altClass == undefined ? 'article-icon' : altClass;
return `<i ${labelElem}class="${main.util.getIcon(type)} textIcon ${iconClass}"></i>`;
}
}

View File

@ -34,11 +34,11 @@ function Nav()
navContent += `<div class="nav-itemgroup">`;
navContent += `<a href='#done-true' class="nav-item">`;
navContent += `<div class="nav-itemcount">${value.done}</div>`;
navContent += `<i title="done" class="nav-itemicon fas fa-check"></i>`;
navContent += `<i title="done" class="nav-itemicon ${main.util.getIcon('true')}"></i>`;
navContent += `</a>`;
navContent += `<a href='#done-false' class="nav-item">`;
navContent += `<div class="nav-itemcount">${value.total - value.done}</div>`;
navContent += `<i title="to do" class="nav-itemicon fas fa-times"></i>`;
navContent += `<i title="to do" class="nav-itemicon ${main.util.getIcon('false')}"></i>`;
navContent += `</a>`;
navContent += `</div>`;
}

View File

@ -1,5 +1,13 @@
function Util()
{
this.buildIcon = function(type, label, altClass)
{
if (label == undefined) { label = type; }
let labelElem = label != null ? `title="${label}" ` : ``;
let iconClass = altClass == undefined ? 'article-icon' : altClass;
return `<i ${labelElem}class="${main.util.getIcon(type)} textIcon ${iconClass}"></i>`;
}
this.getIcon = function(type)
{
let icon = '';
@ -28,6 +36,8 @@ function Util()
case 'file': icon = 'fas fa-folder-open'; break;
case 'dash': icon = 'fas fa-caret-right'; break;
case 'link': icon = 'fas fa-link'; break;
case 'true': icon = 'fas fa-check'; break;
case 'false': icon = 'fas fa-times'; break;
}
return icon;
}