Merge pull request #2455 from urbit/mp/color-picker-alignment

chat, link: preview for channel colour picker

pkg/interface/chat/src/js/components/settings.js

@@ -23,6 +23,7 @@ export class SettingsScreen extends Component {
     this.changeTitle = this.changeTitle.bind(this);
     this.changeDescription = this.changeDescription.bind(this);
     this.changeColor = this.changeColor.bind(this);
+    this.submitColor = this.submitColor.bind(this);
   }
 
   componentDidMount() {
@@ -31,7 +32,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,12 +48,12 @@ 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)}`
         });
     }
   }
@@ -69,6 +70,41 @@ export class SettingsScreen extends Component {
     this.setState({color: event.target.value});
   }
 
+  submitColor() {
+    let { props, state } = this;
+
+    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);
+        })
+      }
+    }
+  }
+
   deleteChat() {
     const { props, state } = this;
 
@@ -174,28 +210,22 @@ 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);
-                  })
-                }
-              }}
+              onBlur={this.submitColor}
             />
           </div>
         </div>

pkg/interface/link/src/js/components/settings.js

@@ -22,6 +22,7 @@ export class SettingsScreen extends Component {
     this.changeTitle = this.changeTitle.bind(this);
     this.changeDescription = this.changeDescription.bind(this);
     this.changeColor = this.changeColor.bind(this);
+    this.submitColor = this.submitColor.bind(this);
     this.renderDelete = this.renderDelete.bind(this);
     this.renderMetadataSettings = this.renderMetadataSettings.bind(this);
   }
@@ -31,13 +32,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,12 +49,12 @@ 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')}`
       });
     }
   }
@@ -69,6 +71,42 @@ export class SettingsScreen extends Component {
     this.setState({color: event.target.value});
   }
 
+  submitColor() {
+    const { props, state } = this;
+    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);
+        });
+      }
+    }
+  }
+
   deleteCollection() {
     const { props, state } = this;
 
@@ -174,28 +212,22 @@ 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);
-                  });
-                }
-              }}
+              onBlur={this.submitColor}
             />
           </div>
         </div>