ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-01 11:33:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

link: add preview box to channel color picker

Browse Source
This commit is contained in:
Matilde Park 2020-03-13 00:17:57 -04:00
parent 21a4c50376
commit d4e2369849
1 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
pkg/interface/link/src/js/components/settings.js
View File

@ -31,13 +31,14 @@ export class SettingsScreen extends Component {
this.setState({
title: this.props.resource.metadata.title,
description: this.props.resource.metadata.description,
color: uxToHex(this.props.resource.metadata.color || '0x0')
color: `#${uxToHex(this.props.resource.metadata.color || '0x0')}`
});
}
}
componentDidUpdate(prevProps, prevState) {
const { props, state } = this;
if (!!state.isLoading && !props.resource) {
this.setState({
isLoading: false
@ -47,14 +48,49 @@ export class SettingsScreen extends Component {
});
}
if (((this.props.resource) && ("metadata" in this.props.resource))
if (((props.resource) && ("metadata" in props.resource))
&& (prevProps !== props)) {
this.setState({
title: props.resource.metadata.title,
description: props.resource.metadata.description,
color: uxToHex(props.resource.metadata.color || '0x0')
color: `#${uxToHex(this.props.resource.metadata.color || '0x0')}`
});
}
if (state.color !== prevState.color) {
const { resource } = props;
if (!("metadata" in resource)) {
resource.metadata = {};
}
//submit color if valid
let color = state.color;
if (color.startsWith("#")) {
color = state.color.substr(1);
}
let hexExp = /([0-9A-Fa-f]{6})/
let hexTest = hexExp.exec(color);
let currentColor = "000000";
if (props.resource && "metadata" in props.resource) {
currentColor = uxToHex(props.resource.metadata.color);
}
if (hexTest && (hexTest[1] !== currentColor)) {
if (props.amOwner) {
api.setSpinner(true);
api.metadataAdd(
props.resourcePath,
props.groupPath,
resource.metadata.title,
resource.metadata.description,
resource.metadata['date-created'],
color
).then(() => {
api.setSpinner(false);
});
}
}
}
}
changeTitle() {
@ -174,28 +210,21 @@ export class SettingsScreen extends Component {
<p className="f8 mt3 lh-copy">Change color</p>
<p className="f9 gray2 db mb4">Give this collection a color when viewing group channels</p>
<div className="relative w-100 flex"
style={{ maxWidth: "20rem" }}>
style={{ maxWidth: "10rem" }}>
<div className="absolute"
style={{
height: 16,
width: 16,
backgroundColor: state.color,
top: 13,
left: 11
}} />
<input
className={"f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
className={"pl7 f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
"focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3"}
value={this.state.color}
disabled={!props.amOwner}
onChange={this.changeColor}
onBlur={() => {
if (props.amOwner && state.color.match(/[0-9A-F]{6}/i)) {
api.setSpinner(true);
api.metadataAdd(
props.resourcePath,
props.groupPath,
resource.metadata.title,
resource.metadata.description,
resource.metadata['date-created'],
state.color
).then(() => {
api.setSpinner(false);
});
}
}}
/>
</div>
</div>