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

Collection Add Sketch and Share buttons

Browse source
This commit is contained in:
Andrew Nicolaou 2019-10-03 07:41:57 +03:00
parent fc02f49d93
commit bcebc070a6
4 changed files with 68 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -36,7 +36,7 @@ const ShareURL = ({ value }) => {
<br />
<CopyableInput value={value} />
</React.Fragment> :
<button onClick={() => setShowURL(true)}>Share collection</button>
<button className="collection-share__button" onClick={() => setShowURL(true)}>Share collection</button>
}
</div>
);
@ -352,7 +352,7 @@ class Collection extends React.Component {
}
</h2>
<p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'} collected by {owner.username}</p>
<p className="collection-metadata__user">By {owner.username}</p>
<p className="collection-metadata__description">
{
@ -365,12 +365,20 @@ class Collection extends React.Component {
description
}
</p>
<p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'}</p>
</div>
<div className="collection-metadata__column--right">
<p className="collection-metadata__share">
<ShareURL value={`${baseURL}${id}`} />
</p>
{
this.isOwner() &&
<button className="collection-metadata__add-button" onClick={this.showAddSketches}>
Add more sketches
</button>
}
</div>
</div>
</div>
@ -450,15 +458,6 @@ class Collection extends React.Component {
/>))}
</tbody>
</table>
{
this.isOwner() &&
<p className="collection-add-button">
<button onClick={this.showAddSketches}>
Add more sketches
</button>
</p>
}
</div>
}
{

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

@ -102,6 +102,33 @@
}
}
%primary-button {
@include themify() {
background-color: getThemifyVariable('primary-button-background-color');
color: getThemifyVariable('primary-button-color');
cursor: pointer;
border: 2px solid getThemifyVariable('primary-button-border-color');
border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
&:enabled:hover {
border-color: getThemifyVariable('primary-button-background-hover-color');
background-color: getThemifyVariable('primary-button-background-hover-color');
color: getThemifyVariable('primary-button-hover-color');
& g {
fill: getThemifyVariable('primary-button-hover-color');
}
}
&:enabled:active {
border-color: getThemifyVariable('primary-button-background-active-color');
background-color: getThemifyVariable('primary-button-background-active-color');
color: getThemifyVariable('primary-button-active-color');
& g {
fill: getThemifyVariable('primary-button-active-color');
}
}
}
}
%preferences-button {
@extend %toolbar-button;
@include themify() {

11
client/styles/abstracts/_variables.scss
View file

@ -76,6 +76,9 @@ $themes: (
codefold-icon-open: url(../images/triangle-arrow-down.svg),
codefold-icon-closed: url(../images/triangle-arrow-right.svg),
primary-button-color: #fff,
primary-button-background-color: $p5js-pink,
form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: $middleGray,
form-input-text-color: $dark,
@ -141,6 +144,10 @@ $themes: (
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
primary-button-color: #fff,
primary-button-background-color: $p5js-pink,
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
@ -203,6 +210,10 @@ $themes: (
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
primary-button-color: #fff,
primary-button-background-color: $p5js-pink,
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,

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

@ -23,6 +23,14 @@
.collection-metadata__column--right {
align-self: flex-end;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.collection-metadata__column--right > * {
margin-top: #{10 / $base-font-size}rem;
}
.collection-metadata__name {
@ -44,13 +52,13 @@
}
.collection-metadata__user {
padding-top: #{12 / $base-font-size}rem;
padding-top: #{8 / $base-font-size}rem;
padding-left: #{8 / $base-font-size}rem;
font-size: 14px;
}
.collection-metadata__description {
padding-top: #{24 / $base-font-size}rem;
padding-top: #{8 / $base-font-size}rem;
text-align: left;
font-size: 14px;
}
@ -76,13 +84,13 @@
overflow: scroll;
}
.collection-add-button {
padding: #{24 / $base-font-size}rem;
text-align: center;
}
.collection-share {
text-align: right;
// padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
}
.collection-share__button {
@extend %button;
}
.collection-share__label {
@ -93,3 +101,8 @@
.collection-share .copyable-input {
padding-bottom: 0;
}
.collection-metadata__add-button {
@extend %primary-button;
flex-grow: 0;
}