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

Added autoOpen items on hover (#900)

Browse source 
* AutoOpen Header

* removed nav heading

* Fixed #908

* Fixed Styles

* Fixed styles

* Refactor editor

* Issues Fixed

* keyup -> keyown
This commit is contained in:
siddhant 2019-03-27 22:20:55 +05:30 committed by Cassie Tarakajian
parent 8a8c01f0cb
commit 9433d188fc
2 changed files with 115 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
client/components/Nav.jsx
View file

@ -28,14 +28,16 @@ class Nav extends React.PureComponent {
this.clearHideTimeout = this.clearHideTimeout.bind(this); this.clearHideTimeout = this.clearHideTimeout.bind(this);
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this);
this.closeDropDown = this.closeDropDown.bind(this);
} }
componentWillMount() { componentDidMount() {
document.addEventListener('mousedown', this.handleClick, false); document.addEventListener('mousedown', this.handleClick, false);
document.addEventListener('keydown', this.closeDropDown, false);
} }
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClick, false); document.removeEventListener('mousedown', this.handleClick, false);
document.removeEventListener('keydown', this.closeDropDown, false);
} }
setDropdown(dropdown) { setDropdown(dropdown) {
@ -44,8 +46,17 @@ class Nav extends React.PureComponent {
}); });
} }
closeDropDown(e) {
if (e.keyCode === 27) {
this.setDropdown('none');
}
}
handleClick(e) { handleClick(e) {
if (this.node.contains(e.target)) { if (!this.node) {
return;
}
if (this.node && this.node.contains(e.target)) {
return; return;
} }
@ -124,18 +135,16 @@ class Nav extends React.PureComponent {
onClick={this.toggleDropdown.bind(this, 'file')} onClick={this.toggleDropdown.bind(this, 'file')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
onMouseOver={() => {
if (this.state.dropdownOpen !== 'none') {
this.setDropdown('file');
}
}}
> >
<span className="nav__item-header">File</span> <span className="nav__item-header">File</span>
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<button
onClick={this.toggleDropdown.bind(this, 'file')}
className="nav__dropdown-heading"
>
<span>File</span>
<InlineSVG src={triangleUrl} />
</button>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => { onClick={() => {
@ -239,18 +248,16 @@ class Nav extends React.PureComponent {
onClick={this.toggleDropdown.bind(this, 'edit')} onClick={this.toggleDropdown.bind(this, 'edit')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
onMouseOver={() => {
if (this.state.dropdownOpen !== 'none') {
this.setDropdown('edit');
}
}}
> >
<span className="nav__item-header">Edit</span> <span className="nav__item-header">Edit</span>
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown" >
<button
onClick={this.toggleDropdown.bind(this, 'edit')}
className="nav__dropdown-heading"
>
<span>Edit</span>
<InlineSVG src={triangleUrl} />
</button>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => { onClick={() => {
@ -310,18 +317,16 @@ class Nav extends React.PureComponent {
onClick={this.toggleDropdown.bind(this, 'sketch')} onClick={this.toggleDropdown.bind(this, 'sketch')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
onMouseOver={() => {
if (this.state.dropdownOpen !== 'none') {
this.setDropdown('sketch');
}
}}
> >
<span className="nav__item-header">Sketch</span> <span className="nav__item-header">Sketch</span>
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<button
onClick={this.toggleDropdown.bind(this, 'sketch')}
className="nav__dropdown-heading"
>
<span>Sketch</span>
<InlineSVG src={triangleUrl} />
</button>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => { onClick={() => {
@ -405,18 +410,16 @@ class Nav extends React.PureComponent {
onClick={this.toggleDropdown.bind(this, 'help')} onClick={this.toggleDropdown.bind(this, 'help')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
onMouseOver={() => {
if (this.state.dropdownOpen !== 'none') {
this.setDropdown('help');
}
}}
> >
<span className="nav__item-header">Help & Feedback</span> <span className="nav__item-header">Help & Feedback</span>
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<button
onClick={this.toggleDropdown.bind(this, 'help')}
className="nav__dropdown-heading"
>
<span>Help & Feedback</span>
<InlineSVG src={triangleUrl} />
</button>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onFocus={this.handleFocus.bind(this, 'help')} onFocus={this.handleFocus.bind(this, 'help')}
@ -485,18 +488,16 @@ class Nav extends React.PureComponent {
onClick={this.toggleDropdown.bind(this, 'account')} onClick={this.toggleDropdown.bind(this, 'account')}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onFocus={this.clearHideTimeout} onFocus={this.clearHideTimeout}
onMouseOver={() => {
if (this.state.dropdownOpen !== 'none') {
this.setDropdown('account');
}
}}
> >
My Account My Account
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} /> <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<button
onClick={this.toggleDropdown.bind(this, 'account')}
className="nav__dropdown-heading"
>
<span>My Account</span>
<InlineSVG src={triangleUrl} />
</button>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<Link <Link
to={`/${this.props.user.username}/sketches`} to={`/${this.props.user.username}/sketches`}

120
client/styles/components/_nav.scss
View file

@ -1,21 +1,24 @@
.nav { .nav {
height: #{42 / $base-font-size}rem; height: #{42 / $base-font-size}rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); @include themify() {
} border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
& button { & button {
padding: 0; padding: 0;
} }
} }
.nav__items-left, .nav__items-right { .nav__items-left,
list-style: none; .nav__items-right {
display: flex; list-style: none;
flex-direction: row; display: flex;
justify-content: flex-end; flex-direction: row;
justify-content: flex-end;
height: 100%; height: 100%;
align-items: center; align-items: center;
} }
@ -29,20 +32,23 @@
} }
.nav__item { .nav__item {
position: relative; position: relative;
padding: 0 #{10 / $base-font-size}rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
& button {
padding: #{12 / $base-font-size}rem #{10 / $base-font-size}rem;
}
} }
.nav__item:first-child { .nav__item:first-child {
padding-left: #{15 / $base-font-size}rem; padding-left: #{15 / $base-font-size}rem;
} }
.nav__item:last-child { .nav__item:last-child {
padding-right: #{15 / $base-font-size}rem; padding-right: #{15 / $base-font-size}rem;
} }
.nav__item-header { .nav__item-header {
@ -55,50 +61,57 @@
color: getThemifyVariable('nav-hover-color'); color: getThemifyVariable('nav-hover-color');
} }
} }
.nav__item-header-triangle polygon { .nav__item-header-triangle polygon {
@include themify() { @include themify() {
fill: getThemifyVariable('nav-hover-color'); fill: getThemifyVariable('nav-hover-color');
} }
} }
} }
.nav__dropdown { .nav__dropdown {
@include themify() { @include themify() {
background-color: map-get($theme-map, 'modal-background-color'); background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color'); border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color'); color: getThemifyVariable('dropdown-color');
} }
display: none; display: none;
text-align: left; text-align: left;
width: #{180 / $base-font-size}rem; width: #{180 / $base-font-size}rem;
.nav__item--open & {
display: flex; .nav__item--open & {
position: absolute; display: flex;
flex-direction: column; position: absolute;
top: 4px; flex-direction: column;
left: 0; top: #{40 / $base-font-size}rem;
height: auto; left: 0;
} height: auto;
}
z-index: 9999; z-index: 9999;
border-radius: #{6 / $base-font-size}rem; border-radius: #{6 / $base-font-size}rem;
border-top-left-radius: 0px;
} }
.nav__items-right { .nav__items-right {
padding-right: #{20 / $base-font-size}rem; padding-right: #{20 / $base-font-size}rem;
& .nav__dropdown { & .nav__dropdown {
width: #{121 / $base-font-size}rem; width: #{121 / $base-font-size}rem;
} }
} }
.nav__item-spacer { .nav__item-spacer {
@include themify() { @include themify() {
color: map-get($theme-map, 'inactive-text-color'); color: map-get($theme-map, 'inactive-text-color');
margin: 0 #{8 / $base-font-size}rem; margin: 0 #{8 / $base-font-size}rem;
} }
} }
.nav__dropdown a, button { .nav__dropdown a,
button {
@include themify() { @include themify() {
color: getThemifyVariable('secondary-text-color'); color: getThemifyVariable('secondary-text-color');
} }
@ -116,32 +129,37 @@
.nav__dropdown-heading { .nav__dropdown-heading {
@include themify() { @include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
} }
height: #{(42 - 5) / $base-font-size}rem; height: #{(42 - 5) / $base-font-size}rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0 #{16 / $base-font-size}rem; margin: 0 #{16 / $base-font-size}rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
span { span {
@include themify() { @include themify() {
color: getThemifyVariable('nav-hover-color'); color: getThemifyVariable('nav-hover-color');
} }
} }
polygon { polygon {
@include themify() { @include themify() {
fill: getThemifyVariable('nav-hover-color'); fill: getThemifyVariable('nav-hover-color');
} }
} }
} }
} }
.nav__dropdown-heading a, .nav__dropdown-heading a:hover { .nav__dropdown-heading a,
.nav__dropdown-heading a:hover {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
} }
cursor: default; cursor: default;
width: 100%; width: 100%;
} }
@ -158,24 +176,30 @@
align-items: center; align-items: center;
padding: 0 #{16 / $base-font-size}rem; padding: 0 #{16 / $base-font-size}rem;
cursor: pointer; cursor: pointer;
& button, & a {
& button,
& a {
@include themify() { @include themify() {
color: getThemifyVariable('dropdown-color'); color: getThemifyVariable('dropdown-color');
} }
} }
&:hover { &:hover {
@include themify() { @include themify() {
background-color: getThemifyVariable('button-background-hover-color'); background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color') color: getThemifyVariable('button-hover-color')
} }
& button, & a {
& button,
& a {
@include themify() { @include themify() {
color: getThemifyVariable('button-hover-color'); color: getThemifyVariable('button-hover-color');
} }
} }
} }
& button, & a { & button,
& a {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -185,7 +209,10 @@
} }
.nav__dropdown-item:last-child { .nav__dropdown-item:last-child {
border-radius: 0 0 #{6 / $base-font-size}rem #{6 / $base-font-size}rem; border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
}
.nav__dropdown-item:first-child {
border-radius: 0 #{5 / $base-font-size}rem 0 0;
} }
.nav__announce { .nav__announce {
@ -207,6 +234,7 @@
position: relative; position: relative;
height: #{42 / $base-font-size}rem; height: #{42 / $base-font-size}rem;
width: #{56 / $base-font-size}rem; width: #{56 / $base-font-size}rem;
& span { & span {
position: absolute; position: absolute;
} }
@ -215,12 +243,14 @@
.nav__keyboard-shortcut { .nav__keyboard-shortcut {
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
font-family: Inconsololata, monospace; font-family: Inconsololata, monospace;
@include themify() { @include themify() {
color: getThemifyVariable('keyboard-shortcut-color'); color: getThemifyVariable('keyboard-shortcut-color');
} }
.nav__dropdown-item:hover & { .nav__dropdown-item:hover & {
@include themify() { @include themify() {
color: getThemifyVariable('button-hover-color'); color: getThemifyVariable('button-hover-color');
} }
} }
} }