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'; import QuickAddList from './QuickAddList';
const projectInCollection = (project, collection) => 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 { class CollectionList extends React.Component {
constructor(props) { constructor(props) {
@ -81,12 +81,14 @@ class CollectionList extends React.Component {
} }
return ( return (
<div className="quick-add-wrapper"> <div className="collection-add-sketch">
<Helmet> <div className="quick-add-wrapper">
<title>{this.getTitle()}</title> <Helmet>
</Helmet> <title>{this.getTitle()}</title>
</Helmet>
{content} {content}
</div>
</div> </div>
); );
} }

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

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

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

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

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

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

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

@ -88,6 +88,7 @@ $themes: (
nav-border-color: $middle-light, nav-border-color: $middle-light,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: $medium-light, 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-open: url(../images/triangle-arrow-down.svg?byUrl),
codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl), codefold-icon-closed: url(../images/triangle-arrow-right.svg?byUrl),
@ -163,6 +164,7 @@ $themes: (
nav-border-color: $middle-dark, nav-border-color: $middle-dark,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: $dark, table-row-stripe-color: $dark,
table-row-stripe-color-alternate: $darker,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl), codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl),
@ -236,6 +238,7 @@ $themes: (
nav-border-color: $middle-dark, nav-border-color: $middle-dark,
error-color: $p5-contrast-pink, error-color: $p5-contrast-pink,
table-row-stripe-color: $dark, table-row-stripe-color: $dark,
table-row-stripe-color-alternate: $darker,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl), codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl),
codefold-icon-closed: url(../images/triangle-arrow-right-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 { .quick-add-wrapper {
min-width: #{600 / $base-font-size}rem; min-width: #{600 / $base-font-size}rem;
overflow-y: scroll; padding: #{24 / $base-font-size}rem;
height: 100%;
} }
.quick-add { .quick-add {
width: auto; 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 { .quick-add__item {
@ -23,7 +28,7 @@
.quick-add__item:nth-child(odd) { .quick-add__item:nth-child(odd) {
@include themify() { @include themify() {
background: getThemifyVariable('table-row-stripe-color'); background: getThemifyVariable('table-row-stripe-color-alternate');
} }
} }