next-action-viewerの実装検討メモ

実装したいこと

特定日のタスクを検索する機能

実装

流石にPreact使うか

このDOMをJSXなしで組み立てるのは骨が折れる

こういうのを入れたい

「今日やること」「明日やること」などを全て閲覧できる

それぞれ折りたたみ可能にする

必要な項目だけ見えるようにする

「今日やること」や「明日やること」ごとに中の項目をまとめてコピーするボタンを付ける

UI

こんな感じ

code:xhtml

<div role="dialog">

<div class="fade modal-backdrop in" />

<div role="dialog" tabindex="-1" style="display: block; padding-right: 17px;" class="fade in modal">

<div class="modal-dialog">

<div class="modal-content" role="document">

<div class="modal-body"></div>

</div>

</div>

</div>

</div>

あとは中身をscrollできるよう適当に調節する

テスト

code:js

document.body.insertAdjacentHTML("beforeend",

`<div class="modal-open" role="dialog">

<div class="fade modal-backdrop in"></div>

<div role="dialog" tabindex="-1" style="display: block; padding-right: 17px;" class="fade in modal">

<div class="modal-dialog">

<div class="modal-content" role="document">

<div class="modal-body">

<details>

<summary>今日やること</summary>

<ul>

<li>起きる</li>

<li>カーテンを開ける</li>

<li>布団をしまう</li>

<li>顔を洗う</li>

<li>散歩</li>

</ul>

</details>

<details>

<summary>今週やること</summary>

<ul>

<li>発表スライド作成</li>

<li>部屋の掃除</li>

</ul>

</details>

</div>

</div>

</div>

</div>

</div>`);

見た目は問題なさそう

https://gyazo.com/c9ad47bdfd80ce18a4bc05e165eff598

https://gyazo.com/0f21051c090769135aeb1d56e4158d9c

まあ本質じゃないし、修正は後回しだ

2022-06-05 06:37:35 すでに修正済み