urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-24 20:47:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: add preview box to channel color picker

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

67
pkg/interface/chat/src/js/components/settings.js
View File

@ -31,7 +31,7 @@ export class SettingsScreen extends Component {
this.setState({
title: props.association.metadata.title,
description: props.association.metadata.description,
color: uxToHex(props.association.metadata.color)
color: `#${uxToHex(props.association.metadata.color)}`
});
}
}
@ -47,14 +47,48 @@ export class SettingsScreen extends Component {
});
}
if ((this.state.title === "") && (prevProps !== this.props)) {
if ((state.title === "") && (prevProps !== props)) {
if (props.association && "metadata" in props.association)
this.setState({
title: props.association.metadata.title,
description: props.association.metadata.description,
color: uxToHex(props.association.metadata.color)
color: `#${uxToHex(props.association.metadata.color)}`
});
}
if (state.color !== prevState.color) {
//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.association && "metadata" in props.association) {
currentColor = uxToHex(props.association.metadata.color);
}
if (hexTest && (hexTest[1] !== currentColor)) {
let chatOwner = (deSig(props.match.params.ship) === window.ship);
let association =
(props.association) && ("metadata" in props.association)
? props.association : {};
if (chatOwner) {
props.api.setSpinner(true);
props.api.metadataAdd(
association['app-path'],
association['group-path'],
association.metadata.title,
association.metadata.description,
association.metadata['date-created'],
color
).then(() => {
props.api.setSpinner(false);
})
}
}
}
}
changeTitle() {
@ -174,28 +208,21 @@ export class SettingsScreen extends Component {
<p className="f8 mt3 lh-copy">Change color</p>
<p className="f9 gray2 db mb4">Give this chat 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={!chatOwner}
onChange={this.changeColor}
onBlur={() => {
if ((chatOwner) && (this.state.color.match(/[0-9A-F]{6}/i))) {
props.api.setSpinner(true);
props.api.metadataAdd(
association['app-path'],
association['group-path'],
association.metadata.title,
association.metadata.description,
association.metadata['date-created'],
this.state.color
).then(() => {
props.api.setSpinner(false);
})
}
}}
/>
</div>
</div>