From 3cf54405372095937067dfe6d84c996291a358d7 Mon Sep 17 00:00:00 2001 From: bach Date: Thu, 2 Feb 2023 16:54:12 +0100 Subject: [PATCH] improved boussole form ui --- .../block.block.ouatminimal_breadcrumbs.yml | 2 +- ...form_display.node.concernement.default.yml | 17 ++++---- .../ouatminimal_theme/css/ouatminimal.css | 24 +++++++++++- .../custom/ouatminimal_theme/js/boussole.js | 5 ++- .../ouatminimal_theme/ouatminimal.theme | 10 +++++ ...ode-edit-form--node-concernement.html.twig | 39 +++++++++++++++++++ 6 files changed, 86 insertions(+), 11 deletions(-) create mode 100644 src/web/themes/custom/ouatminimal_theme/templates/form/node-edit-form--node-concernement.html.twig diff --git a/src/config/sync/block.block.ouatminimal_breadcrumbs.yml b/src/config/sync/block.block.ouatminimal_breadcrumbs.yml index 848df9d..f4c3343 100644 --- a/src/config/sync/block.block.ouatminimal_breadcrumbs.yml +++ b/src/config/sync/block.block.ouatminimal_breadcrumbs.yml @@ -1,6 +1,6 @@ uuid: 4910c4f0-ec95-4043-88aa-350a04b1db87 langcode: fr -status: true +status: false dependencies: module: - system diff --git a/src/config/sync/core.entity_form_display.node.concernement.default.yml b/src/config/sync/core.entity_form_display.node.concernement.default.yml index 1f52c86..4255e65 100644 --- a/src/config/sync/core.entity_form_display.node.concernement.default.yml +++ b/src/config/sync/core.entity_form_display.node.concernement.default.yml @@ -18,6 +18,7 @@ third_party_settings: children: - group_contenu - group_entites + - group_details label: Tabs region: content parent_name: '' @@ -27,10 +28,11 @@ third_party_settings: classes: '' show_empty_fields: true id: '' - direction: horizontal + direction: vertical width_breakpoint: 640 group_contenu: children: + - title - body - field_recit label: Contenu @@ -68,16 +70,17 @@ third_party_settings: - status label: Details region: content - parent_name: '' - weight: 2 - format_type: details_sidebar + parent_name: group_tabs + weight: 14 + format_type: tab format_settings: classes: '' show_empty_fields: true id: '' - open: true + formatter: closed description: '' required_fields: true + open: true weight: -100 id: node.concernement.default targetEntityType: node @@ -86,7 +89,7 @@ mode: default content: body: type: text_textarea_with_summary - weight: 10 + weight: 1 region: content settings: rows: 9 @@ -120,7 +123,7 @@ content: third_party_settings: { } field_recit: type: file_generic - weight: 11 + weight: 2 region: content settings: progress_indicator: throbber diff --git a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css index d1db20d..ef84c2d 100644 --- a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css +++ b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css @@ -1,3 +1,24 @@ +/* trying to get more vertical space for the boussole */ +.adminimal .content-header { + background-color: #434343; + padding: 0.5rem 0 0; +} +.adminimal .page-title, +.adminimal .heading-a { + font-size: 1.5em; +} +.toolbar-tray a { + padding: 0.5em 1.3333em; +} + +.is-horizontal .tabs.primary a { + padding: 0 2em 0 2em; + background-image: none; +} + +/* END trying to get more vertical space for the boussole */ + + .adminimal input.form-autocomplete, .adminimal input.form-text, .adminimal input.form-tel, .adminimal input.form-email, .adminimal input.form-url, .adminimal input.form-search, .adminimal input.form-number, .adminimal input.form-color, .adminimal input.form-file, .adminimal input.form-date, .adminimal input.form-time, .adminimal textarea.form-textarea{ background-color: #fff; border-radius: 3px; @@ -218,7 +239,8 @@ background-repeat: no-repeat; background-position: center; aspect-ratio: 1 / 1; - width:100%; + /* width:100%; */ + max-height: calc(100vh - 150px); position: relative; } #boussole-layout .boussole-wrapper .boussole .entity{ diff --git a/src/web/themes/custom/ouatminimal_theme/js/boussole.js b/src/web/themes/custom/ouatminimal_theme/js/boussole.js index 2615ed3..3e684f3 100644 --- a/src/web/themes/custom/ouatminimal_theme/js/boussole.js +++ b/src/web/themes/custom/ouatminimal_theme/js/boussole.js @@ -216,7 +216,7 @@ // from range 0 -> rayon_de_la_boussole to range 0 -> 100 let r_max = this.sceneSize.w/2; let r_slope = (100 - 0) / (r_max - 0); - this.values.p.value = this.values.p.$dom.value = parseFloat(0 + r_slope * (r - 0)).toFixed(2); + this.values.p.value = this.values.p.$dom.value = 100 - parseFloat(0 + r_slope * (r - 0)).toFixed(2); // this.values.p.$dom.value = this.values.p.value; console.log('x:', x, 'r:', r, 'a:', a, "y:", y); @@ -251,7 +251,8 @@ // actualy we don't use diagonale, we stay on the circle let r_max = this.sceneSize.w/2; let r_slope = (r_max - 0) / (100 - 0) - let r = parseInt(0 + r_slope * (this.values.p.value - 0)); + // we inverse p as the more p you have the closest you are from the center + let r = parseInt(0 + r_slope * ((100 - this.values.p.value) - 0)); let x = r * Math.cos(a); let y = r * Math.sin(a); diff --git a/src/web/themes/custom/ouatminimal_theme/ouatminimal.theme b/src/web/themes/custom/ouatminimal_theme/ouatminimal.theme index d745941..9e53f43 100644 --- a/src/web/themes/custom/ouatminimal_theme/ouatminimal.theme +++ b/src/web/themes/custom/ouatminimal_theme/ouatminimal.theme @@ -64,6 +64,16 @@ function ouatminimal_form_node_form_alter(&$form, FormStateInterface $form_state $form['revision_information']['#group'] = 'meta'; } +// https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme_suggestions_HOOK_alter/10 +function ouatminimal_theme_suggestions_node_edit_form_alter(array &$suggestions, array $variables) { + if ($node = \Drupal::routeMatch()->getParameter('node')){ + $nid = $node->id(); + $type = $node->getType(); + $suggestions[] = 'node_edit_form__node_' . $type; + + } +} + // https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_theme_suggestions_HOOK_alter/10 function ouatminimal_theme_suggestions_field_multiple_value_form_alter(array &$suggestions, array $variables) { if ($node = \Drupal::routeMatch()->getParameter('node')){ diff --git a/src/web/themes/custom/ouatminimal_theme/templates/form/node-edit-form--node-concernement.html.twig b/src/web/themes/custom/ouatminimal_theme/templates/form/node-edit-form--node-concernement.html.twig new file mode 100644 index 0000000..07ef33c --- /dev/null +++ b/src/web/themes/custom/ouatminimal_theme/templates/form/node-edit-form--node-concernement.html.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Theme override for a node edit form. + * + * Two column template for the node add/edit form. + * + * This template will be used when a node edit form specifies 'node_edit_form' + * as its #theme callback. Otherwise, by default, node add/edit forms will be + * themed by form.html.twig. + * + * Available variables: + * - form: The node add/edit form. + * + * @see seven_form_node_form_alter() + */ +#} + +
+
+ {{ form.title }} +
+
+
+ {# {{ form|without('title','advanced', 'footer', 'actions', 'group_internal') }} #} + {{ form|without('title','footer') }} +
+ {#
+ {{ form.group_internal }} + {{ form.advanced }} + {{ form.actions }} +
#} +
+
+
+ {{ form.footer }} +
+
+