github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-25 00:43:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Replace ColorPreviewInput preview box with 'color' input (#3271)

Browse Source
This commit is contained in:
David Sevilla Martin 2022-03-09 19:56:25 -05:00 committed by GitHub
parent 5045254c9f
commit be1b5713fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/common/components/ColorPreviewInput.tsx
View File

@ -5,23 +5,20 @@ import classList from '../utils/classList';
import icon from '../helpers/icon';
export default class ColorPreviewInput extends Component {
value?: string;
view(vnode: Mithril.Vnode<ComponentAttrs, this>) {
const { className, ...attrs } = this.attrs;
const value = attrs.bidi?.() || attrs.value;
const { className, id, ...attrs } = this.attrs;
attrs.type ||= 'text';
return (
<div className="ColorInput">
<input className={classList('FormControl', className)} {...attrs} />
<input className={classList('FormControl', className)} id={id} {...attrs} />
<span className="ColorInput-icon" role="presentation">
{icon('fas fa-exclamation-circle')}
</span>
<div className="ColorInput-preview" style={{ '--input-value': value }} role="presentation" />
<input className="ColorInput-preview" {...attrs} type="color" />
</div>
);
}

18
less/common/ColorInput.less
View File

@ -7,12 +7,26 @@
bottom: 8px;
width: 20px;
height: 20px;
pointer-events: none;
}
&-preview {
background-color: var(--input-value);
display: inline-block;
border-radius: 15%;
padding: 0;
cursor: pointer;
overflow: hidden;
// Match both the wrapper div and the div with the background color
&, &::-webkit-color-swatch-wrapper, &::-webkit-color-swatch {
border: none;
padding: 0;
}
// This has to be a separate entry so other browsers
// don't ignore the entire CSS rule. Thanks Firefox.
&::-moz-color-swatch {
border: none;
}
}
&-icon {