takker-workflow@0.0.1/next-action-viewer
https://gyazo.com/f42d8c846026061565afbbf4e5aef34e
バグ
mobileでボタンを押しても表示されないことがある
何なんだろう？
open()の依存配列にinitializedを入れてたせいか？
外してみた
テストは後ほどやる
外してもだめだった
フラグの状態をデバッグしてみるしかないな
実装したいこと
読み込んだタスク数から、完了したタスクと無効にしたタスクを除く
タスク数の表示が右肩上がりになってしまっていて、意味がない
setup()を使って設定する
controller内でPageMenuに取り付けるなど、自由に設定する
keyboard shortcutにしてもいい
例
code:main.ts
import { setup } from "./mod.tsx";
scrapbox.PageMenu.addItem({
title: "Next actions",
onClick: toggle,
});
スタイルの設定
ここを押してminifyしたCSSをviewer.tsxで使う code:style.css
@import "./font.css";
.modal {
position:fixed;
inset:0;
z-index:1050;
background-color:#000c;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 10px;
padding: 10px;
}
.closed {
display: none;
}
.modal > * {
background-color: var(--dropdown-menu-bg, #fff); border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
}
@media (min-width: 768px) {
.modal {
padding: 30px 0;
--item-width: 600px;
}
}
.result {
padding: 15px;
width: calc(var(--item-width, 100%) - 30px);
overflow-y: scroll;
}
進捗表示バー
code:style.css
.controller {
padding: 5px;
width: calc(var(--item-width, 100%) - 10px);
display: flex;
flex-direction: row-reverse;
gap: 0.2em;
}
.progress {
width: 100%;
}
.progress > *{
padding: 0 2px;
}
リンク
code:style.css
a {
text-decoration: none;
}
a:hover {
color: var(--page-link-hover-color, #2d67f5); }
コピーボタン
code:style.css
.copy {
font-family: "Font Awesome 5 Free";
cursor: pointer;
/* <button>のdefault styleを消す */
background: unset;
color: unset;
border: unset;
}
hooksとか
useTaskCrawler
CSS
ほとんどscrapboxのCSSと同じ
code:font.css
/* derived from Font Awesome 5 */
.fa {
font-weight: 900;
font-family: "Font Awesome 5 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.fa-spinner {
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
transform:rotate(0deg)
}
to {
transform:rotate(359deg)
}
}
.fa-spinner::before {
content: "\f110";
}
.kamon::before {
font-family: "AppIcons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
}
.kamon-check-circle::before {
content: "\E018";
}
code:mod.tsx
export * from "../takker99%2Ftakker-scheduler/viewer.tsx";