status-bar@0.1.0
scrapboxのstatus barと大体同じPreact Component
2021-06-12
13:31:03 --status-bar-border-colorにした
02:42:13 --tool-light-colorは--status-bar-border-colorに変えたい
2021-06-11
21:17:10 子要素がなければDOMを描画しない
19:47:13 複数のアイテムを入れた時のスタイルを作っている最中
端のアイテムだけ角を丸める
いや当然っちゃ当然だが
<slot>に入れるテキストを<span>で囲むようにしよう
これって外部からclassやstyle経由でスタイル当てられるのかな?
だめだったtakker.icon
react-wcは、<slot>に入れる要素しか渡せないComponentしか作れないっぽい Firefoxが対応してねー……
仕方ないので、4通りstyleづけされたComponentを作ることにする
17:59:08 成功!
code:script.js
import {html, Fragment} from '../htm@3.0.4%2Fpreact/script.js';
import {html as wcHtml, slot} from '../react-wc/script.js';
import {useState, useCallback} from '../preact@10.5.13/hooks.js';
const CSS = `
:host {
display: inline-block;
position: absolute;
cursor: default;
}
`;
const TLContainer = wcHtml`
<style>
${CSS}
:host {
top: 0;
left: 0;
}
::slotted(*) {
border-right: 1px solid var(--status-bar-border-color, #a9aaaf); border-bottom: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:last-of-type) {
border-bottom-right-radius: 3px;
}
</style>
${slot()}
`;
const TRContainer = wcHtml`
<style>
${CSS}
:host {
top: 0;
right: 0;
}
::slotted(*) {
border-left: 1px solid var(--status-bar-border-color, #a9aaaf); border-bottom: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:first-of-type) {
border-bottom-left-radius: 3px;
}
</style>
${slot()}
`;
const BRContainer = wcHtml`
<style>
${CSS}
:host {
bottom: 0;
right: 0;
}
::slotted(*) {
border-left: 1px solid var(--status-bar-border-color, #a9aaaf); border-top: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:first-of-type) {
border-top-left-radius: 3px;
}
</style>
${slot()}
`;
const BLContainer = wcHtml`
<style>
${CSS}
:host {
bottom: 0;
left: 0;
}
::slotted(*) {
border-right: 1px solid var(--status-bar-border-color, #a9aaaf); border-top: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:last-of-type) {
border-top-right-radius: 3px;
}
</style>
${slot()}
`;
export const StatusBar = ({orientation, children}) => {
if (!children || children.length === 0) return html;
switch (orientation) {
case 'top-left':
return html<${TLContainer}>${children}<//>;
case 'top-right':
return html<${TRContainer}>${children}<//>;
case 'bottom-right':
return html<${BRContainer}>${children}<//>;
case 'bottom-left':
return html<${BLContainer}>${children}<//>;
default:
throw Error(${orientation} is an invalid value);
}
};
いちいちスタイルをexportしなきゃいけないのがめんどい……takker.icon
17:27:56 done