diff --git a/src/jsMain/kotlin/css/text/TextStyle.kt b/src/jsMain/kotlin/css/text/TextStyle.kt index 94c54d35..32ea4629 100644 --- a/src/jsMain/kotlin/css/text/TextStyle.kt +++ b/src/jsMain/kotlin/css/text/TextStyle.kt @@ -103,13 +103,20 @@ object TextStyle : StyleSheet("Tabs", isStatic = true) { } // Validation Issue Entries - val issueLineAndType by css { + val issueType by css { fontFamily = FONT_FAMILY_CODE fontSize = 12.pt fontWeight = FontWeight.w600 color = TEXT_BLACK } + val issueLineAndColumn by css { + fontFamily = FONT_FAMILY_CODE + fontSize = 10.pt + fontWeight = FontWeight.w300 + color = TEXT_BLACK + } + val manualEntryFailMessage by css { fontFamily = FONT_FAMILY_MAIN fontSize = 12.pt diff --git a/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt b/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt index a5cde24c..1037b253 100644 --- a/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt +++ b/src/jsMain/kotlin/ui/components/ace/ReactAceHelper.kt @@ -1,15 +1,11 @@ package ui.components.ace -import react.MutableRefObject import react.RefObject - -fun gotoLine(editorRef: RefObject, line: Int) { - editorRef.asDynamic().current.editor.gotoLine(line) -} - -fun scrollToLine(editorRef: RefObject, line: Int) { - editorRef.asDynamic().current.editor.scrollToLine(line, true, true, null) +fun scrollTo(editorRef: RefObject, row: Int, column:Int) { + editorRef.asDynamic().current.editor.gotoLine(row) + editorRef.asDynamic().current.editor.moveCursorTo(row - 1, column - 1) + editorRef.asDynamic().current.editor.centerSelection() } fun setAnnotations(editorRef: RefObject, aceAnnotations : Array) { diff --git a/src/jsMain/kotlin/ui/components/tabs/entrytab/ManualEntryTab.kt b/src/jsMain/kotlin/ui/components/tabs/entrytab/ManualEntryTab.kt index d606bb08..3861dea4 100644 --- a/src/jsMain/kotlin/ui/components/tabs/entrytab/ManualEntryTab.kt +++ b/src/jsMain/kotlin/ui/components/tabs/entrytab/ManualEntryTab.kt @@ -142,6 +142,7 @@ class ManualEntryTab : RComponent() { validationOutcomeContainer { polyglot = props.polyglot validationOutcome = props.validationOutcome!! + inPage = true } } } diff --git a/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt b/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt index 960eb290..62c9a784 100644 --- a/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt +++ b/src/jsMain/kotlin/ui/components/validation/FileValidationOutcome.kt @@ -5,6 +5,7 @@ import kotlinx.css.* import model.MessageFilter import model.ValidationMessage import model.ValidationOutcome +import kotlinx.browser.window import react.* import styled.StyleSheet @@ -16,6 +17,7 @@ import ui.components.validation.issuelist.issueEntryList external interface FileValidationOutcomeProps : Props { var validationOutcome: ValidationOutcome var messageFilter: MessageFilter + var inPage: Boolean } class FileValidationOutcomeState : State { @@ -42,6 +44,12 @@ class FileValidationOutcome : RComponent Unit + var inPage: Boolean } class ValidationOutcomeContainerState : State { @@ -61,6 +62,7 @@ class ValidationOutcomeContainer : RComponent() onClose = { props.onClose() } + inPage = false } } } diff --git a/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntry.kt b/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntry.kt index 62939d7c..de31e69e 100644 --- a/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntry.kt +++ b/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntry.kt @@ -14,6 +14,8 @@ import model.IssueSeverity import model.ValidationMessage import react.* import react.dom.attrs +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.span import styled.StyleSheet import styled.css import styled.styledDiv @@ -64,12 +66,21 @@ class IssueEntry : RComponent() { props.onMouseDown() } } - styledSpan { - css { - +IssueEntryStyle.levelAndLineNumber - +TextStyle.issueLineAndType - } - +"${props.validationMessage.getLevel().display} Line: ${props.validationMessage.getLine()}" + span { + + styledDiv { + css { + +IssueEntryStyle.levelAndLineNumber + +TextStyle.issueType + } + + "${props.validationMessage.getLevel().display} " } + styledDiv { + css { + +IssueEntryStyle.levelAndLineNumber + +TextStyle.issueLineAndColumn + } + + "Line: ${props.validationMessage.getLine()}, Col:${props.validationMessage.getCol()}" } + } styledSpan { css { diff --git a/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntryList.kt b/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntryList.kt index fe177c13..ed27ad7f 100644 --- a/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntryList.kt +++ b/src/jsMain/kotlin/ui/components/validation/issuelist/IssueEntryList.kt @@ -9,8 +9,7 @@ import styled.StyleSheet import styled.css import styled.styledDiv import styled.styledUl -import ui.components.ace.scrollToLine -import ui.components.ace.gotoLine +import ui.components.ace.scrollTo external interface IssueEntryListProps : Props { var validationOutcome: ValidationOutcome @@ -45,8 +44,7 @@ class IssueEntryList : RComponent() { props.onHighlight?.let { it(highlighted, listOf(message)) } } onMouseDown = { - scrollToLine(props.editorRef, message.getLine()) - gotoLine(props.editorRef, message.getLine()) + scrollTo(props.editorRef, message.getLine(), message.getCol()) } } if (filesIterator.hasNext()) {