4824363879
- link: shows a simple link to open attachment - download: shows complete DSFR download UI
400 lines
13 KiB
Text
400 lines
13 KiB
Text
.patron
|
||
.container
|
||
%h1 Icônes
|
||
|
||
%span.icon.follow
|
||
%span.icon.unfollow
|
||
%span.icon.archive
|
||
%span.icon.unarchive
|
||
%span.icon.folder
|
||
%span.icon.new-folder
|
||
%span.icon.accept
|
||
%span.icon.refuse
|
||
%span.icon.without-continuation
|
||
%span.icon.edit
|
||
%span.icon.in-progress
|
||
%span.icon.bubble
|
||
%span.icon.attached
|
||
%span.icon.lock
|
||
%span.icon.add
|
||
%span.icon.justificatif
|
||
%span.icon.printer
|
||
%span.icon.account
|
||
%span.icon.person
|
||
%span.icon.super-admin
|
||
%span.icon.mail
|
||
%span.icon.reply
|
||
%span.icon.search
|
||
%span.icon.sign-out
|
||
%span.icon.info
|
||
%span.icon.delete
|
||
%span.icon.help
|
||
%span.icon.phone
|
||
%span.icon.clock
|
||
%span.icon.preview
|
||
%span.icon.retry
|
||
%span.icon.download
|
||
%span.icon.download-white
|
||
%span.icon.move-handle
|
||
%span.icon.frown
|
||
%span.icon.meh
|
||
%span.icon.smile
|
||
|
||
%h1 Formulaires
|
||
|
||
%form.form
|
||
= form_for @dossier, url: '', html: { class: 'form' } do |f|
|
||
= f.fields_for :champs_public do |champ_form|
|
||
= render EditableChamp::EditableChampComponent.new champ: champ_form.object, form: champ_form
|
||
|
||
.editable-champ.editable-champ-text
|
||
%label Mot de passe
|
||
%input{ type: "password", value: "12345678" }
|
||
|
||
%h3.header-subsection Bouton radio verticaux
|
||
.radios.vertical
|
||
= f.label :archived, value: true do
|
||
= f.radio_button :archived, true
|
||
Option A
|
||
%p.notice Une option tout à fait valable.
|
||
= f.label :archived, value: false do
|
||
= f.radio_button :archived, false
|
||
Option B
|
||
%p.notice Une autre option, pas mal non plus.
|
||
|
||
%h3.header-subsection Interrupteur
|
||
%label.toggle-switch
|
||
= f.check_box :archived, class: 'toggle-switch-checkbox'
|
||
%span.toggle-switch-control.round
|
||
%span.toggle-switch-label.on Activé
|
||
%span.toggle-switch-label.off Désactivé
|
||
|
||
.send-wrapper
|
||
= f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
|
||
= f.submit 'Envoyer', class: 'button send primary'
|
||
|
||
%hr
|
||
|
||
%h1 Boutons
|
||
|
||
.patron-section
|
||
= link_to ".button", "#", class: "button"
|
||
|
||
= link_to ".button.primary", "#", class: "button primary"
|
||
|
||
= link_to ".button.secondary", "#", class: "button secondary"
|
||
|
||
= link_to ".button.danger", "#", class: "button danger"
|
||
|
||
= link_to "#", class: "button" do
|
||
%span.icon.follow
|
||
= "Bouton avec icone et texte"
|
||
|
||
= link_to "#", class: "button icon-only" do
|
||
%span.icon.follow
|
||
|
||
.patron-section
|
||
%button.button{ disabled: true } .button.disabled
|
||
|
||
%button.button.primary{ disabled: true } .button.primary.disabled
|
||
|
||
%button.button.secondary{ disabled: true } .button.secondary.disabled
|
||
|
||
%button.button.danger{ disabled: true } .button.danger.disabled
|
||
|
||
.patron-section
|
||
= link_to ".button.accepted", "#", class: "button accepted"
|
||
|
||
= link_to ".button.refused", "#", class: "button refused"
|
||
|
||
= link_to ".button.without-continuation", "#", class: "button without-continuation"
|
||
|
||
.patron-section
|
||
= link_to ".button.small", "#", class: "button small"
|
||
|
||
= link_to ".button.small.primary", "#", class: "button small primary"
|
||
|
||
.patron-section
|
||
= link_to ".button.large", "#", class: "button large"
|
||
|
||
= link_to ".button.large.primary", "#", class: "button large primary"
|
||
|
||
.patron-section
|
||
= link_to ".button.primary.expand", "#", class: "button primary expand"
|
||
|
||
%h1 Dropdown
|
||
|
||
.dropdown
|
||
.button.primary.dropdown-button .button.primary.dropdown-button
|
||
.dropdown-content.fade-in-down
|
||
%ul.dropdown-items
|
||
%li .dropdown-content ul.dropdown-items li
|
||
%li .dropdown-content ul.dropdown-items li
|
||
|
||
.dropdown
|
||
.button.dropdown-button .button.dropdown-button
|
||
.dropdown-content.fade-in-down
|
||
%ul.dropdown-items
|
||
%li
|
||
%a{ href: '#' }
|
||
%span.icon.mail
|
||
.dropdown-description
|
||
%h4 Action
|
||
%p Explanation
|
||
%li
|
||
%a{ href: '#' }
|
||
%span.icon.edit
|
||
.dropdown-description
|
||
%h4 Other action
|
||
%p Explanation
|
||
|
||
.dropdown
|
||
.button.dropdown-button .button.dropdown-button (left)
|
||
.dropdown-content.fade-in-down.left-aligned
|
||
%ul.dropdown-items
|
||
%li .dropdown-content.left-aligned ul.dropdown-items li
|
||
%li .dropdown-content.left-aligned ul.dropdown-items li
|
||
|
||
%h1 Labels
|
||
|
||
%span.label .label
|
||
%span.label.brouillon .label.brouillon
|
||
%span.label.instruction .label.instruction
|
||
%span.label.construction .label.construction
|
||
%span.label.accepted .label.accepted
|
||
%span.label.refused .label.refused
|
||
%span.label.without-continuation .label.without-continuation
|
||
|
||
%h1 Badges
|
||
|
||
%span.badge 1
|
||
%span.badge.warning 1
|
||
|
||
%h1 Cards
|
||
|
||
.card
|
||
.card-title
|
||
Titre de la carte
|
||
%p Et voici le contenu de la carte
|
||
|
||
.card.featured
|
||
.card-title
|
||
Titre de la carte mise en avant
|
||
%p Et voici le contenu de la carte
|
||
|
||
.card.warning
|
||
.card-title
|
||
Titre de la carte d’avertissement
|
||
%p Et voici le contenu de la carte
|
||
|
||
.card.feedback
|
||
.card-title
|
||
Titre de la carte pour demander un avis
|
||
%p Utilisez cette carte pour informer d’une nouveauté produit ou demander l’avis des utilisateurs.
|
||
|
||
%h1 Table
|
||
|
||
%table.table
|
||
%thead
|
||
%tr
|
||
%th Header 1
|
||
%th Header 2
|
||
%tbody
|
||
%tr
|
||
%td Table Data 1
|
||
%td Table Data 2
|
||
%tr
|
||
%td Table Data 3
|
||
%td Table Data 4
|
||
|
||
%h2 Hoverable (.table.hoverable)
|
||
|
||
%table.table.hoverable
|
||
%thead
|
||
%tr
|
||
%th Header 1
|
||
%th Header 2
|
||
%tbody
|
||
%tr
|
||
%td Table Data 1
|
||
%td Table Data 2
|
||
%tr
|
||
%td Table Data 3
|
||
%td Table Data 4
|
||
|
||
%h2 Vertical layout (.table.vertical)
|
||
|
||
%table.table.vertical
|
||
%tbody
|
||
%tr
|
||
%th Header 1
|
||
%td Table Data 1
|
||
%tr
|
||
%th Header 2
|
||
%td Table Data 2
|
||
%tr
|
||
%th.header-section{ colspan: 2 } Header section
|
||
%tr
|
||
%th Header 3
|
||
%td Table Data 3
|
||
|
||
%h1 Header
|
||
.sub-header
|
||
.container
|
||
Titre
|
||
%nav.tabs
|
||
%ul
|
||
= tab_item("Onglet actif", "#", active: true)
|
||
= tab_item("Onglet inactif", "#")
|
||
= tab_item("Onglet avec badge", "#", badge: 2)
|
||
= tab_item("Onglet avec notification", "#", notification: true)
|
||
|
||
.container
|
||
%h1 Breadcrumbs
|
||
|
||
%ul.breadcrumbs
|
||
%li
|
||
= link_to "Démarche 123", "#"
|
||
%li
|
||
= "Dossier n° 38"
|
||
|
||
|
||
%h1 Layout deux colonnes
|
||
|
||
.two-columns
|
||
.columns-container
|
||
.column
|
||
Insérer ici le contenu de la colonne 1
|
||
.column
|
||
Insérer ici le contenu de la colonne 2
|
||
|
||
.container
|
||
%section.ask-avis
|
||
%h1 Inviter une personne à donner son avis
|
||
%p.avis-notice L’invité pourra consulter, donner un avis sur le dossier et contribuer au fil de messagerie, mais il ne pourra le modifier.
|
||
|
||
= form_for Avis.new, url: '/', html: { class: 'form' } do |f|
|
||
= f.email_field :email, placeholder: 'Adresse email', required: true
|
||
= f.text_area :introduction, rows: 3, value: 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
|
||
.send-wrapper
|
||
= f.submit 'Demander un avis', class: 'button send'
|
||
|
||
%section.list-avis
|
||
%h1.title
|
||
Avis des invités
|
||
%span.fr-badge 1
|
||
|
||
%ul
|
||
%li.one-avis
|
||
%h2.claimant
|
||
Vous
|
||
%span.date Demande d’avis envoyée le 12/01/2012
|
||
%p Bonjour, merci de me donner votre avis sur ce dossier.
|
||
|
||
.answer.flex.align-start
|
||
.icon.bubble.avis-icon
|
||
.width-100
|
||
%h2.instructeur
|
||
= CONTACT_EMAIL
|
||
%span.date Réponse donnée le 13/01/2012
|
||
%p Je donne un avis favorable
|
||
|
||
.container
|
||
%h2.empty-text Aucun dossier
|
||
%p.empty-text-details Vous n’avez commencé aucune démarche pour l’instant.
|
||
|
||
.container
|
||
%h1 Dsfr::CalloutComponent
|
||
%p= link_to "Documentation DSFR Mis en avant (callout)", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant", **external_link_attributes
|
||
|
||
= render Dsfr::CalloutComponent.new(title: "Information minimale") do |c|
|
||
- c.with_body do
|
||
%p Ceci est le minimum pour afficher un callout.
|
||
|
||
= render Dsfr::CalloutComponent.new(title: "Information importante ou avertissement", theme: :warning) do |c|
|
||
- c.with_body do
|
||
Le contenu de cette description est libre.
|
||
- c.with_bottom do
|
||
%button.fr-btn Call to action
|
||
|
||
= render Dsfr::CalloutComponent.new(title: "Titre d'une information positive", theme: :success, icon: "fr-icon-message-2-fill") do |c|
|
||
- c.with_body do
|
||
%p
|
||
N'importe quelle icône
|
||
= link_to("du jeu d'icônes", "https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones", **external_link_attributes)
|
||
peut être utilisée.
|
||
|
||
%h1 Dsfr::CardVerticalComponent
|
||
%p= link_to "Documentation DSFR Carte", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte", **external_link_attributes
|
||
|
||
.fr-grid-row.fr-grid-row--gutters.fr-py-5w
|
||
.fr-col-md-6.fr-col-12
|
||
= render Dsfr::CardVerticalComponent.new(title: "Optional title", desc: "Optional description")
|
||
|
||
.fr-col-md-6.fr-col-12
|
||
= render Dsfr::CardVerticalComponent.new(title: "With footer buttons") do |c|
|
||
- c.with_footer_button do
|
||
= link_to "Button 1", "#", class: "fr-btn", **external_link_attributes
|
||
- c.with_footer_button do
|
||
= button_tag "Button 2", class: "fr-btn fr-btn--secondary"
|
||
|
||
%h1 Dsfr::NoticeComponent
|
||
%p= link_to "Documentation DSFR Bandeau d'information", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante", **external_link_attributes
|
||
.my-3
|
||
= render Dsfr::NoticeComponent.new(closable: true) do |c|
|
||
- c.with_title do
|
||
Titre de cette notice
|
||
= link_to "avec un lien optionnel.", "#"
|
||
Des marges verticales ont ici été rajoutées.
|
||
|
||
|
||
|
||
.container
|
||
%h1.fr-mt-4w Attachment::EditComponent
|
||
%span.fr-hint-text Note: direct upload, suppression ne marchent pas comme attendu ici.
|
||
|
||
- champ = @dossier.champs_public.first
|
||
- tdc = @dossier.champs_public.find { _1.type_champ == TypeDeChamp.type_champs.fetch(:piece_justificative) }.type_de_champ
|
||
- avis = Avis.new
|
||
|
||
- if attachment = ActiveStorage::Attachment.last
|
||
- attachment.update(created_at: 1.second.ago)
|
||
%h3 New attachment
|
||
= render Attachment::EditComponent.new(champ:, attached_file: champ.piece_justificative_file, attachment: nil)
|
||
|
||
%h3.fr-mt-4w Existing attachment
|
||
= render Attachment::EditComponent.new(champ:, attached_file: champ.piece_justificative_file, attachment:)
|
||
|
||
%h3.fr-mt-4w Existing attachment, user can not destroy
|
||
= render Attachment::EditComponent.new(champ:, attached_file: champ.piece_justificative_file, attachment:, user_can_destroy: false)
|
||
|
||
%h3.fr-mt-4w Existing attachment, antivirus in progress
|
||
- attachment.blob.metadata[:virus_scan_result] = ActiveStorage::VirusScanner::PENDING
|
||
- attachment.created_at = Time.zone.now
|
||
= render Attachment::EditComponent.new(champ:, attached_file: Champ.new.piece_justificative_file, attachment:)
|
||
|
||
%h3.fr-mt-4w Existing attachment, antivirus in progress since long time
|
||
- attachment.blob.metadata[:virus_scan_result] = ActiveStorage::VirusScanner::PENDING
|
||
- attachment.created_at = 2.minutes.ago
|
||
= render Attachment::EditComponent.new(champ:, attached_file: Champ.new.piece_justificative_file, attachment:)
|
||
|
||
%h3.fr-mt-4w Existing attachment, error
|
||
- attachment.blob.metadata[:virus_scan_result] = ActiveStorage::VirusScanner::INFECTED
|
||
= render Attachment::EditComponent.new(champ:, attached_file: Champ.new.piece_justificative_file, attachment:)
|
||
|
||
|
||
%h3.fr-mt-4w New attachment on TypeDeChamp
|
||
= render Attachment::EditComponent.new(auto_attach_url: "/some-auto-attach-path", attached_file: tdc.piece_justificative_template, attachment: nil)
|
||
|
||
%h3.fr-mt-4w Existing attachment on TypeDeChamp, view as link
|
||
= render Attachment::EditComponent.new(auto_attach_url: "/some-auto-attach-path", attached_file: tdc.piece_justificative_template, attachment: attachment.reload)
|
||
|
||
%h3.fr-mt-4w Existing attachment on TypeDeChamp view as download
|
||
= render Attachment::EditComponent.new(auto_attach_url: "/some-auto-attach-path", attached_file: tdc.piece_justificative_template, attachment: attachment.reload, view_as: :download)
|
||
|
||
%h3.fr-mt-4w New attachment on generic object
|
||
= render Attachment::EditComponent.new(attached_file: avis.introduction_file)
|
||
|
||
%h3.fr-mt-4w Existing attachment on generic object, view as download
|
||
= render Attachment::EditComponent.new(attached_file: avis.introduction_file, attachment: attachment.reload, view_as: :download)
|
||
|