mirrors/treebird
0
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Emoji picker redo w/ faster tabbing

Browse source 
FossilOrigin-Name: 882c213536926029ce5490f6556cc0088a10985ba65a3426756744291d239e8c
This commit is contained in:
nekobit 2022-06-24 06:45:38 +00:00
parent e0a6e8a751
commit 03f0b0eeba
9 changed files with 139 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
dist/treebird20.css vendored
View file

@ -1371,9 +1371,15 @@ p}
background-color: #fff;
background: linear-gradient(#fff, #f3f3f3);
border-radius: 8px;
z-index: 5;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}
.emoji-picker .tabs .btn
{
display: inline-block;
}
.emoji-picker .navigation
{
border-top: 1px solid #cacaca;
@ -1385,6 +1391,7 @@ p}
text-align: center;
vertical-align: center;
padding: 8px 0;
max-width: 28px;
}
.emoji-picker .emoji:hover
@ -1398,6 +1405,19 @@ p}
transform: scale(1.0);
}
.emoji-picker-emojos-wrapper
{
overflow-y: auto;
overflow-x: hidden;
height: 180px;
max-height: 180px;
}
input[type=radio].hidden:not(:checked) + .emoji-picker-emojos
{
display: none;
}
.emoji-picker-emojos
{
display: grid;
@ -1597,7 +1617,7 @@ ul.large-list li .edit-list-btn
border-bottom: 1px solid #dadada;
}
.list-radio-show:not(:checked) + .list-edit-content
.input[type=checkbox].hidden:not(:checked) + .list-edit-content
{
display: none;
}
@ -1657,7 +1677,8 @@ ul.large-list li .edit-list-btn
text-shadow: unset;
}
.tabs .tab-btn.active
.tabs .tab-btn.active,
.tabs .tab-btn:checked
{
background: linear-gradient(#fff, #f7f7f7);
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15);

1
src/base_page.c
View file

@ -19,6 +19,7 @@
#include <fcgi_stdio.h>
#include <string.h>
#include <stdlib.h>
#include "helpers.h"
#include "base_page.h"
#include "easprintf.h"
#include "cookie.h"

85
src/emoji.c
View file

@ -27,6 +27,19 @@
#include "../static/emoji.ctmpl"
#include "../static/emoji_picker.ctmpl"
enum emoji_categories
{
EMO_CAT_SMILEYS,
EMO_CAT_ANIMALS,
EMO_CAT_FOOD,
EMO_CAT_TRAVEL,
EMO_CAT_ACTIVITIES,
EMO_CAT_OBJECTS,
EMO_CAT_SYMBOLS,
EMO_CAT_FLAGS,
EMO_CAT_LEN
};
char* emojify(char* content, struct mstdnt_emoji* emos, size_t emos_len)
{
if (!content) return NULL;
@ -81,46 +94,52 @@ static char* construct_emoji_voidwrap(void* passed, size_t index, size_t* res)
{
struct construct_emoji_picker_args* args = passed;
size_t calc_index = index + args->index;
return calc_index < 0 || calc_index >= emojos_size ? NULL :
construct_emoji(emojos + calc_index, args->status_id, res);
return construct_emoji(emojos + calc_index, args->status_id, res);
}
char* construct_emoji_picker(char* status_id, unsigned index, size_t* size)
{
struct construct_emoji_picker_args args = {
.status_id = status_id,
.index = index
};
char* emoji_picker_html;
char* emojis;
#define EMOJI_PICKER_ARGS(this_index) { .status_id = status_id, .index = this_index }
emojis = construct_func_strings(construct_emoji_voidwrap, &args, EMOJI_FACTOR_NUM, NULL);
char* construct_emoji_picker(char* status_id, size_t* size)
{
char* emoji_picker_html;
struct construct_emoji_picker_args args[EMO_CAT_LEN] = {
EMOJI_PICKER_ARGS(EMOJO_CAT_SMILEY),
EMOJI_PICKER_ARGS(EMOJO_CAT_ANIMALS),
EMOJI_PICKER_ARGS(EMOJO_CAT_FOOD),
EMOJI_PICKER_ARGS(EMOJO_CAT_TRAVEL),
EMOJI_PICKER_ARGS(EMOJO_CAT_ACTIVITIES),
EMOJI_PICKER_ARGS(EMOJO_CAT_OBJECTS),
EMOJI_PICKER_ARGS(EMOJO_CAT_SYMBOLS),
EMOJI_PICKER_ARGS(EMOJO_CAT_FLAGS),
};
char* emojis[EMO_CAT_LEN];
// TODO refactor to use #define lol
emojis[EMO_CAT_SMILEYS] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_SMILEYS, EMOJO_CAT_ANIMALS - EMOJO_CAT_SMILEY, NULL);
emojis[EMO_CAT_ANIMALS] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_ANIMALS, EMOJO_CAT_FOOD - EMOJO_CAT_ANIMALS, NULL);
emojis[EMO_CAT_FOOD] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_FOOD, EMOJO_CAT_TRAVEL - EMOJO_CAT_FOOD, NULL);
emojis[EMO_CAT_TRAVEL] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_TRAVEL, EMOJO_CAT_ACTIVITIES - EMOJO_CAT_TRAVEL, NULL);
emojis[EMO_CAT_ACTIVITIES] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_ACTIVITIES, EMOJO_CAT_OBJECTS - EMOJO_CAT_ACTIVITIES, NULL);
emojis[EMO_CAT_OBJECTS] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_OBJECTS, EMOJO_CAT_SYMBOLS - EMOJO_CAT_OBJECTS, NULL);
emojis[EMO_CAT_SYMBOLS] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_SYMBOLS, EMOJO_CAT_FLAGS - EMOJO_CAT_SYMBOLS, NULL);
emojis[EMO_CAT_FLAGS] = construct_func_strings(construct_emoji_voidwrap, args + EMO_CAT_FLAGS, 30 /* TODO there are not 100 flags */, NULL);
struct emoji_picker_template data = {
.cat_smileys = ACTIVE_CONDITION(index >= 0 && index < EMOJO_CAT_ANIMALS),
.animals = EMOJO_CAT_ANIMALS,
.cat_animals = ACTIVE_CONDITION(index >= EMOJO_CAT_ANIMALS && index < EMOJO_CAT_FOOD),
.food = EMOJO_CAT_FOOD,
.cat_food = ACTIVE_CONDITION(index >= EMOJO_CAT_FOOD && index < EMOJO_CAT_TRAVEL),
.travel = EMOJO_CAT_TRAVEL,
.cat_travel = ACTIVE_CONDITION(index >= EMOJO_CAT_TRAVEL && index < EMOJO_CAT_ACTIVITIES),
.activities = EMOJO_CAT_ACTIVITIES,
.cat_activities = ACTIVE_CONDITION(index >= EMOJO_CAT_ACTIVITIES && index < EMOJO_CAT_OBJECTS),
.objects = EMOJO_CAT_OBJECTS,
.cat_objects = ACTIVE_CONDITION(index >= EMOJO_CAT_OBJECTS && index < EMOJO_CAT_SYMBOLS),
.symbols = EMOJO_CAT_SYMBOLS,
.cat_symbols = ACTIVE_CONDITION(index >= EMOJO_CAT_SYMBOLS && index < EMOJO_CAT_FLAGS),
.flags = EMOJO_CAT_FLAGS,
.cat_flags = ACTIVE_CONDITION(index >= EMOJO_CAT_FLAGS && index < emojos_size),
.emojis = emojis,
// Index movements
.status_id = status_id,
.index_previous = index > 0 ? index - EMOJI_FACTOR_NUM : 0,
.previous_enabled = 0 > index - EMOJI_FACTOR_NUM ? "disabled" : "",
.index_next = index + EMOJI_FACTOR_NUM
.emojis_smileys = emojis[EMO_CAT_SMILEYS],
.emojis_animals = emojis[EMO_CAT_ANIMALS],
.emojis_food = emojis[EMO_CAT_FOOD],
.emojis_travel = emojis[EMO_CAT_TRAVEL],
.emojis_activities = emojis[EMO_CAT_ACTIVITIES],
.emojis_objects = emojis[EMO_CAT_OBJECTS],
.emojis_symbols = emojis[EMO_CAT_SYMBOLS],
.emojis_flags = emojis[EMO_CAT_FLAGS],
};
emoji_picker_html = tmpl_gen_emoji_picker(&data, size);
free(emojis);
for (size_t i = 0; i < EMO_CAT_LEN; ++i)
free(emojis[i]);
return emoji_picker_html;
}

