diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 73ca442f..78eff1e8 100644 --- a/client/modules/User/components/Collection.jsx +++ b/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 ( +
+ { + showURL ? + + Everyone can access the collection via this link: +
+ +
: + + } +
+ ); +}; + 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,27 +325,45 @@ 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 (
-

- { - this.isOwner() ? : name - } -

+
+
+

+ { + this.isOwner() ? : name + } +

-

{items.length} sketch{items.length === 1 ? '' : 'es'} collected by {owner.username}

+

{items.length} sketch{items.length === 1 ? '' : 'es'} collected by {owner.username}

-

- { - this.isOwner() ? - : - description - } -

+

+ { + this.isOwner() ? + : + description + } +

+
+ +
+

+ +

+
+
); } @@ -400,7 +442,14 @@ class Collection extends React.Component { -

+ { + this.isOwner() && +

+ +

+ } } { diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss index 2927ec62..05950e27 100644 --- a/client/styles/components/_collection.scss +++ b/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; +}