[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:
parent
ddd2ffe26a
commit
61071a6821
|
@ -66,9 +66,10 @@ class Favourite extends NoteHandlerPlugin
|
|||
$form_fav = Form::create([
|
||||
['submit_favourite', SubmitType::class,
|
||||
[
|
||||
'label' => $is_set ? _m('Note already favourite!.') : _m('Favourite this note.'),
|
||||
'label' => ' ',
|
||||
'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!'),
|
||||
],
|
||||
],
|
||||
],
|
||||
|
|
|
@ -29,6 +29,7 @@ use App\Util\Exception\RedirectException;
|
|||
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
|
||||
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
|
||||
use Symfony\Component\HttpFoundation\Request;
|
||||
use function App\Core\I18n\_m;
|
||||
|
||||
class Repeat extends NoteHandlerPlugin
|
||||
{
|
||||
|
@ -51,7 +52,8 @@ class Repeat extends NoteHandlerPlugin
|
|||
[
|
||||
'label' => ' ',
|
||||
'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!'),
|
||||
],
|
||||
],
|
||||
],
|
||||
|
|
|
@ -64,7 +64,8 @@ class Reply extends NoteHandlerPlugin
|
|||
[
|
||||
'label' => ' ',
|
||||
'attr' => [
|
||||
'class' => 'note-actions-unset',
|
||||
'class' => 'note-actions-unset button-container reply-button-container',
|
||||
'title' => 'Reply to this note!',
|
||||
],
|
||||
],
|
||||
],
|
||||
|
|
|
@ -300,41 +300,35 @@ summary:hover .icon-details-open {
|
|||
}
|
||||
|
||||
.button-container {
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
}
|
||||
|
||||
.button-container button {
|
||||
all: unset;
|
||||
border: none !important;
|
||||
width: inherit !important;
|
||||
height: inherit !important;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
background-size: cover !important;
|
||||
margin-left: 5px;
|
||||
text-indent: -9999em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.button-container button:hover,
|
||||
.button-container button:focus {
|
||||
.button-container:hover,
|
||||
.button-container:focus {
|
||||
border: none !important;
|
||||
background: var(--bg3) !important;
|
||||
}
|
||||
|
||||
.favourite-button-container button {
|
||||
text-indent: -9999em;
|
||||
text-transform: uppercase;
|
||||
|
||||
.favourite-button-container {
|
||||
-webkit-mask-image: url("../icons/heart.svg") !important;
|
||||
-o-mask-image: url("../icons/heart.svg") !important;
|
||||
-moz-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;
|
||||
-o-mask-image: url("../icons/reply.svg") !important;
|
||||
-moz-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;
|
||||
-o-mask-image: url("../icons/repeat.svg") !important;
|
||||
-moz-mask-image: url("../icons/repeat.svg") !important;
|
||||
|
|
|
@ -118,8 +118,10 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
|
|||
|
||||
public function isFirefox(): bool
|
||||
{
|
||||
$re = '/.*(?i)\bfirefox\b.*/m';
|
||||
return preg_match(pattern: $re, subject: $this->request->headers->get('User-Agent')) === 1;
|
||||
$re_has_chrome = '/.*(?i)\bchrome\b.*/m';
|
||||
$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);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
|
|
@ -30,12 +30,11 @@
|
|||
{% endfor %}
|
||||
</head>
|
||||
|
||||
<body class="bg" aria-live="polite">
|
||||
<body class="bg">
|
||||
<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>
|
||||
<br>
|
||||
|
||||
<p>
|
||||
{% if is_firefox() == true %}
|
||||
<em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
|
||||
|
@ -44,23 +43,24 @@
|
|||
{% endif %}
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#anchor-menu" accesskey="m">{{ 'This menu (press \'m\' 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-content" accesskey="k">{{ 'Main content (press \'k\' 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-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#anchor-menu" accesskey="m">{{ 'This menu, (press \'m\' 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-content" accesskey="k">{{ 'Main content (press \'k\' 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-right-panel" accesskey="l">{{ 'Right panel (press \'l\' to access).' | trans }}</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{% block header %}
|
||||
<header id='header' role="banner">
|
||||
{{ block("leftpanel", "stdgrid.html.twig") }}
|
||||
|
||||
<a id="anchor-main-page" class="anchor-hidden"></a>
|
||||
<a id='instance' href="{{ path('main_public') }}" tabindex="0" aria-roledescription="This instance name.">
|
||||
<div aria-hidden="true">{{ icon('logo', 'icon icon-logo') | raw }}</div>
|
||||
<h1> {{ config('site', 'name') }} </h1>
|
||||
<a role="navigation" rel="help" id="anchor-main-page" class="anchor-hidden"></a>
|
||||
<a id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
|
||||
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
|
||||
</a>
|
||||
|
||||
{% if app.user %}
|
||||
|
@ -70,8 +70,8 @@
|
|||
{% endblock header %}
|
||||
|
||||
<div class="container">
|
||||
<a id="anchor-main-content" class="anchor-hidden"></a>
|
||||
<div class='content' aria-roledescription="Main content.">
|
||||
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"></a>
|
||||
<div class='content'>
|
||||
{% block nav %}{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
{% block javascripts %}{% endblock javascripts %}
|
||||
|
|
|
@ -9,8 +9,8 @@
|
|||
|
||||
{% block body %}
|
||||
{# Backwards compatibility with hAtom 0.1 #}
|
||||
<main class="timeline" tabindex="0" role="main" aria-label={{ 'Main public timeline feed.' | trans }}>
|
||||
<div class="h-feed hfeed notes" role="feed">
|
||||
<main class="timeline" tabindex="0" role="feed">
|
||||
<div class="h-feed hfeed notes">
|
||||
{% if notes is defined and notes is not empty %}
|
||||
{% for conversation in notes %}
|
||||
{% include '/note/view.html.twig' with {'note': conversation['note'], 'have_user': have_user, 'replies': conversation['replies']} only %}
|
||||
|
|
|
@ -1,15 +1,12 @@
|
|||
<article class="h-entry hentry note">
|
||||
<div class="note-info" role="complementary">
|
||||
<header class="note-info">
|
||||
{% set nickname = note.getActorNickname() %}
|
||||
|
||||
{# 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" #}
|
||||
<img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">
|
||||
<label aria-roledescription={{ 'This note author nickname.' | trans }}>
|
||||
{{ nickname }}
|
||||
</label>
|
||||
</header>
|
||||
<img title='{{ 'This note author\'s avatar.' | trans }}' class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar" aria-hidden="true">{{ nickname }}
|
||||
</h2>
|
||||
|
||||
{% set reply_to = note.getReplyToNickname() %}
|
||||
{% if reply_to is not null and not skip_reply_to is defined %}
|
||||
|
@ -17,33 +14,26 @@
|
|||
{% endif %}
|
||||
|
||||
{% if app.user %}
|
||||
<div class="note-actions" aria-roledescription="{{ 'Favourite, reply and recycle this note.' | trans }}">
|
||||
<div class="note-actions">
|
||||
{% if have_user %}
|
||||
{% for current_action in get_note_actions(note) %}
|
||||
{{ form_start(current_action) }}
|
||||
{% if current_action.submit_favourite is defined %}
|
||||
<span title="Favourite this note." class="button-container favourite-button-container"
|
||||
{% if current_action.submit_favourite is defined %}{% endif %}>
|
||||
{{ form_widget(current_action.submit_favourite) }}
|
||||
</span>
|
||||
{{ form_widget(current_action.submit_favourite) }}
|
||||
{% endif %}
|
||||
{% if current_action.submit_repeat is defined %}
|
||||
<span title="Repeat this note." class="button-container repeat-button-container">
|
||||
{{ form_widget(current_action.submit_repeat) }}
|
||||
</span>
|
||||
{{ form_widget(current_action.submit_repeat) }}
|
||||
{% endif %}
|
||||
{% if current_action.reply is defined %}
|
||||
<span title="Reply to this note." class="button-container reply-button-container">
|
||||
{{ form_widget(current_action.reply) }}
|
||||
</span>
|
||||
{{ form_widget(current_action.reply) }}
|
||||
{% endif %}
|
||||
{{ form_end(current_action) }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="e-content entry-content note-content" aria-roledescription="{{ 'The note content.' | trans }}">
|
||||
</header>
|
||||
<div class="e-content entry-content note-content" title="{{ 'This note\'s content.' | trans }}">
|
||||
{% block markdown %}
|
||||
{% apply markdown_to_html %}
|
||||
{{ note.getContent() }}
|
||||
|
@ -61,7 +51,7 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="note-links">
|
||||
<div class="note-links" title="{{ 'Shared links in this note.' | trans }}">
|
||||
{% for link in note.getLinks() %}
|
||||
{% for block in handle_event('ViewLink', {'link': link, 'note': note}) %}
|
||||
{{ block | raw }}
|
||||
|
|
|
@ -6,10 +6,10 @@
|
|||
<aside class="panel-content">
|
||||
|
||||
{% if post_form is defined %}
|
||||
<section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
|
||||
<details class="section-title-details">
|
||||
<section class="section-widget" title={{ 'Create a new note.' | trans }}>
|
||||
<details class="section-title-details" title={{ 'Expand if you want to access more options.' | trans }}>
|
||||
<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>
|
||||
|
||||
{% for tab in tabs %}
|
||||
|
|
Loading…
Reference in New Issue
Block a user