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

Reduced the examples padding #544

Merged
merged 8 commits into from
Dec 10, 2023
Merged

Reduced the examples padding #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c02f080
Modified the default state of the console
SergioCasCeb Dec 5, 2023
27f8e7a
Modified the default state of the console
SergioCasCeb Dec 5, 2023
67571d9
Merge branch 'console-default-state-sergio' of https://github.com/Ser…
SergioCasCeb Dec 9, 2023
08aee71
Fixed styling errors
SergioCasCeb Dec 9, 2023
d77a9eb
Fixed styling error created by the merging
SergioCasCeb Dec 9, 2023
26ea33e
Merge pull request #537 from SergioCasCeb/console-default-state-sergio
egekorkan Dec 10, 2023
eb6e4c0
Merge branch 'reduce-example-padding-sergio' of https://github.com/Se…
SergioCasCeb Dec 10, 2023
5907ed9
Fixed styling errors
SergioCasCeb Dec 10, 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
8 changes: 6 additions & 2 deletions packages/web-new/src/scripts/console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { asyncApiTab, asyncApiJsonBtn, asyncApiYamlBtn, asyncApiView } from './a
import { AASView } from './aas'
import { defaultsView, defaultsJsonBtn, defaultsYamlBtn, defaultsAddBtn } from './defaults'
import { visualize } from './visualize'
import { validationView } from './validation'
import { validationView, validationTab } from './validation'
import { convertTDYamlToJson, detectProtocolSchemes } from '../../../core/dist/web-bundle.min.js'
import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS } from './util'
import { generateOAP, generateAAP, addDefaultsUtil, validate, generateAAS, resetValidationStatus } from './util'
import { editorList, getEditorData } from './editor'

/******************************************************************/
Expand All @@ -50,6 +50,10 @@ export function clearConsole() {
option.checked = false
})

//reset to the default validation view
validationView.classList.remove("hidden")
validationTab.checked = true
resetValidationStatus()
clearVisualizationEditors()
}

Expand Down
16 changes: 8 additions & 8 deletions packages/web-new/src/scripts/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
/**
* @file The `editor.js` contains the main functionality
* for the generated monaco editors and the surrounding elements
* such as the tab functionality. It utilizes mutiple other files and dependncies
* such as the monaco-editor dependencie, the monochrome-theme file to add the custom
* such as the tab functionality. It utilizes multiple other files and dependencies
* such as the monaco-editor dependency, the monochrome-theme file to add the custom
* theme, some util functions, the td and tm schemas from the core @thing-description-playground
* as well as the "Validators" and the "JsonSpellChecker" from the json-spell-checker dependency
*/
Expand All @@ -37,7 +37,7 @@ import { clearConsole } from './console'
/* Editor and tabs */
/***********************************************************/

//Decalre all necessary item from the DOM
//Declare all necessary item from the DOM
const addTab = document.querySelector(".ide__tabs__add")
const tabsLeftContainer = document.querySelector(".ide__tabs__left")
const ideContainer = document.querySelector(".ide__container")
Expand All @@ -57,7 +57,7 @@ validationTab.checked = true
validationView.classList.remove("hidden")

