Skip to content

Commit

Permalink
Merge d710bf3 into 7bd19ac
Browse files Browse the repository at this point in the history
  • Loading branch information
@phemonick
phemonick committed Oct 18, 2018
2 parents 7bd19ac + d710bf3 commit 5627ada
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 85 deletions.
4 changes: 2 additions & 2 deletions client/src/modules/CreateTeam/components/Form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ export const Form = ({
if (name.trim() && desc.trim()) {
showSubmitButton = true;
showDropDown = false;
teamName = formatWord(name).toLowerCase();
teamName = formatWord(name.trim()).toLowerCase();
slackDropdown = slackOptions(teamName);
ptDropdown = ptOptions(teamName);
githubDropdown = githubOptions(teamName);
}

if (project.trim()) {
teamName = formatWord(name).toLowerCase();
teamName = formatWord(name.trim()).toLowerCase();
projectName = getInitials(project).toLowerCase();
slackDropdown = slackOptions(teamName, projectName);
ptDropdown = ptOptions(teamName, projectName);
Expand Down
8 changes: 4 additions & 4 deletions client/src/modules/common/Modals/AddIntegration.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,28 @@ const AddIntegration = ({ isModalOpen, closeModal }) => (
<p className="">Select an integration to add</p>
<div className="integration-tools-container">
<div className="integration-tools">
<div className="integration-tool-name">
<div className="integration-tool-names">
<img className="integration-tool-icon" src={github} alt="git" />
<p className="">Github Repository</p>
</div>
<i className="fas fa-greater-than" />
</div>
<div className="integration-tools">
<div className="integration-tool-name">
<div className="integration-tool-names">
<img className="integration-tool-icon" src={pt} alt="git" />
<p className="">Pivotal Tracker</p>
</div>
<i className="fas fa-greater-than" />
</div>
<div className="integration-tools">
<div className="integration-tool-name">
<div className="integration-tool-names">
<img className="integration-tool-icon" src={slack} alt="git" />
<p className="">Slack Channel (private)</p>
</div>
<i className="fas fa-greater-than" />
</div>
<div className="integration-tools no-border">
<div className="integration-tool-name">
<div className="integration-tool-names">
<img className="integration-tool-icon" src={slack} alt="git" />
<p className="">Slack Channel (public)</p>
</div>
Expand Down
73 changes: 38 additions & 35 deletions client/src/toasts/VisualFeedback.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const logos = [
*/
const VisualFeedback = ({ response, modalState, isModalOpened }) => {
const allMessage = Object.entries(response);
allMessage.shift();

return (
<Modal
Expand All @@ -41,43 +42,45 @@ const VisualFeedback = ({ response, modalState, isModalOpened }) => {
contentLabel="Pop up Modal"
>
<div className="modal-container">
<header className="top-header"> <h4>Notification</h4>
<div className="icon-indicator-container">
<div className="icon-indicator">
<img className="notif-pass-icon" src={passed} />
<h6>Successful</h6>
</div>
<div className="icon-indicator">
<img className="notif-fail-icon" src={failed} />
<h6>Failed</h6>
</div>
</div>
<header className="top-header">
<h1>Status</h1>
</header>
<section>
{
allMessage.map((message, index) => {
const source = logos.find((logo) => logo.name === message[0]);
return message.length &&
<div key={index} className="notification-item">
<div className="notif-item-header">
<img className="notif-icon" src={source.link} />
<h4>{message[0]}</h4>
</div>
{
message[1].map((name, index) => (
<div key={index} className="notif-list">
{name.created ?
<img className="notif-pass-icon" src={passed} /> :
<img className="notif-fail-icon" src={failed} />
}
<h5>{name.name}</h5>
</div>
))
}
</div>;
})
}

<h5 className="created-team-h">Team <span className="slick-blue">{response.team[0].name}</span> has been successfully created</h5>
<section className="response-body">
<header className="response-top-header">
<h3>Result of completed integrations</h3>
</header>
<div className="integration-res-container">
{
allMessage.map((message, index) => {
const source = logos.find((logo) => logo.name === message[0]);
return message.length &&
<div key={index} className="notification-item">
<div className="notif-item-header">
<img className="notif-icon" src={source.link} />
<h4>{message[0]}</h4>
</div>
{
message[1].map((name, index) => (
<div key={index} className="notif-item-header">
<div className="notif-list">
{name.created ?
<img className="notif-pass-icon" src={passed} /> :
<img className="notif-fail-icon" src={failed} />
}
<div className="integration-tool-name">
<h6>{name.name}</h6>
<p>{name.created ? 'created' : 'failed'}</p>
</div>
</div>
</div>
))
}
</div>;
})
}
</div>
</section>
<footer className="notif-footer">
<button onClick={() => modalState(false)} className="btn">
Expand Down
16 changes: 9 additions & 7 deletions client/src/utils/conventions.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
export const githubOptions = (teamName, projectName = 'ah') => (
[
{ key: `${projectName}-${teamName}-frontend`, text: `${projectName}-${teamName}-frontend`, value: `${projectName}-${teamName}-frontend` },
{ key: `${projectName}-${teamName}-git`, text: `${projectName}-${teamName}`, value: `${projectName}-${teamName}` },
{ key: `${teamName}-${projectName}-github`, text: `${teamName}-${projectName}`, value: `${teamName}-${projectName}` },
{ key: `${projectName}-${teamName}-backend`, text: `${projectName}-${teamName}-backend`, value: `${projectName}-${teamName}-backend` }
{ key: `${projectName}-${teamName}-back`, text: `${projectName}-${teamName}-backend`, value: `${projectName}-${teamName}-backend` },
{ key: `${projectName}-${teamName}-front`, text: `${projectName}-${teamName}-frontend`, value: `${projectName}-${teamName}-frontend` },
{ key: `${teamName}-${projectName}-hub`, text: `${teamName}-${projectName}`, value: `${teamName}-${projectName}` },
{ key: `${teamName}-${projectName}-backend`, text: `${teamName}-${projectName}-backend`, value: `${teamName}-${projectName}-backend` },
{ key: `${teamName}-${projectName}-frontend`, text: `${teamName}-${projectName}-frontend`, value: `${teamName}-${projectName}-frontend` }
]
);

export const ptOptions = (teamName, projectName = 'ah') => (
[
{ key: `${projectName}-${teamName}-pt`, text: `${projectName}-${teamName}`, value: `${projectName}-${teamName}` },
{ key: `${teamName}-${projectName}-gen`, text: `${teamName}-${projectName}`, value: `${teamName}-${projectName}` }
{ key: `${teamName}-${projectName}-gen`, text: `${teamName}-${projectName}`, value: `${teamName}-${projectName}` },
{ key: `${projectName}-${teamName}-pt`, text: `${projectName}-${teamName}`, value: `${projectName}-${teamName}` }
]
);

export const slackOptions = (teamName, projectName = 'ah') => (
[
{ key: `${projectName}-${teamName}`, text: `${projectName}-${teamName}`, value: `${projectName}-${teamName}` },
{ key: `${teamName}-bots`, text: `${teamName}-bots`, value: `${teamName}-bots` },
{ key: `${teamName}-general`, text: `${teamName}-general`, value: `${teamName}-general` },
{ key: `${teamName}-standups`, text: `${teamName}-standups`, value: `${teamName}-standups` },
{ key: `${teamName}-bots`, text: `${teamName}-bots`, value: `${teamName}-bots` }
{ key: `${teamName}-standups`, text: `${teamName}-standups`, value: `${teamName}-standups` }
]
);
115 changes: 79 additions & 36 deletions client/styles/components/_create_team.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,88 +94,131 @@
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.9);
}
.modalStyle {
margin: 16% auto;
width: 36%;
margin: 11% auto;
width: 33%;
background: white;
overflow: auto;
border-radius: 4px;
outline: none;
padding: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.modal-container {
display: flex;
flex-direction: column;
padding: 0.5rem;

.top-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
align-self: center;
justify-content: center;
width: 70%;
padding: 12px;
border-bottom: 1px solid #DDDDDD;

h1 {
font-style: normal;
font-weight: bold;
line-height: normal;
font-size: 36px;
}
}
}

.icon-indicator-container {
display: flex;
justify-content: space-between;
width: 80%;
.integration-res-container {
display: flex;
justify-content: space-between;
width: 86%;
flex-wrap: wrap;
margin: auto;
padding: 0px 30px 10px 30px;
}

.icon-indicator {
display: flex;
align-items: center;
.slick-blue {
color: #3359DB;
}

h6 {
margin: 0 0.1rem;
}
}
}
.response-top-header {
background-color: #EEEEEE;
padding: 19px 0;
margin: 12px 0 18px 0;

h3 {
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 18px;
text-align: center;
}

}

.created-team-h {
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 13px;
text-align: center;
}

.notification-item {
margin-bottom: 1rem;
margin-bottom: 3rem;
width: 40%;

.notif-item-header {
display: flex;
align-items: center;

.notif-icon {
width: 2.7rem;
width: 2rem;
}
h4 {
margin: 0 0.6rem;
font-size: 2rem;
margin: 0 0.2rem;
font-size: 16px;
}
}

.notif-list {
display: flex;
align-items: center;
margin: 1px 0 2px 1px;

.notif-list {
display: flex;
align-items: center;
margin: 0.3rem 3rem;
.integration-tool-name {
display: flex;
flex-direction: column;
margin-left: 0.2rem;

h5 {
margin: 0 0.3rem;
font-size: 1.2rem;
h6 {
font-size: 12px;
margin: 0;
}
p {
font-size: 10px;
color: #9E9E9E;
}
}
}
}
}

.notif-pass-icon {
width: 1.7rem;
width: 1.2rem;
}

.notif-fail-icon {
width: 1.5rem;
width: 1rem;
}


.notif-footer {
display: flex;
justify-content: flex-end;
padding: 12px;
justify-content: center;
border-top: 1px solid #DDDDDD;


.btn {
padding: 0 28px;
padding: 0 35px;
}
}
2 changes: 1 addition & 1 deletion client/styles/components/_teams.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
border: none;
}

.integration-tool-name {
.integration-tool-names {
display: flex;
align-items: center;
}
Expand Down

0 comments on commit 5627ada

Please sign in to comment.