Skip to content

Commit

Permalink
New example interaction buttons
Browse files Browse the repository at this point in the history 
The interaction buttons were modified to better convey their respective usage and help the user understand the process and options better
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Oct 5, 2023
1 parent 83f20d9 commit d585042
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 47 deletions.
37 changes: 22 additions & 15 deletions packages/web-new/src/scripts/examples-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ const tmSearchResults = tmExamplesContainer.querySelector("#filtered-results")
*/
closeExamples.addEventListener("click", () => {
examplesMenu.classList.add("closed")
const exampleCards = document.querySelectorAll(".example")
exampleCards.forEach(card => {
if (card.classList.contains("open")) {
card.classList.toggle("open")
}
})
})

/**
Expand Down Expand Up @@ -260,7 +266,6 @@ async function getAllExamples(categoryId, thingType) {
exampleName.appendChild(exampleNameIcon)
const exampleNameTitle = document.createElement('p')
exampleNameTitle.innerText = example[1]["title"]
// exampleNameTitle.innerText = data['$title']
exampleName.appendChild(exampleNameTitle)
exampleContainer.appendChild(exampleName)

Expand All @@ -287,31 +292,33 @@ async function getAllExamples(categoryId, thingType) {
exampleBtnUse.classList.add("example__btn--use")
exampleBtns.appendChild(exampleBtnUse)

const exampleBtnShow = document.createElement('button')
exampleBtnShow.classList.add("example__btn--show")
exampleBtns.appendChild(exampleBtnShow)

const exampleIconShow = document.createElement('i')
exampleIconShow.classList.add("fa-solid", "fa-eye")
exampleBtnShow.appendChild(exampleIconShow)

const exampleTxtShow = document.createElement('p')
exampleTxtShow.innerText = "Show Snipet"
exampleBtnShow.appendChild(exampleTxtShow)

const exampleIconUse = document.createElement('i')
exampleIconUse.classList.add("fa-solid", "fa-file-pen")
exampleIconUse.classList.add("fa-solid", "fa-file-import")
exampleBtnUse.appendChild(exampleIconUse)

const exampleTxtUse = document.createElement('p')
exampleTxtUse.innerText = "Use as Template"
exampleTxtUse.innerText = "Apply"
exampleBtnUse.appendChild(exampleTxtUse)

const exampleBtnCancel = document.createElement('button')
exampleBtnCancel.classList.add("example__btn--cancel")
exampleBtns.appendChild(exampleBtnCancel)

const exampleTxtCancel = document.createElement('p')
exampleTxtCancel.innerText = "Cancel"
exampleBtnCancel.appendChild(exampleTxtCancel)


//Listener to generate an editor with the examples information
exampleBtnUse.addEventListener('click', () => {
getTemplateData(example[1]["path"])
exampleName.parentElement.classList.toggle("open")
})

//Listener to generate an editor with the examples information
exampleBtnCancel.addEventListener('click', () => {
exampleName.parentElement.classList.toggle("open")
})
}
}

Expand Down
47 changes: 29 additions & 18 deletions packages/web-new/src/styles/_examples-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,6 @@
text-transform: capitalize;
}

// .thing-category{
// width: fit-content;
// }

.search-bar {
width: 100%;
overflow: hidden;
Expand Down Expand Up @@ -286,38 +282,53 @@

&__btn {
display: flex;
width: 100%;
gap: 2rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms, ;

button {
padding: .5rem 1.5rem;
width: 100%;
padding: .75rem 1.5rem;
border-radius: 5px;
border: 1px solid var(--clr-neutral-300);
background-color: var(--clr-neutral-50);
font-family: var(--ff-primary);
color: var(--clr-neutral-900);
font-size: var(--fs-p);
font-weight: var(--fw-bold);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 250ms ease-in-out;

&:hover {
background-color: var(--clr-neutral-300);
}
transition: all 250ms ease-in-out;

p {
font-size: inherit;
color: inherit;
font-family: inherit;
font-weight: var(--fw-bold);
}

i {
font-size: inherit;
margin-right: 1rem;
font-size: var(--fs-p);
}
}

&--use{
background-color: var(--clr-primary-500);
border: none;
color: var(--clr-neutral-50);
&:hover {
background-color: var(--clr-primary-700);
}
}

&--cancel{
background-color: var(--clr-neutral-50);
border: 2px solid var(--clr-primary-500);
color: var(--clr-primary-500);
&:hover {
background-color: var(--clr-primary-700);
border-color: var(--clr-primary-700);
color: var(--clr-neutral-50);
}
}
}
Expand All @@ -343,7 +354,7 @@
}

.example__btn {
height: 3rem;
height: 3.5rem;
opacity: 1;
transition: height 250ms ease-in-out 0s, opacity 200ms ease-in-out 250ms;
}
Expand Down
40 changes: 27 additions & 13 deletions packages/web-new/src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1764,36 +1764,50 @@ main .console {
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn {
display: flex;
width: 100%;
gap: 2rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn button, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn button {
padding: 0.5rem 1.5rem;
width: 100%;
padding: 0.75rem 1.5rem;
border-radius: 5px;
border: 1px solid var(--clr-neutral-300);
background-color: var(--clr-neutral-50);
font-family: var(--ff-primary);
color: var(--clr-neutral-900);
font-size: var(--fs-p);
font-weight: var(--fw-bold);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn button:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn button:hover {
background-color: var(--clr-neutral-300);
transition: all 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn button p, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn button p {
font-size: inherit;
color: inherit;
font-family: inherit;
font-weight: var(--fw-bold);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn button i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn button i {
font-size: inherit;
margin-right: 1rem;
font-size: var(--fs-p);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn--use, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn--use {
background-color: var(--clr-primary-500);
border: none;
color: var(--clr-neutral-50);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn--use:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn--use:hover {
background-color: var(--clr-primary-700);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn--cancel, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn--cancel {
background-color: var(--clr-neutral-50);
border: 2px solid var(--clr-primary-500);
color: var(--clr-primary-500);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__btn--cancel:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__btn--cancel:hover {
background-color: var(--clr-primary-700);
border-color: var(--clr-primary-700);
color: var(--clr-neutral-50);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__name {
border-bottom: 2px solid var(--clr-primary-500);
Expand All @@ -1810,7 +1824,7 @@ main .console {
transition: height 250ms ease-in-out 0s, margin 250ms ease-in-out 0s, opacity 200ms ease-in-out 250ms;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__btn, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__btn {
height: 3rem;
height: 3.5rem;
opacity: 1;
transition: height 250ms ease-in-out 0s, opacity 200ms ease-in-out 250ms;
}
Expand Down
Loading

0 comments on commit d585042

Please sign in to comment.