r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

potentional option for collection sharing

Browse source
This commit is contained in:
Cassie Tarakajian 2019-12-10 18:34:37 -05:00
parent 5319bbbeb7
commit 001a30f140
3 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
client/modules/User/components/Collection.jsx
View file

@ -20,6 +20,7 @@ import Overlay from '../../App/components/Overlay';
import SketchList from '../../IDE/components/AddToCollectionSketchList'; import SketchList from '../../IDE/components/AddToCollectionSketchList';
import CopyableInput from '../../IDE/components/CopyableInput'; import CopyableInput from '../../IDE/components/CopyableInput';
import { SketchSearchbar } from '../../IDE/components/Searchbar'; import { SketchSearchbar } from '../../IDE/components/Searchbar';
import dropdownArrow from '../../../images/down-arrow.svg';
const arrowUp = require('../../../images/sort-arrow-up.svg'); const arrowUp = require('../../../images/sort-arrow-up.svg');
const arrowDown = require('../../../images/sort-arrow-down.svg'); const arrowDown = require('../../../images/sort-arrow-down.svg');
@ -30,14 +31,14 @@ const ShareURL = ({ value }) => {
return ( return (
<div className="collection-share"> <div className="collection-share">
{ <button className="collection-share__button" onClick={() => setShowURL(!showURL)}>
showURL ? <span>Share</span>
<React.Fragment> <InlineSVG className="collection-share__arrow" src={dropdownArrow} />
<span className="collection-share__label">Everyone can access the collection with this link</span> </button>
<br /> { showURL &&
<CopyableInput value={value} /> <div className="collection__share-dropdown">
</React.Fragment> : <CopyableInput value={value} label="Link to Collection" />
<button className="collection-share__button" onClick={() => setShowURL(true)}>Share</button> </div>
} }
</div> </div>
); );

4
client/styles/abstracts/_placeholders.scss
View file

@ -83,6 +83,10 @@
border: 2px solid getThemifyVariable('button-border-color'); border: 2px solid getThemifyVariable('button-border-color');
border-radius: 2px; border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
& g {
fill: getThemifyVariable('button-color');
opacity: 1;
}
&:enabled:hover { &:enabled:hover {
border-color: getThemifyVariable('button-background-hover-color'); border-color: getThemifyVariable('button-background-hover-color');
background-color: getThemifyVariable('button-background-hover-color'); background-color: getThemifyVariable('button-background-hover-color');

14
client/styles/components/_collection.scss
View file

@ -84,21 +84,29 @@
.collection-share { .collection-share {
text-align: right; text-align: right;
position: relative;
} }
.collection-share__button { .collection-share__button {
@extend %button; @extend %button;
display: flex;
align-items: center;
} }
.collection-share__label { .collection-share__arrow {
display: block; margin-left: #{5 / $base-font-size}rem;
text-align: left;
} }
.collection-share .copyable-input { .collection-share .copyable-input {
padding-bottom: 0; padding-bottom: 0;
} }
.collection__share-dropdown {
@extend %dropdown-open-right;
padding: #{20 / $base-font-size}rem;
width: #{350 / $base-font-size}rem;
}
.collection-metadata__add-button { .collection-metadata__add-button {
@extend %button; @extend %button;
flex-grow: 0; flex-grow: 0;