improve dark mode for admin user
This commit is contained in:
Lisa Durand
parent
373379d132
commit
31cb62e27d
23 changed files with 65 additions and 102 deletions
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 fa-lg" width="32" height="32"><path d="M19.04 20.763h-1.656v-9.526h1.656c.768 0 2.494.242.61-1.6l-3.094-3.362a.815.815 0 0 0-1.22 0l-3.093 3.361c-1.643 1.831-.159 1.6.61 1.6h1.655v9.527h-1.655c-.769 0-2.235-.244-.61 1.6l3.093 3.362a.815.815 0 0 0 1.22 0l3.094-3.361c1.884-1.795.158-1.6-.61-1.6z" fill="currentColor"/><rect width="9" height="2" y="11" ry=".402"/><rect ry=".402" y="19" height="2" width="9"/><rect width="9" height="2" y="15" ry=".402"/><rect ry=".402" y="11" x="23" height="2" width="9"/><rect width="9" height="2" x="23" y="19" ry=".402"/><rect ry=".402" y="15" x="23" height="2" width="9"/></svg>
|
||||
|
Before Width: | Height: | Size: 761 B |
|
|
@ -386,7 +386,6 @@
|
|||
|
||||
[data-reach-combobox-token] button {
|
||||
border: solid 1px $border-grey;
|
||||
color: $black;
|
||||
border-radius: 4px;
|
||||
padding: $default-spacer;
|
||||
margin-right: $default-spacer;
|
||||
|
|
@ -449,22 +448,6 @@
|
|||
margin-bottom: $default-padding;
|
||||
}
|
||||
|
||||
.explication-libelle {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-bottom: $default-padding;
|
||||
}
|
||||
|
||||
.explication {
|
||||
margin-bottom: $default-fields-spacer;
|
||||
padding: $default-spacer;
|
||||
background-color: $light-grey;
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: $default-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.send-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -662,6 +645,11 @@ textarea::placeholder {
|
|||
}
|
||||
}
|
||||
|
||||
[data-fr-theme="dark"] .fixed-footer {
|
||||
border-top: 2px solid var(--background-action-low-blue-france-hover);
|
||||
background-color: var(--background-action-low-blue-france);
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
border-top: 2px solid $blue-france-500;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -170,10 +170,6 @@
|
|||
background-image: image-url("icons/trash.svg");
|
||||
}
|
||||
|
||||
&.move-handle {
|
||||
background-image: image-url("icons/move-handle.svg");
|
||||
}
|
||||
|
||||
&.mandatory {
|
||||
width: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
.form [data-reach-combobox-token] button {
|
||||
border: solid 1px #CCCCCC;
|
||||
background-color: transparent;
|
||||
color: #333333;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin-right: 8px;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
|
||||
[data-reach-combobox-token] button {
|
||||
border: solid 1px $border-grey;
|
||||
color: $black;
|
||||
margin-top: 0.5 * $default-padding;
|
||||
margin-bottom: 0.5 * $default-padding;
|
||||
margin-right: 0.5 * $default-padding;
|
||||
|
|
|
|||
|
|
@ -25,15 +25,9 @@
|
|||
box-shadow: 0px 2px 4px -4px;
|
||||
}
|
||||
|
||||
.handle.icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 32px;
|
||||
margin-left: 7px;
|
||||
margin-right: 16px;
|
||||
.handle {
|
||||
align-self: center;
|
||||
cursor: grab;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
.procedure-form__column--form {
|
||||
flex: 10;
|
||||
padding: 0 $default-padding;
|
||||
background-color: $light-grey;
|
||||
|
||||
input[type=file] {
|
||||
background-color: transparent; // Remove white bg set by DSFR
|
||||
|
|
@ -67,6 +66,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
[data-fr-theme="dark"] .procedure-form__actions {
|
||||
background: var(--background-action-low-blue-france);
|
||||
border-top: 1px solid var(--background-action-low-blue-france-hover);
|
||||
}
|
||||
|
||||
.procedure-form__actions {
|
||||
display: flex;
|
||||
padding: $default-spacer $default-padding;
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
@import "constants";
|
||||
|
||||
#sources-particulier-form {
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2 * $default-padding;
|
||||
}
|
||||
|
||||
.explication {
|
||||
padding: $default-padding;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
list-style-position: inside;
|
||||
padding-left: $default-padding;
|
||||
margin-bottom: $default-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.form input[type="checkbox"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
%fieldset
|
||||
%legend.header-subsection{ legend_params }= @champ.libelle
|
||||
%legend.fr-h5{ legend_params }= @champ.libelle
|
||||
- if @champ.description.present?
|
||||
.notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
= f.button type: :submit, class: "fr-btn fr-btn--secondary" do
|
||||
= t('.add')
|
||||
|
||||
= form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form form-ds-fr-white mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f|
|
||||
= form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f|
|
||||
= f.label :write_access do
|
||||
= t('.token_procedures')
|
||||
%label.toggle-switch.no-margin
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
%li.type-de-champ.flex.column.justify-start{ html_options }
|
||||
.type-de-champ-container
|
||||
.flex.justify-between.section.head.hr
|
||||
.handle.small.icon-only.icon.move-handle{ title: "Déplacer le champ vers le haut ou vers le bas" }
|
||||
.handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" }
|
||||
|
||||
- if coordinate.used_by_routing_rules?
|
||||
.flex.align-center
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@
|
|||
.description
|
||||
= tag[:description]
|
||||
|
||||
%h3.header-subsection Logo de l'attestation
|
||||
%h3.fr-h5 Logo de l'attestation
|
||||
%p.fr-text--sm.fr-text-mention--grey.fr-mb-0
|
||||
Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
|
||||
= render Attachment::EditComponent.new(attached_file: @attestation_template.logo, direct_upload: false)
|
||||
|
||||
|
||||
%h3.header-subsection.fr-mt-5w Tampon de l'attestation
|
||||
%h3.fr-h5.fr-mt-5w Tampon de l'attestation
|
||||
%p.fr-text--sm.fr-text-mention--grey.fr-mb-0
|
||||
Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
|
||||
= render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
= render NestedForms::FormOwnerComponent.new
|
||||
= form_for @attestation_template,
|
||||
url: admin_procedure_attestation_template_path(@procedure),
|
||||
html: { multipart: true, class: 'form form-ds-fr-white procedure-form__column--form' } do |f|
|
||||
html: { multipart: true, class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f|
|
||||
|
||||
%h1.page-title
|
||||
Délivrance d’attestation
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
= f.label :message_on_submit_by_usager do
|
||||
Message affiché après l'envoi du dossier
|
||||
= f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais"
|
||||
.fr-input-group
|
||||
= f.label :message_on_submit_by_usager do
|
||||
Message affiché après l'envoi du dossier
|
||||
= f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais", class: 'fr-input'
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
.procedure-form__columns.container
|
||||
= form_for @dossier_submitted_message,
|
||||
url: url_for({ controller: 'administrateurs/dossier_submitted_messages', action: :update, id: @procedure.id }),
|
||||
html: { class: 'form procedure-form__column--form' } do |f|
|
||||
html: { class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f|
|
||||
|
||||
%h1.page-title
|
||||
Fin du dépot
|
||||
|
|
@ -18,10 +18,9 @@
|
|||
|
||||
= render partial: 'administrateurs/dossier_submitted_messages/informations', locals: { f: f }
|
||||
|
||||
|
||||
.procedure-form__actions
|
||||
.actions-left
|
||||
= f.submit 'Enregistrer', class: 'button primary send'
|
||||
= f.submit 'Enregistrer', class: 'fr-btn send'
|
||||
|
||||
.procedure-form__column--preview
|
||||
%h3
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@
|
|||
.container
|
||||
%h1
|
||||
= form_with model: @procedure, url: admin_procedure_api_particulier_jeton_path, local: true, html: { class: 'form' } do |f|
|
||||
%p.explication
|
||||
= t('.api_particulier_description_html', app_name: APPLICATION_NAME)
|
||||
= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
|
||||
- c.body do
|
||||
%p
|
||||
= t('.api_particulier_description_html', app_name: APPLICATION_NAME)
|
||||
|
||||
= f.label :api_particulier_token
|
||||
.desc.mb-2
|
||||
%p= t('.token_description')
|
||||
= f.password_field :api_particulier_token, class: 'form-control', required: :required
|
||||
.text-right
|
||||
= f.button t('views.shared.actions.save'), class: 'button primary send'
|
||||
= f.button t('views.shared.actions.save'), class: 'fr-btn send'
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
= form_for @mail_template,
|
||||
url: admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)),
|
||||
method: :put,
|
||||
html: { class: 'form form-ds-fr-white procedure-form__column--form' } do |f|
|
||||
html: { class: 'form form-ds-fr-white procedure-form__column--form fr-background-alt--blue-france' } do |f|
|
||||
|
||||
%h1.page-title= @mail_template.class.const_get(:DISPLAYED_NAME)
|
||||
= render partial: 'form', locals: { f: f, tags: @mail_template.tags }
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
%p.explication
|
||||
Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
|
||||
%a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
|
||||
», créer un compte, et référencer la démarche que vous venez de publier.
|
||||
%br
|
||||
%br
|
||||
Vous pouvez
|
||||
%a{ :href => DOC_INTEGRATION_MONAVIS_URL } consulter notre tutoriel complet
|
||||
pour intégrer le bouton « MonAvis » sur #{APPLICATION_NAME}.
|
||||
%br
|
||||
%br
|
||||
Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
|
||||
= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
|
||||
- c.body do
|
||||
%p
|
||||
Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
|
||||
%a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
|
||||
», créer un compte, et référencer la démarche que vous venez de publier.
|
||||
%br
|
||||
%br
|
||||
Vous pouvez
|
||||
%a{ :href => DOC_INTEGRATION_MONAVIS_URL } consulter notre tutoriel complet
|
||||
pour intégrer le bouton « MonAvis » sur #{APPLICATION_NAME}.
|
||||
%br
|
||||
%br
|
||||
Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous :
|
||||
|
||||
.fr-input-group
|
||||
= f.label :monavis_embed, "Mon avis", class: "fr-label"
|
||||
|
|
|
|||
|
|
@ -10,13 +10,15 @@
|
|||
.container
|
||||
%h1
|
||||
= form_with model: @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_jeton }) do |f|
|
||||
%p.explication
|
||||
Démarches Simplifiées utilise
|
||||
= link_to 'API Entreprise', "https://entreprise.api.gouv.fr/"
|
||||
qui permet de récupérer les informations administratives des entreprises et des associations.
|
||||
Si votre démarche nécessite des autorisations spécifiques que Démarches Simplifiées n’a pas par défaut, merci de renseigner ici le jeton
|
||||
= link_to 'API Entreprise', "https://api.gouv.fr/les-api/api-entreprise/demande-acces"
|
||||
propre à votre démarche.
|
||||
= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
|
||||
- c.body do
|
||||
%p
|
||||
Démarches Simplifiées utilise
|
||||
= link_to 'API Entreprise', "https://entreprise.api.gouv.fr/"
|
||||
qui permet de récupérer les informations administratives des entreprises et des associations.
|
||||
Si votre démarche nécessite des autorisations spécifiques que Démarches Simplifiées n’a pas par défaut, merci de renseigner ici le jeton
|
||||
= link_to 'API Entreprise', "https://api.gouv.fr/les-api/api-entreprise/demande-acces"
|
||||
propre à votre démarche.
|
||||
|
||||
.fr-input-group
|
||||
= f.label :api_entreprise_token, "Jeton", class: 'fr-label'
|
||||
|
|
|
|||
|
|
@ -9,13 +9,16 @@
|
|||
|
||||
.container#sources-particulier-form.mb-2
|
||||
= form_with model: @procedure, url: admin_procedure_api_particulier_sources_path, local: true, html: { class: 'form' } do |f|
|
||||
.explication= t('.explication_html')
|
||||
= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
|
||||
- c.body do
|
||||
%p
|
||||
= t('.explication_html')
|
||||
|
||||
- @available_sources.each do |provider_key, scopes|
|
||||
%h2.header-section= t("api_particulier.providers.#{provider_key}.libelle")
|
||||
|
||||
- scopes.each do |scope_key, sources|
|
||||
%h3.explication-libelle= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle")
|
||||
%h3= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle")
|
||||
%ul.procedure-admin-api-particulier-sources{ id: "#{provider_key}-#{scope_key}" }
|
||||
- sources.each do |source_key, enabled_hash|
|
||||
- enabled = (@procedure.api_particulier_sources.dig(provider_key, scope_key)&.include?(source_key)).present?
|
||||
|
|
@ -25,4 +28,4 @@
|
|||
#{t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.#{source_key}")}
|
||||
|
||||
.text-right
|
||||
= f.button t('views.shared.actions.save'), class: 'button primary send'
|
||||
= f.button t('views.shared.actions.save'), class: 'fr-btn send'
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
= t('.title')
|
||||
|
||||
= form_for @assign_to, url: update_email_notifications_instructeur_procedure_path(@procedure), html: { class: 'form' } do |form|
|
||||
.explication
|
||||
= t('.subtitle')
|
||||
= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
|
||||
- c.body do
|
||||
%p
|
||||
= t('.subtitle')
|
||||
|
||||
= form.label :email_notification, t('.for_each_file_submitted.title')
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ as well as a link to its edit page.
|
|||
<% end %>
|
||||
<% end %>
|
||||
<% if attribute.name == 'tags' %>
|
||||
<%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form mt-1' } do %>
|
||||
<%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form fr-background-alt--blue-france mt-1' } do %>
|
||||
<%= hidden_field_tag 'procedure[tags]', nil %>
|
||||
<%= react_component("ComboMultiple",
|
||||
options: Procedure.tags,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
%span.icon.retry
|
||||
%span.icon.download
|
||||
%span.icon.download-white
|
||||
%span.icon.move-handle
|
||||
%span.icon.frown
|
||||
%span.icon.meh
|
||||
%span.icon.smile
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
%label Mot de passe
|
||||
%input{ type: "password", value: "12345678" }
|
||||
|
||||
%h3.header-subsection Bouton radio verticaux
|
||||
%h3.fr-h5 Bouton radio verticaux
|
||||
.radios.vertical
|
||||
= f.label :archived, value: true do
|
||||
= f.radio_button :archived, true
|
||||
|
|
@ -61,7 +60,7 @@
|
|||
Option B
|
||||
%p.notice Une autre option, pas mal non plus.
|
||||
|
||||
%h3.header-subsection Interrupteur
|
||||
%h3.fr-h5 Interrupteur
|
||||
%label.toggle-switch
|
||||
= f.check_box :archived, class: 'toggle-switch-checkbox'
|
||||
%span.toggle-switch-control.round
|
||||
|
|
|
|||
Loading…
Reference in a new issue