Skip to content

Commit

Permalink
imp: Put documents visually in the TinyMCE editor
Browse files Browse the repository at this point in the history 
This makes the forms less cluttered and more coherent with the posted
messages.
  • Loading branch information
@marien-probesys
marien-probesys committed Sep 12, 2023
1 parent 7ea774e commit 2bb4837
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 57 deletions.
20 changes: 15 additions & 5 deletions assets/stylesheets/components/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,15 +249,25 @@ legend {
padding-left: 1rem;
}

.tox-tinymce {
border-color: var(--color-grey8) !important;
.editor {
background-color: #fff;
border: 0.25rem solid var(--color-grey8);
border-radius: 0.5rem;

transition: border-color 0.2s ease-in-out;
}

.tox-tinymce:hover,
.tox-tinymce:focus-within {
border-color: var(--color-primary8) !important;
.editor:hover,
.editor:focus-within {
border-color: var(--color-primary8);
}

.editor__documents {
padding: 1.5rem;
}

.editor .tox-tinymce {
border: none;
}

.form__caption {
Expand Down
7 changes: 5 additions & 2 deletions templates/message_documents/index.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@
<div>
<button
type="button"
class="button--discreet text--small"
class="button--icon button--discreet text--smaller"
data-action="message-documents#openFilesSelector"
data-message-documents-target="uploadButton"
>
Ajouter
{{ icon('plus') }}
<span class="sr-only">
{{ 'message_documents.attachments.attach' | trans }}
</span>
</button>

<input
Expand Down
52 changes: 27 additions & 25 deletions templates/organizations/tickets/new.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,31 +105,33 @@
</p>
{% endif %}

<textarea
id="message"
name="message"
data-controller="tinymce"
data-tinymce-upload-url-value="{{ path('create message document') }}"
data-tinymce-upload-csrf-value="{{ csrf_token('create message document') }}"
data-form-new-ticket-target="editor"
data-action="new-document->form-new-ticket#newDocument remove-document->tinymce#removeImage"
{% if errors.content is defined %}
autofocus
aria-invalid="true"
aria-errormessage="message-error"
{% endif %}
>{{ message }}</textarea>
</div>

<div>
<turbo-frame
id="message-documents"
src="{{ path('message documents', { filter: 'unattached' }) }}"
data-controller="message-documents"
data-form-new-ticket-target="messageDocuments"
data-action="remove-document->form-new-ticket#removeDocument new-document->message-documents#reload"
>
</turbo-frame>
<div class="editor">
<textarea
id="message"
name="message"
data-controller="tinymce"
data-tinymce-upload-url-value="{{ path('create message document') }}"
data-tinymce-upload-csrf-value="{{ csrf_token('create message document') }}"
data-form-new-ticket-target="editor"
data-action="new-document->form-new-ticket#newDocument remove-document->tinymce#removeImage"
{% if errors.content is defined %}
autofocus
aria-invalid="true"
aria-errormessage="message-error"
{% endif %}
>{{ message }}</textarea>

<div class="editor__documents">
<turbo-frame
id="message-documents"
src="{{ path('message documents', { filter: 'unattached' }) }}"
data-controller="message-documents"
data-form-new-ticket-target="messageDocuments"
data-action="remove-document->form-new-ticket#removeDocument new-document->message-documents#reload"
>
</turbo-frame>
</div>
</div>
</div>

{% if is_granted('orga:update:tickets:status', organization) %}
Expand Down
52 changes: 27 additions & 25 deletions templates/tickets/show.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,31 +193,33 @@
</p>
{% endif %}

<textarea
id="message"
name="message"
data-controller="tinymce"
data-tinymce-upload-url-value="{{ path('create message document') }}"
data-tinymce-upload-csrf-value="{{ csrf_token('create message document') }}"
data-form-new-answer-target="editor"
data-action="new-document->form-new-answer#newDocument remove-document->tinymce#removeImage"
{% if errors.content is defined %}
autofocus
aria-invalid="true"
aria-errormessage="message-error"
{% endif %}
>{{ message }}</textarea>
</div>

<div>
<turbo-frame
id="message-documents"
src="{{ path('message documents', { filter: 'unattached' }) }}"
data-controller="message-documents"
data-form-new-answer-target="messageDocuments"
data-action="remove-document->form-new-answer#removeDocument new-document->message-documents#reload"
>
</turbo-frame>
<div class="editor">
<textarea
id="message"
name="message"
data-controller="tinymce"
data-tinymce-upload-url-value="{{ path('create message document') }}"
data-tinymce-upload-csrf-value="{{ csrf_token('create message document') }}"
data-form-new-answer-target="editor"
data-action="new-document->form-new-answer#newDocument remove-document->tinymce#removeImage"
{% if errors.content is defined %}
autofocus
aria-invalid="true"
aria-errormessage="message-error"
{% endif %}
>{{ message }}</textarea>

<div class="editor__documents">
<turbo-frame
id="message-documents"
src="{{ path('message documents', { filter: 'unattached' }) }}"
data-controller="message-documents"
data-form-new-answer-target="messageDocuments"
data-action="remove-document->form-new-answer#removeDocument new-document->message-documents#reload"
>
</turbo-frame>
</div>
</div>
</div>

{% set canCreateConfidential = is_granted('orga:create:tickets:messages:confidential', organization) %}
Expand Down
1 change: 1 addition & 0 deletions translations/messages+intl-icu.en_GB.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ mailboxes.port: 'Port IMAP'
mailboxes.test.success: 'The connection works.'
mailboxes.username: Username
message_documents.attachments: Attachments
message_documents.attachments.attach: 'Attach a document'
message_documents.remove: 'Remove attachment'
notifications.saved: 'Your changes have been successfully saved.'
organizations.deletion.caution: Caution!
Expand Down
1 change: 1 addition & 0 deletions translations/messages+intl-icu.fr_FR.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ mailboxes.port: 'Port IMAP'
mailboxes.test.success: 'La connexion fonctionne.'
mailboxes.username: 'Nom d’utilisateur'
message_documents.attachments: Pièces-jointes
message_documents.attachments.attach: 'Ajouter une pièce-jointe'
message_documents.remove: 'Retirer la pièce-jointe'
notifications.saved: 'Vos changements ont été sauvegardés.'
organizations.deletion.caution: "Attention\_!"
Expand Down

0 comments on commit 2bb4837

Please sign in to comment.