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

Modified quick use button #541

Merged
merged 12 commits into from
Jan 10, 2024
Merged

Modified quick use button #541

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2b5f258
Modified quick use button
SergioCasCeb Dec 6, 2023
e31910c
removed unnecessary files
SergioCasCeb Jan 2, 2024
3df6077
Modified quick use button
SergioCasCeb Dec 6, 2023
add7b39
Merge branch 'simpler-user-button-sergio' of https://github.com/Sergi…
SergioCasCeb Jan 2, 2024
56924aa
rebasing and fixing styling issues
SergioCasCeb Jan 2, 2024
3b135e5
Changed the button text
SergioCasCeb Jan 10, 2024
3e2847c
Modified quick use button
SergioCasCeb Dec 6, 2023
77af6a2
Modified quick use button
SergioCasCeb Dec 6, 2023
c8f9ba4
rebasing and fixing styling issues
SergioCasCeb Jan 2, 2024
480f992
Changed the button text
SergioCasCeb Jan 10, 2024
d039b28
Merge branch 'simpler-user-button-sergio' of https://github.com/Sergi…
SergioCasCeb Jan 10, 2024
686a8f2
Fixed styling issues
SergioCasCeb Jan 10, 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
9 changes: 5 additions & 4 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 @@ -296,9 +296,10 @@ async function getAllExamples(categoryId, thingType) {
//Create the example quick access button
const quickButton = document.createElement('button')
quickButton.classList.add("example__header--quick")
const quickButtonIcon = document.createElement('i')
quickButtonIcon.classList.add("fa-solid", "fa-file-import")
quickButton.appendChild(quickButtonIcon)
quickButton.innerText = "Use"
// const quickButtonIcon = document.createElement('i')
// quickButtonIcon.classList.add("fa-solid", "fa-file-import")
// quickButton.appendChild(quickButtonIcon)
exampleHeader.appendChild(quickButton)


Expand Down
27 changes: 11 additions & 16 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 @@ -322,7 +322,7 @@
background-color: var(--clr-neutral-50);
border-radius: 5px;
width: fit-content;
padding: 2rem;
padding: 1rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);

&__header {
Expand All @@ -332,12 +332,12 @@
gap: 2rem;

&--name {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
gap: 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;

Expand All @@ -358,22 +358,17 @@

&--quick {
width: fit-content;
background-color: transparent;
background-color: var(--clr-primary-500);
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
border-radius: 5px;
padding: .75rem 1.5rem;
cursor: pointer;

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

&:hover {
i {
color: var(--clr-primary-700);
}
background-color: var(--clr-primary-700);
}
}
}
Expand All @@ -382,7 +377,7 @@
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
Expand Down
26 changes: 12 additions & 14 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 @@ -1967,7 +1967,7 @@ main .console {
border-radius: 5px;
width: -moz-fit-content;
width: fit-content;
padding: 2rem;
padding: 1rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
}
.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 {
Expand All @@ -1977,12 +1977,12 @@ main .console {
gap: 2rem;
}
.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 {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
gap: 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;
}
Expand All @@ -1998,25 +1998,23 @@ main .console {
.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;
background-color: var(--clr-primary-500);
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
border-radius: 5px;
padding: 0.75rem 1.5rem;
cursor: pointer;
font-weight: bold;
color: var(--clr-neutral-50);
transition: background-color 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;
}
.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__header--quick:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover {
background-color: var(--clr-primary-700);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
Expand Down
Loading
Loading