diff --git a/app/assets/stylesheets/app.css b/app/assets/stylesheets/app.css index 3ee4674..1e28c6c 100644 --- a/app/assets/stylesheets/app.css +++ b/app/assets/stylesheets/app.css @@ -27,6 +27,21 @@ input.bouton { cursor: pointer; } +/* Bouton d'action présenté comme un lien de la charte */ +button.lien { + padding: 0; + border: 0; + background: none; + color: var(--encre); + font: inherit; + cursor: pointer; + text-decoration-line: underline; + text-decoration-color: var(--vert); + text-decoration-thickness: 0.12em; + text-underline-offset: 0.2em; +} +button.lien:hover { text-decoration-color: var(--encre); } + /* button_to enveloppe son bouton dans un formulaire : le garder en ligne */ .nav form.button_to { display: inline; } @@ -371,6 +386,8 @@ button.jour:focus-visible { font-size: 1.1rem; } +.public-autre-jour .detail-statut:not(:empty) { margin-right: 0.75rem; } + .public-historique h2 { margin: 2.5rem 0 0.75rem; font-size: 1.35rem; diff --git a/app/helpers/moods_helper.rb b/app/helpers/moods_helper.rb index 9d4a33b..759cad2 100644 --- a/app/helpers/moods_helper.rb +++ b/app/helpers/moods_helper.rb @@ -45,12 +45,13 @@ module MoodsHelper end end - # Un jour du calendrier : un bouton pour le propriétaire, une simple case pour les visiteurs. - def case_jour(mood, user, interactive:, selected: false) + # Un jour du calendrier : un bouton si on peut le choisir, sinon une simple case. + # Le journal n'est exposé que s'il est demandé (jamais sur la page publique). + def case_jour(mood, user, interactive:, selected: false, journal: false) date = mood[:recorded_at].to_date status = day_status(mood, user) mode = mode_for(mood, user) - day_log = mood[:day_log] if interactive + day_log = mood[:day_log] if journal description = [ date_longue(date), mode&.label, libelle_statut(status), ("journal écrit" if day_log) ].compact.join(", ") classes = [ "jour", "jour-#{status}" ] diff --git a/app/javascript/controllers/calendrier_controller.js b/app/javascript/controllers/calendrier_controller.js index 2e77fd3..f0f62d1 100644 --- a/app/javascript/controllers/calendrier_controller.js +++ b/app/javascript/controllers/calendrier_controller.js @@ -1,14 +1,17 @@ import { Controller } from "@hotwired/stimulus" -// Calendrier des humeurs : choisir un jour affiche son détail (illustration, mode, journal). +// Calendrier des humeurs : choisir un jour affiche son détail (illustration, mode, et +// sur le tableau de bord, le journal). Sert au tableau de bord comme à la page publique : +// chaque cible est facultative. // Au clavier, les flèches se déplacent d'un jour (haut, bas) ou d'une semaine (gauche, droite). export default class extends Controller { - static targets = [ "carte", "image", "date", "mode", "statut", "journal", "lien" ] + static targets = [ "carte", "image", "date", "qui", "mode", "statut", "depuis", "retour", "journal", "lien" ] + static values = { nom: String, aujourdhui: String, aujourdhuiMode: String, aujourdhuiImage: String, aujourdhuiCouleur: String } connect() { const selectionne = this.element.querySelector(".jour[aria-pressed='true']") if (selectionne && new URLSearchParams(window.location.search).has("day")) { - selectionne.scrollIntoView({ block: "center" }) + selectionne.scrollIntoView({ block: "nearest" }) } } @@ -16,6 +19,11 @@ export default class extends Controller { this.selectionner(event.currentTarget) } + revenir() { + const aujourdhui = this.element.querySelector(`button.jour[data-day="${this.aujourdhuiValue}"]`) + if (aujourdhui) this.selectionner(aujourdhui) + } + naviguer(event) { const decalages = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 } const decalage = decalages[event.key] @@ -40,17 +48,42 @@ export default class extends Controller { jour.setAttribute("aria-pressed", "true") jour.tabIndex = 0 + // Sur la page publique, aujourd'hui montre la dernière tasse posée et depuis quand + if (jour.dataset.day === this.aujourdhuiValue && this.hasDepuisTarget) { + this.afficherAujourdhui() + return + } + const { day, date, mode, statut, couleur, image, info } = jour.dataset this.carteTarget.style.setProperty("--humeur", couleur || "") this.imageTarget.src = image - this.dateTarget.textContent = date this.modeTarget.textContent = mode || "Pas de tasse posée" this.statutTarget.textContent = mode ? (statut || "") : "" - this.journalTarget.textContent = info || this.journalTarget.dataset.vide - this.journalTarget.classList.toggle("detail-journal-vide", !info) - this.lienTarget.href = `/day_logs/edit?day=${day}` - this.lienTarget.textContent = info ? "Modifier le journal" : "Écrire dans le journal" + + if (this.hasDateTarget) this.dateTarget.textContent = date + if (this.hasQuiTarget) this.quiTarget.textContent = `Le ${date} chez ${this.nomValue}` + if (this.hasDepuisTarget) this.depuisTarget.hidden = true + if (this.hasRetourTarget) this.retourTarget.hidden = false + + if (this.hasJournalTarget) { + this.journalTarget.textContent = info || this.journalTarget.dataset.vide + this.journalTarget.classList.toggle("detail-journal-vide", !info) + } + if (this.hasLienTarget) { + this.lienTarget.href = `/day_logs/edit?day=${day}` + this.lienTarget.textContent = info ? "Modifier le journal" : "Écrire dans le journal" + } history.replaceState({}, "", `?day=${day}`) } + + afficherAujourdhui() { + this.carteTarget.style.setProperty("--humeur", this.aujourdhuiCouleurValue) + this.imageTarget.src = this.aujourdhuiImageValue + this.modeTarget.textContent = this.aujourdhuiModeValue + this.quiTarget.textContent = `Aujourd’hui chez ${this.nomValue}` + this.depuisTarget.hidden = false + this.retourTarget.hidden = true + history.replaceState({}, "", window.location.pathname) + } } diff --git a/app/views/moods/_calendrier.html.erb b/app/views/moods/_calendrier.html.erb index 6a808d4..4417e18 100644 --- a/app/views/moods/_calendrier.html.erb +++ b/app/views/moods/_calendrier.html.erb @@ -1,7 +1,7 @@ <%# Calendrier des humeurs « à la GitHub » : une colonne par semaine, une ligne par jour, regroupé par mois. Par défaut, un bloc par année, la plus récente d'abord ; avec par_annee: false, tous les mois à la suite (l'année est ajoutée aux mois d'une autre année). %> -<%# locals: (history:, user:, interactive: false, selected_date: nil, par_annee: true) -%> +<%# locals: (history:, user:, interactive: false, journal: false, selected_date: nil, par_annee: true) -%> <% blocs = par_annee ? history_by_year(history) : [ [ nil, history ] ] %>
<% blocs.each do |year, months| %> @@ -18,7 +18,7 @@

<%= l(month[:month], format: year || month[:month].year == Date.current.year ? "%B" : "%B %Y") %>

<% month[:weeks].flatten.each do |mood| %> - <%= case_jour(mood, user, interactive: interactive, + <%= case_jour(mood, user, interactive: interactive, journal: journal, selected: mood[:recorded_at].to_date == selected_date) %> <% end %>
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb index ed780fe..922a060 100644 --- a/app/views/moods/index.html.erb +++ b/app/views/moods/index.html.erb @@ -9,7 +9,7 @@

Mes humeurs

<%= render "moods/legende", user: @user, journal: true %> - <%= render "moods/calendrier", history: history, user: @user, interactive: true, selected_date: selected_date %> + <%= render "moods/calendrier", history: history, user: @user, interactive: true, journal: true, selected_date: selected_date %>