personnaliser le bouton de fermeture d'une sous page (subpage) sous knxweb 2

[mil3d]

Bonjour,

Je cherche à utiliser des sous pages (subpage) avec ouverture en "dialog" dans knxweb2. Mon soucis est double :

- le bouton pour fermer la sous page est trop petit pour une interface tactile, je souhaite l'agrandir. J'ai essayé les différents thèmes de knxweb, mais la taille est toujours la même. J'ai aussi essayé de personnaliser un thème via jqueryui.com en augmentant la taille générale du texte mais ça fait bugger l'interface de knxweb.
Si le bouton ne peut pas être agrandi, comment en créer un autre dans la sous-page qui fermerait la sous-page? J'ai essayé de créer un bouton avec action/exécuter un script, mais je ne sais pas quel langage est utilisé (lua?).

- le bouton de fermeture standard de la sous page ne fonctionne pas avec mon écran tactile 22" Acer DA220HQL (sous Android) alors qu'il fonctionne avec une souris branchée sur l'écran.. et les autres boutons de KNXweb fonctionnent bien avec l'écran tactile.. à quoi ça pourrait être dû?

Quelqu'un pourrait m'aider?
Merci

[mil3d]

Bon, je me répond :
- pour personnaliser plus précisément l'interface de knxWeb2, ouvrir et éditer le fichier /var/www/knxweb2/lib/jquery/css/mon_theme_knxweb2_choisi_dans_la_page_admin(exmoothness)/jquery-ui.css

Dans mon cas je veux agrandir le bouton de fermeture de la sous page. J'ai donc trouvé la ligne :
.ui-dialog .ui-dialog-titlebar-close {position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px;}
et je l'ai transformé en :
.ui-dialog .ui-dialog-titlebar-close {position: absolute; right: .3em; top: 25%; width: 38px; margin: -10px 0 0 0; padding: 1px; height: 38px;}

ça m'a permis d'augmenter la hauteur du bouton mais pas de la barre de titre. J'ai alors changé la ligne :
.ui-dialog .ui-dialog-titlebar {padding: .4em 1em; position: relative;}
en :
.ui-dialog .ui-dialog-titlebar {padding: .4em 1em; position: relative; height: 30px; }

Il me reste maintenant à modifier l'image du bouton qui est trop petite et alignée en haut à gauche. Je pense pour ça devoir éditer les différents images contenant toutes les icônes du thème situées dans : /var/www/knxweb2/lib/jquery/css/mon_theme_knxweb2_choisi_dans_la_page_admin(exmoothness)/images/ afin d'y ajouter ma propre image de fermeture et modifier la ligne .ui-icon-close { background-position: -80px -128px; }
pour lui spécifier les nouvelles coordonnées x et y de mon image personnelle.


Pour le problème de bouton de fermeture qui ne fonctionne pas sur mon écran tactile, ça semble être un problème de Chrome version 39. Avec le navigateur d'Android je n'ai pas le problème. Par contre je ne sais pas si je pourrais avoir la màj 40 de chrome qui n'a pas l'air d'avoir ce soucis là sur mon autre tablette (mon écran est sur Android 4.0 et la tablette est sur Android 4.2)


j'ai modifié le titre du post pour notre ami google.
Ne pas oublier de sauvegarder mon thème, ne pas oublier de sauvegarder mon thème, ne pas oublier de...

[Faelwee]

Et bien merci beaucoup Mil3d d'avoir bien répondu au problème de ... Mil3d

[mil3d]

Je pensais que chercher 2h suffirait avant d'abandonner... mais j'ai eu besoin de 3h

[tityann]

bonjour
he bien merci
j'avais aussi trouvé que le bouton était trop petit
je vais appliquer ta modif

[Energy01]

Salut,

vous avez de trop gros doigts !!!

de modifier le css c'est une solution mais qui impact toutes les "dialog"
si vous gardez cette solution le mieux pour gérer la modif au mieux c'est d'ajouter à la fin des fichier /css/style.css et /css/setup.css les lignes suivantes :

.ui-dialog .ui-dialog-titlebar-close {top: 25%; width: 38px; height: 38px;}
.ui-dialog .ui-dialog-titlebar {height: 30px; }

ça aura le même effet
sinon une autre solution plus simple ajouter uniquement la ligne suivante dans ces 2 fichiers :
.ui-dialog .ui-dialog-titlebar-close {zoom: 1.5;}

cela va aussi grossir la croix

il est possible d'ajouter un "vrai bouton" "close" mais engendre plus de modif et notament du javascript le gérer en paramètre en plus pour l'activé ou pas et suis pas sur que cela soit une solution au top

pas simple pour une solution a appliquer pour tous ...

@+
Anthony.

[mil3d]

Merci pour ces précisions ! Le {zoom: 1.5;} est bien plus efficace en effet (ça pixelise un peu, mais c'est plus facile...)

Pour moi plus besoin du bouton close si j'ai pu agrandir l'autre. Merci.
Je comprend la difficulté de faire des solutions pour tous.

Le plus gros problème quand on commence avec knxweb2 c'est le manque de doc.. on est obligé de chercher régulièrement sur google pour essayer de comprendre le fonctionnement. Si j'avais un peu de temps, j'essaierai de le faire (on est tous dans le même cas).. quand j'aurais compris comment ça marche

J'en profite pour dire merci pour ce beau travail réalisé !

[Energy01]

Le plus gros problème quand on commence avec knxweb2 c'est le manque de doc.. on est obligé de chercher régulièrement sur google pour essayer de comprendre le fonctionnement. Si j'avais un peu de temps, j'essaierai de le faire (on est tous dans le même cas).. quand j'aurais compris comment ça marche

J'en profite pour dire merci pour ce beau travail réalisé !

merci c'est toujours sympa un retour comme ça

en effet la doc n'existe tout simplement pas !! c'est très long a faire et pas spécialement plaisant
cela serait peut-être plus simple de faire des tuto type vidéo de quelques minutes sur chaque fonction
il faut que je prenne un peu de temps pour regarder ça

@+
Anthony.