improved boussole form ui

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

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: ''
+      parent_name: group_tabs
-      weight: 2
+      weight: 14
-      format_type: details_sidebar
+      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

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{

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);

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')){

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()
+ */
+#}
+
+<div class="layout-node-form clearfix">
+  <div class="layout-region layout-region-node-header">
+    {{ form.title }}
+  </div>
+  <div class="layout-region  layout-region-node-center clearfix">
+    <div class="layout-region layout-region-node-main">
+      {# {{ form|without('title','advanced', 'footer', 'actions', 'group_internal') }} #}
+      {{ form|without('title','footer') }}
+    </div>
+    {# <div class="layout-region layout-region-node-secondary">
+      {{ form.group_internal }}
+      {{ form.advanced }}
+      {{ form.actions }}
+    </div> #}
+  </div> 
+  <div class="layout-region layout-region-node-footer">
+    <div class="layout-region-node-footer__content">
+      {{ form.footer }}
+    </div>
+  </div>
+</div>