Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/plus icon shortcut #22

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
+76 −12
Open

Feat/plus icon shortcut #22

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fdef9ea
Chore: include router in menubar, set up dropdown
jchirch Dec 11, 2024
ec2cc67
Feat: style dropdown and add routes
jchirch Dec 12, 2024
679a74e
Test: cypress testing for dropdown menu
jchirch Dec 12, 2024
df2c4c1
Fix: update prior cypress tests to work with dropdown
jchirch Dec 12, 2024
c9578a4
Feat: plus changes color when open
jchirch Dec 13, 2024
de75010
Fix: update path to create contact
jchirch Dec 13, 2024
2c9cd7d
Docs: add project name and contributors to readme
jchirch Dec 13, 2024
38655c4
Docs: establish contributor format
jchirch Dec 13, 2024
24bec4d
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into Fe…
jchirch Dec 13, 2024
fa033ba
Fix: incorrect title of it block
jchirch Dec 14, 2024
1614e42
Refactor: Add smooth transition to dropdown
jchirch Dec 14, 2024
684c141
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into Fe…
jchirch Dec 14, 2024
e667953
Refactor: ensure branch adheres to styleguide
jchirch Dec 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,11 +182,18 @@ Don't forget to give the project a star! Thanks again!

<p align="right">(<a href="#readme-top">back to top</a>)</p>

### Top contributors:
## Core Contributors:
<!--
HEY YOU!!!! Keep it in alphabetical by last name!!!
FORMAT: lastname, firstname
- github link
- linkedin link
-->

