Collection metadata area layout improvements

client/modules/User/components/Collection.jsx

@@ -18,11 +18,30 @@ import Loader from '../../App/components/loader';
 import EditableInput from '../../IDE/components/EditableInput';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../../IDE/components/SketchList';
+import CopyableInput from '../../IDE/components/CopyableInput';
 
 const arrowUp = require('../../../images/sort-arrow-up.svg');
 const arrowDown = require('../../../images/sort-arrow-down.svg');
 const downFilledTriangle = require('../../../images/down-filled-triangle.svg');
 
+const ShareURL = ({ value }) => {
+  const [showURL, setShowURL] = React.useState(false);
+
+  return (
+    <div className="collection-share">
+      {
+        showURL ?
+          <React.Fragment>
+            <span className="collection-share__label">Everyone can access the collection via this link:</span>
+            <br />
+            <CopyableInput value={value} />
+          </React.Fragment> :
+          <button onClick={() => setShowURL(true)}>Share collection</button>
+      }
+    </div>
+  );
+};
+
 class CollectionItemRowBase extends React.Component {
   constructor(props) {
     super(props);
@@ -282,9 +301,14 @@ class Collection extends React.Component {
 
   _renderCollectionMetadata() {
     const {
-      id, name, description, items, owner 
+      id, name, description, items, owner, slug
     } = this.props.collection;
 
+    const hostname = window.location.origin;
+    const { username } = this.props;
+
+    const baseURL = `${hostname}/${username}/collections/`;
+
     const handleEditCollectionName = (value) => {
       if (value === name) {
         return;
@@ -301,8 +325,18 @@ class Collection extends React.Component {
       this.props.editCollection(id, { description: value });
     };
 
+    const handleEditCollectionSlug = (value) => {
+      if (value === slug) {
+        return;
+      }
+
+      this.props.editCollection(id, { slug: value });
+    };
+
     return (
       <div className="collection-metadata">
+        <div className="collection-metadata__columns">
+          <div className="collection-metadata__column--left">
             <h2 className="collection-metadata__name">
               {
                 this.isOwner() ? <EditableInput value={name} onChange={handleEditCollectionName} /> : name
@@ -323,6 +357,14 @@ class Collection extends React.Component {
               }
             </p>
           </div>
+
+          <div className="collection-metadata__column--right">
+            <p className="collection-metadata__share">
+              <ShareURL value={`${baseURL}${id}`} />
+            </p>
+          </div>
+        </div>
+      </div>
     );
   }
 
@@ -400,7 +442,14 @@ class Collection extends React.Component {
                 </tbody>
               </table>
 
-              <p><button onClick={this.showAddSketches}>Add more sketches</button></p>
+              {
+                this.isOwner() &&
+                <p className="collection-add-button">
+                  <button onClick={this.showAddSketches}>
+                    Add more sketches
+                  </button>
+                </p>
+              }
             </div>
           }
           {

client/styles/components/_collection.scss

@@ -12,12 +12,29 @@
   }
 }
 
+.collection-metadata__columns {
+  display: flex;
+}
+
+.collection-metadata__column--left,
+.collection-metadata__column--right {
+  flex: 1;
+}
+
+.collection-metadata__column--right {
+  align-self: flex-end;
+}
+
 .collection-metadata__name {
   padding: #{12 / $base-font-size}rem 0;
 }
 
 .collection-metadata__name .editable-input__label span {
   padding: 0.83333rem 0;
+
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
 }
 
 .collection-metadata__name,
@@ -29,11 +46,21 @@
 .collection-metadata__user {
   padding-top: #{12 / $base-font-size}rem;
   padding-left: #{8 / $base-font-size}rem;
+  font-size: 14px;
 }
 
 .collection-metadata__description {
   padding-top: #{24 / $base-font-size}rem;
-  width: 50%;
+  text-align: left;
+  font-size: 14px;
+}
+
+.collection-metadata__description .editable-input__label {
+  text-align: left;
+
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
 }
 
 .collection-metadata__description .editable-input__input {
@@ -48,3 +75,21 @@
   padding: #{24 / $base-font-size}rem;
   overflow: scroll;
 }
+
+.collection-add-button {
+  padding: #{24 / $base-font-size}rem;
+  text-align: center;
+}
+
+.collection-share {
+  text-align: right;
+}
+
+.collection-share__label {
+  display: block;
+  text-align: left;
+}
+
+.collection-share .copyable-input {
+  padding-bottom: 0;
+}