Skip to content

Commit

Permalink
Merge pull request #540 from SergioCasCeb/new-examples-feel-sergio
Browse files Browse the repository at this point in the history 
New examples feel sergio
  • Loading branch information
@egekorkan
egekorkan authored Dec 11, 2023
2 parents 1b83a3b + 1ee98da commit ef25c6a
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 50 deletions.
31 changes: 20 additions & 11 deletions packages/web-new/src/scripts/examples-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
* for the examples menu, such as displaying all the TD and TM examples,
* as well as filtering them by categories, a search function to find
* specific examples and a use a template example to directly added to an editor where it can be utilized and modified.
* In the future the option to see short snipets of the most important part of the example, might also be implemented.
* In the future the option to see short snippets of the most important part of the example, might also be implemented.
*/

import { createIde, ideCount, tabsLeft } from "./editor"
Expand Down Expand Up @@ -262,6 +262,7 @@ async function getAllExamples(categoryId, thingType) {
//create example title
const exampleName = document.createElement('div')
exampleName.classList.add("example__header--name")
exampleName.setAttribute("title", "Expand")
const exampleNameIcon = document.createElement('div')
exampleNameIcon.classList.add("example-icon")

Expand All @@ -287,19 +288,27 @@ async function getAllExamples(categoryId, thingType) {
// Append the icon container to the name container
exampleName.appendChild(exampleNameIcon)


//Create, populate and append the example title
const exampleNameTitle = document.createElement('p')
exampleNameTitle.innerText = example[1]["title"]
exampleName.appendChild(exampleNameTitle)

// //Create, populate and append the example title toggle arrow
const exampleNameArrow = document.createElement('i')
exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow")
exampleName.appendChild(exampleNameArrow)

//Append the whole name component to the header component
exampleHeader.appendChild(exampleName)

//Create the example quick access button
const quickButton = document.createElement('button')
quickButton.classList.add("example__header--quick")
const quickBtn = document.createElement('button')
quickBtn.classList.add("example__header--quick")
quickBtn.setAttribute("title", "Use")
const quickButtonIcon = document.createElement('i')
quickButtonIcon.classList.add("fa-solid", "fa-file-import")
quickButton.appendChild(quickButtonIcon)
exampleHeader.appendChild(quickButton)
quickBtn.appendChild(quickButtonIcon)
exampleHeader.appendChild(quickBtn)


//add event listener to show example information and interaction btns
Expand All @@ -308,7 +317,7 @@ async function getAllExamples(categoryId, thingType) {
})

//Importing example to the monaco editor with the quick buttons
quickButton.addEventListener('click', () => {
quickBtn.addEventListener('click', () => {
getTemplateData(example[1]["path"])
closeCards()
tabsLeft.forEach(tab => {
Expand Down Expand Up @@ -369,7 +378,7 @@ async function getAllExamples(categoryId, thingType) {


/**
* Gets the example data to pupulate the monaco editor and allow the user to use it as a template
* Gets the example data to populate the monaco editor and allow the user to use it as a template
*/
async function getTemplateData(path) {
const res = await fetch(path)
Expand All @@ -380,7 +389,7 @@ async function getTemplateData(path) {

/**
* Listener when search input is used in the examples menu
* Gets all the examples that match the inputed text to the title and
* Gets all the examples that match the inputted text to the title and
* description of the examples, clones them and adds them to the
* search result category
* @param {event} e - submit event
Expand All @@ -405,15 +414,15 @@ filterForm.addEventListener("submit", (e) => {
categories.forEach(category => {
const examples = [...category.children[2].children]
examples.forEach(example => {
//If value of the search input mataches the title or description
//If value of the search input matches the title or description
//clone it, append it and add the respective event listeners
if ((example.firstChild.children[0].children[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
let clonedElement = example.cloneNode(true)
//Open the card when clicking on the name
clonedElement.children[0].children[0].addEventListener('click', () => {
clonedElement.classList.toggle("open")
})
//Opning the example when clicking on the quick access button
//Opening the example when clicking on the quick access button
clonedElement.children[0].children[1].addEventListener('click', () => {
example.querySelector(".example__btn--use").click()
closeCards()
Expand Down
82 changes: 60 additions & 22 deletions packages/web-new/src/styles/_examples-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@
}
}

.td-text, .tm-text{
.td-text,
.tm-text {
position: absolute;
height: 100%;
z-index: 1;
Expand All @@ -110,7 +111,7 @@
transition: color 250ms ease-in-out 200ms;
}

.tm-text{
.tm-text {
content: 'TM';
right: 1rem;
z-index: 1;
Expand All @@ -124,12 +125,12 @@
left: 3.2rem;
}

& ~ .td-text{
&~.td-text {
color: var(--clr-neutral-200);
transition: color 250ms ease-in-out;
}

& ~ .tm-text{
&~.tm-text {
color: var(--clr-neutral-900);
transition: color 250ms ease-in-out 200ms;
}
Expand Down Expand Up @@ -322,15 +323,15 @@
background-color: var(--clr-neutral-50);
border-radius: 5px;
width: fit-content;
padding: .5rem;
padding: .75rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;
position: relative;

&__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
justify-content: center;

&--name {
flex: 1;
Expand All @@ -339,15 +340,15 @@
align-items: center;
justify-content: center;
gap: 1rem;
margin: 0 1rem;
margin: 0 4rem;
cursor: pointer;
transition: all 250ms ease-in-out;

.example-icon{
.example-icon {
width: 1.8rem;

svg{
path{
svg {
path {
fill: var(--clr-primary-500);
}
}
Expand All @@ -356,25 +357,54 @@
p {
font-weight: var(--fw-bold);
}

.toggle-arrow {
font-size: var(--fs-footer);
transform: rotate(0);
transition: transform 250ms ease-in-out 250ms;
}
}

&--quick {
width: fit-content;
background-color: transparent;
opacity: 0;
position: absolute;
top: .25rem;
right: .5rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--clr-neutral-50);
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;
transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out;

i {
font-size: var(--fs-i);
color: var(--clr-primary-500);
transition: color 250ms ease-in-out 250ms;
color: var(--clr-neutral-50);
transition: color 250ms ease-in-out;
}
}
}

&:hover {
box-shadow: 0px 0px 10px 0px var(--clr-shadow);

.example__header {

&--quick {

opacity: 1;

&:hover {
i {
color: var(--clr-primary-700);
color: var(--clr-neutral-300);
}

&:hover {
background-color: var(--clr-neutral-100);

i {
color: var(--clr-neutral-900);
}
}
}
}
Expand All @@ -400,18 +430,17 @@
opacity: 0;
font-size: var(--fs-p);
line-height: var(--lh-sub-header);
max-width: 50ch;
max-width: 60ch;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 1rem;
transition: height 250ms ease-in-out 250ms, margin 250ms ease-in-out 250ms, opacity 250ms ease-in-out 0ms;

}

&__btn {
display: flex;
width: 100%;
gap: 2rem;
gap: .5rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms;
Expand Down Expand Up @@ -466,6 +495,15 @@

.example.open {

.example__header {
&--name {
.toggle-arrow {
transform: rotate(-90deg);
transition: transform 250ms ease-in-out 0s;
}
}
}

.example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
Expand Down
59 changes: 43 additions & 16 deletions packages/web-new/src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1759,7 +1759,8 @@ main .console {
place-items: center;
transition: left 500ms var(--trans-bouncy);
}
.examples-menu .examples-menu-container__filter .thing-type-toggle .td-text, .examples-menu .examples-menu-container__filter .thing-type-toggle .tm-text {
.examples-menu .examples-menu-container__filter .thing-type-toggle .td-text,
.examples-menu .examples-menu-container__filter .thing-type-toggle .tm-text {
position: absolute;
height: 100%;
z-index: 1;
Expand Down Expand Up @@ -1964,15 +1965,15 @@ main .console {
border-radius: 5px;
width: -moz-fit-content;
width: fit-content;
padding: 0.5rem;
padding: 0.75rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;
position: relative;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
justify-content: center;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name {
flex: 1;
Expand All @@ -1981,7 +1982,8 @@ main .console {
align-items: center;
justify-content: center;
gap: 1rem;
margin: 0 1rem;

margin: 0 4rem;
cursor: pointer;
transition: all 250ms ease-in-out;
}
Expand All @@ -1994,22 +1996,43 @@ main .console {
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name p, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name p {
font-weight: var(--fw-bold);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name .toggle-arrow, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name .toggle-arrow {
font-size: var(--fs-footer);
transform: rotate(0);
transition: transform 250ms ease-in-out 250ms;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick {
width: -moz-fit-content;
width: fit-content;
background-color: transparent;
opacity: 0;
position: absolute;
top: 0.25rem;
right: 0.5rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--clr-neutral-50);
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;
transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick i {
font-size: var(--fs-i);
color: var(--clr-primary-500);
transition: color 250ms ease-in-out 250ms;
color: var(--clr-neutral-50);
transition: color 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick:hover i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover i {
color: var(--clr-primary-700);
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover {
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover .example__header--quick, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover .example__header--quick {
opacity: 1;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover .example__header--quick i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover .example__header--quick i {
color: var(--clr-neutral-300);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover .example__header--quick:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover .example__header--quick:hover {
background-color: var(--clr-neutral-100);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover .example__header--quick:hover i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover .example__header--quick:hover i {
color: var(--clr-neutral-900);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover {
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
Expand All @@ -2029,7 +2052,7 @@ main .console {
opacity: 0;
font-size: var(--fs-p);
line-height: var(--lh-sub-header);
max-width: 50ch;
max-width: 60ch;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 1rem;
Expand All @@ -2038,7 +2061,7 @@ 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;
gap: 0.5rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms;
Expand Down Expand Up @@ -2082,6 +2105,10 @@ main .console {
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__header--name .toggle-arrow, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__header--name .toggle-arrow {
transform: rotate(-90deg);
transition: transform 250ms ease-in-out 0s;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
Expand Down
Loading

0 comments on commit ef25c6a

Please sign in to comment.