Boostnote

Boostnote v0.8.17からレイアウトが変わった?

More than 1 year has passed since last update.

ローカルメモにBoostnoteを愛用してます!
Kobitoも使ってますが、そこは臨機応変に・・・

そして、今朝アプリ開きupdateの情報があり(だいぶ前に出てたけど無視してた)、
updateしてみると、記事一覧の表示域が変わり、不明な余白が出来ていました。(私だけ?)

2017-11-27_11h14_44.png

見づらいし、編集しづらくなった。

どこかのエディタは設定からcss修正できたよーな、できないよーな。
Boostnoteではとりあえず出来なそうだったので、アプリを探る。

Viewタブ - [Toggel Depeloper Tools] Chromeの開発者コンソールが表示されまし。

cssで領域を制御しているみたいです。

.MarkdownNoteDetail_body__browser-main-Detail-
↑こやつが記事領域みたい・・・

2017-11-27_11h26_14.png
2017-11-27_11h53_39.png
なんだこの無駄なmarginはと思ったら、max-widthが設定されてた。

私の場合は、以下がアプリディレクトリが読み込み元でした。
C:\Users\ [ユーザ名] \AppData\Local\boost\app-0.8.17\resources\app

調べてみると、app/compiled/main.htmlが、画面構成に利用されており、
app/compiled/main.jsのcssが適用されていそうだ。
2017-11-27_11h35_45.png
(なぜ、jsでcss書き出してるんだろ。。。処理を深く読んでないからわからないけど)

CSSでなんとかなりそー!
どーせローカルだしBoostenote自分好みに拡張できそうだから、なんとなくcustomディレクトリ作成して修正してみた!

app/compiled/main.html
 ~~~ 106行目辺り ~~~ 
      : '../compiled/main.js'
    var scriptEl = document.createElement('script')
    scriptEl.setAttribute('type', 'text/javascript')
    scriptEl.setAttribute('src', scriptUrl)
    document.body.appendChild(scriptEl)
</script>
  # customcss include 追加
  <link rel="stylesheet" href="../custom/lib/custom.css">
  <style>
    .ace_search {
      background-color: #d9d9d9;
    }
  </style>

適当に領域を拡張 (デフォルトcssを上書き)

app/custom/lib/custom.css
/* Boostenote body 拡張 */
.MarkdownNoteDetail__body___browser-main-Detail-{
    margin-left  : 15px ;
    margin-right : 60px ;
    max-width    : 100% ;
}

修正し Viewタブ - [Relode]で良い感じに記事Body領域が広がった
2017-11-27_11h50_17.png

うーん。満足。

時間があるときに付加機能でもつけようかなー

※ この手法はアプリを直に修正しているため、オススメできません。自己責任でお願いします。他に良い方法あれば教えてください。