TiddlyWikiのカスタム(下にもcloseメニュー)

長いtiddlerをいくつも開いていて、最後まで読んだtiddlerを閉じたい時、上に戻って「close」探すの面倒じゃありません?
ということで上にしかない「close close other edit permalink reference jump」のメニューを、下にもつけてみた。

メニューをただ追加してみる

なんとなーく、tiddlerの表示には、「ViewTemplate」が適用されているようなので、これを変えてみる。
初期状態

<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>

の最後に先頭行「

」をコピーする。

<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>

すると、、、おお、出た!
既に開いているtiddlerには適用されないので、一旦「close」してからどうぞ。
これをいじると、通常表示を変更できるようです。

下に出たのは良いけど、分かりにくい

そう、ただ出すと、上のメニューなのか、下のメニューなのか分かりにくい。
ということで、表示を変えてみる。
まずは先ほどの、「ViewTemplate」の最後の行を修正する。

<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<div class='toolbarU' macro='toolbar closeTiddler closeOthers +editTiddler permalink references jump'></div>

最後の行の「class='toolbar'」を「class='toolbarU'」にしてみた。
すると、、、下のメニューは左寄せになりました。
これでも分からないことはないけど、、、。

線を引いてtiddlerの範囲を明示する

二通りが考えられる。

  1. 上のメニューの上に線、下のメニューの下に線を引く
  2. tiddlerを枠で囲む

とりあえず、今のところ、一番目で納得したので、二番目は未検証。
なので、一番目。


線とかのスタイルは「StyleSheetLayout」にある。
この中に

.toolbar {
 text-align: right;
 font-size: .9em;
 visibility: hidden;
}

.selected .toolbar {
 visibility: visible;
}

があるので、線を加え(border-top: 1px dotted;)
さらに、コピーして「toolbarU」用も作る。

.toolbar {
 text-align: right;
 font-size: .9em;
 visibility: hidden;
 border-top: 1px dotted;
}

.selected .toolbar {
 visibility: visible;
}

.toolbarU {
 text-align: right;
 font-size: .9em;
 visibility: hidden;
 border-bottom: 1px dotted;
}

.selected .toolbarU {
 visibility: visible;
}


うむ、納得。

編集画面は、、、

tiddlerをダブルクリックして、編集画面に入ると、上のメニューだけになります。
(しかも、上に線つき、、、)
これが気になるなら、

  1. 編集画面にも下のメニューをつける
  2. 編集画面のメニューには線をつけない

といったことが考えられます。
「EditTemplate」を変更したりすれば、できると思います。
大雑把なO型には気になりませんが、、、。
気になる方は、やってみてください。
答え教えろ、という場合は、コメントを残してくださいな。
気が向いたら書きます。


TiddlyWiki、便利してます。