2
src/emoji.h
View file

@ -33,6 +33,6 @@ enum emoji_picker_cat
char* emojify(char* content, struct mstdnt_emoji* emos, size_t emos_len);
char* construct_emoji(struct emoji_info* emoji, char* status_id, size_t* size);
char* construct_emoji_picker(char* status_id, unsigned index, size_t* size);
char* construct_emoji_picker(char* status_id, size_t* size);
#endif // EMOJI_H

1
src/search.c
View file

@ -17,6 +17,7 @@
*/
#include <stdlib.h>
#include "helpers.h"
#include "search.h"
#include "easprintf.h"
#include "../config.h"

2
src/status.c
View file

@ -241,7 +241,7 @@ char* construct_interaction_buttons(struct session* ssn,
// Emojo picker
if ((flags & STATUS_EMOJI_PICKER) == STATUS_EMOJI_PICKER)
{
emoji_picker_html = construct_emoji_picker(status->id, keyint(ssn->post.emojoindex), NULL);
emoji_picker_html = construct_emoji_picker(status->id, NULL);
}
struct reactions_btn_template tdata = {

1
src/timeline.c
View file

@ -18,6 +18,7 @@
#include "timeline.h"
#include <stdlib.h>
#include "helpers.h"
#include "base_page.h"
#include "../config.h"
#include "index.h"

115
static/emoji_picker.tmpl
View file

@ -2,81 +2,80 @@
<table class="tabs ui-table">
<tr>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="0">
<input class="tab-btn btn btn-alt {{%s:cat_smileys}}" type="submit" value="😃">
</form>
<label for="cat-smileys">
<span class="tab-btn btn btn-alt">😃</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:animals}}">
<input class="tab-btn btn btn-alt {{%s:cat_animals}}" type="submit" value="🐻">
</form>
<label for="cat-animals">
<span class="tab-btn btn btn-alt">🐻</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:food}}">
<input class="tab-btn btn btn-alt {{%s:cat_food}}" type="submit" value="🍔">
</form>
<label for="cat-food">
<span class="tab-btn btn btn-alt">🍔</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:travel}}">
<input class="tab-btn btn btn-alt {{%s:cat_travel}}" type="submit" value="🚀">
</form>
<label for="cat-travel">
<span class="tab-btn btn btn-alt">🚀</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:activities}}">
<input class="tab-btn btn btn-alt {{%s:cat_activities}}" type="submit" value="⚽">
</form>
<label for="cat-activities">
<span class="tab-btn btn btn-alt">⚽</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:objects}}">
<input class="tab-btn btn btn-alt {{%s:cat_objects}}" type="submit" value="🔧">
</form>
<label for="cat-objects">
<span class="tab-btn btn btn-alt">🔧</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:symbols}}">
<input class="tab-btn btn btn-alt {{%s:cat_symbols}}" type="submit" value="🔢">
</form>
<label for="cat-symbols">
<span class="tab-btn btn btn-alt">🔢</span>
</label>
</td>
<td>
<form action="#{{%s:status_id}}" method="post">
<input type="hidden" name="emojoindex" value="{{%d:flags}}">
<input class="tab-btn btn btn-alt {{%s:cat_flags}}" type="submit" value="🎌">
</form>
<label for="cat-flags">
<span class="tab-btn btn btn-alt">🎌</span>
</label>
</td>
</tr>
</table>
<div class="emoji-picker-emojos">
{{%s:emojis}}
<div class="emoji-picker-emojos-wrapper">
<input type="radio" class="hidden" id="cat-smileys" name="emoji-cat" checked>
<div class="emoji-picker-emojos">
{{%s:emojis_smileys}}
</div>
<input type="radio" class="hidden" id="cat-animals" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_animals}}
</div>
<input type="radio" class="hidden" id="cat-food" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_food}}
</div>
<input type="radio" class="hidden" id="cat-travel" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_travel}}
</div>
<input type="radio" class="hidden" id="cat-activities" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_activities}}
</div>
<input type="radio" class="hidden" id="cat-objects" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_objects}}
</div>
<input type="radio" class="hidden" id="cat-symbols" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_symbols}}
</div>
<input type="radio" class="hidden" id="cat-flags" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_flags}}
</div>
</div>
<table class="navigation ui-table">
<tr>
<td class="nav-prev btn">
<form action="#{{%s:status_id}}" method="post">
<label class="pointer">
<input type="hidden" name="emojoindex" value="{{%u:index_previous}}">
<span class="nav-btn {{%s:previous_enabled}}">Previous</span>
<input type="submit" class="hidden">
</label>
</form>
</td>
<td class="nav-next btn">
<form action="#{{%s:status_id}}" method="post">
<label class="pointer">
<input type="hidden" name="emojoindex" value="{{%u:index_next}}">
<span class="nav-btn">Next</span>
<input type="submit" class="hidden">
</label>
</form>
</td>
</tr>
</table>
</div>

4
static/reactions_btn.tmpl
View file

@ -1,6 +1,6 @@
<td>
<a target="_parent" href="{{%s:prefix}}/status/{{%s:status_id}}/react#id-{{%s:status_id}}" class="pointer statbtn react-btn">
<svg class="emoji-btn" 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="8" y1="12" x2="16" y2="12"></line></svg>
{{%s:emoji_picker}}
</form>
</a>
{{%s:emoji_picker}}
</td>