Skip to content

Commit

Permalink
Merge pull request #496 from SergioCasCeb/Changes-web-new
Browse files Browse the repository at this point in the history 
Feedback fixes
  • Loading branch information
@egekorkan
egekorkan authored Oct 6, 2023
2 parents 0920e62 + d585042 commit 1db5081
Show file tree
Hide file tree
Showing 11 changed files with 157 additions and 145 deletions.
3 changes: 2 additions & 1 deletion lerna.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"packages": ["packages/*"],
"version": "independent"
"version": "independent",
"ignore": ["packages/web-new"]
}
2 changes: 1 addition & 1 deletion packages/web-new/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

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
11 changes: 10 additions & 1 deletion packages/web-new/src/scripts/visualize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,27 @@ export function visualize(editorValue) {
visualizeView.classList.remove("hidden")

if (graphViewInput.checked === true) {
//disable and enable respective buttons
graphViewInput.disabled = true
treeViewInput.disabled = false
//Show and hide the respective inputs
graphInputs.classList.remove("hidden")
treeInputs.classList.add("hidden")
//Run the jsonld visualization
jsonldVis(editorValue, "#visualized", {
h: document.getElementById("visualize-container").offsetHeight - 30,
w: document.getElementById("visualize-container").offsetWidth - 20,
maxLabelWidth: 200,
scalingFactor: 5,
})
} else {
//disable and enable respective buttons
graphViewInput.disabled = false
treeViewInput.disabled = true
//Show and hide the respective inputs
graphInputs.classList.add("hidden")
treeInputs.classList.remove("hidden")

//Run the vega visualization
vegaVis("#visualized", editorValue)
}
}
Expand Down
49 changes: 30 additions & 19 deletions packages/web-new/src/styles/_examples-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
text-align: right;

i {
font-size: var(--fs-h4);
font-size: var(--fs-sub-header);
cursor: pointer;
}
}
Expand Down 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
1 change: 1 addition & 0 deletions packages/web-new/src/styles/_save-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
border-bottom-left-radius: 5px;
font-family: var(--ff-primary);
font-size: var(--fs-p);
color: var(--clr-neutral-900);
padding: 1rem;

&.error{
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/styles/_settings-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
margin-bottom: 2rem;

i {
font-size: var(--fs-h4);
font-size: var(--fs-sub-header);
cursor: pointer;
}
}
Expand Down
Loading

0 comments on commit 1db5081

Please sign in to comment.