Notification follows and actions

FossilOrigin-Name: 18a89f78e128c8c3c6726fe9ba907924959f81712cfe0728f89a92fd15cd936a
This commit is contained in:
me@ow.nekobit.net 2022-03-31 14:56:05 +00:00
parent bc62da764c
commit 421a7801b7
12 changed files with 114 additions and 20 deletions

View file

@ -72,7 +72,10 @@ $(PAGES_DIR)/like_svg.chtml: $(PAGES_DIR)/like_svg.html
./filec $< data_like_svg_html > $@
$(PAGES_DIR)/repeat_svg.chtml: $(PAGES_DIR)/repeat_svg.html
./filec $< data_repeat_svg_html > $@
$(PAGES_DIR)/follow_svg.chtml: $(PAGES_DIR)/follow_svg.html
./filec $< data_follow_svg_html > $@
$(PAGES_DIR)/notification_action.chtml: $(PAGES_DIR)/notification_action.html
./filec $< data_notification_action_html > $@
$(MASTODONT_DIR):
git clone $(MASTODONT_URL) || true

1
dist/svg/user-plus.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>

After

Width:  |  Height:  |  Size: 369 B

42
dist/treebird20.css vendored
View file

@ -275,6 +275,7 @@ ul li:first-child a.sidebarbtn
.notification
{
border-bottom: 1px solid #dadada;
width: 100%;
}
.pfp-compact-td
@ -308,14 +309,28 @@ ul li:first-child a.sidebarbtn
font-weight: bold;
}
.notification-info svg
.notification-info svg,
.notification-info-format svg
{
width: 16px;
height: 16px;
stroke: #aa0000;
}
.notification-info svg.like
.notification-table-bit
{
width: auto;
}
/* Only move up if SVG is next to it, the SVG moves the text */
.notification .notification-text-group-with-icon
{
position: relative;
top: -2px;
}
.notification-info svg.like,
.notification-info-format svg.like
{
fill: #aa0000;
}
@ -338,7 +353,8 @@ ul li:first-child a.sidebarbtn
margin-top: 7px;
}
.notification-info img
.notification-info img,
.notification-info-format img
{
margin-left: 36px;
width: 24px;
@ -346,7 +362,8 @@ ul li:first-child a.sidebarbtn
object-fit: cover;
}
.notification-info .notification-user
.notification-info .notification-user,
.ntoification-info-format .notification-user
{
display: inline;
position: relative;
@ -356,7 +373,8 @@ ul li:first-child a.sidebarbtn
/***************************
* Statuses *
**************************/
.status
.status,
.notification-regular
{
padding: 6px 2px 0 6px;
border-bottom: 1px solid #cacaca !important;
@ -370,7 +388,8 @@ ul li:first-child a.sidebarbtn
border-left: 3px solid #aa0000;
}
.notification-info + .status
.notification-info + .status,
.notification-info-format + .status
{
padding-top: 0;
}
@ -409,13 +428,13 @@ ul li:first-child a.sidebarbtn
}
.status .status-info
.status .status-info,
.notification-info-format,
.notification-content
{
margin: 0 5px 0px;
min-width: 0;
width: auto;
padding: 0 5px 0 5px;
display: flex;
padding: 0 0 0 10px;
}
.status .status-info > table.ui-table
@ -448,7 +467,8 @@ ul li:first-child a.sidebarbtn
max-width: 520px;
}
.status .username
.status .username,
.notification-regular .username
{
font-weight: bold;
text-overflow: ellipsis;

View file

@ -16,6 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
#include <string.h>
#include <stdint.h>
#include <stdlib.h>
#include "notifications.h"
@ -24,10 +25,12 @@
#include "easprintf.h"
#include "status.h"
#include "error.h"
#include "../config.h"
// Pages
#include "../static/notifications_page.chtml"
#include "../static/notifications.chtml"
#include "../static/notification_action.chtml"
#include "../static/notification.chtml"
#include "../static/notification_compact.chtml"
#include "../static/like_svg.chtml"
@ -44,20 +47,37 @@ char* construct_notification(struct mstdnt_notification* notif, int* size)
notif_html = construct_status(notif->status, &s, notif, 0);
}
else {
notif_html = NULL;
notif_html = construct_notification_action(notif, &s);
}
if (size) *size = s;
return notif_html;
}
char* construct_notification_action(struct mstdnt_notification* notif, int* size)
{
char* notif_html;
int s;
s = easprintf(&notif_html, data_notification_action_html,
notif->account->avatar,
notif->account->display_name,
notification_type_compact_str(notif->type),
notification_type_svg(notif->type),
config_url_prefix,
notif->account->acct,
notif->account->acct);
if (size) *size = s;
return notif_html;
}
char* construct_notification_compact(struct mstdnt_notification* notif, int* size)
{
char* notif_html;
char* notif_stats = NULL;
const char* type_str = notification_type_str(notif->type);
const char* type_str = notification_type_compact_str(notif->type);
const char* type_svg = notification_type_svg(notif->type);
if (notif->status)
@ -69,6 +89,8 @@ char* construct_notification_compact(struct mstdnt_notification* notif, int* siz
size_t s = easprintf(&notif_html, data_notification_compact_html,
notif->account->avatar,
/* If there is an icon, the text doesn't shift up relative to the SVG, this is a hack on the CSS side */
strlen(type_svg) == 0 ? "" : "-with-icon",
notif->account->display_name,
type_str,
type_svg,

View file

@ -23,6 +23,7 @@
#include "type_string.h"
char* construct_notification(struct mstdnt_notification* notif, int* size);
char* construct_notification_action(struct mstdnt_notification* notif, int* size);
char* construct_notification_compact(struct mstdnt_notification* notif, int* size);
char* construct_notifications(struct mstdnt_notification* notifs,
size_t size,

View file

@ -106,7 +106,6 @@ char* construct_status(struct mstdnt_status* status,
uint8_t flags)
{
char* stat_html;
const char* type_svg = notification_type_svg(notif->type);
// Counts
char* reply_count = NULL;
@ -130,7 +129,7 @@ char* construct_status(struct mstdnt_status* status,
notif->account->avatar,
notif->account->display_name,
notification_type_str(notif->type),
type_svg);
notification_type_svg(notif->type));
size_t s = easprintf(&stat_html, data_status_html,

View file

@ -17,10 +17,27 @@
*/
#include "type_string.h"
// Icons
#include "../static/like_svg.chtml"
#include "../static/repeat_svg.chtml"
#include "../static/follow_svg.chtml"
const char* notification_type_str(mstdnt_notification_t type)
{
switch (type)
{
case MSTDNT_NOTIFICATION_FOLLOW: return L10N[L10N_EN_US][L10N_NOTIF_FOLLOW];
case MSTDNT_NOTIFICATION_FOLLOW_REQUEST: return L10N[L10N_EN_US][L10N_NOTIF_FOLLOW_REQUEST];
case MSTDNT_NOTIFICATION_REBLOG: return L10N[L10N_EN_US][L10N_NOTIF_REPEATED];
case MSTDNT_NOTIFICATION_FAVOURITE: return L10N[L10N_EN_US][L10N_NOTIF_LIKED];
case MSTDNT_NOTIFICATION_POLL: return L10N[L10N_EN_US][L10N_NOTIF_POLL];
case MSTDNT_NOTIFICATION_EMOJI_REACT: return L10N[L10N_EN_US][L10N_NOTIF_REACTED_WITH];
default: return "";
}
}
const char* notification_type_compact_str(mstdnt_notification_t type)
{
switch (type)
{
@ -39,7 +56,7 @@ const char* notification_type_svg(mstdnt_notification_t type)
{
switch (type)
{
case MSTDNT_NOTIFICATION_FOLLOW: return "";
case MSTDNT_NOTIFICATION_FOLLOW: return data_follow_svg_html;
case MSTDNT_NOTIFICATION_FOLLOW_REQUEST: return "";
case MSTDNT_NOTIFICATION_REBLOG: return data_repeat_svg_html;
case MSTDNT_NOTIFICATION_FAVOURITE: return data_like_svg_html;

View file

@ -23,5 +23,6 @@
const char* notification_type_svg(mstdnt_notification_t type);
const char* notification_type_str(mstdnt_notification_t type);
const char* notification_type_compact_str(mstdnt_notification_t type);
#endif // TYPE_STRING_H

1
static/follow_svg.html Normal file
View file

@ -0,0 +1 @@
<svg class="follow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>

After

Width:  |  Height:  |  Size: 385 B

View file

@ -1,8 +1,10 @@
<div class="notification-info">
<img src="%s">
<div class="notification-user">
<span class="username">%s</span>
<span class="action">%s</span>
<span class="notification-text-group-with-icon">
<span class="username">%s</span>
<span class="action">%s</span>
</span>
%s
</div>
</div>

View file

@ -0,0 +1,24 @@
<table class="notification notification-regular ui-table">
<tr>
<td class="pfp-td">
<img src="%s">
</td>
<td class="notification-table-bit">
<table class="ui-table">
<tr>
<td>
<div class="notification-info-format">
<span class="notification-text-group-with-icon">
<span class="username">%s</span>
<span class="action">%s</span>
</span> %s
</div>
<span class="notification-content">
<a href="%s/@%s">@%s</a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>

View file

@ -5,7 +5,10 @@
</td>
<td>
<div class="notification-info">
<span class="username">%s</span> <span class="action">%s</span> %s
<span class="notification-text-group%s">
<span class="username">%s</span>
<span class="action">%s</span>
</span> %s
</div>
<div class="notification-content">%s</div>
<div class="notification-stats">%s</div>