スタイルリストのチェックボタンの誤操作
管理画面のインストールしたスタイルリストは、各行の先頭のチェックボタンで、そのスタイルのON/OFFを切り替える事が出来ます。 管理画面も余り開かないユーザーも居るかもしれませんが、スタイルを編集/作成する場合は、スタイルの問題点の洗い出しなどで、スタイルのON/OFFをする事が非常に増えます。 そんな場合に、一番利用するのがこのリスト行先頭のボタンです。 また、リストの行自体をクリックすると、そのスタイルの編集画面が開きます。
以前のStylusでは、行頭の「チェックボタン」とその右側の「スタイル名」の部分は押し間違える事は無かったのですが、最近にデザインが変更され、上図の様に「チェックボタン」を「スタイル名」の部分が囲う様になりました。 この結果、ON/OFFの切替えのつもりが編集画面が開く事が時々生じ、操作性の悪さを感じていました。
上手い回避策があった
前ページで触れましたが、これを改善するために、チェックボタンのサイズを標準の「12px」から「16px」に拡大したのですが、他の人の投稿スタイルを調べると、上手くこの問題を回避している人が居ました。
その方法は、「pointer-events: none;」を使い、赤い部分をクリックで反応しない様にしていたのです。 なるほど、その手があったかと早速輸入しました。
以下は、この部分の要素の構成です。
「style-name」に「pointer-events: none;」を指定し、「input.checker」と「a.style-name-link」に「pointer-events: auto;」を指定する事で、昔の操作状態に戻せました。
●改善前
下図の部分はファイル名と同様に、編集画面を開くスイッチとして反応。
●改善後
同じ部分にマウスを置いても、反応せず背景色も変化しない。 つまり、ここをクリックしても編集画面が開くことは無い。
「チェックボタン」にマウスを乗せると下の様に反応するが、「ファイル名」との間には反応しない部分があります。
この改善策で誤操作の心配がなくなったので、スタイル名のフォントに比べて大きすぎの感があったチェックボタンのサイズを、「16px」から「15px」に減らしました。 12pxでもOKですが、操作性ではこの位が良いと判断しています。