From 32efc402983b4a8f6d14adfd95a7e7dd58981e60 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 10:19:06 -0300 Subject: [PATCH 1/7] :sparkles: make login/logout options on dropdown --- client/components/Dropdown.jsx | 16 ++++++++++------ client/components/mobile/IconButton.jsx | 8 ++++++-- client/modules/App/App.jsx | 2 +- client/modules/IDE/pages/MobileIDEView.jsx | 10 +++++++--- 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index bd2169b8..5da1fe70 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -58,23 +58,27 @@ const DropdownWrapper = styled.ul` `; // TODO: Add Icon to the left of the items in the menu -// const MaybeIcon = (Element, label) => Element && ; +const MaybeIcon = (Element, label) => Element && ; const Dropdown = ({ items, align }) => ( {/* className="nav__items-left" */} - {items && items.map(({ title, icon, href }) => ( + {items && items.map(({ + title, icon, href, action + }) => (
  • - - {/* {MaybeIcon(icon, `Navigate to ${title}`)} */} - {title} - + {MaybeIcon(icon, `Navigate to ${title}`)} + {href + ? {title} + : action()}>{title}} +
    • )) }     ); + Dropdown.propTypes = { align: PropTypes.oneOf(['left', 'right']), items: PropTypes.arrayOf(PropTypes.shape({ diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx index 08f05311..7085f8a1 100644 --- a/client/components/mobile/IconButton.jsx +++ b/client/components/mobile/IconButton.jsx @@ -17,7 +17,7 @@ const IconButton = (props) => { const Icon = icon; return (} + iconBefore={icon && } kind={Button.kinds.inline} focusable="false" {...otherProps} @@ -25,7 +25,11 @@ const IconButton = (props) => { }; IconButton.propTypes = { - icon: PropTypes.func.isRequired + icon: PropTypes.func +}; + +IconButton.defaultProps = { + icon: null }; export default IconButton; diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..2c960b8b 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,7 @@ class App extends React.Component { render() { return (
    - {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
    ); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index c33c6cda..c2a408cf 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -46,18 +46,20 @@ const NavItem = styled.li` position: relative; `; -const getNatOptions = (username = undefined) => +const getNavOptions = (username = undefined, logoutUser = () => {}) => (username ? [ { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` }, { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' }, { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, + { icon: PreferencesIcon, title: 'Logout', action: logoutUser, }, ] : [ { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' }, { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, + { icon: PreferencesIcon, title: 'Login', href: '/login', }, ] ); @@ -65,7 +67,7 @@ const MobileIDEView = (props) => { const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, user, params, - closeEditorOptions, showEditorOptions, + closeEditorOptions, showEditorOptions, logoutUser, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState } = props; @@ -75,7 +77,7 @@ const MobileIDEView = (props) => { const { username } = user; const [triggerNavDropdown, NavDropDown] = useAsModal(); @@ -267,6 +269,8 @@ MobileIDEView.propTypes = { username: PropTypes.string, }).isRequired, + logoutUser: PropTypes.func.isRequired, + getProject: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired, params: PropTypes.shape({ From 589bdd5a11f9fa813f580d5959b3ac279ecd40a4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 10:25:41 -0300 Subject: [PATCH 2/7] :lipstick: update styling for dropdown with component --- client/components/Dropdown.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index 5da1fe70..b0dfe0b2 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul` background-color: ${prop('Button.hover.background')}; color: ${prop('Button.hover.foreground')}; - & button, & a { - color: ${prop('Button.hover.foreground')}; - } + * { color: ${prop('Button.hover.foreground')}; } } li { @@ -48,17 +46,21 @@ const DropdownWrapper = styled.ul` align-items: center; & button, + & button span, & a { color: ${prop('primaryTextColor')}; width: 100%; text-align: left; + justify-content: left; padding: ${remSize(8)} ${remSize(16)}; } + + & button span { padding: 0px } } `; // TODO: Add Icon to the left of the items in the menu -const MaybeIcon = (Element, label) => Element && ; +// const MaybeIcon = (Element, label) => Element && ; const Dropdown = ({ items, align }) => ( @@ -67,7 +69,7 @@ const Dropdown = ({ items, align }) => ( title, icon, href, action }) => (
  • - {MaybeIcon(icon, `Navigate to ${title}`)} + {/* {MaybeIcon(icon, `Navigate to ${title}`)} */} {href ? {title} : action()}>{title}} From 114ab9f6c72160ae7305e0047c561effef1f9ff3 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 09:34:09 -0300 Subject: [PATCH 3/7] :lipstick: left-align dropdown elements --- client/components/Dropdown.jsx | 11 ++++++++--- client/modules/App/App.jsx | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index b0dfe0b2..e29da90a 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -48,11 +48,16 @@ const DropdownWrapper = styled.ul` & button, & button span, & a { - color: ${prop('primaryTextColor')}; - width: 100%; + padding: ${remSize(8)} ${remSize(16)}; + } + + * { text-align: left; justify-content: left; - padding: ${remSize(8)} ${remSize(16)}; + + color: ${prop('primaryTextColor')}; + width: 100%; + justify-content: flex-start; } & button span { padding: 0px } diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index 2c960b8b..af441a9d 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,7 @@ class App extends React.Component { render() { return (
    - {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
    ); From 3dc88d55eab1a796eda5964d0684c529710b1bfa Mon Sep 17 00:00:00 2001 From: Sundeep Chand Date: Fri, 14 Aug 2020 13:34:00 +0530 Subject: [PATCH 4/7] Changed color of popup stripe --- client/styles/abstracts/_variables.scss | 3 +++ client/styles/components/_quick-add.scss | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 80c924b1..46a8e434 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -88,6 +88,7 @@ $themes: ( nav-border-color: $middle-light, error-color: $p5js-pink, table-row-stripe-color: $medium-light, + quick-add-row-stripe-color: $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, + quick-add-row-stripe-color: $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, + quick-add-row-stripe-color: $darker, codefold-icon-open: url(../images/triangle-arrow-down-white.svg?byUrl), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg?byUrl), diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss index 838a1d65..d51b99d5 100644 --- a/client/styles/components/_quick-add.scss +++ b/client/styles/components/_quick-add.scss @@ -23,7 +23,7 @@ .quick-add__item:nth-child(odd) { @include themify() { - background: getThemifyVariable('table-row-stripe-color'); + background: getThemifyVariable('quick-add-row-stripe-color'); } } From a5a390d1340615d7e19323fededa0bcdfde2356b Mon Sep 17 00:00:00 2001 From: Sundeep Chand Date: Tue, 18 Aug 2020 23:24:21 +0530 Subject: [PATCH 5/7] Changed variable naming --- client/styles/abstracts/_variables.scss | 6 +++--- client/styles/components/_quick-add.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 46a8e434..d0f62b27 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -88,7 +88,7 @@ $themes: ( nav-border-color: $middle-light, error-color: $p5js-pink, table-row-stripe-color: $medium-light, - quick-add-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), @@ -164,7 +164,7 @@ $themes: ( nav-border-color: $middle-dark, error-color: $p5js-pink, table-row-stripe-color: $dark, - quick-add-row-stripe-color: $darker, + 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), @@ -238,7 +238,7 @@ $themes: ( nav-border-color: $middle-dark, error-color: $p5-contrast-pink, table-row-stripe-color: $dark, - quick-add-row-stripe-color: $darker, + 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), diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss index d51b99d5..95b09baf 100644 --- a/client/styles/components/_quick-add.scss +++ b/client/styles/components/_quick-add.scss @@ -23,7 +23,7 @@ .quick-add__item:nth-child(odd) { @include themify() { - background: getThemifyVariable('quick-add-row-stripe-color'); + background: getThemifyVariable('table-row-stripe-color-alternate'); } } From 5aa65029c6fdc1a401b0b74751028d0cdf701615 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 19 Aug 2020 15:50:26 -0400 Subject: [PATCH 6/7] Add border to QuickAdd table --- client/styles/components/_quick-add.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss index 95b09baf..75f93773 100644 --- a/client/styles/components/_quick-add.scss +++ b/client/styles/components/_quick-add.scss @@ -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 { From 4c65e6580c4e4b9eca41d25804ec551265bfd26c Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 19 Aug 2020 16:40:59 -0400 Subject: [PATCH 7/7] Fix scrolling for QuickAdd list --- .../modules/IDE/components/AddToCollectionList.jsx | 14 ++++++++------ .../IDE/components/AddToCollectionSketchList.jsx | 12 +++++++----- .../components/CollectionList/CollectionList.jsx | 10 ++++------ client/modules/User/components/Collection.jsx | 7 ++++--- 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx index e9417d3b..e003a896 100644 --- a/client/modules/IDE/components/AddToCollectionList.jsx +++ b/client/modules/IDE/components/AddToCollectionList.jsx @@ -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 ( -
    - - {this.getTitle()} - +
    +
    + + {this.getTitle()} + - {content} + {content} +
    ); } diff --git a/client/modules/IDE/components/AddToCollectionSketchList.jsx b/client/modules/IDE/components/AddToCollectionSketchList.jsx index d4173b4b..6abb9aad 100644 --- a/client/modules/IDE/components/AddToCollectionSketchList.jsx +++ b/client/modules/IDE/components/AddToCollectionSketchList.jsx @@ -72,11 +72,13 @@ class SketchList extends React.Component { } return ( -
    - - {this.getSketchesTitle()} - - {content} +
    +
    + + {this.getSketchesTitle()} + + {content} +
    ); } diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx index 1007ca97..3d4e1aa6 100644 --- a/client/modules/IDE/components/CollectionList/CollectionList.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx @@ -170,12 +170,10 @@ class CollectionList extends React.Component { closeOverlay={this.hideAddSketches} isFixedHeight > -
    - -
    + ) } diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 54e87518..abcd9ce5 100644 --- a/client/modules/User/components/Collection.jsx +++ b/client/modules/User/components/Collection.jsx @@ -398,9 +398,10 @@ class Collection extends React.Component { closeOverlay={this.hideAddSketches} isFixedHeight > -
    - -
    + ) }