moony/themer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update SSA and instrument color inputs

Browse Source
This commit is contained in:
Matt Swensen 2020-07-21 08:57:36 -06:00
parent 0ca02adc62
commit 6faf457ff3
No known key found for this signature in database
GPG Key ID: 3F9E482BFC526F35
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/public/index.html
View File

@ -11,8 +11,7 @@
<meta name="description" content="themer takes a set of colors and generates themes for your apps: editors, terminals, wallpapers, and more.">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>themer</title>
<!-- <script async src="https://mjswensen.tel/client.js"></script> -->
<script>window.__ssa__log = function() {};</script>
<script>!function(t){window.__ssa__log=function(e,n){var o=new XMLHttpRequest;o.open("POST",t+"/v1/event"),o.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),o.send("url="+encodeURIComponent(window.location.href)+"&dpr="+(window.devicePixelRatio||1)+"&w="+window.innerWidth+"&h="+window.innerHeight+"&name="+encodeURIComponent(e)+(n?"&"+function e(n,o,t){t=t||[];if("object"==typeof n)for(var i in n)e(n[i],o?o+"["+i+"]":i,t);else t.push(o+"="+encodeURIComponent(n));return t.join("&")}(n,"metadata"):""))},window.__ssa__log("load",{referrer:window.document.referrer}),window.addEventListener("beforeunload",function(){window.__ssa__log("unload")})}(window.__ssa__ORIGIN||"https://mjswensen.tel");</script>
</head>
<body>
<noscript>

14
web/src/ColorInput.js
View File

@ -1,4 +1,5 @@
import React, { useRef, useContext } from 'react';
import React, { useRef, useContext, useCallback } from 'react';
import { debounce } from 'lodash';
import numeral from 'numeral';
import { DropletIcon } from './Icons';
import styles from './ColorInput.module.css';
@ -14,6 +15,7 @@ export default ({ className, style, colorKey, help }) => {
setActiveRawColor,
getActiveContrastFromBackground,
} = useContext(ThemeContext);
const debouncedLogEvent = useCallback(debounce(window.__ssa__log, 1000), []);
const contrast = colorKey === 'shade0'
? null
: numeral(getActiveContrastFromBackground(colorKey)).format('0.00');
@ -34,7 +36,10 @@ export default ({ className, style, colorKey, help }) => {
borderBottomColor: getActiveColorOrFallback([colorKey]),
}}
value={ getActiveRawColor(colorKey) }
onChange={ evt => setActiveRawColor(colorKey, evt.target.value) }
onChange={ evt => {
setActiveRawColor(colorKey, evt.target.value);
debouncedLogEvent('change raw color', { inputType: 'text' });
} }
ref={ textInput }
/>
</label>
@ -62,7 +67,10 @@ export default ({ className, style, colorKey, help }) => {
type="color"
className={ styles.colorInput }
value={ getActiveColorOrFallback([colorKey], colorKey === 'shade0') }
onChange={ evt => setActiveRawColor(colorKey, evt.target.value) }
onChange={ evt => {
setActiveRawColor(colorKey, evt.target.value);
debouncedLogEvent('change raw color', { inputType: 'color' });
} }
tabIndex="-1"
/>
</label>