UX: Convert bookmark icon from CSS to a proper icon using our helper

This commit is contained in:
Robin Ward 2017-09-07 11:41:19 -04:00
parent 0ba789de17
commit afc075d93b
2 changed files with 11 additions and 25 deletions

View File

@ -173,20 +173,18 @@ registerButton('reply', attrs => {
registerButton('bookmark', attrs => { registerButton('bookmark', attrs => {
if (!attrs.canBookmark) { return; } if (!attrs.canBookmark) { return; }
let iconClass = 'read-icon'; let className = 'bookmark';
let buttonClass = 'bookmark';
let tooltip = 'bookmarks.not_bookmarked';
if (attrs.bookmarked) { if (attrs.bookmarked) {
iconClass += ' bookmarked'; className += ' bookmarked';
buttonClass += ' bookmarked';
tooltip = 'bookmarks.created';
} }
return { action: 'toggleBookmark', return {
title: tooltip, action: 'toggleBookmark',
className: buttonClass, title: attrs.bookmarked ? "bookmarks.created" : "bookmarks.not_bookmarked",
contents: h('div', { className: iconClass }) }; className,
icon: 'bookmark'
};
}); });
registerButton('admin', attrs => { registerButton('admin', attrs => {

View File

@ -161,25 +161,13 @@ nav.post-controls {
box-shadow: none; box-shadow: none;
} }
&.bookmark {padding: 8px 11px; } &.bookmark {
padding: 8px 11px;
.read-icon {
&:before {
font-family: "FontAwesome";
content: "\f02e";
}
&.unseen {
&:before {
content: "\f097";
}
}
&.bookmarked { &.bookmarked {
&:before {
color: $tertiary; color: $tertiary;
} }
} }
} }
}
.post-admin-menu { .post-admin-menu {
background-color: $secondary; background-color: $secondary;