Permettre au choix la sidebar placée à droite ou à gauche


#1

Bonjour @svink,

Bravo encore pour cette version 3 de TiddlyOueb :grinning:

Peux tu intégrer ce choix dans les paramétrages ?

Raison de la demande:

Personnellement je suis allergique aux barres de menu à droite, mais je sais pourquoi.
Le process de lecture sur un écran ou sur papier se fait d’en haut à gauche pour aller en bas à droite.
Utilisant la sidebar de manière intensive dans TiddlyWiki, je ressens toujours une gêne quand elle est placée à droite.

Mon approche des logiciels étant toujours motivée par la volonté de laisser le maximum de choix aux utilisateurs je propose donc que cette possibilité soit intégrée aux paramétrages.

Voici quelques éléments qui te permettront d’ajouter cette option:

1- Voir le post Faire apparaitre un menu principal en haut à gauche?
2- Voir le source avec démo ici : https://tesseract-index.bitbucket.io/UI/leftsidebar.html

Le code tient en deux petits fichiers. Tu ne devrais pas avoir trop de souci pour ajouter un switch sidebar gauche/droite.

Dis moi ce que tu en penses

Merci.


#2

J’ai fais un test rapide mais c’est pas très concluant. Il y a du coup un affichage de la story river pas très jolie à cause de la marge de droite en mode Web et j’ai une modification du pied de page…

Je ne penses pas intégrer ça dans TiddlyOueb par défaut (ou du moins pas pour l’instant). Par contre rien ne t’empêche de le faire dans le tient…

A+


#3

Bonjour @svink

J’ai déjà placé la sidebar à gauche.

Peux tu me donner les éléments de code du test rapide que tu as fait pour le switch gauche/droite ?
Ceci me permettra d’avancer et d’améliorer mes faibles connaissances en matière de codification grâce à toi.

Merci :star_struck:


#4

En fait je n’ai rien fait, j’ai juste importé les tiddlers pour tester.

Pour switcher entre les deux il suffit de supprimer ou d’ajouter le tag $:/tags/Stylesheet du tiddler $:/tesseract/LeftSidebar.

Je l’ai fait manuelement mais tu peux créer un bouton pour ça.

Edit: Ci-dessous le code pour créer un bouton qui permet de passer la barre latérale à droite ou à gauche:

<$reveal type="match" state="$:/state/sidebarmove" text="left">

<$button set="$:/state/sidebarmove" setTo="right">
<$fieldmangler tiddler="$:/tesseract/LeftSidebar">
<$action-sendmessage $message='tm-remove-tag' $param='$:/tags/Stylesheet'/>
</$fieldmangler>
 Barre latérale à droite
</$button>
</$reveal>

<$reveal type="nomatch" state="$:/state/sidebarmove" text="left">

<$button set="$:/state/sidebarmove" setTo="left">
<$fieldmangler tiddler="$:/tesseract/LeftSidebar">
<$action-sendmessage $message='tm-add-tag' $param='$:/tags/Stylesheet'/>
</$fieldmangler>
 Barre latérale à gauche
</$button>
</$reveal>

#5

Merci pour le code. Ça marche SUPER !!

Pour le positionnement de la story river:

Dans $:/themes/tiddlywiki/punch/base

Le padding à 0 pose problème. La story river couvre une partie de la sidebar.

Si tu annule l’effet padding:

body.tc-body .tc-story-river { /*padding: 0;*/ }

Tu obtiens des marges similaires à gauche et à droite.

Le fonctionnement du switch est parfait. Voici ce que j’obtiens sur un TiddlyOueb (Les couleurs ne sont là que pour stimuler l’effet des marges)

Mode Admin SideBar à gauche:

Mode Admin SideBar à droite:

Mode Admin full screen:

Mode Web:

Maintenant si tu unifie couleur de fond et couleur de fond d’un tiddler tu obtiens ceci:

Ce que je veux montrer ici:

  • Les marges égales gauche et droite ne sont pas pénalisantes esthétiquement parlant
  • Les positionnement de la sidebar à gauche et à droite sont parfaitement symétriques.

Je ne vois donc aucun problème d’intégration de ce choix de paramétrage supplémentaire.

Tu serais le premier à proposer cette fonction (j’ai pas vu ça ailleurs sur TiddlyWiki) et tu fera le bonheur de tous les allergiques de la SideBar à droite :grinning: