Inkdrop - 空白調整

先に結果

before	after

狭くしたい

特に Distraction Free 表示 (サイドバーとノート一覧を非表示) にして使う場合などにタイトル部やメタ情報の領域の空白が気になってしまう。でかいモニターを使えば気になくなりそうではあるけど、でかいモニターを使うと目がしんどいので 21.5 inch にとどめている。そろそろもう少し大きくしても大丈夫ではと思っているけど、検証が難しい。買って無駄になるのも辛いし。

Styles.less

いじればいけるとは思うのだけどうまくいかない。右上 X の下にある ︙ の位置がうまくいかない。単純に .editor-meta-tags の位置を上げると X と被る上に絶妙に押せない。うまく押せないと X でウインドウが閉じてしまう。いっそのこと X を消して調整も試みたけどしっくりこない。

init.js

css でうまくいかないので js で。ボタンを取り出して .note-tags-bar-input にぶち込む。

inkdrop.onEditorLoad((_) => {
  const more = document.querySelector(".editor-header-more button");
  more.style.position = "absolute";
  more.style.marginLeft = "-25px";
  more.style.background = "none";
  more.style.border = "none";
  more.style.cursor = "pointer";

  const g = more.querySelector("g");
  g.setAttribute("stroke", "darkgray");

  const tags = document.querySelector(".note-tags-bar-input");
  tags.appendChild(more);
});

まとめ

まんぞく。