DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

style(editor): replace legacy arrows, move them to toolbar

Browse source
This commit is contained in:
Colin Darie 2023-11-28 11:01:02 +01:00
parent 2a31fc68d7
commit f96d248cc5
No known key found for this signature in database
GPG key ID: 8C76CADD40253590
5 changed files with 17 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/images/icons/arrow-down.svg
View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 296 B

3
app/assets/images/icons/arrow-up.svg
View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 294 B

8
app/assets/stylesheets/icons.scss
View file

@ -75,14 +75,6 @@
background-image: image-url("icons/lock.svg");
}
&.arrow-up {
background-image: image-url("icons/arrow-up.svg");
}
&.arrow-down {
background-image: image-url("icons/arrow-down.svg");
}
&.add {
background-image: image-url("icons/add.svg");
margin-left: -5px;

44
app/assets/stylesheets/procedure_champs_editor.scss
View file

@ -26,11 +26,10 @@
}
.handle {
align-self: center;
cursor: grab;
&:hover {
opacity: 0.4;
background-color: var(--hover-tint);
}
}
@ -40,27 +39,6 @@
justify-content: flex-end;
}
.move-up,
.move-down {
@extend %outline;
display: inline-block;
width: 30px;
padding-bottom: 5px;
border-radius: 5px;
border: 1px solid $border-grey;
background-color: #FFFFFF;
color: $black;
text-align: center;
-webkit-appearance: none;
&:hover:not(:disabled) {
cursor: pointer;
background: $light-grey;
text-decoration: none;
}
}
&.first .move-up {
display: none;
}
@ -82,24 +60,22 @@
}
.flex {
&.section {
padding: $default-spacer $default-spacer 0;
margin-bottom: 8px;
&.flex-gap {
column-gap: $default-spacer * 2;
}
&.hr {
border-bottom: 1px solid $border-grey;
&.section {
margin-bottom: 8px;
padding: $default-spacer / 2 $default-spacer * 2;
}
&.head {
border-bottom: 1px solid var(--border-default-grey);
padding-bottom: 10px;
}
&.head {
border-bottom: 1px solid var(--border-default-grey);
padding: $default-spacer / 2 $default-spacer; // due to no-outline button horizontal padding, don't add twice the padding so it's aligned with section
}
}
.cell {
margin-right: $default-padding;
label {
margin-bottom: 8px;
text-transform: uppercase;

19
app/components/types_de_champ_editor/champ_component/champ_component.html.haml
View file

@ -1,7 +1,9 @@
%li.type-de-champ.flex.column.justify-start{ html_options }
.type-de-champ-container
.flex.justify-between.section.head.hr
.handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" }
.flex.justify-between.section.head
.fr-btn.fr-btn--tertiary-no-outline.handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" }
%button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-up-line.move-up{ move_button_options(:up) }
%button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-down-line.move-down{ move_button_options(:down) }
- if coordinate.used_by_routing_rules?
.flex.align-center
@ -10,24 +12,17 @@
= link_to('le routage', admin_procedure_groupe_instructeurs_path(revision.procedure_id, anchor: 'routing-rules'))
- else
.flex.justify-start.delete
= button_to type_de_champ_path, class: 'fr-btn fr-btn--sm fr-btn--secondary fr-icon-delete-line', title: "Supprimer le champ", method: :delete, form: { data: { turbo_confirm: 'Êtes vous sûr de vouloir supprimer ce champ ?' } } do
= button_to type_de_champ_path, class: 'fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line', title: "Supprimer le champ", method: :delete, form: { data: { turbo_confirm: 'Êtes vous sûr de vouloir supprimer ce champ ?' } } do
%span.sr-only Supprimer
- if @errors.present?
.types-de-champ-errors
= @errors
.flex.justify-start.section.fr-ml-1w.fr-mb-2w
.flex.justify-start.section
= form_for(type_de_champ, form_options) do |form|
.flex.justify-start
.flex.justify-start.flex-gap
.flex.justify-start.width-33
.flex.justify-start.column
%button.move-up.cell.mb-1{ move_button_options(:up) }
.icon.arrow-up.small
%span.sr-only Déplacer le champ vers le haut
%button.move-down.cell{ move_button_options(:down) }
.icon.arrow-down.small
%span.sr-only Déplacer le champ vers le bas
.cell.flex.justify-start.column.flex-grow
= form.label :type_champ, "Type de champ", for: dom_id(type_de_champ, :type_champ)
= form.select :type_champ, grouped_options_for_select(types_of_type_de_champ, type_de_champ.type_champ), {}, class: 'fr-select small-margin small inline width-100', id: dom_id(type_de_champ, :type_champ), disabled: coordinate.used_by_routing_rules?