**Chirchirillo, Joe**
- [Github](https://github.com/jchirch)
- [LinkedIn](https://www.linkedin.com/in/joechirchirillo/)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You had me at "HEY YOU!!!!!" Great addition to the readme and instructions to boot!


<a href="https://github.com/github_username/repo_name/graphs/contributors">
<img src="https://contrib.rocks/image?repo=github_username/repo_name" alt="contrib.rocks image" />
</a>



Expand All @@ -204,7 +211,7 @@ Distributed under the MIT License. See `LICENSE.txt` for more information.

Your Name - [@twitter_handle](https://twitter.com/twitter_handle) - email@email_client.com

Project Link: [https://github.com/github_username/repo_name](https://github.com/github_username/repo_name)
Project Link: [Tracker](https://github.com/turingschool/tracker-crm-fe)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

Expand Down
35 changes: 29 additions & 6 deletions cypress/e2e/landingSpec.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('Landing page after logging in spec', () => {

cy.get('[href="https://www.google.com/search?q=papers"] >.m-auto').should('have.attr', 'src').should('include', 'VORK5CYII')

cy.get('[href="https://www.google.com/search?q=plus"] > .m-auto').should('have.attr', 'src').should('include', 'SuQmCC')
cy.get('button.m-auto > .m-auto').should('have.attr', 'src').should('include', 'SuQmCC')

cy.get('[href="https://www.google.com/search?q=account"] > .m-auto').should('have.attr', 'src').should('include', '/static/media/person-icon.7a1fafe972143cff67a1.png')

Expand All @@ -49,15 +49,38 @@ describe('Landing page after logging in spec', () => {
cy.url('match', 'https://www.google.com/search?q=papers');
cy.visit('http://localhost:3000/')

cy.get('[href="https://www.google.com/search?q=plus"]').click()
cy.url('match', 'https://www.google.com/search?q=plus');
cy.visit('http://localhost:3000/')

cy.get('[href="https://www.google.com/search?q=account"]').click()
cy.url('match', 'https://www.google.com/search?q=account');
cy.visit('http://localhost:3000/')

})


describe('DropDown Menu', () => {
it('has container for dropdown elements', () => {
cy.visit('http://localhost:3000/')
cy.get('button.m-auto > .m-auto').click()
cy.get('.dropDownPlus').should('exist');
})
it('should render dropdown menu with link to create new contact', () => {
cy.visit('http://localhost:3000/')
cy.get('button.m-auto > .m-auto').click()
cy.contains('Create New Contact').should('exist');
cy.get('.bg-cyan-600 > :nth-child(1) > a').click()
cy.url('match', 'http://localhost:3000/contacts/new');
})
it('should render dropdown menu with link to create new company', () => {
cy.visit('http://localhost:3000/')
cy.get('button.m-auto > .m-auto').click()
cy.contains('Create New Company').should('exist');
cy.get('.bg-cyan-600 > :nth-child(2) > a').click()
cy.url('match', 'http://localhost:3000/companies/new');
})
it('should render dropdown menu with link to create new contact', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should say job application instead of "new contact"

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks. Fixed.

cy.visit('http://localhost:3000/')
cy.get('button.m-auto > .m-auto').click()
cy.contains('Create New Job Application').should('exist');
cy.get('.bg-cyan-600 > :nth-child(3) > a').click()
cy.url('match', 'http://localhost:3000/jobapplications/new');
})
})
})
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

idk if i'm missing this in the tests but you are testing for the presence of dropdown elements, may be worth testing the isDropDownOpen state directly just to check it's being toggled as expected. I might of missed it in your code. Correct me if i'm wrong.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is the element seeing if the container toggles

Screenshot 2024-12-13 at 3 29 39 PM

And here are the three elements getting tested individually.

Screenshot 2024-12-13 at 3 30 23 PM

21 changes: 20 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added src/components/icons/plus-open.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 32 additions & 6 deletions src/components/layout/MenuBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,17 @@ import logo from '../../turing-logo-gray.png';
import person from '../../components/icons/person-icon.png';
import building from '../../components/icons/building-1062.png';
import plus from '../../components/icons/plus-small_4338829.png';
import plusOpen from '../../components/icons/plus-open.png';
import papers from '../../components/icons/documents-symbol_35920.png';
import { useState } from 'react';
import { Link } from 'react-router-dom';


function MenuBar() {
const [isDropDownOpen, setIsDropDownOpen] = useState(false)
const toggleDropDown = () => {
setIsDropDownOpen((previousState) => !previousState)
}

return (

Expand All @@ -32,15 +39,34 @@ function MenuBar() {
</a>
<a className="m-auto cursor-pointer" href="https://www.google.com/search?q=papers">

<img className="m-auto w-1/4 cursor-pointer" src={papers}>
</img>
<img className="m-auto w-1/4 cursor-pointer" src={papers}>
</img>
</a>

<a className="m-auto cursor-pointer" href="https://www.google.com/search?q=plus">
<div className='dropDownPlus'>
<button className="m-auto cursor-pointer" onClick={toggleDropDown}>
<img
className="m-auto w-1/4 cursor-pointer"
src={isDropDownOpen ? plusOpen : plus}
alt="Teal Plus Icon"
/>
</button>

{isDropDownOpen && (
<ul className="bg-cyan-600 m-4 shadow-md rounded-md">
<li className="p-2 hover:bg-gray-200 rounded text-center mb-2">
<Link to="/newContact">Create New Contact</Link>
</li>
<li className="p-2 hover:bg-gray-200 rounded text-center mb-2">
<Link to="/companies/new">Create New Company</Link>
</li>
<li className="p-2 hover:bg-gray-200 rounded text-center">
<Link to="/jobapplications/new">Create New Job Application</Link>
</li>
</ul>
)}
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a suggestion not a pressing fix : When the dropdown is opened or closed, adding a small animation or transition to enhance the user experience.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I completely agree, I attempted to find something on tailwind, but was unable to get a transition to work.
This is the tailwind code I attempted, but was unable to get a result.
className={`bg-cyan-600 m-4 shadow-md rounded-md transition-all duration-300 ease-in-out transform ${ isDropDownOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does tailwind offer an invisible and visible style where you can always render the elements but conditionally rendering the styles?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try this - I see it having a very smooth transition in and out

<div className='dropDownPlus'>
        <button className="m-auto cursor-pointer" onClick={toggleDropDown}>
          <img
            className="m-auto w-1/4 cursor-pointer"
            src={isDropDownOpen ? plusOpen : plus}
            alt="Teal Plus Icon"
          />
        </button>
        
        <ul
          className={`bg-cyan-600 m-4 shadow-md rounded-md transition-all duration-700 ease-in-out transform ${
            isDropDownOpen ? 'scale-100 opacity-100 visible' : 'scale-95 opacity-0 invisible'
          }`}
        >
          <li className="p-2 hover:bg-gray-200 rounded text-center mb-2">
            <Link to="/newContact">Create New Contact</Link>
          </li>
          <li className="p-2 hover:bg-gray-200 rounded text-center mb-2">
            <Link to="/companies/new">Create New Company</Link>
          </li>
          <li className="p-2 hover:bg-gray-200 rounded text-center">
            <Link to="/jobapplications/new">Create New Job Application</Link>
          </li>
        </ul>
      </div>
      ```


<img className="m-auto w-1/4 cursor-pointer" src={plus}>
</img>
</a>
<a className="m-auto cursor-pointer" href="https://www.google.com/search?q=account">

<img className="m-auto w-1/5 rounded-full bg-blue-200 cursor-pointer" src={person}>
Expand Down