GNUsocial
/
gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[PLUGINS][Reply][Repeat][Favourite] Base template semantic rework. Reply, repeat and favourite respective classes are now assigned in their NoteHandlerPlugin.

This commit is contained in:
Eliseu Amaro 2021-09-07 15:23:41 +01:00 committed by Hugo Sales
parent ddd2ffe26a
commit 61071a6821
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
9 changed files with 53 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/Favourite/Favourite.php
View File

@ -66,9 +66,10 @@ class Favourite extends NoteHandlerPlugin
$form_fav = Form::create([ $form_fav = Form::create([
['submit_favourite', SubmitType::class, ['submit_favourite', SubmitType::class,
[ [
'label' => $is_set ? _m('Note already favourite!.') : _m('Favourite this note.'), 'label' => ' ',
'attr' => [ 'attr' => [
'class' => $is_set ? 'note-actions-set' : 'note-actions-unset', 'class' => ($is_set ? 'note-actions-set' : 'note-actions-unset') . ' button-container favourite-button-container',
'title' => $is_set ? _m('Note already favourite!') : _m('Favourite this note!'),
], ],
], ],
], ],

4
plugins/Repeat/Repeat.php
View File

@ -29,6 +29,7 @@ use App\Util\Exception\RedirectException;
use Symfony\Component\Form\Extension\Core\Type\HiddenType; use Symfony\Component\Form\Extension\Core\Type\HiddenType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Request;
use function App\Core\I18n\_m;
class Repeat extends NoteHandlerPlugin class Repeat extends NoteHandlerPlugin
{ {
@ -51,7 +52,8 @@ class Repeat extends NoteHandlerPlugin
[ [
'label' => ' ', 'label' => ' ',
'attr' => [ 'attr' => [
'class' => $is_set ? 'note-actions-set' : 'note-actions-unset', 'class' => ($is_set ? 'note-actions-set' : 'note-actions-unset') . ' button-container repeat-button-container',
'title' => $is_set ? _m('Note already repeated!') : _m('Repeat this note!'),
], ],
], ],
], ],

3
plugins/Reply/Reply.php
View File

@ -64,7 +64,8 @@ class Reply extends NoteHandlerPlugin
[ [
'label' => ' ', 'label' => ' ',
'attr' => [ 'attr' => [
'class' => 'note-actions-unset', 'class' => 'note-actions-unset button-container reply-button-container',
'title' => 'Reply to this note!',
], ],
], ],
], ],

24
public/assets/css/base.css
View File

@ -300,41 +300,35 @@ summary:hover .icon-details-open {
} }
.button-container { .button-container {
width: 1em !important;
height: 1em !important;
}
.button-container button {
all: unset; all: unset;
border: none !important; border: none !important;
width: inherit !important; width: 1em !important;
height: inherit !important; height: 1em !important;
background-size: cover !important; background-size: cover !important;
margin-left: 5px; margin-left: 5px;
text-indent: -9999em;
text-transform: uppercase;
} }
.button-container button:hover, .button-container:hover,
.button-container button:focus { .button-container:focus {
border: none !important; border: none !important;
background: var(--bg3) !important; background: var(--bg3) !important;
} }
.favourite-button-container button { .favourite-button-container {
text-indent: -9999em;
text-transform: uppercase;
-webkit-mask-image: url("../icons/heart.svg") !important; -webkit-mask-image: url("../icons/heart.svg") !important;
-o-mask-image: url("../icons/heart.svg") !important; -o-mask-image: url("../icons/heart.svg") !important;
-moz-mask-image: url("../icons/heart.svg") !important; -moz-mask-image: url("../icons/heart.svg") !important;
mask-image: url("../icons/heart.svg") !important; mask-image: url("../icons/heart.svg") !important;
} }
.reply-button-container button { .reply-button-container {
-webkit-mask-image: url("../icons/reply.svg") !important; -webkit-mask-image: url("../icons/reply.svg") !important;
-o-mask-image: url("../icons/reply.svg") !important; -o-mask-image: url("../icons/reply.svg") !important;
-moz-mask-image: url("../icons/reply.svg") !important; -moz-mask-image: url("../icons/reply.svg") !important;
mask-image: url("../icons/reply.svg") !important; mask-image: url("../icons/reply.svg") !important;
} }
.repeat-button-container button { .repeat-button-container {
-webkit-mask-image: url("../icons/repeat.svg") !important; -webkit-mask-image: url("../icons/repeat.svg") !important;
-o-mask-image: url("../icons/repeat.svg") !important; -o-mask-image: url("../icons/repeat.svg") !important;
-moz-mask-image: url("../icons/repeat.svg") !important; -moz-mask-image: url("../icons/repeat.svg") !important;

6
src/Twig/Runtime.php
View File

@ -118,8 +118,10 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
public function isFirefox(): bool public function isFirefox(): bool
{ {
$re = '/.*(?i)\bfirefox\b.*/m'; $re_has_chrome = '/.*(?i)\bchrome\b.*/m';
return preg_match(pattern: $re, subject: $this->request->headers->get('User-Agent')) === 1; $re_has_gecko = '/.*(?i)\bgecko\b.*/m';
return (preg_match(pattern: $re_has_chrome, subject: $this->request->headers->get('User-Agent')) !== 1)
&& (preg_match(pattern: $re_has_gecko, subject: $this->request->headers->get('User-Agent')) === 1);
} }
// ---------------------------------------------------------- // ----------------------------------------------------------

32
templates/base.html.twig
View File

@ -30,12 +30,11 @@
{% endfor %} {% endfor %}
</head> </head>
<body class="bg" aria-live="polite"> <body class="bg">
<a id="anchor-menu" class="anchor-hidden"></a> <a id="anchor-menu" class="anchor-hidden"></a>
<aside class="accessibility-menu" tabindex="0" aria-roledescription="{{ 'Learn keybindings to select each of the main page areas.' | trans }}"> <aside class="accessibility-menu" tabindex="0">
<h2>{{ 'Select page section:' | trans }}</h2> <h2>{{ 'Select page section:' | trans }}</h2>
<br> <br>
<p> <p>
{% if is_firefox() == true %} {% if is_firefox() == true %}
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em> <em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
@ -44,23 +43,24 @@
{% endif %} {% endif %}
</p> </p>
<ul> <nav>
<li><a href="#anchor-menu" accesskey="m">{{ 'This menu (press \'m\' to access).' | trans }}</a></li> <ul>
<li><a href="#anchor-left-panel" accesskey="h">{{ 'Left panel (press \'h\' to access).' | trans }}</a></li> <li><a href="#anchor-menu" accesskey="m">{{ 'This menu, (press \'m\' to access).' | trans }}</a></li>
<li><a href="#anchor-main-content" accesskey="k">{{ 'Main content (press \'k\' to access).' | trans }}</a></li> <li><a href="#anchor-left-panel" accesskey="h">{{ 'Left panel (press \'h\' to access).' | trans }}</a></li>
<li><a href="#anchor-main-page" accesskey="j">{{ 'Main page (press \'j\' to access).' | trans }}</a></li> <li><a href="#anchor-main-content" accesskey="k">{{ 'Main content (press \'k\' to access).' | trans }}</a></li>
<li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li> <li><a href="#anchor-main-page" accesskey="j">{{ 'Main page (press \'j\' to access).' | trans }}</a></li>
</ul> <li><a href="#anchor-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
</ul>
</nav>
</aside> </aside>
{% block header %} {% block header %}
<header id='header' role="banner"> <header id='header' role="banner">
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
<a id="anchor-main-page" class="anchor-hidden"></a> <a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden"></a>
<a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name."> <a id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div> <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
<h1> {{ config('site', 'name') }} </h1>
</a> </a>
{% if app.user %} {% if app.user %}
@ -70,8 +70,8 @@
{% endblock header %} {% endblock header %}
<div class="container"> <div class="container">
<a id="anchor-main-content" class="anchor-hidden"></a> <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"></a>
<div class='content' aria-roledescription="Main content."> <div class='content'>
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
{% block javascripts %}{% endblock javascripts %} {% block javascripts %}{% endblock javascripts %}

4
templates/network/public.html.twig
View File

@ -9,8 +9,8 @@
{% block body %} {% block body %}
{# Backwards compatibility with hAtom 0.1 #} {# Backwards compatibility with hAtom 0.1 #}
<main class="timeline" tabindex="0" role="main" aria-label={{ 'Main public timeline feed.' | trans }}> <main class="timeline" tabindex="0" role="feed">
<div class="h-feed hfeed notes" role="feed"> <div class="h-feed hfeed notes">
{% if notes is defined and notes is not empty %} {% if notes is defined and notes is not empty %}
{% for conversation in notes %} {% for conversation in notes %}
{% include '/note/view.html.twig' with {'note': conversation['note'], 'have_user': have_user, 'replies': conversation['replies']} only %} {% include '/note/view.html.twig' with {'note': conversation['note'], 'have_user': have_user, 'replies': conversation['replies']} only %}

32
templates/note/view.html.twig
View File

@ -1,15 +1,12 @@
<article class="h-entry hentry note"> <article class="h-entry hentry note">
<div class="note-info" role="complementary"> <header class="note-info">
{% set nickname = note.getActorNickname() %} {% set nickname = note.getActorNickname() %}
{# TODO: this should link to the note's user profile? #} {# TODO: this should link to the note's user profile? #}
<header class="note-author u-url" href="#" > <h2 title='{{ 'This note author\'s nickname.' | trans }}' class="note-author u-url" href="#">
{# Microformat's h-card properties indicates a face icon is a "u-logo" #} {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
<img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true"> <img title='{{ 'This note author\'s avatar.' | trans }}' class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
<label aria-roledescription={{ 'This note author nickname.' | trans }}> </h2>
{{ nickname }}
</label>
</header>
{% set reply_to = note.getReplyToNickname() %} {% set reply_to = note.getReplyToNickname() %}
{% if reply_to is not null and not skip_reply_to is defined %} {% if reply_to is not null and not skip_reply_to is defined %}
@ -17,33 +14,26 @@
{% endif %} {% endif %}
{% if app.user %} {% if app.user %}
<div class="note-actions" aria-roledescription="{{ 'Favourite, reply and recycle this note.' | trans }}"> <div class="note-actions">
{% if have_user %} {% if have_user %}
{% for current_action in get_note_actions(note) %} {% for current_action in get_note_actions(note) %}
{{ form_start(current_action) }} {{ form_start(current_action) }}
{% if current_action.submit_favourite is defined %} {% if current_action.submit_favourite is defined %}
<span title="Favourite this note." class="button-container favourite-button-container" {{ form_widget(current_action.submit_favourite) }}
{% if current_action.submit_favourite is defined %}{% endif %}>
{{ form_widget(current_action.submit_favourite) }}
</span>
{% endif %} {% endif %}
{% if current_action.submit_repeat is defined %} {% if current_action.submit_repeat is defined %}
<span title="Repeat this note." class="button-container repeat-button-container"> {{ form_widget(current_action.submit_repeat) }}
{{ form_widget(current_action.submit_repeat) }}
</span>
{% endif %} {% endif %}
{% if current_action.reply is defined %} {% if current_action.reply is defined %}
<span title="Reply to this note." class="button-container reply-button-container"> {{ form_widget(current_action.reply) }}
{{ form_widget(current_action.reply) }}
</span>
{% endif %} {% endif %}
{{ form_end(current_action) }} {{ form_end(current_action) }}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div> </header>
<div class="e-content entry-content note-content" aria-roledescription="{{ 'The note content.' | trans }}"> <div class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}">
{% block markdown %} {% block markdown %}
{% apply markdown_to_html %} {% apply markdown_to_html %}
{{ note.getContent() }} {{ note.getContent() }}
@ -61,7 +51,7 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="note-links"> <div class="note-links" title="{{ 'Shared links in this note.' | trans }}">
{% for link in note.getLinks() %} {% for link in note.getLinks() %}
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %} {% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
{{ block | raw }} {{ block | raw }}

6
templates/sidepanel/right/right.html.twig
View File

@ -6,10 +6,10 @@
<aside class="panel-content"> <aside class="panel-content">
{% if post_form is defined %} {% if post_form is defined %}
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}> <section class="section-widget" title={{ 'Create a new note.' | trans }}>
<details class="section-title-details"> <details class="section-title-details" title={{ 'Expand if you want to access more options.' | trans }}>
<summary class="section-title-summary"> <summary class="section-title-summary">
{{ "Create a note" | trans }} {{ icon('arrow-down', 'icon icon-details-open') | raw }} {{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary> </summary>
{% for tab in tabs %} {% for tab in tabs %}