From f94c61bbc24d81a3155bef9eed9b36c6d0755e51 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 16 Dec 2020 10:07:03 +0100 Subject: [PATCH] Callout and Summary --- Client/WebServer/css/docs.css | 14 +- Client/WebServer/css/tutorial.css | 576 +++++++++--------- Client/WebServer/index.html | 2 + .../UI/Spaces/Docs-Space/DocsSpace.js | 46 ++ 4 files changed, 345 insertions(+), 293 deletions(-) diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css index 8706ad100..207fbca4b 100644 --- a/Client/WebServer/css/docs.css +++ b/Client/WebServer/css/docs.css @@ -154,7 +154,6 @@ z-index:100; } /* Alerts */ - .docs-alert-note { color: #31708f; background-color: #d9edf7; @@ -207,7 +206,16 @@ border-left-width: 5px; border-radius: 3px; border-left-color: #bcd643; font-weight: 500; -width: 100%; +width: 95%; +} + +.docs-summary { +font-size:120%; +color: #808080; +margin:20px 0px 20px 0px; +border-left: 5px solid #fd6a33; +padding-left: 10px; + } .docs-note-circle:before { @@ -273,7 +281,6 @@ padding-left: 15px; } /* Links */ - a:link.docs-plain-link { text-decoration: none; } @@ -291,7 +298,6 @@ text-decoration: none; } /* Icon after external links, using FontAwesome*/ - a[href^="http://"]:after, a[href^="https://"]:after { content: "\f08e"; font-family: FontAwesome; diff --git a/Client/WebServer/css/tutorial.css b/Client/WebServer/css/tutorial.css index 2f01b7c5f..9ed4a6d32 100644 --- a/Client/WebServer/css/tutorial.css +++ b/Client/WebServer/css/tutorial.css @@ -1,290 +1,288 @@ - .tutorial-step { - padding: 15px; - margin-bottom: 20px; - border: 2px solid; - border-color: #1b998b; - border-radius: 8px; - background-color: #fdfdfd; - } - - .tutorial-summary { - font-size:120%; - color: #808080; - margin:20px 0px 20px 0px; - border-left: 5px solid #fd6a33; - padding-left: 10px; - - } - - .tutorial-summary:before { - content: "Summary: "; - font-weight: bold; - } - - .tutorial-definitionTable { - background-color: #f3f3f3; - border-top-color: #a6e1ec; - padding: 15px; - margin: 20px 0; - border: solid 0px; - vertical-align: middle; - min-width: 100px; - width: 100%; - } - - .tutorial-alert-info { - color: #31708f; - background-color: #d9edf7; - border-color: #bce8f1; - padding: 15px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #a6e1ec; - width: 90%; - } - - .tutorial-alert-success { - color: #3c763d; - background-color: #dff0d8; - border-color: #d6e9c6; - padding: 15px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #c9e2b3; - width: 90%; - } - - .tutorial-alert-important { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #faebcc; - padding: 15px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #f7e1b5; - width: 90%; - } - - .tutorial-alert-warning { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; - padding: 15px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #e4b9c0; - width: 90%; - } - - .tutorial-callout { - padding: 20px; - margin: 20px 0; - border: 1px solid #eee; - border-left-width: 5px; - border-radius: 3px; - border-left-color: #bcd643; - font-weight: 500; - width: 90%; - } - - .tutorial-info-circle:before { - content:"\f05a" - } - - .tutorial-check-square-o:before { - content:"\f046" - } - - .tutorial-exclamation-circle:before { - content:"\f06a" - } - - .tutorial-warning:before,.fa-exclamation-triangle:before { - content:"\f06a" - } - - .tutorial-fa { - font:normal normal normal 14px/1 FontAwesome; - font-size:inherit; - text-rendering:auto; - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale - } - - .tutorial-font-small { - - font:normal normal normal 14px/1 "segoeui"; - font-size:inherit; - text-rendering:auto; - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale; - line-height: 150% - } - - li > .tutorial-font-small { - margin-bottom:7px; - } - - div.tutorial-font-small { - margin-bottom:7px; - } - - .tutorial-font-medium { - font:normal normal normal 32px/1 "segoeui"; - text-rendering:auto; - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale; - line-height: 150% - } - - .tutorial-font-large { - font:bold normal normal 40px/1 "segoeui"; - text-rendering:auto; - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale; - line-height: 150% - } - - .tutorial-font-bold-small { - font:bold normal normal 14px/1 "segoeui"; - font-size:inherit; - text-rendering:auto; - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale; - line-height: 150% - } - - .tutorial-stop-button { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; - padding: 12px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #e4b9c0; - min-width: 100px; - } - - .tutorial-skip-button { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #faebcc; - padding: 12px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #f7e1b5; - min-width: 100px; - } - - .tutorial-previous-button { - color: #31708f; - background-color: #d9edf7; - border-color: #bce8f1; - padding: 12px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #c9e2b3; - min-width: 100px; - } - - .tutorial-next-button { - color: #3c763d; - background-color: #dff0d8; - border-color: #d6e9c6; - padding: 12px; - border: 1px solid transparent; - border-radius: 4px; - margin: 20px 0; - border-top-color: #c9e2b3; - min-width: 100px; - } - - .tutorial-form { - padding: 5px; - border: solid 0px; - margin-left: auto; - margin-right: auto; - margin-bottom: 20px; - width: 100%; - } - - .tutorial-buttonsTable { - border-top-color: #a6e1ec; - border: solid 0px; - vertical-align: middle; - min-width: 100px; - width: 95%; - margin-left: auto; - margin-right: auto; - } - - .tutorial-image-container { - padding: 5px 15px 5px 5px; - border: solid 0px; - margin-left: auto; - margin-right: auto; - width: 100%; - } - - /* Tooltip container */ - .tutorial-tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ - } - - /* Tooltip text */ - .tutorial-tooltip .tutorial-tooltiptext { - visibility: hidden; - width: 240px; - background-color: #0295aa; - color: #fff; - font-weight: normal; - font-size: 92%; - line-height: 130%; - text-align: center; - padding: 15px; - border-radius: 6px; - - /* Position the tutorial-tooltip text */ - position: absolute; - z-index: 1; - bottom: 125%; - left: 50%; - margin-left: -120px; - - - /* Fade in tutorial-tooltip */ - opacity: 0; - transition: opacity 0.3s; - } - - /* Tooltip arrow */ - .tutorial-tooltip .tutorial-tooltiptext::after { - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: #0295aa transparent transparent transparent; - } - - /* Show the tooltip text when you mouse over the tooltip container */ - .tutorial-tooltip:hover .tutorial-tooltiptext { - visibility: visible; - opacity: 1; - } - - - - \ No newline at end of file +.tutorial-step { +padding: 15px; +margin-bottom: 20px; +border: 2px solid; +border-color: #1b998b; +border-radius: 8px; +background-color: #fdfdfd; +} + +.tutorial-summary { +font-size:120%; +color: #808080; +margin:20px 0px 20px 0px; +border-left: 5px solid #fd6a33; +padding-left: 10px; + +} + +.tutorial-summary:before { +content: "Summary: "; +font-weight: bold; +} + +.tutorial-definitionTable { +background-color: #f3f3f3; +border-top-color: #a6e1ec; +padding: 15px; +margin: 20px 0; +border: solid 0px; +vertical-align: middle; +min-width: 100px; +width: 100%; +} + +.tutorial-alert-info { +color: #31708f; +background-color: #d9edf7; +border-color: #bce8f1; +padding: 15px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #a6e1ec; +width: 90%; +} + +.tutorial-alert-success { +color: #3c763d; +background-color: #dff0d8; +border-color: #d6e9c6; +padding: 15px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #c9e2b3; +width: 90%; +} + +.tutorial-alert-important { +color: #8a6d3b; +background-color: #fcf8e3; +border-color: #faebcc; +padding: 15px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #f7e1b5; +width: 90%; +} + +.tutorial-alert-warning { +color: #a94442; +background-color: #f2dede; +border-color: #ebccd1; +padding: 15px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #e4b9c0; +width: 90%; +} + +.tutorial-callout { +padding: 20px; +margin: 20px 0; +border: 1px solid #eee; +border-left-width: 5px; +border-radius: 3px; +border-left-color: #bcd643; +font-weight: 500; +width: 90%; +} + +.tutorial-info-circle:before { +content:"\f05a" +} + +.tutorial-check-square-o:before { +content:"\f046" +} + +.tutorial-exclamation-circle:before { +content:"\f06a" +} + +.tutorial-warning:before,.fa-exclamation-triangle:before { +content:"\f06a" +} + +.tutorial-fa { +font:normal normal normal 14px/1 FontAwesome; +font-size:inherit; +text-rendering:auto; +-webkit-font-smoothing:antialiased; +-moz-osx-font-smoothing:grayscale +} + +.tutorial-font-small { + +font:normal normal normal 14px/1 "segoeui"; +font-size:inherit; +text-rendering:auto; +-webkit-font-smoothing:antialiased; +-moz-osx-font-smoothing:grayscale; +line-height: 150% +} + +li > .tutorial-font-small { +margin-bottom:7px; +} + +div.tutorial-font-small { +margin-bottom:7px; +} + +.tutorial-font-medium { +font:normal normal normal 32px/1 "segoeui"; +text-rendering:auto; +-webkit-font-smoothing:antialiased; +-moz-osx-font-smoothing:grayscale; +line-height: 150% +} + +.tutorial-font-large { +font:bold normal normal 40px/1 "segoeui"; +text-rendering:auto; +-webkit-font-smoothing:antialiased; +-moz-osx-font-smoothing:grayscale; +line-height: 150% +} + +.tutorial-font-bold-small { +font:bold normal normal 14px/1 "segoeui"; +font-size:inherit; +text-rendering:auto; +-webkit-font-smoothing:antialiased; +-moz-osx-font-smoothing:grayscale; +line-height: 150% +} + +.tutorial-stop-button { +color: #a94442; +background-color: #f2dede; +border-color: #ebccd1; +padding: 12px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #e4b9c0; +min-width: 100px; +} + +.tutorial-skip-button { +color: #8a6d3b; +background-color: #fcf8e3; +border-color: #faebcc; +padding: 12px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #f7e1b5; +min-width: 100px; +} + +.tutorial-previous-button { +color: #31708f; +background-color: #d9edf7; +border-color: #bce8f1; +padding: 12px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #c9e2b3; +min-width: 100px; +} + +.tutorial-next-button { +color: #3c763d; +background-color: #dff0d8; +border-color: #d6e9c6; +padding: 12px; +border: 1px solid transparent; +border-radius: 4px; +margin: 20px 0; +border-top-color: #c9e2b3; +min-width: 100px; +} + +.tutorial-form { +padding: 5px; +border: solid 0px; +margin-left: auto; +margin-right: auto; +margin-bottom: 20px; +width: 100%; +} + +.tutorial-buttonsTable { +border-top-color: #a6e1ec; +border: solid 0px; +vertical-align: middle; +min-width: 100px; +width: 95%; +margin-left: auto; +margin-right: auto; +} + +.tutorial-image-container { +padding: 5px 15px 5px 5px; +border: solid 0px; +margin-left: auto; +margin-right: auto; +width: 100%; +} + +/* Tooltip container */ +.tutorial-tooltip { +position: relative; +display: inline-block; +border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ +} + +/* Tooltip text */ +.tutorial-tooltip .tutorial-tooltiptext { +visibility: hidden; +width: 240px; +background-color: #0295aa; +color: #fff; +font-weight: normal; +font-size: 92%; +line-height: 130%; +text-align: center; +padding: 15px; +border-radius: 6px; + +/* Position the tutorial-tooltip text */ +position: absolute; +z-index: 1; +bottom: 125%; +left: 50%; +margin-left: -120px; + +/* Fade in tutorial-tooltip */ +opacity: 0; +transition: opacity 0.3s; +} + +/* Tooltip arrow */ +.tutorial-tooltip .tutorial-tooltiptext::after { +content: ""; +position: absolute; +top: 100%; +left: 50%; +margin-left: -5px; +border-width: 5px; +border-style: solid; +border-color: #0295aa transparent transparent transparent; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tutorial-tooltip:hover .tutorial-tooltiptext { +visibility: visible; +opacity: 1; +} + + + diff --git a/Client/WebServer/index.html b/Client/WebServer/index.html index f162fbdca..7bf26db17 100644 --- a/Client/WebServer/index.html +++ b/Client/WebServer/index.html @@ -118,6 +118,8 @@
  • Important Style
  • Success Style
  • List Style
    • +
  • Callout Style
    • +
  • Summary Style
  • JS Code Style
  • JSON Code Style
  • Table Style
    • diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js index bb346c2b0..f67761f42 100644 --- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js +++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js @@ -65,6 +65,8 @@ function newSuperalgosDocSpace() { toWarning: toWarning, toImportant: toImportant, toSuccess: toSuccess, + toCallout: toCallout, + toSummary: toSummary, toList: toList, toTable: toTable, toGif: toGif, @@ -78,6 +80,12 @@ function newSuperalgosDocSpace() { function showHTMLTextArea() { if (selectedParagraph === undefined) { return } + /* + When in editing mode, some type of paragraphs need to extend + the text area style so that while editing, it looks and feel + like the non editing style of the paragraph. For those we + add an extra style class. + */ let extraClassName = '' if (selectedParagraph.id.indexOf('definition') >= 0) { extraClassName = ' ' + '' @@ -185,6 +193,20 @@ function newSuperalgosDocSpace() { renderPage() } + function toCallout() { + let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id) + docSchemaParagraph.style = 'Callout' + contextMenuForceOutClick() + renderPage() + } + + function toSummary() { + let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id) + docSchemaParagraph.style = 'Summary' + contextMenuForceOutClick() + renderPage() + } + function toList() { let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id) docSchemaParagraph.style = 'List' @@ -459,6 +481,12 @@ function newSuperalgosDocSpace() { if (paragraphNode.id.indexOf('-json') >= 0) { selectedParagraphData = paragraphNode.innerText.substring(1, paragraphNode.innerText.length - 1) } + if (paragraphNode.id.indexOf('-callout') >= 0) { + selectedParagraphData = paragraphNode.innerText + } + if (paragraphNode.id.indexOf('-summary') >= 0) { + selectedParagraphData = paragraphNode.innerText.substring(9, paragraphNode.innerText.length) + } selectedParagraph = paragraphNode selectedParagraphHeight = paragraphNode.getClientRects()[0].height @@ -1337,6 +1365,24 @@ function newSuperalgosDocSpace() { innerHTML = addToolTips(innerHTML) break } + case 'Callout': { + styleClass = 'class="docs-font-small docs-callout"' + prefix = '' + role = '' + key = key + '-callout' + innerHTML = addItalics(innerHTML) + innerHTML = addToolTips(innerHTML) + break + } + case 'Summary': { + styleClass = 'class="docs-font-small docs-summary"' + prefix = 'Summary:' + role = '' + key = key + '-summary' + innerHTML = addItalics(innerHTML) + innerHTML = addToolTips(innerHTML) + break + } case 'List': { styleClass = '' prefix = '
  • '