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

Jump to bottom

New examples feel sergio #540

Merged
merged 5 commits into from
Dec 11, 2023
Merged

New examples feel sergio #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
280771c
Reduced the examples padding
SergioCasCeb Dec 5, 2023
05977de
Modified the example design
SergioCasCeb Dec 6, 2023
0b2449c
Added padding to account for icon
SergioCasCeb Dec 11, 2023
1b023b0
Added more styling and spacing fixes
SergioCasCeb Dec 11, 2023
1ee98da
Merge branch 'master' into new-examples-feel-sergio
egekorkan Dec 11, 2023
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
31 changes: 20 additions & 11 deletions packages/web-new/src/scripts/examples-menu.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading