diff --git a/public/assets/css/app.css b/public/assets/css/app.css index f4eab6bdec0f476fe9d1be57ff1108aa486175d5..9b1170f1fb8100c8966041c645a921be94f084ee 100755 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -607,6 +607,7 @@ audio::-webkit-media-controls-mute-button { position: sticky; position: -webkit-sticky; bottom: 50px; + margin-bottom: 8px; background-color: lightgrey; padding: 15px; border-radius: 15px; @@ -656,6 +657,10 @@ ul.navbar-nav.flex-row > .nav-item { @media only screen and (max-width: 767px) { + .text-grey { + color: #004bf2; + } + .fw-bold-sm { font-weight: bold; } @@ -666,6 +671,12 @@ ul.navbar-nav.flex-row > .nav-item { tr.collapse-sm > th, .hide-sm, tr.collapse-sm > td.hide-sm { display: none !important; } + tr.collapse-sm > th.show-sm { + display: table-cell !important; + } + tr.collapse-sm > th.show-sm.d-flex { + display: flex !important; + } tr.collapse-sm > td.collapse-sm { display: block; clear: both; @@ -700,4 +711,15 @@ ul.navbar-nav.flex-row > .nav-item { padding-top: 4px; padding-bottom: 4px; } +} + +.app-shadow { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) +} +.border-grey-lg { + border: grey solid 2px; +} + +.text-blue { + color: #004bf2; } \ No newline at end of file diff --git a/templates/label/_chooseLabel.html.twig b/templates/label/_chooseLabel.html.twig index d1019ad0de917f27cf9d5dd1d2c9af1b1a0958ab..5133726e7cafb18422382d4159a07bffcb5d7d78 100644 --- a/templates/label/_chooseLabel.html.twig +++ b/templates/label/_chooseLabel.html.twig @@ -1,6 +1,7 @@ {% extends 'modal.html.twig' %} + {% block modal_title %} - {{ "Gestion des labels"|trans }} + {{ "Gestion des labels"|trans }} : {{ category|capitalize|trans }} {% endblock %} {# Si on a uniquement entryId, on revient sur entry_show. Si on a lexiconId ou lexiconId + entryId, il faudra revenir sur la page lexicon_show. @@ -23,27 +24,30 @@ {# Si on a entryId on est pas en mode "sélection multiple" #} {% if entry|default(null) %} - <div class="row mb-3"> - <div class="col-md-12"> + <div class="row mb-4 mt-2"> + <div class="col-md-12 "> - {% for label in label_manager.entryVisibleLabels(entry, app.user, category) %} - {% include "label/_labelBadge.html.twig" %} + <div class="rounded p-4 border-grey-lg mb-4"> + {% for label in label_manager.entryVisibleLabels(entry, app.user, category) %} + <div class="d-flex align-items-center mt-2"> + {% include "label/_labelBadge.html.twig" %} - <a class="modal-form" href="#" data-url="{{ path('app_label_remove', {id: label.id, lexiconId: lexiconId, entryId: entry.id, category: category}) }}" data-extra-form-id="#entriesSelection"> - <i class="fa fa-lg fa-times-circle text-danger" style="margin-left: -8px;"></i> - </a> + <a class="modal-form" href="#" data-url="{{ path('app_label_remove', {id: label.id, lexiconId: lexiconId, entryId: entry.id, category: category}) }}" data-extra-form-id="#entriesSelection"> + <i class="fa fa-lg fa-times-circle text-danger" style="margin-left: -3px; margin-right: 15px; vertical-align: 0"></i> + </a> + </div> - {% else %} - <i>{{ "Aucun label visible dans ce lexique pour cette catégorie"|trans }}</i> - {% endfor %} + {% else %} + <i>{{ "Aucun label visible dans ce lexique pour cette catégorie"|trans }}</i> + {% endfor %} + </div> </div> </div> - <hr> {% endif %} <div class="d-flex justify-content-between"> - <input class="form-control" id="searchInput" type="text" placeholder="{{ 'Filtrer les labels'|trans }}" name="search"> + <input class="form-control" id="searchInput" type="text" placeholder="{{ 'Rechercher des labels à ajouter'|trans }}" name="search"> </div> diff --git a/templates/lexicon/show.html.twig b/templates/lexicon/show.html.twig index 728f62f23465ec864ab253c4120b2b405ec19f92..df180ac603f267d85488636ca9890f3c6e59404b 100644 --- a/templates/lexicon/show.html.twig +++ b/templates/lexicon/show.html.twig @@ -74,6 +74,28 @@ </div> + {##################### BADGES FILTRES SEARCHSTRING OU LABELS ##################} + + <div class="row pt-2"> + <div class="col-md-12"> + {% if searchString %} {# FILTRE HEADWORD supprimable #} + <span class="badge bg-danger"> + {{ "Filtre: " }}{{ searchString }} + <a href="{{ path('app_lexicon_show', {id: lexicon.id}) }}" class="hover-grey"><i title="{{ "Supprimer le filtre"|trans }}" class="fa fa-times-circle"></i></a> + </span> + {% endif %} + {% if labelsFiltered %} {# FILTRES par LABEL supprimables #} + <div> + {% for label in labelsFiltered %} + <span class="badge bg-danger"> + {{ "Filtre: " }}{{ label }} + <a href="{{ path('app_lexicon_show', { id: lexicon.id, labelFilterIds: app.request.query.get('labelFilterIds')|filter((v, k) => v != label.id) } ) }}" class="hover-grey"><i title="{{ "Supprimer le filtre"|trans }}" class="fa fa-times-circle"></i></a> + </span> + {% endfor %} + </div> + {% endif %} + </div> + </div> {########################## LISTE ENTRÉES ############################} <div class="row mt-4"> @@ -94,26 +116,10 @@ <a title="{{ "Ajouter un mot au lexique"|trans }}" href="#" data-url="{{ path('app_lexicon_add_headword', {id: lexicon.id}) }}" class="ms-2 modal-form"><i class="fa fa-plus-circle text-success"></i></a> {% endif %} </div> - {% if searchString %} {# FILTRE HEADWORD supprimable #} - <span class="badge bg-danger"> - {{ "Filtre: " }}{{ searchString }} - <a href="{{ path('app_lexicon_show', {id: lexicon.id}) }}" class="hover-grey"><i title="{{ "Supprimer le filtre"|trans }}" class="fa fa-times-circle"></i></a> - </span> - {% endif %} </th> {# <th colspan="3" class="text-center">{{ "Labels"|trans }}</th>#} <th colspan="2" class="text-center"> {{ "Labels"|trans }} - {% if labelsFiltered %} {# FILTRES par LABEL supprimables #} - <div> - {% for label in labelsFiltered %} - <span class="badge bg-danger"> - {{ "Filtre: " }}{{ label }} - <a href="{{ path('app_lexicon_show', { id: lexicon.id, labelFilterIds: app.request.query.get('labelFilterIds')|filter((v, k) => v != label.id) } ) }}" class="hover-grey"><i title="{{ "Supprimer le filtre"|trans }}" class="fa fa-times-circle"></i></a> - </span> - {% endfor %} - </div> - {% endif %} </th> <th></th> {% if not lexicon.user %} @@ -121,14 +127,14 @@ {% endif %} </tr> <tr class="collapse-sm"> - <th class="text-nowrap"> + <th class="text-nowrap show-sm"> <span>{{ macros.sorting_column_with_filter('<i class="fa fa-sort"></i>', 'createdAt', _context, {id: lexicon.id}) }}</span> {# On ajoute le param shuffle dans la query et on supprime les params sortingOrder et sortingColumn #} <a href="{{ path('app_lexicon_show', {id: lexicon.id}|merge({shuffle: 'SHUFFLE'})|merge(app.request.query.all|filter((value, key) => (key != 'sortingColumn' and key != 'sortingOrder')))) }}"> <i class="ms-sm-1 ms-md-3 fa fa-random"></i> </a> </th> - <th class="d-flex justify-content-between"> + <th class="d-flex justify-content-between show-sm"> {% if is_granted('LEXICON_EDIT', lexicon) %} <i id="super-select" class="fa fa-square-o" data-bs-toggle="modal" data-bs-target="#selectModal"></i> {{ macros.sorting_column_with_filter('<i class="fa fa-sort-alpha-asc"></i>', 'value', _context, {id: lexicon.id}) }} @@ -173,7 +179,7 @@ {############ LABELS ############} {# <td>{% for label in entry.headword.morphologicalLabels %}<span class="badge bg-primary">{{ label }}</span> {% endfor %}</td>#} {% set generalLabels = label_manager.entryVisibleLabels(entry, app.user, constant("App\\Entity\\Label::LABEL_CATEGORY_GENERAL")) %} - <td class="col-md-2 collapse-sm {{ generalLabels|length == 0 ? 'd-sm-inline-block' }}"> + <td class="col-md-2 collapse-sm {{ generalLabels|length == 0 ? 'hide-sm' }}"> <div class="d-flex justify-content-between"> <span> {% for label in generalLabels %} @@ -181,12 +187,13 @@ {% endfor %} </span> {% if is_granted('LEXICON_EDIT', lexicon) %} - <a class="modal-form links-container" data-url="{{ path('app_label_choose', {lexiconId: lexicon.id, entryId: entry.id, category: constant("App\\Entity\\Label::LABEL_CATEGORY_GENERAL")}) }}"><i class="fa fa-tags text-grey"></i></a> + {% set pathEditGeneralLabels = path('app_label_choose', {lexiconId: lexicon.id, entryId: entry.id, category: constant("App\\Entity\\Label::LABEL_CATEGORY_GENERAL")}) %} + <a class="modal-form links-container hide-sm" data-url="{{ pathEditGeneralLabels }}"><i class="fa fa-tags text-grey"></i></a> {% endif %} </div> </td> {% set milestoneLabels = label_manager.entryVisibleLabels(entry, app.user, constant("App\\Entity\\Label::LABEL_CATEGORY_MILESTONE")) %} - <td class="col-md-2 collapse-sm {{ milestoneLabels|length == 0 ? 'd-sm-inline-block' }}"> + <td class="col-md-2 collapse-sm {{ milestoneLabels|length == 0 ? 'hide-sm' }}"> <div class="d-flex justify-content-between"> <span> {% for label in milestoneLabels %} @@ -194,7 +201,8 @@ {% endfor %} </span> {% if is_granted('LEXICON_EDIT', lexicon) %} - <a class="modal-form links-container" data-url="{{ path('app_label_choose', {lexiconId: lexicon.id, entryId: entry.id, category: constant("App\\Entity\\Label::LABEL_CATEGORY_MILESTONE")}) }}"><i class="fa fa-tags text-grey"></i></a> + {% set pathEditMilestoneLabels = path('app_label_choose', {lexiconId: lexicon.id, entryId: entry.id, category: constant("App\\Entity\\Label::LABEL_CATEGORY_MILESTONE")}) %} + <a class="modal-form links-container hide-sm" data-url="{{ pathEditMilestoneLabels }}"><i class="fa fa-tags text-grey"></i></a> {% endif %} </div> </td> @@ -203,19 +211,29 @@ {# </td>#} {############ DEFINITIONS ############} - <td class=" collapse-sm"> - {% for pos, definitions in entry.formattedDefinitions %} - <a class="text-decoration-none text-toggle" data-bs-toggle="collapse" href="#def-{{ entry.id }}-{{ loop.index }}" role="button" aria-expanded="false" aria-controls="collapseExample"> - <span class="badge bg-definition text-black"><i class="bi-caret-right-fill show-collapsed"></i><i class="bi-caret-down-fill show-expanded"></i> {{ pos }}</span> - </a> - <div class="collapse" id="def-{{ entry.id }}-{{ loop.index }}"> - <div class="card card-body card-definition"> - {% for definition in definitions %} - <div class="my-1">{{ loop.index }}. {{ definition }}</div> - {% endfor %} + <td class="collapse-sm d-flex justify-content-between"> + <div> + {% for pos, definitions in entry.formattedDefinitions %} + <a class="text-decoration-none text-toggle" data-bs-toggle="collapse" href="#def-{{ entry.id }}-{{ loop.index }}" role="button" aria-expanded="false" aria-controls="collapseExample"> + <span class="badge bg-definition text-black"><i class="bi-caret-right-fill show-collapsed"></i><i class="bi-caret-down-fill show-expanded"></i> {{ pos }}</span> + </a> + <div class="collapse" id="def-{{ entry.id }}-{{ loop.index }}"> + <div class="card card-body card-definition"> + {% for definition in definitions %} + <div class="my-1">{{ loop.index }}. {{ definition }}</div> + {% endfor %} + </div> </div> - </div> - {% endfor %} + {% endfor %} + </div> + + <div class="dropdown"> + <a class="dropdown-toggle d-md-none" data-bs-toggle="dropdown"><i class="fa fa-tags fa-lg text-blue"></i></a> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> + <li><a class="modal-form d-md-none dropdown-item" data-url="{{ pathEditGeneralLabels }}">{{ "Général"|trans }}</a></li> + <li><a class="modal-form d-md-none dropdown-item" data-url="{{ pathEditMilestoneLabels }}">{{ "Échéance"|trans }}</a></li> + </ul> + </div> </td> {% if not lexicon.user %} <td class="text-center">{{ entry.createdBy|badge }}</td> diff --git a/translations/messages+intl-icu.en.yaml b/translations/messages+intl-icu.en.yaml index a05525121ec1bf7a8b036ec6b25eb67743d7be10..f5d46365d09723f6b1949d4747e665b7d7c0e608 100644 --- a/translations/messages+intl-icu.en.yaml +++ b/translations/messages+intl-icu.en.yaml @@ -338,4 +338,5 @@ copy_entry: label: 'Target lexicon' copy_entry.merge.submit: 'Submit' copy_entry.merge.label: 'Merging preference' -"Afficher uniquement les mots possédant ce label": "Display only words with this label" \ No newline at end of file +"Afficher uniquement les mots possédant ce label": "Display only words with this label" +"Rechercher des labels à ajouter": "Search for labels to add" \ No newline at end of file diff --git a/translations/messages+intl-icu.fr.yaml b/translations/messages+intl-icu.fr.yaml index 4abf2db80233bf243b0e351b8182cd24a90025ff..84d91315ba101c7a82d78a89cf4f22e0ce0e1ed4 100644 --- a/translations/messages+intl-icu.fr.yaml +++ b/translations/messages+intl-icu.fr.yaml @@ -353,4 +353,5 @@ copy_entry.merge.label: 'Préférence de fusion' copy_entry: lexicon: label: 'Lexique cible' -"Afficher uniquement les mots possédant ce label": "Afficher uniquement les mots possédant ce label" \ No newline at end of file +"Afficher uniquement les mots possédant ce label": "Afficher uniquement les mots possédant ce label" +"Rechercher des labels à ajouter": "Rechercher des labels à ajouter" \ No newline at end of file