Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite8f180a

Browse files
committed
feat: add color picker on inline style color hints
1 parent756442a commite8f180a

File tree

4 files changed

+52
-11
lines changed

4 files changed

+52
-11
lines changed

‎TODO.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
important)
66

77
- compactCss inline style
8-
- color picker on color previews ?
98
- on selector click, show a new panel with the selector and the matching
109
elements -> allow editing the selector from there, allow adding styles in that
1110
selector

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@webext-core/messaging":"^1.4.0",
3030
"@webext-core/proxy-service":"^1.2.0",
3131
"@xstate/store":"^0.0.3",
32+
"@zag-js/color-utils":"^0.48.0",
3233
"@zag-js/interact-outside":"^0.45.0",
3334
"@zag-js/popper":"^0.47.0",
3435
"lucide-react":"^0.365.0",

‎pnpm-lock.yaml

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎src/declaration.tsx

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import{parseColor}from"@zag-js/color-utils";
12
import*asTooltipPrimitivefrom"#components/tooltip";
23
import{Portal}from"@ark-ui/react";
34
import{useSelector}from"@xstate/store/react";
@@ -76,6 +77,7 @@ export const Declaration = (props: DeclarationProps) => {
7677
constshowSelector=useSelector(store,(s)=>s.context.showSelector);
7778

7879
const{ evaluator, contentScript}=useDevtoolsContext();
80+
constcolorPickerId=useId();
7981

8082
return(
8183
<styled.code
@@ -155,16 +157,42 @@ export const Declaration = (props: DeclarationProps) => {
155157
</styled.label>
156158
<styled.spanmr="6px">:</styled.span>
157159
{isColor(computedValue)&&(
158-
<styled.div
159-
alignSelf="center"
160-
display="inline-block"
161-
border="1px solid var(--sys-color-neutral-outline, #757575)"
162-
width="9.6px"
163-
height="9.6px"
164-
mx="4px"
165-
style={{backgroundColor:computedValue}}
166-
aria-label="Color preview"
167-
/>
160+
<labelhtmlFor={colorPickerId}>
161+
{rule.selector===symbols.inlineStyleSelector&&(
162+
<input
163+
id={colorPickerId}
164+
hidden
165+
type="color"
166+
value={parseColor(computedValue).toString("hex")}
167+
onChange={(e)=>{
168+
if(rule.selector!==symbols.inlineStyleSelector){
169+
return;
170+
}
171+
172+
constupdate=e.target.value;
173+
174+
contentScript.updateStyleRule({
175+
selectors:inspected.elementSelectors,
176+
prop:hypenateProperty(prop),
177+
value:update,
178+
kind:"inlineStyle",
179+
atIndex:index,
180+
isCommented:false,
181+
});
182+
}}
183+
/>
184+
)}
185+
<styled.div
186+
alignSelf="center"
187+
display="inline-block"
188+
border="1px solid var(--sys-color-neutral-outline, #757575)"
189+
width="9.6px"
190+
height="9.6px"
191+
mx="4px"
192+
style={{backgroundColor:computedValue}}
193+
aria-label="Color preview"
194+
/>
195+
</label>
168196
)}
169197
<EditableValue
170198
index={index}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp