PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

use native color picker instead of library

Browse source
This commit is contained in:
Bruno Windels 2019-09-30 16:54:32 +02:00
parent cca41c184c
commit 8dc94af1ba
3 changed files with 18 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -106,7 +106,6 @@
"slate-react": "^0.18.10",
"text-encoding-utf-8": "^1.0.1",
"url": "^0.11.0",
"vanilla-picker": "^2.10.0",
"velocity-animate": "^1.5.2",
"whatwg-fetch": "^1.1.1",
"zxcvbn": "^4.4.2"

38
src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
View file

@ -39,8 +39,6 @@ import IdentityAuthClient from "../../../../../IdentityAuthClient";
import {abbreviateUrl} from "../../../../../utils/UrlUtils";
import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
import Picker from 'vanilla-picker';
export default class GeneralUserSettingsTab extends React.Component {
static propTypes = {
closeSettingsFn: PropTypes.func.isRequired,
@ -399,34 +397,34 @@ export default class GeneralUserSettingsTab extends React.Component {
}
class CustomThemeColorField extends React.Component {
constructor(props) {
super(props);
this.state = {color: ""};
}
componentDidMount() {
setTimeout(() => {
this.value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`);
this._buttonRef.style.background = this.value;
const value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`).trim();
this.setState({color: value});
}, 3000);
}
_onClick = (event) => {
const button = event.target;
if (button.tagName !== "BUTTON") {
console.log("target is", button);
return;
}
console.log("clicked color " + this.props.name);
const picker = new Picker({parent: button, alpha: false, color: this.value});
picker.onChange = color => this._onColorChanged(color);
}
_onColorChanged(color) {
const hex = color.hex.substr(0, 7);
_onColorChanged = (event) => {
const hex = event.target.value;
document.body.style.setProperty(`--${this.props.name}`, hex);
document.body.style.setProperty(`--${this.props.name}-0pct`, hex + "00");
document.body.style.setProperty(`--${this.props.name}-50pct`, hex + "7F");
this._buttonRef.style.background = hex;
this.value = hex;
this.setState({color: hex});
}
render() {
return (<button ref={ref => this._buttonRef = ref} onClick={this._onClick}>{this.props.label}</button>);
const id = `color-picker-${this.props.name}`;
return (<div>
<input type="color" value={this.state.color}
onChange={this._onColorChanged}
onInput={this._onColorChanged}
id={id} />
<label htmlFor={id}>{this.props.label}</label>
</div>);
}
}

12
yarn.lock
View file

@ -211,11 +211,6 @@
resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
"@sphinxxxx/color-conversion@^2.2.2":
version "2.2.2"
resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
"@types/events@*":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@ -8103,13 +8098,6 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"
vanilla-picker@^2.10.0:
version "2.10.0"
resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.10.0.tgz#36676631b9346daa6b93aa4f80c541f113e38c50"
integrity sha512-s1K+oa/JrT5blJFbLLw1O+PMncJM1qCF8DVXKNPaTVxXgTteSCjSr4rvf8TpcqEcQQ+S4RV/nvPBZanrlJE82w==
dependencies:
"@sphinxxxx/color-conversion" "^2.2.2"
velocity-animate@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"