/**
* Funtion which creates a tab for the respective editor
* Function which creates a tab for the respective editor
* and adds all other tab component such as the close button
* @param {Number} tabNumber - the "id" number for the tab
* @param {String} exampleName - the initial/default name shown in the tab
Expand Down Expand Up @@ -248,7 +248,7 @@ export function createIde(ideNumber, exampleValue) {
}

/**
* Async funtion to initiate the editors
* Async function to initiate the editors
* @param {Number} ideNumber
* @param {Object} defaultValue
* @param {String} editorLanguage
Expand All @@ -268,7 +268,7 @@ async function initEditor(ideNumber, editorValue, editorLanguage) {
setFontSize(editorInstance)
})

//Bind the reset button form the settings to the editor and assign the specied font size
//Bind the reset button form the settings to the editor and assign the specified font size
editorForm.addEventListener("reset", () => {
setFontSize(editorInstance)
})
Expand Down Expand Up @@ -410,7 +410,7 @@ tabsLeftContainer.addEventListener("click", (e) => {
})

//if the target element is the tab itself add the active class
//else if the target element is a child of the element add the active calss to the parent element
//else if the target element is a child of the element add the active class to the parent element
if (selectedElement.id == "tab") {
selectedElement.classList.add("active")
}
Expand Down Expand Up @@ -444,7 +444,7 @@ tabsLeftContainer.addEventListener("click", (e) => {
})

/**
* Find if active editor is json or yaml and change the json/yaml btns repectively
* Find if active editor is json or yaml and change the json/yaml btns respectively
*/
function findFileType() {
editorList.forEach(editor => {
Expand Down
36 changes: 20 additions & 16 deletions packages/web-new/src/scripts/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { convertTDJsonToYaml, convertTDYamlToJson, tdValidator, tmValidator, com
import tdToOpenAPI from '../../../td_to_openAPI/dist/web-bundle.min.js'
import tdToAsyncAPI from '../../../td_to_asyncapi/dist/web-bundle.min.js'
import { addDefaults, removeDefaults } from '../../../defaults/dist/web-bundle.min.js'
import {AssetInterfaceDescriptionUtil} from '@node-wot/td-tools/dist/util/asset-interface-description.js'
import { AssetInterfaceDescriptionUtil } from '@node-wot/td-tools/dist/util/asset-interface-description.js'
import { validateJsonLdBtn, tmConformanceBtn, sectionHeaders } from './validation'


Expand Down Expand Up @@ -165,7 +165,7 @@ export function generateAAP(fileType, editorInstance) {
* @param { String } fileType - JSON/YAML options
* @param { Monaco Object } editorInstance - Monaco editor object
*/
export function generateAAS(fileType, editorInstance){
export function generateAAS(fileType, editorInstance) {
const assetInterfaceDescriptionUtil = new AssetInterfaceDescriptionUtil()

const tdToConvert = fileType === "json"
Expand All @@ -175,7 +175,7 @@ export function generateAAS(fileType, editorInstance){
const AASInstance = assetInterfaceDescriptionUtil.transformTD2SM(tdToConvert)
try {
const content = JSON.stringify(JSON.parse(AASInstance), undefined, 4)

editor.setModelLanguage(window.AASEditor.getModel(), 'json')
window.AASEditor.getModel().setValue(content)
} catch (err) {
Expand Down Expand Up @@ -303,17 +303,27 @@ export function validate(thingType, editorContent) {
/**
* Resets the status of the validation headers, as well as the error message list
*/
function resetValidationStatus() {
export function resetValidationStatus() {
while (errorMessages.length > 0) {
errorMessages.pop()
}

sectionHeaders.forEach(header => {
const headerIcon = header.children[0]
if (!headerIcon.classList.contains("fa-circle")) {
headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark", "fa-circle")
headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark")
headerIcon.classList.add("fa-circle")
}
})

document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
category.open = false
category.classList.add("disabled")
const categoryContainer = category.querySelector("ul.section-content")
while (categoryContainer.children.length > 0) {
categoryContainer.children[0].remove()
}
})
}

/**
Expand All @@ -324,7 +334,7 @@ function log(message) {
errorMessages.push(message)
}

//TODO: This function should only be used for the moment being as it should be changed or adpated when the corresponding changes to the Validator have been finalized
//TODO: This function should only be used for the moment being as it should be changed or adapted when the corresponding changes to the Validator have been finalized
/**
* Populates the error messages on the categories where the validation has failed or has a warning
* @param { Array } messagesList - Array of error messages
Expand All @@ -333,10 +343,7 @@ function populateCategory(messagesList) {
// console.log(messagesList);
document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
const categoryContainer = category.querySelector("ul.section-content")
categoryContainer.classList.add("empty")
while (categoryContainer.children.length > 0) {
categoryContainer.children[0].remove()
}
category.classList.remove("disabled")
if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) {
const noticePrompt = document.createElement("p")
noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*"
Expand All @@ -347,17 +354,14 @@ function populateCategory(messagesList) {
listElement.textContent = message
categoryContainer.append(listElement)
})
categoryContainer.classList.remove("empty")
} else if (category.children[0].children[0].classList.contains("fa-circle-check")){
} else if (category.children[0].children[0].classList.contains("fa-circle-check")) {
const successMessage = document.createElement("li")
successMessage.textContent = "Validated Successfully"
categoryContainer.append(successMessage)
categoryContainer.classList.remove("empty")
}else{
} else {
const nullMessage = document.createElement("li")
nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions"
categoryContainer.append(nullMessage)
categoryContainer.classList.remove("empty")
}
})
}
Expand Down Expand Up @@ -435,7 +439,7 @@ const COMMA = ","

/**
* Looks for specific characters on the model to figure out the path of the position/search text
* @param {ITextModel} textModel The text model of Monaco Edtior
* @param {ITextModel} textModel The text model of Monaco Editor
* @param {IPosition} position The position on Monaco editor which consists of column and line number
* @returns A string that is the path of the searched text. Search is done with the text's position on the editor
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/scripts/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

/**
* @file The `validation.js` contains the related html elements for the validation view, as
* well as the behaviour for the validation button on the main navigation menu
* well as the behavior for the validation button on the main navigation menu
*/

export const validationView = document.querySelector("#validation-view")
Expand Down
18 changes: 10 additions & 8 deletions packages/web-new/src/styles/_console.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
&:nth-child(5)::before {
content: 'Defaults';
}

// &:nth-child(5)::before{
// content: 'Linting';
// }
Expand Down Expand Up @@ -170,6 +170,8 @@
margin-bottom: 1rem;

summary {
user-select: none;

.show-icon {
transform: rotate(0);
transition: transform 250ms ease-in-out;
Expand Down Expand Up @@ -217,10 +219,6 @@
list-style-position: inside;
list-style-type: disc;

&.empty {
padding: 0 0 1rem 0;
}

.notice-prompt {
color: var(--clr-neutral-300);
font-size: var(--fs-footer);
Expand Down Expand Up @@ -261,6 +259,10 @@
}
}

details.disabled {
pointer-events: none;
}

}
}

Expand Down Expand Up @@ -302,7 +304,7 @@
overflow-x: hidden;
gap: 1rem;

.warning-txt{
.warning-txt {
font-size: var(--fs-p);
font-family: var(--ff-primary);
color: var(--clr-neutral-300);
Expand Down Expand Up @@ -354,7 +356,7 @@
}
}

.view-download{
.view-download {
width: 100%;
height: 100%;
min-height: 3.25rem;
Expand Down Expand Up @@ -394,7 +396,7 @@
svg {
text {
font-size: 1.2rem;
font-family: var(--ff-secundary);
font-family: var(--ff-secondary);
fill: var(--clr-neutral-900);
}
}
Expand Down
32 changes: 18 additions & 14 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,24 +322,26 @@
background-color: var(--clr-neutral-50);
border-radius: 5px;
width: fit-content;
padding: 2rem;
padding: .5rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;

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

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

.example-icon{
width: 1.8rem;
Expand All @@ -361,7 +363,7 @@
background-color: transparent;
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;

i {
Expand All @@ -378,13 +380,19 @@
}
}

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

&__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 0 1rem;
transition: padding 250ms ease-in-out 250ms;
}

&__description {
Expand All @@ -406,7 +414,7 @@
gap: 2rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms, ;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms;

button {
width: 100%;
Expand Down Expand Up @@ -458,14 +466,10 @@

.example.open {

.example__name {
border-bottom: 2px solid var(--clr-primary-500);
padding-bottom: 2rem;
transition: all 250ms ease-in-out 0s;
}

.example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
transition: padding 250ms ease-in-out 0s;
}

.example__description {
Expand Down
2 changes: 1 addition & 1 deletion packages/web-new/src/styles/_jsonld-vis.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ svg {

.d3-tip {
font-size: var(--fs-p);
font-family: var(--ff-secundary);
font-family: var(--ff-secondary);
color: var(--clr-neutral-900);
border: 1px solid var(--clr-neutral-300);
border-radius: 5px;
Expand Down
Loading
Loading