[Favourite][TWIG][CSS] Favourite shows alt-text and properly sets colours. Titles translated on the right panel.

This commit is contained in:
Eliseu Amaro 2021-08-11 18:42:15 +01:00 committed by Hugo Sales
parent f5175cc59d
commit 5de0704de2
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
9 changed files with 61 additions and 129 deletions

View File

@ -58,17 +58,24 @@ class Favourite extends Plugin
}
// if note is favourited, "is_set" is 1
$opts = ['note_id' => $note->getId(), 'gsactor_id' => $user->getId()];
$is_set = DB::find('favourite', $opts) != null;
$form = Form::create([
['is_set', HiddenType::class, ['data' => $is_set ? '1' : '0']],
$opts = ['note_id' => $note->getId(), 'gsactor_id' => $user->getId()];
$is_set = DB::find('favourite', $opts) != null;
$form_fav = Form::create([
['submit_fav', SubmitType::class,
[
'label' => ' ',
'attr' => [
'class' => $is_set ? 'favourite-button-on' : 'favourite-button-off',
],
],
],
['note_id', HiddenType::class, ['data' => $note->getId()]],
["favourite-{$note->getId()}", SubmitType::class, ['label' => ' ', 'attr' => ['class' => $is_set ? 'favourite-button-on' : 'favourite-button-off']]],
["favourite-{$note->getId()}", HiddenType::class, ['data' => $is_set ? '1' : '0']],
]);
// Form handler
$ret = self::noteActionHandle(
$request, $form, $note, "favourite-{$note->getId()}", /**
$request, $form_fav, $note, "favourite-{$note->getId()}", /**
* Called from form handler
*
* @param $note Note to be favourited
@ -77,11 +84,11 @@ class Favourite extends Plugin
* @throws RedirectException Always thrown in order to prevent accidental form re-submit from browser
*/ function ($note, $data) use ($opts, $request) {
$fave = DB::find('favourite', $opts);
if ($data['is_set'] === '0' && $fave === null) {
if ($data["favourite-{$note->getId()}"] === '0' && $fave === null) {
DB::persist(Entity\Favourite::create($opts));
DB::flush();
} else {
if ($data['is_set'] === '1' && $fave !== null) {
if ($data["favourite-{$note->getId()}"] === '1' && $fave !== null) {
DB::remove($fave);
DB::flush();
}
@ -97,7 +104,7 @@ class Favourite extends Plugin
return $ret;
}
$actions[] = $form->createView();
$actions[] = $form_fav->createView();
return Event::next;
}

View File

@ -195,27 +195,18 @@
display: block;
}
.favourite-button-off {
all: unset;
cursor: pointer !important;
border: none !important;
.favourite-button-container button {
width: 1em !important;
height: 1em !important;
background-size: cover !important;
background-image: url(../icons/heart.svg) !important;
filter: invert(26%) sepia(21%) saturate(580%) hue-rotate(201deg) brightness(96%) contrast(93%);
border: unset !important;
padding: unset !important;
mask-image: url("../icons/heart.svg") !important;
}
.favourite-button-off {
background: var(--bg2) !important;
}
.favourite-button-on {
all: unset;
cursor: pointer !important;
border: none !important;
width: 1em !important;
height: 1em !important;
background-size: cover !important;
background-image: url(../icons/heart.svg) !important;
filter: invert(100%);
background: var(--white) !important;
}
.note-content {

View File

@ -26,11 +26,11 @@
background-color: var(--translucent);
}
.section-title-hamburger {
.section-title-menu {
display: flex;
justify-content: space-between;
}
.section-title-hamburger svg {
.section-title-menu svg {
align-self: center;
fill: var(--white);
}

View File

@ -1,56 +0,0 @@
form {
width: 50%;
margin-left: auto;
margin-right: auto;
padding: var(--main-size);
border-radius: var(--unit-size);
}
fieldset {
display: flex;
flex-direction: column;
font-family: var(--display-font);
font-size: var(--main-size);
}
fieldset legend {
margin-bottom: var(--main-size);
}
br {
margin-bottom: var(--unit-size);
}
label {
font-family: var(--display-font);
font-size: var(--medium-size);
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
background: var(--white) !important;
color: var(--bg1) !important;
transition: all 0.4s ease;
}
input[type="text"],
input[type="password"],
input[type="email"] {
all: unset;
background: var(--translucent);
padding: var(--unit-size) var(--small-size);
box-sizing: border-box;
border-radius: var(--unit-size);
font-size: var(--medium-size);
width: 100%;
}
fieldset div:last-child {
text-align: end;
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -29,7 +29,7 @@
</head>
<body class="bg">
{% block header %}
{% block header %}
<div id='header'>
<details class="panel" id="left-container">
<summary tabindex="1">

View File

@ -14,10 +14,15 @@
{% endif %}
<div class="note-actions">
{% if have_user %}
{% for act in get_note_actions(note) %}
{{ form(act) }}
{% for current_action in get_note_actions(note) %}
{{ form_start(current_action) }}
{% if current_action.submit_fav is defined %}
<span title="Favourite this note." class="favourite-button-container">
{{ form_widget(current_action.submit_fav) }}
</span>
{% endif %}
{{ form_end(current_action) }}
{% endfor %}
{% endif %}
</div>

View File

@ -5,7 +5,7 @@
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/security/security.css') }}">
{% endblock %}
{% block title %}Log in!{% endblock %}
{% block title %}{{ "Log in!" | trans }}{% endblock %}
{% block body %}
<div class='content'>
@ -17,34 +17,26 @@
<div class="alert alert-danger">{{ error.messageKey | trans(error.messageData, 'security') }}</div>
{% endif %}
<p>
{% if app.user %}
<h1 class="mb-3">
You are logged in as {{ app.user.username }}.
<br>
<button class="btn btn-lg btn-primary">
<a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
</button>
</h1>
{% else %}
{# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #}
<label for="inputNickname">{{ "Nickname or Email" | trans }}</label>
<br>
<input type="text" value="{{ last_login_id }}" name="nickname" id="inputNickname"
class="form-control" required autofocus>
{% if app.user %}
<h1 class="mb-3">
{{ "You are logged in as" | trans }} {{ app.user.username }}.
<button class="btn btn-lg btn-primary">
<a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
</button>
</h1>
{% else %}
{# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #}
<label for="inputNickname">{{ "Nickname or Email" | trans }}</label>
<input type="text" value="{{ last_login_id }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
{% endif %}
</p>
<p>
<label for="inputPassword">{{ "Password" | trans }}</label>
<br>
<input type="password" name="password" id="inputPassword" class="form-control" required>
</p>
<label for="inputPassword">{{ "Password" | trans }}</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<p class="checkbox mb-3">
<label>{{ "Remember me" | trans}}</label>
<label>{{ "Remember me" | trans }}</label>
<input type="checkbox" name="_remember_me">
</p>

View File

@ -1,17 +1,16 @@
<aside id='right-panel'>
{% if post_form is defined %}
<section class="section-widget">
<legend class="section-title">
<details>
<summary class="section-title-hamburger">
Create a note {{ icon('plus-circle', 'icon icon-plus') | raw }}
</summary>
<details class="section-title">
<summary class="section-title-menu">
{{ "Create a note" | trans }}
{{ icon('plus-circle', 'icon icon-plus') | raw }}
</summary>
{% for tab in tabs %}
<a class="section-title-hamburger-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %}
</details>
</legend>
{% for tab in tabs %}
<a class="section-title-menu-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %}
</details>
<div class="section-form">
{{ form_start(post_form) }}