bachir
/
ouatterrir-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

improved boussole form ui

This commit is contained in:
Bachir Soussi Chiadmi 2023-02-02 16:54:12 +01:00
parent 7e4e6dca11
commit 3cf5440537
6 changed files with 86 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config/sync/block.block.ouatminimal_breadcrumbs.yml
View File

@ -1,6 +1,6 @@
uuid: 4910c4f0-ec95-4043-88aa-350a04b1db87
langcode: fr
status: true
status: false
dependencies:
module:
- system

17
src/config/sync/core.entity_form_display.node.concernement.default.yml
View File

@ -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

24
src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css
View File

@ -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{

5
src/web/themes/custom/ouatminimal_theme/js/boussole.js
View File

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

10
src/web/themes/custom/ouatminimal_theme/ouatminimal.theme
View File

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

39
src/web/themes/custom/ouatminimal_theme/templates/form/node-edit-form--node-concernement.html.twig Normal file
View File

@ -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>