diff --git a/src/java/LogrPortal/src/java/gov/anl/aps/logr/portal/controllers/ItemDomainLogbookController.java b/src/java/LogrPortal/src/java/gov/anl/aps/logr/portal/controllers/ItemDomainLogbookController.java index 24608f5be..37edfe4c4 100644 --- a/src/java/LogrPortal/src/java/gov/anl/aps/logr/portal/controllers/ItemDomainLogbookController.java +++ b/src/java/LogrPortal/src/java/gov/anl/aps/logr/portal/controllers/ItemDomainLogbookController.java @@ -103,6 +103,7 @@ public class ItemDomainLogbookController extends ItemController logResults; private List logbookEntityTypes; @@ -1269,6 +1270,31 @@ public Item getParentItem(ItemDomainLogbook child) { return null; } + public String getLogEntryPreviewHtml() { + return logEntryPreviewHtml; + } + + // Kept on the controller so previews of unsaved text do not poison Log's cached html. + public void reloadLogEntryMarkdownPreview() { + logEntryPreviewHtml = ""; + + if (getCurrent() == null) { + return; + } + + Log newLogEdit = getNewLogEdit(); + if (newLogEdit == null) { + return; + } + + String text = newLogEdit.getText(); + if (text == null || text.isEmpty()) { + return; + } + + logEntryPreviewHtml = MarkdownParser.parseMarkdownAsHTML(text); + } + public String renderExampleMarkdown() { return MarkdownParser.getMarkdownExampleHtml(); } diff --git a/src/java/LogrPortal/web/resources/css/logbook.css b/src/java/LogrPortal/web/resources/css/logbook.css index 8f7311a63..06f210228 100644 --- a/src/java/LogrPortal/web/resources/css/logbook.css +++ b/src/java/LogrPortal/web/resources/css/logbook.css @@ -43,10 +43,93 @@ html, body { } .logEntryDialogEntryValue { + box-sizing: border-box; width: 600px; height: 400px; } +/* Lock both tabs to the textarea size so the dialog does not resize on tab change. */ +.logEntryEditTabView, +.logEntryEditTabView .ui-tabs-panels, +.logEntryEditTabView .ui-tabs-panel { + box-sizing: border-box; + width: 620px; +} + +.logEntryEditTabView .ui-tabs-panel { + height: 410px; + padding: 5px 10px; + overflow: hidden; +} + +/* Match the transparent dialog background. */ +.logEntryEditTabView, +.logEntryEditTabView .ui-tabs-panels, +.logEntryEditTabView .ui-tabs-panel, +.logEntryEditTabView .ui-tabs-nav, +.logEntryEditTabView .ui-tabs-nav .ui-state-default { + background: transparent !important; + border: none !important; +} + +.logEntryEditTabView .ui-tabs-nav .ui-tabs-selected { + background: rgba(255, 255, 255, 0.6) !important; +} + +.logEntryEditTabView .ui-tabs-nav { + text-align: left; + padding-left: 5px; +} + +/* Insulate the preview from dialog styles so it renders like the main log view. */ +.logEntryPreviewContainer { + box-sizing: border-box; + width: 600px; + height: 400px; + overflow-y: auto; + margin: 0; + padding: 0; + text-align: left; + font-weight: normal; + font-style: normal; + font-size: 12px; + font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif; + line-height: normal; + color: #000000; + background-color: white !important; + border: 1px solid #cfcfcf; + border-radius: 5px; +} + +.logEntryPreviewContainer .logEntryMarkdownPreview { + display: block; + background: transparent; +} + +/* Buttons live in the dialog content, not a footer facet. */ +.logEntryDialogFooter { + display: block; + padding: 1.5rem 1.5rem 0 1.5rem; +} + +/* Maximized: let the editor and preview grow with the dialog. */ +.logEntryDialog.ui-dialog-maximized .ui-panelgrid, +.logEntryDialog.ui-dialog-maximized .logEntryEditTabView, +.logEntryDialog.ui-dialog-maximized .logEntryEditTabView .ui-tabs-panels, +.logEntryDialog.ui-dialog-maximized .logEntryEditTabView .ui-tabs-panel { + width: 100%; +} + +.logEntryDialog.ui-dialog-maximized .logEntryEditTabView .ui-tabs-panel { + height: calc(100vh - 300px); +} + +.logEntryDialog.ui-dialog-maximized .logEntryDialogEntryValue, +.logEntryDialog.ui-dialog-maximized .logEntryPreviewContainer { + width: 100%; + height: 100%; +} + .logTimestamp { background: lightslategrey; border-top-left-radius: 3px; @@ -226,4 +309,4 @@ div.logbookSection { .reactionButton > .ui-button-text { font-size: large !important; -} \ No newline at end of file +} diff --git a/src/java/LogrPortal/web/resources/javascript/logDocumentView.js b/src/java/LogrPortal/web/resources/javascript/logDocumentView.js index fbe317780..e814f407b 100644 --- a/src/java/LogrPortal/web/resources/javascript/logDocumentView.js +++ b/src/java/LogrPortal/web/resources/javascript/logDocumentView.js @@ -7,10 +7,13 @@ document.addEventListener('paste', pasteLogTextArea); const linkRegex = new RegExp("^(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})(\.[a-zA-Z0-9]{2,})?"); +// Id suffix match: the textarea sits inside a tab view (a naming container). +const logEntryValueSelector = 'textarea[id$=":logbookLogEntryValue"]'; + function pasteLogTextArea(event) { // Ignore non text area let srcElement = event.srcElement; - if (srcElement.id !== 'logbookViewForm:logbookLogEntryValue') { + if (!srcElement.matches || !srcElement.matches(logEntryValueSelector)) { return; } @@ -53,7 +56,7 @@ function pasteLatestFileReference() { } function addCustomDataToLogEntryValue(newData) { - let textArea = document.getElementById('logbookViewForm:logbookLogEntryValue'); + let textArea = document.querySelector(logEntryValueSelector); let exitingValue = $(textArea).val(); let curPos = textArea.selectionStart; diff --git a/src/java/LogrPortal/web/views/itemDomainLogbook/private/addLogbookEntryDialog.xhtml b/src/java/LogrPortal/web/views/itemDomainLogbook/private/addLogbookEntryDialog.xhtml index 842f0ae26..4dc336f5b 100644 --- a/src/java/LogrPortal/web/views/itemDomainLogbook/private/addLogbookEntryDialog.xhtml +++ b/src/java/LogrPortal/web/views/itemDomainLogbook/private/addLogbookEntryDialog.xhtml @@ -13,8 +13,9 @@ See LICENSE file. @@ -36,7 +37,7 @@ See LICENSE file. - + @@ -50,10 +51,41 @@ See LICENSE file. - + + + + + + + + + + + +
+ + + +
+ + +
+
@@ -106,13 +138,7 @@ See LICENSE file.
- - - - - - + - + +
diff --git a/src/java/LogrPortal/web/views/itemDomainLogbook/view.xhtml b/src/java/LogrPortal/web/views/itemDomainLogbook/view.xhtml index cfd0e7e20..20e3b2650 100644 --- a/src/java/LogrPortal/web/views/itemDomainLogbook/view.xhtml +++ b/src/java/LogrPortal/web/views/itemDomainLogbook/view.xhtml @@ -181,7 +181,7 @@ See LICENSE file. - +