Visibility and CSS tweaks

FossilOrigin-Name: d45822206ba3c4bb2be994e4443a909f5c6d5896642703f11d901a2f5f1a37ab
This commit is contained in:
nekobit 2022-07-29 23:08:43 +00:00
parent a11470cfd7
commit e19f1f854e
5 changed files with 66 additions and 136 deletions

26
dist/treebird.css vendored
View file

@ -815,9 +815,9 @@ input[type=checkbox].hidden:not(:checked) + .reply-form
.status.focused,
.status:target
{
background-color: #ffdddd;
border-left: 3px solid #aa0000;
padding-left: 7px;
background: #ffdddd;
border-left: 2px solid #aa0000;
padding-left: 8px;
}
.notification-info + .status,
@ -1034,10 +1034,17 @@ input[type=checkbox].hidden:not(:checked) + .reply-form
cursor: pointer;
color: #808080;
display: inline;
font-size: 12px;
margin-right: 5px;
}
.status-visibility .visibility
{
stroke: #808080;
vertical-align: middle;
width: 17px;
height: 17px;
}
.status-interact
{
margin: 6px 0 0 0;
@ -1461,7 +1468,7 @@ p}
.status-interact .statbtn
{
display: block;
padding: 3px 2px 5px;
padding: 3px 0px 5px;
min-width: 42px;
}
@ -1469,6 +1476,8 @@ p}
{
width: 18px;
height: 18px;
stroke: #666;
vertical-align: middle;
}
.view-btn
@ -1583,6 +1592,7 @@ p}
padding-top: 3px;
font-size: 12px;
padding-bottom: 3px;
padding-right: 7px;
vertical-align: middle;
}
@ -1635,12 +1645,6 @@ p}
border: 1px solid #cacaca;
}
.emoji-btn
{
position: relative;
top: 2px;
}
/* Emojo picker */
.emoji-picker
{

View file

@ -4,7 +4,7 @@ use warnings;
use Exporter 'import';
our @EXPORT = qw( &get_icon &get_icon_svg &get_icon_png );
our @EXPORT = qw( &get_icon &get_icon_svg &get_icon_png &visibility_to_icon );
sub get_icon
{
@ -18,12 +18,48 @@ sub get_icon_svg
{
my %res = (
repeat => '<svg class="repeat" 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="M17 2.1l4 4-4 4"/><path d="M3 12.2v-2a4 4 0 0 1 4-4h12.8M7 21.9l-4-4 4-4"/><path d="M21 11.8v2a4 4 0 0 1-4 4H4.2"/></svg>',
like => '<svg class="like" 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>',
expand => '<svg class="expand" 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="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1"/></svg>',
reply => '<svg class="reply" 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="M14 9l6 6-6 6"/><path d="M4 4v7a4 4 0 0 0 4 4h11"/></svg>',
emoji => '<svg class="emoji-btn" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><g><line x1="9" x2="9" y1="6.9367" y2="11.755" stroke-width="1.7916"/><line x1="15" x2="15" y1="6.9367" y2="11.755" stroke-width="1.7916"/><path d="m7.0891 15.099s4.7206 4.7543 9.7109 0" stroke-linecap="round" stroke-linejoin="miter" stroke-width="1.9764"/></g></svg>',
likeboost => '<svg class="one-click-software" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><g stroke-width="1.98"><path d="m19.15 8.5061 2.7598 2.7598-2.7598 2.7598"/><path d="m14.756 11.325s2.5484-0.05032 6.3258 0.01026m-15.639 10.807-2.7598-2.7598 2.7598-2.7598"/><path d="m22.4 15.327v1.2259c0 1.156-1.2356 2.7598-2.7598 2.7598h-16.664"/></g><polygon transform="matrix(.60736 0 0 .60736 .60106 .63577)" points="18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2 15.09 8.26 22 9.27 17 14.14" stroke-width="2.9656"/></g></svg>',
fileclip => '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>',
'local' => '<svg class="visibility vis-local" 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="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9"/><path d="M9 22V12h6v10M2 10.6L12 2l10 8.6"/></svg>',
direct => '<svg class="visibility vis-direct 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="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>',
private => '<svg class="visibility vis-private" 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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>',
list => '<svg class="visibility vis-list" 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"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>',
unlisted => '<svg class="visibility vis-unlisted" 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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>',
public => '<svg class="visibility vis-public" 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"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>',
);
$res{$_[0]};
}
sub visibility_to_icon
{
# I thought of an array, but I don't want to call get_icon UNLESS
# we know the visibility
my $vis = $_[0];
return get_icon('public') if $vis == 1;
return get_icon('unlisted') if $vis == 2;
return get_icon('private') if $vis == 3;
return get_icon('list') if $vis == 4;
return get_icon('direct') if $vis == 5;
return get_icon('local') if $vis == 6;
# Assume local for anything else, because well... I'm not sure
get_icon('local');
}

View file

@ -1,7 +1,7 @@
package status;
use strict;
use warnings;
use icons 'get_icon';
use icons qw( get_icon visibility_to_icon );
use Exporter 'import';
our @EXPORT = qw( status );
@ -17,6 +17,7 @@ sub status
ssn => $ssn,
status => $status,
icon => \&get_icon,
vis_to_icon => \&visibility_to_icon,
);
to_template(\%vars, \$data->{'status.tt'});

View file

@ -265,124 +265,7 @@ char* construct_interaction_buttons(struct session* ssn,
size_t* size,
uint8_t flags)
{
int use_img = ssn->config.interact_img;
char* interaction_html;
char* repeat_btn;
char* like_btn;
char* likeboost_html = NULL;
char* reply_count = NULL;
char* repeat_count = NULL;
char* reply_btn;
char* favourites_count = NULL;
char* emoji_picker_html = NULL;
char* reactions_btn_html = NULL;
char* time_str;
int show_nums = (flags & STATUS_NO_DOPAMEME) != STATUS_NO_DOPAMEME &&
ssn->config.stat_dope;
size_t s;
// Emojo picker
if ((flags & STATUS_EMOJI_PICKER) == STATUS_EMOJI_PICKER)
{
emoji_picker_html = construct_emoji_picker(status->id, NULL);
}
struct reactions_btn_template tdata = {
.prefix = config_url_prefix,
.status_id = status->id,
.emoji_picker = emoji_picker_html
};
reactions_btn_html = tmpl_gen_reactions_btn(&tdata, NULL);
if (show_nums)
{
if (status->replies_count)
easprintf(&reply_count, NUM_STR, status->replies_count);
if (status->reblogs_count)
easprintf(&repeat_count, NUM_STR, status->reblogs_count);
if (status->favourites_count)
easprintf(&favourites_count, NUM_STR, status->favourites_count);
}
struct likeboost_template lbdata = {
.prefix = config_url_prefix,
.status_id = status->id,
};
likeboost_html = tmpl_gen_likeboost(&lbdata, NULL);
time_str = reltime_to_str(status->created_at);
// TODO cleanup?
if (use_img)
{
struct repeat_btn_img_template rpbdata = { .prefix = config_url_prefix, .repeat_active = status->reblogged ? "active" : "" };
repeat_btn = tmpl_gen_repeat_btn_img(&rpbdata, NULL);
struct like_btn_img_template ldata = { .prefix = config_url_prefix, .favourite_active = status->favourited ? "active" : "" };
like_btn = tmpl_gen_like_btn_img(&ldata, NULL);
}
else {
struct repeat_btn_template rpbdata = { .repeat_active = status->reblogged ? "active" : "" };
repeat_btn = tmpl_gen_repeat_btn(&rpbdata, NULL);
struct like_btn_template ldata = { .favourite_active = status->favourited ? "active" : "" };
like_btn = tmpl_gen_like_btn(&ldata, NULL);
}
// Weather it should be a link or a <label> button
if ((flags & STATUS_NO_QUICKREPLY) != STATUS_NO_QUICKREPLY)
{
struct reply_checkbox_template tmpl = {
.reply_btn = use_img ? data_reply_btn_img : data_reply_btn,
.reply_count = reply_count,
.status_id = status->id,
};
reply_btn = tmpl_gen_reply_checkbox(&tmpl, NULL);
}
else {
struct reply_link_template tmpl = {
.prefix = config_url_prefix,
.reply_btn = use_img ? data_reply_btn_img : data_reply_btn,
.reply_count = reply_count,
.status_id = status->id,
};
reply_btn = tmpl_gen_reply_link(&tmpl, NULL);
}
struct interaction_buttons_template data = {
// Icons
.reply_btn = reply_btn,
.expand_btn = use_img ? data_expand_btn_img : data_expand_btn,
.repeat_btn = repeat_btn,
.like_btn = like_btn,
// Interactions data
.prefix = config_url_prefix,
.status_id = status->id,
.unrepeat = status->reblogged ? "un" : "",
.repeats_count = repeat_count,
.repeat_text = "Repeat",
.unfavourite = status->favourited ? "un" : "",
.favourites_count = favourites_count,
.favourites_text = "Favorite",
.likeboost_btn = (likeboost_html &&
ssn->config.stat_oneclicksoftware &&
(flags & STATUS_NO_LIKEBOOST) != STATUS_NO_LIKEBOOST ? likeboost_html : ""),
.reactions_btn = reactions_btn_html,
.rel_time = time_str
};
interaction_html = tmpl_gen_interaction_buttons(&data, size);
// Cleanup
free(emoji_picker_html);
free(reply_count);
free(repeat_count);
free(favourites_count);
free(reactions_btn_html);
free(likeboost_html);
free(time_str);
free(reply_btn);
free(like_btn);
free(repeat_btn);
return interaction_html;
return "";
}
char* construct_status_interactions(char* status_id,
@ -875,7 +758,6 @@ char* construct_status(struct session* ssn,
free(formatted_display_name);
if (serialized_display_name != status->account.display_name)
free(serialized_display_name);
free(interaction_btns);
free(in_reply_to_str);
free(attachments);
free(post_response);
@ -1137,6 +1019,7 @@ HV* perlify_status(const struct mstdnt_status* status)
hvstores_int(status_hv, "muted", status->muted);
hvstores_int(status_hv, "bookmarked", status->bookmarked);
hvstores_int(status_hv, "pinned", status->pinned);
hvstores_int(status_hv, "visibility", ((int)(status->visibility)));
hvstores_int(status_hv, "reblogs_count", status->reblogs_count);
hvstores_int(status_hv, "favourites_count", status->favourites_count);
hvstores_int(status_hv, "replies_count", status->replies_count);

View file

@ -12,7 +12,7 @@
<a class="instance-info" href="$prefix/@[% status.account.acct %]">[% status.account.acct %]</a>
<span class="alignend">
<div class="menu-container status-visibility">
{{%s:visibility}}
[% vis_to_icon(status.visibility) %]
<div class="menu">
<ul>
<li>
@ -67,7 +67,9 @@
<td>
<label for="status-quickreply-{{%s:status_id}}" class="pointer statbtn reply-btn">
[% icon('reply') %]
<span class="count">[% status.replies_count %]</span>
[% IF status.replies_count %]
<span class="count">[% status.replies_count %]</span>
[% END %]
</label>
@ -77,7 +79,9 @@
<input class="itype" type="hidden" name="itype" value="{{%s:unrepeat}}repeat">
<label class="repeat-btn pointer statbtn">
[% icon('repeat') %]
<span class="count">[% status.reblogs_count %]</span>
[% IF status.reblogs_count %]
<span class="count">[% status.reblogs_count %]</span>
[% END %]
<input class="hidden" type="submit" value="Repeat">
</label>
</form>
@ -87,7 +91,9 @@
<input class="itype" type="hidden" name="itype" value="{{%s:unfavourite}}like">
<label class="pointer statbtn like-btn">
[% icon('like') %]
<span class="count">[% status.favourites_count %]</span>
[% IF status.favourites_count %]
<span class="count">[% status.favourites_count %]</span>
[% END %]
<input class="hidden" type="submit" value="Like">
</label>
</form>