takker-workflow@0.0.1/next-action-viewerの開発ログ兼作業ログ
2023-08-17
2022-09-06
16:14:27 修正完了
交差軸方向の幅は、widthで合わせた
mobileでもテストできた
3時間もかかってしまった……
14:50:57 背景クリックできるようになった
ただ、表示欄の隙間をクリックしても閉じない
https://gyazo.com/a1f43f3090f32ccd0f111c05dcd68494
.container領域扱いになってしまうせい
.containerで囲まずに、直接.controllerと.resultを.modalに配置できるだろうか？
15:19:18 無理だったのでやめる
中央揃えできても幅が揃わなかったり、左端に寄ってしまったりする
widthを外せば左端によらずにすむ？
15:35:26 なんとかなった
https://gyazo.com/aa348fcd19bb2e464d3052b26466134d
隙間を空ける際には、子要素のpaddingとmarginの分だけ、子要素の幅を縮めればいい
code:sample(css)
padding: 5px;
margin: 2px;
width: calc(100% - 5px * 2 - 2px * 2);
14:50:43 大体スタイル修正終了
再読み込みや読み込みステータス表示欄と、タスク表示欄とを分けてみた
↓のmargin指定もgapに置き換えられる
https://gyazo.com/389e86866af4c1c72b02536c00ad98d1
code:抜粋1(css)
.container {
border:1px solid rgba(0,0,0,.2);
border-radius:6px;
width:600px;
margin:30px auto;
max-height: calc(100vh - 20px);
}
.container {
}
.container > * {
background-color:var(--dropdown-menu-bg, #fff); margin: 10px 0;
padding: 5px;
}
https://gyazo.com/a12ea356e4f808dda253c3945ac0111c
code:抜粋2(css)
.container {
border:1px solid rgba(0,0,0,.2);
border-radius:6px;
width:600px;
margin:30px auto;
max-height: calc(100vh - 20px);
}
.container {
display: flex;
flex-direction: column;
}
.container > * {
background-color:var(--dropdown-menu-bg, #fff); margin: 10px 0;
padding: 5px;
}
12:55:29 reload()の削除
const reload = useCallback(() => load(), []);と意味のない函数だったので、loadと同じにした
12:53:59
Controllerを戻り値で返すようにする
13:01:48 実装完了
ついでにtoggle()を実装した
13:25:20 toggle()に初期データ読み込み処理を入れてなかった
13:06:23 テスト終了
2022-08-29
02:18:55 preactのimport先を「preact」のコードブロックに変更 2022-07-19
14:57:55 .modal-contentが中央に配置されていなかった
.modal-contentでmax-widthが指定されていたのが原因
これを削除し、親要素めいいっぱいまで広がるようにしたら直った
2022-07-09
19:01:41 データ読み込み時に描画が固まる不具合を直した
するとデータがasync iteratorから渡ってくる間隔が0になるため、大量のsetStateが一瞬で発生してしまう
2022-06-05
08:30:10 開始日時で並び替えて表示するようにした
https://gyazo.com/b0302e60759e129f2c23dd42af1ba316
かなり見やすくなったtakker.icon
日付の古い順もしくは新しい順にやり残したことに着手したりできる
06:42:26 部品ごとにコードブロックを分けた
2022-05-16
14:57:18 CSSに文法ミスがあった
2022-04-09
21:27:37 同じタブでページ遷移したときはmodalを閉じる
21:07:12 とりあえず完成
読み込み、コピーボタン、一度閉じても情報が消えない、ところまで実演している
https://gyazo.com/3292d32437bc260bfd13cf4bb29be101.mp4
18:52:43 だいぶいい感じにできてきた
あとやること
CSS調整
色の修正
/icons/done.icon19:38:46 リンクの下線消す
大きさ修正
/icons/done.iconアイテムがなければ折りたたみを展開できないようにする
/icons/done.icon19:38:36 コピーボタン
押したらメッセージを出す
/icons/done.icon何故か背景を押しても閉じれなくなってしまった
20:04:42 click event自体が発生していない……なぜだ
20:12:55 治った。関数名ミスってただけみたい？
20:25:13 いやだめだ。やはりclick eventが発生しない……
どこかに取られている？
z-indexは関係なさそう
modalの方でも全画面を覆っているのが問題？
このDOMだとclick eventを拾える
scrapboxはこのDOMでclick eventを拾うことに成功しているから、おそらくshadow DOMとの組み合わせの問題だろう 20:32:03 とりあえず閉じるボタンを設置することで回避する
/icons/done.icon19:10:06 読み込み中はぐるぐるマーク表示
ぐるぐるマークはどんなstyleだっけ
code:ts
import { useStatusBar } from "../scrapbox-userscript-std/dom.ts";
useStatusBar().render({type: "spinner"});