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

Merge pull request #1557 from SundeepChand/bugfix/popupstyle

Browse source 
Fixed "Add Sketch to Collection" Popup styling bug on Dark and High Contrast themes
This commit is contained in:
Cassie Tarakajian 2020-08-19 16:55:00 -04:00 committed by GitHub
commit 45a4e54e80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/modules/IDE/components/AddToCollectionList.jsx
View file

@ -14,7 +14,7 @@ import Loader from '../../App/components/loader';
import QuickAddList from './QuickAddList';
const projectInCollection = (project, collection) =>
collection.items.find(item => item.project.id === project.id) != null;
collection.items.find(item => item.projectId === project.id) != null;
class CollectionList extends React.Component {
constructor(props) {
@ -81,12 +81,14 @@ class CollectionList extends React.Component {
}
return (
<div className="quick-add-wrapper">
<Helmet>
<title>{this.getTitle()}</title>
</Helmet>
<div className="collection-add-sketch">
<div className="quick-add-wrapper">
<Helmet>
<title>{this.getTitle()}</title>
</Helmet>
{content}
{content}
</div>
</div>
);
}

12
client/modules/IDE/components/AddToCollectionSketchList.jsx
View file

@ -72,11 +72,13 @@ class SketchList extends React.Component {
}
return (
<div className="quick-add-wrapper">
<Helmet>
<title>{this.getSketchesTitle()}</title>
</Helmet>
{content}
<div className="collection-add-sketch">
<div className="quick-add-wrapper">
<Helmet>
<title>{this.getSketchesTitle()}</title>
</Helmet>
{content}
</div>
</div>
);
}

10
client/modules/IDE/components/CollectionList/CollectionList.jsx
View file

@ -170,12 +170,10 @@ class CollectionList extends React.Component {
closeOverlay={this.hideAddSketches}
isFixedHeight
>
<div className="collection-add-sketch">
<AddToCollectionSketchList
username={this.props.username}
collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
/>
</div>
<AddToCollectionSketchList
username={this.props.username}
collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
/>
</Overlay>
)
}

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

@ -398,9 +398,10 @@ class Collection extends React.Component {
closeOverlay={this.hideAddSketches}
isFixedHeight
>
<div className="collection-add-sketch">
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
</div>
<AddToCollectionSketchList
username={this.props.username}
collection={this.props.collection}
/>
</Overlay>
)
}

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

@ -88,6 +88,7 @@ $themes: (
nav-border-color: $middle-light,
error-color: $p5js-pink,
table-row-stripe-color: $medium-light,
table-row-stripe-color-alternate: $medium-light,
codefold-icon-open: url(../images/triangle-arrow-down.svg?byUrl),
codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
@ -163,6 +164,7 @@ $themes: (
nav-border-color: $middle-dark,
error-color: $p5js-pink,
table-row-stripe-color: $dark,
table-row-stripe-color-alternate: $darker,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
@ -236,6 +238,7 @@ $themes: (
nav-border-color: $middle-dark,
error-color: $p5-contrast-pink,
table-row-stripe-color: $dark,
table-row-stripe-color-alternate: $darker,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),

11
client/styles/components/_quick-add.scss
View file

@ -1,11 +1,16 @@
.quick-add-wrapper {
min-width: #{600 / $base-font-size}rem;
overflow-y: scroll;
padding: #{24 / $base-font-size}rem;
height: 100%;
}
.quick-add {
width: auto;
padding: #{24 / $base-font-size}rem;
overflow-y: scroll;
height: 100%;
@include themify() {
border: 1px solid getThemifyVariable('modal-border-color');
}
}
.quick-add__item {
@ -23,7 +28,7 @@
.quick-add__item:nth-child(odd) {
@include themify() {
background: getThemifyVariable('table-row-stripe-color');
background: getThemifyVariable('table-row-stripe-color-alternate');
}
}