人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善

2018年 02月 12日

スタイルリストのチェックボタンの誤操作


管理画面のインストールしたスタイルリストは、各行の先頭のチェックボタンで、そのスタイルのON/OFFを切り替える事が出来ます。 管理画面も余り開かないユーザーも居るかもしれませんが、スタイルを編集/作成する場合は、スタイルの問題点の洗い出しなどで、スタイルのON/OFFをする事が非常に増えます。 そんな場合に、一番利用するのがこのリスト行先頭のボタンです。 また、リストの行自体をクリックすると、そのスタイルの編集画面が開きます。

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善_a0349576_09041121.png

以前のStylusでは、行頭の「チェックボタン」とその右側の「スタイル名」の部分は押し間違える事は無かったのですが、最近にデザインが変更され、上図の様に「チェックボタン」を「スタイル名」の部分が囲う様になりました。 この結果、ON/OFFの切替えのつもりが編集画面が開く事が時々生じ、操作性の悪さを感じていました。



上手い回避策があった


前ページで触れましたが、これを改善するために、チェックボタンのサイズを標準の「12px」から「16px」に拡大したのですが、他の人の投稿スタイルを調べると、上手くこの問題を回避している人が居ました。

その方法は、「pointer-events: none;」を使い、赤い部分をクリックで反応しない様にしていたのです。 なるほど、その手があったかと早速輸入しました。

以下は、この部分の要素の構成です。

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善_a0349576_09064340.png

「style-name」に「pointer-events: none;」を指定し、「input.checker」と「a.style-name-link」に「pointer-events: auto;」を指定する事で、昔の操作状態に戻せました。

●改善前
下図の部分はファイル名と同様に、編集画面を開くスイッチとして反応。

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善_a0349576_09074325.png

●改善後
同じ部分にマウスを置いても、反応せず背景色も変化しない。 つまり、ここをクリックしても編集画面が開くことは無い。

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善_a0349576_09084637.png

「チェックボタン」にマウスを乗せると下の様に反応するが、「ファイル名」との間には反応しない部分があります。

拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善_a0349576_09092303.png
拡張機能「Stylus」(Chrome/Firefox) / リスト画面のインターフェイス改善_a0349576_09093557.png

この改善策で誤操作の心配がなくなったので、スタイル名のフォントに比べて大きすぎの感があったチェックボタンのサイズを、「16px」から「15px」に減らしました。 12pxでもOKですが、操作性ではこの位が良いと判断しています。



by Ataron | 2018-02-12 10:07 | PC環境(ハード/ソフト) | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。