Fix scroll to issue and general layout (#155)

hapifhir · Nov 17, 2023 · d9e35ca · d9e35ca
1 parent 80c0306
commit d9e35ca
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 20 deletions.
diff --git 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
@@ -1,15 +1,11 @@
 package ui.components.ace
 
-import react.MutableRefObject
 import react.RefObject
 
-
-fun gotoLine(editorRef: RefObject<Nothing>, line: Int) {
-    editorRef.asDynamic().current.editor.gotoLine(line)
-}
-
-fun scrollToLine(editorRef: RefObject<Nothing>, line: Int) {
-    editorRef.asDynamic().current.editor.scrollToLine(line, true, true, null)
+fun scrollTo(editorRef: RefObject<Nothing>, 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<Nothing>, aceAnnotations : Array<AceAnnotation>) {

diff --git 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<ManualEntryTabProps, ManualEntryTabState>() {
                     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
@@ -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<FileValidationOutcomeProps, FileValidat
             styledDiv {
                 css {
                     +FileValidationOutcomeStyle.containerLeft
+                    if (props.inPage) {
+                        +FileValidationOutcomeStyle.pageMinHeight
+                        +FileValidationOutcomeStyle.pageMaxHeight
+                    }
+                    else
+                        +FileValidationOutcomeStyle.parentMaxHeight
                 }
                 codeIssueDisplay {
                     validationOutcome = props.validationOutcome
@@ -58,6 +66,14 @@ class FileValidationOutcome : RComponent<FileValidationOutcomeProps, FileValidat
             styledDiv {
                 css {
                     +FileValidationOutcomeStyle.containerRight
+                     if (props.inPage) {
+                         +FileValidationOutcomeStyle.pageMaxHeight
+                     }
+                     else {
+                         +FileValidationOutcomeStyle.parentMaxHeight
+                         +FileValidationOutcomeStyle.parentMinHeight
+                     }
+
                 }
                 issueEntryList {
                     validationOutcome = props.validationOutcome
@@ -92,6 +108,7 @@ object FileValidationOutcomeStyle : StyleSheet("FileValidationOutcomeStyle", isS
         display = Display.flex
         flexDirection = FlexDirection.column
         justifyContent = JustifyContent.start
+
         overflowY = Overflow.auto
         flexGrow = 1.0
         media(query = "(min-width: 1200px) and (orientation:landscape)", block = ruleSet {
@@ -104,8 +121,8 @@ object FileValidationOutcomeStyle : StyleSheet("FileValidationOutcomeStyle", isS
         borderColor = BORDER_GRAY
         borderStyle = BorderStyle.solid
         borderWidth = 1.px
+        minHeight = 98.pct
 
-        height = LinearDimension.fillAvailable
         media(query = "(min-width: 1200px) and (orientation:landscape)", block = ruleSet {
             marginBottom = 0.px
             marginRight = 8.px
@@ -117,10 +134,29 @@ object FileValidationOutcomeStyle : StyleSheet("FileValidationOutcomeStyle", isS
         marginTop = 8.px
         width = 100.pct
         overflowY = Overflow.auto
+
+
         media(query = "(min-width: 1200px) and (orientation:landscape)", block = ruleSet {
             marginTop = 0.px
             marginLeft = 8.px
             width = 50.pct
         })
     }
+
+    val pageMaxHeight by css {
+        maxHeight = window.innerHeight.px - 96.px
+    }
+
+    val pageMinHeight by css {
+        minHeight = window.innerHeight.px - 96.px
+    }
+
+    val parentMinHeight by css {
+        minHeight = 98.pct
+    }
+
+    val parentMaxHeight by css {
+        maxHeight = 98.pct
+    }
+
 }
diff --git a/src/jsMain/kotlin/ui/components/validation/ValidationOutcomeContainer.kt b/src/jsMain/kotlin/ui/components/validation/ValidationOutcomeContainer.kt
@@ -18,6 +18,7 @@ external interface ValidationOutcomeContainerProps : Props {
     var validationOutcome: ValidationOutcome
     var polyglot: Polyglot
     var onClose: () -> Unit
+    var inPage: Boolean
 }
 
 class ValidationOutcomeContainerState : State {
@@ -61,6 +62,7 @@ class ValidationOutcomeContainer : RComponent<ValidationOutcomeContainerProps, V
                 fileValidationOutcome {
                     validationOutcome = props.validationOutcome
                     messageFilter = state.messageFilter
+                    inPage = props.inPage
                 }
             }
         }

diff --git a/src/jsMain/kotlin/ui/components/validation/ValidationOutcomePopup.kt b/src/jsMain/kotlin/ui/components/validation/ValidationOutcomePopup.kt
@@ -54,6 +54,7 @@ class ValidationOutcomePopup : RComponent<ValidationOutcomePopupProps, State>()
                             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
@@ -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<IssueEntryProps, State>() {
                     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
@@ -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<IssueEntryListProps, State>() {
                                 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()) {
-Original file line number
+Diff line change
@@ Expand Up @@
                                 onClose = {
                                     props.onClose()
                                 }
+                                inPage = false
                             }
                         }
                     }
@@ Expand Down @@