En gros plus de php que du html et js sur les les fichiers dans desktop
On ne risque pas d’alourdir en faisant des appels ajax du coup ? Pas sur qu’on gagne en perf.
A ben c’est sur on va perdre en perf mais bon c’est le standard de dev maintenant…
Je préfère des bonnes perfs que des standards …
A force de tout mettre dans des cases on aura tous la tête carré !
Oui je suis d’accord mais bon jeedom respect aucun standard au final…
Enfin avant de supprimer l’ajax faut deja j’arrive a rendre la version desktop responsive…
J’avoue que tes modifications sont pas mal et donne un bon coup de jeune au final avec pas enormement de modification. As tu tester en beta le thème jeedom il reprend pas mal de tes idées (plus d’arrondit, plus de bordure…) ?
Question comment fais tu pour l’alignement horizontal ?
Oui j’ai regardé le thème jeedom et en effet çà va dans le bon sens.
Je suis parti du thème darksobre, que j’ai customisé pour aller plus loin. J’ai même un scénario sur update qui remet mon thème perso après une update
Pour l’alignement horizontal j’ai un css dans personnalisation avancé, et à la base je les alignent à la main. Mais comme certains plugins (météo ) ne sont pas redimensionnable, j’assure l’alignement avec çà, qui les met un poil plus haut comme çà aucune saut entre eux:
#div_ob1 > .eqLogic-widget { min-height: 150px; }
:not(#div_ob1) > .eqLogic-widget { min-height: 112px; }
#div_ob1 plus haut car j’ai des scripts et virtuels qui prennent plus de place, c’est des tuiles globales à la maison.
Pour les hightchart pie:
.highcharts-pane { stroke-width: 0 !important; fill: rgb(100, 100, 100); }
.highcharts-color-0 { fill: rgb(230, 230, 230); }
.ui-slider-handle { width: .5em !important; }
.ui-slider-horizontal{ height: .5em; }
Reste le cas des select, dans mon plugin qivivo j’ai finalement fait des selects persos qui sont affichés en flat même sous iOS. Regarde ici: https://github.com/KiboOst/jeedom-qivivo/blob/master/core/template/dplan/module.html
Mais je pense qu’il faut aller beaucoup plus loin, surtout si on en fait une feature d’une update majeure. Et au final avoir un thème nickel avec un switch light / dark. Je suis fan du dark depuis des années mais çà ne sert à rien de rentrer dans ce débat, il faut proposer les deux. On pourrait ajouter le switch dans le menu fa fa-cogs en bas.
Il faudrait proposer des widgets (gauge) plus fins, d’autres comme une barre horizontale ou verticale au lieu du demi cercle, des cercles complet gradués, etc …
Et il faudrait revoir aussi certaines pages. Exemples, sur la pages des scénarios, les afficher avec une grosse icône ne sert à rien à part bouffer de la place. Une liste avec les noms, accéder directement au log, pouvoir les exécuter, serait pas mal et prendrai moins de place.
D’ailleurs je relance, mais des blocs de scénarios collapsable comme du code en dev ce serait génial …
Si tu veux jeter un œil je peux te donner l’accès, mais en mp évidemment et touche à rien c’est ma prod Je joue pas mal avec les outils devs de firefox pour tester des css en live (je t’apprend rien je sais).
Un peu de finesse
Un plugin, juste croisé sur google, connais pas
Mais on doit pouvoir le faire en changeant le innersize des actuels.
Loic, quel fichier affiche les génère actuellement ? Pas trouvé
ok on a deja tout ce qu’il faut en fait !!
core\template\dashboard\cmd.info.numeric.default.html
pane:
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '92%',
outerRadius: '100%',
shape: 'arc'
}
series:
series: [{
name: '',
data: [Math.round(parseFloat('#state#') * 10) / 10],
radius: 92,
innerRadius: 80,
dataLabels: {
format: '<span style="color : white;">{y}</span> <span style="font-size:10px;color:white">#unite#</span>'
},
}]
et css:
.highcharts-pane { stroke-width: 0 !important; }
Faudrai changer de police aussi …
Si on met les doigts dans le design, va falloir tout reprendre, au pixel prêt, c’est un boulot monstre Le moindre détail laissé de coté peu tout casser visuellement …
Ben si tu es prêt je peux aider après tout le monde connaît me talent de designer (c’est a dire en dessous de 0…)
Sur le fond, je veux bien regarder mais y’as pas mal de dev derrière, et je ne connais pas assez les entrailles de Jeedom. Donc tout seul, non.
Je vais jeter un œil en faisant un mockup.
Peut-on partir sur ces bases:
- On supprime tout les thèmes actuels (de toutes façon les actuels auront peu de chances de marcher)
- Un seul thème, avec switch light / dark
- Dashboard : Je déplacerai bien la barre du haut (catégories et futurs tags) dans le menu de gauche (afficher les objets). → gain d’espace et de clarté
- Il faudra certainement intégrer d’autres jauges, arc, circle, verticale, horizontale. A voir si on propose une option ‹ Graduations ›. Faisable avec hightchart dès aujourd’hui.
- Ce serait top d’avoir çà comme système. Moveable et sizeable avec contraintes de grille height/width. Le tout responsive : http://gridstackjs.com/ En plus on peux laisser des trous, on perd l’empilage obligatoire actuel et c’est une bonne chose je pense. Par contre comment les plugins vont gérer leurs éléments dedans, à réfléchir !!
- Peut on changer les icônes (lumières plus fine entre autre). D’ailleurs, avec Hightchart, on peu faire assez facilement je pense un volet plus ou moins ouvert selon la position (un chart vertical avec graduation).
Le plus galère je trouve, çà va être d’intégrer les couleurs de catégories sans faire sapin de noël…
D’ailleurs, tous les plugins ne retournent pas dans leur div parent l’attribut data-category. Météo par exemple (j’ai fais un PR sur PiHole hier pour çà aussi).
Alors :
- ok pour les thèmes
- ok pour un light un dark
- ok pour les jauges
- je vais regarder le coté gridstack voir ce que je peux en faire
- ok pour les icones après pas oublier de rester simple dans l’affichage comme dans le code
- pour les couleurs je pense la c’est passé la mode des tuiles de couleur… On pourrait changer par des panels Components · Bootstrap en mettant la barre de titre de la couleur de la catégorie. Après le soucis c’est que ca va faire un gros changement pour les designs…
- on pourrait aussi imposer des tailles pour les commandes type : 30x30 30x60 60x30 60x60… ca permettrait peut être d’avoir un dashboard plus sympa
Oui j’ai essayé pas mal de trucs déjà, bordure gauche, haute, barre de titre. Mais on perd en lisibilité.
Il va falloir virer les select aussi, c’est le système qui affiche les options donc on ne maitrise pas le design, et sous iOS c’est beurk.
A remplacer par çà je pense : Components · Bootstrap
La on retombe sur le soucis en mobile c’est pas bootstrap…
Comment çà ? C’est bien un component bootstrap non ? Et l’affiche est identique entre desktop et iPhone.
Sinon regarde çà : https://github.com/KiboOst/jeedom-qivivo/blob/master/core/template/dplan/module-t.html
çà marche bien, comportement iOS nickel, mais on ne peux pas supprimer le bord autour des options.
En mobile on a pas la lib bootstrap on a que du jquery et jquery mobile
Ah ! Je ne connaissait pas cette subtilité !!!
çà çà marche bien coté affichage : jQuery Custom Select Plugin Demos
Sous iOS, çà ne prend pas le select de l’OS (les options en bas de l’écran) mais l’affichage est propre !
Sinon : Selects - jQuery Mobile Demos mais impossible de virer la bordure du option
Quelques idées en vrac … Rien d’abouti …
J’aurai déjà besoin de tuile 1rangée / 3 colonnes qu’il n’y a pas ici …
Le volet, bof …
Le planning c’est un plugin Mode, trois boutons, mode actif avec le check
Long et pas facile, faut pousser des pixels … Faudrait pas non que çà nous prenne 2ans
Déja c’est pas mal les widgets agresse moins déjà comme ça je trouve et ressorte bien (enfin sur le thème dark a voir comment faire en light)
J’aime bien le menu a gauche avec l’objet c’est clair léger vraiment bien.
Après oui tu retrouves les soucis qu’on a quand on bien ranger les widgets qui pose soucis car pas des multiples les uns des autres…
Oui, en effet. Sinon on ne contraint que la hauteur, sur une grille de plusieurs presets à definir.
Un test en live avec css, et la cmd.info.numeric retouchée
Ce qui est moyen car plein de règles css avec des !important qui se contredisent, faudrait nettoyer tout çà
Mais çà commence à faire plus moderne
Du coup je me demande si il faut tout révolutionner.
Nettoyer les css, les inlines style, ajouter des gauges, peaufiner toutes les pages, çà oui !