[Libreoffice-commits] dev-tools.git: help3/xhpeditor
Olivier Hallot (via logerrit)
logerrit at kemper.freedesktop.org
Thu Jan 16 11:32:19 UTC 2020
help3/xhpeditor/DisplayArea.css | 297 ++++++++++++++++++++++++++++++++++++++++
help3/xhpeditor/index.php | 1
help3/xhpeditor/xhp2html.js | 11 -
help3/xhpeditor/xhpeditor.css | 288 --------------------------------------
4 files changed, 301 insertions(+), 296 deletions(-)
New commits:
commit b3d9f605262331be83dde68b5a3f0036cdf22672
Author: Olivier Hallot <olivier.hallot at libreoffice.org>
AuthorDate: Thu Jan 16 08:28:51 2020 -0300
Commit: Olivier Hallot <olivier.hallot at libreoffice.org>
CommitDate: Thu Jan 16 12:31:59 2020 +0100
xhpeditor: more refactoring
- split CSS into editor and renderpage (DisplayArea)
- touching CodeMirror addons (WIP)
Change-Id: Ie47c30a17a7105f75a006b0b4c74bd804cc84a1c
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/86916
Reviewed-by: Olivier Hallot <olivier.hallot at libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot at libreoffice.org>
diff --git a/help3/xhpeditor/DisplayArea.css b/help3/xhpeditor/DisplayArea.css
new file mode 100644
index 0000000..73dcf06
--- /dev/null
+++ b/help3/xhpeditor/DisplayArea.css
@@ -0,0 +1,297 @@
+/* -*- Mode: C++; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+/*
+ * This file is part of the LibreOffice project.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+/* Imported from default css for DisplayArea */
+#DisplayArea {
+ background-color: white;
+ overflow: auto;
+ padding: 10px;
+ grid-area: main;
+}
+
+#renderedpage,
+#DisplayArea p,
+#DisplayArea h1,
+#DisplayArea h2,
+#DisplayArea h3,
+#DisplayArea h4,
+#DisplayArea h5,
+#DisplayArea h6,
+.listitem,
+.listitemintable,
+.paragraph,
+.tablecontent {
+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
+}
+.input {
+ background-color: rgba(0,0,0,0.04);
+ transition-property: background-color;
+ transition-duration: 150ms;
+ border-bottom: 1px dashed rgba(0,0,0,0.1);
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+
+#DisplayArea ::selection {
+ background: #BFFFB7;
+}
+#DisplayArea a {
+ text-decoration: none;
+ color: #0369AE;
+}
+#DisplayArea a:hover {
+ text-decoration: underline;
+ color: #1C99E0;
+}
+#DisplayArea pre,
+.code,
+.codeintable,
+.example,
+.exampleintable,
+.literal,
+.literalintable,
+.path,
+.pathintable {
+ background-color: rgba(0,0,0,0.04);
+ border-radius: 2px;
+ display: inline;
+ padding: 1px 3px;
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+.smathcode {
+ border-radius: 2px;
+ padding: 1px 3px;
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+
+.acronym {
+ font-weight: bold;
+}
+.related {
+ font-weight: bold;
+ margin-top: 1.67rem;
+ border-top: 1px solid black;
+}
+.emph,
+.menuitem {
+ font-weight: bold;
+}
+.keycode {
+ /*font-weight: bold;*/
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+.widget{
+ padding: 1px 10px;
+ background: #f0f0f0;
+ background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
+ border-radius: 3px;
+ color: #303030;
+ border: 1px solid #a0a0a0;
+ border-bottom-width: 2px;
+ white-space: nowrap;
+}
+/* div's for warning, tip and note */
+.note,
+.tip,
+.warning {
+ display:flex;
+ align-items: center;
+ border-radius: 0 4px 4px 0;
+ box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+ padding: 0.2em;
+ margin-top: 15px;
+}
+.note {
+ border-left: 4px solid #FFDE09;
+ background-color: #FFF4D0;
+}
+.tip {
+ border-left: 4px solid #38618C;
+ background-color: #DAE2EA;
+}
+.warning {
+ border-left: 4px solid #FF5964;
+ background-color: #FFE0E2;
+}
+.noteicon {
+ padding:0.3em;
+ transition: transform .2s; /* Animation */
+}
+.noteicon:hover {
+ transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+}
+.notetext {
+ padding:0.3em;
+}
+#DisplayArea h1,
+#DisplayArea h2,
+#DisplayArea h3,
+#DisplayArea h4,
+#DisplayArea h5,
+#DisplayArea h6 {
+ margin-bottom: 0.67rem;
+ color: #148603;
+}
+
+#DisplayArea p,
+#DisplayArea ol,
+#DisplayArea td {
+ font-size: 1.17rem;
+ margin: 2px 2px 2px 2px;
+}
+#DisplayArea p {
+ margin-bottom: 10px;
+}
+
+#DisplayArea h1 {
+ font-size: 1.83rem;
+ font-weight: 300;
+ border-bottom: 2px solid #148603;
+ padding-bottom: 6px;
+}
+#DisplayArea h1 a {
+ text-decoration: none;
+}
+#DisplayArea h2 {
+ font-size: 1.55rem;
+}
+#DisplayArea h3 {
+ font-size: 1.33rem;
+}
+#DisplayArea h4,
+#DisplayArea h5,
+#DisplayArea h6 {
+ font-size: 1.17rem;
+}
+.avis {
+ /* background-color: #EEEEEE;*/
+}
+.relatedtopics {
+ font-weight: normal;
+}
+.relatedbody {
+ margin-top: 2px;
+ margin-bottom: 2px;
+ margin-left: 5px;
+}
+.howtoget {
+ background: #CCF4C6;
+ border-left: 4px solid #148603;
+ border-radius: 0 4px 4px 0;
+ box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+ padding: 0.3em;
+ display: flex;
+ flex-direction: column;
+}
+.howtogetheader {
+ background: #FFF;
+ border-radius: 2px;
+ box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+ display: inline-block;
+ font-weight: bold;
+ padding: 0.3em;
+}
+.howtogetbody {
+}
+.samplefilesection{
+}
+.wide {
+ width: 100%;
+}
+.onecell{
+ box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
+ border-bottom: 1px solid #E8E8E8;
+}
+/* Special case of icon table*/
+icontable {
+ display:flex;
+ align-items:center;
+}
+.iconcell {
+ padding:0.3em;
+}
+.imageicon {
+ transition: transform .2s; /* Animation */
+}
+.imageicon:hover{
+ transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+}
+
+#DisplayArea table {
+ box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
+ border-collapse: collapse;
+ background: #fefefe;
+}
+#DisplayArea table,
+#DisplayArea th,
+#DisplayArea td {
+ border-top: 0;
+ border-bottom: 1px solid #E8E8E8;
+ border-left: 0;
+ border-right: 0;
+ padding: 0.3em;
+}
+.tablehead,
+.tableheadintable {
+ font-weight: bold;
+ margin-top: 0px;
+}
+.tableheadcell {
+ background: #148603;
+ color: white;
+ vertical-align:top;
+}
+#DisplayArea footer {
+ border-top: 2px solid #148603;
+ padding: 15px 10px 0 10px;
+ margin: 40px 0;
+}
+#DisplayArea footer p {
+ font-size: 0.98rem;
+}
+.embedded {
+ background-color: #eeeeee;
+ border:solid 1px black;
+}
+.bug {
+ color: red;
+}
+.debugembed {
+ color: magenta;
+}
+.debug {
+ border: 1px solid black;
+ padding: 3px;
+ display: block;
+ background-color: #222;
+ color: red;
+ text-align: left;
+}
+.donation {
+ padding: 0 0 10px 0;
+ margin-bottom: 1em;
+ border-bottom: 1px dashed rgba(0,0,0,0.1);
+}
+.donation p{
+ font-size:1.2rem;
+}
+.bascode {
+ margin-top:15px;
+ margin-bottom: 15px;
+}
+.screenshot, .genericimage {
+ border-collapse: collapse;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ border-style:none;
+ display:block;
+ box-shadow: 10px 10px 5px grey;
+}
diff --git a/help3/xhpeditor/index.php b/help3/xhpeditor/index.php
index a174c6b..29a31fd 100644
--- a/help3/xhpeditor/index.php
+++ b/help3/xhpeditor/index.php
@@ -17,6 +17,7 @@ $xhp = $_POST["xhpdoc"];
<title>LibreOffice Documentation XHP Editor</title>
<link rel="shortcut icon" href="favicon.ico"/>
<link type="text/css" rel="stylesheet" href="xhpeditor.css">
+ <link type="text/css" rel="stylesheet" href="DisplayArea.css.css">
<link type="text/css" rel="stylesheet" href="lib/codemirror.css">
<link type="text/css" rel="stylesheet" href="addon/hint/show-hint.css">
<link type="text/css" rel="stylesheet" href="helpcontent2/help3xsl/normalize.css">
diff --git a/help3/xhpeditor/xhp2html.js b/help3/xhpeditor/xhp2html.js
index 667ea06..472ebd1 100644
--- a/help3/xhpeditor/xhp2html.js
+++ b/help3/xhpeditor/xhp2html.js
@@ -14,6 +14,7 @@ var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
lineNumbers: true,
theme: "default",
mode: "xml",
+ lineWrapping: true,
extraKeys: {
"'<'": completeAfter,
"'/'": completeIfAfterLt,
@@ -28,15 +29,9 @@ var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
matchBrackets: true,
- lineWrapping: true,
+
viewportMargin: Infinity,
- extraKeys: {
- "'<'": completeAfter,
- "'/'": completeIfAfterLt,
- "' '": completeIfInTag,
- "'='": completeIfInTag,
- "Ctrl-Space": "autocomplete"
- }
+
*/
function readSingleFile(e) {
diff --git a/help3/xhpeditor/xhpeditor.css b/help3/xhpeditor/xhpeditor.css
index 273eaa9..83e7ea0 100644
--- a/help3/xhpeditor/xhpeditor.css
+++ b/help3/xhpeditor/xhpeditor.css
@@ -147,291 +147,3 @@
position:absolute;
overflow-y:auto;
}
-
-/* Imported from default css for DisplayArea */
-#DisplayArea {
- background-color: white;
- overflow: auto;
- padding: 10px;
- grid-area: main;
-}
-
-#renderedpage,
-#DisplayArea p,
-#DisplayArea h1,
-#DisplayArea h2,
-#DisplayArea h3,
-#DisplayArea h4,
-#DisplayArea h5,
-#DisplayArea h6,
-.listitem,
-.listitemintable,
-.paragraph,
-.tablecontent {
- font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
-}
-.input {
- background-color: rgba(0,0,0,0.04);
- transition-property: background-color;
- transition-duration: 150ms;
- border-bottom: 1px dashed rgba(0,0,0,0.1);
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-
-#DisplayArea ::selection {
- background: #BFFFB7;
-}
-#DisplayArea a {
- text-decoration: none;
- color: #0369AE;
-}
-#DisplayArea a:hover {
- text-decoration: underline;
- color: #1C99E0;
-}
-#DisplayArea pre,
-.code,
-.codeintable,
-.example,
-.exampleintable,
-.literal,
-.literalintable,
-.path,
-.pathintable {
- background-color: rgba(0,0,0,0.04);
- border-radius: 2px;
- display: inline;
- padding: 1px 3px;
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-.smathcode {
- border-radius: 2px;
- padding: 1px 3px;
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-
-.acronym {
- font-weight: bold;
-}
-.related {
- font-weight: bold;
- margin-top: 1.67rem;
- border-top: 1px solid black;
-}
-.emph,
-.menuitem {
- font-weight: bold;
-}
-.keycode {
- /*font-weight: bold;*/
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-.widget{
- padding: 1px 10px;
- background: #f0f0f0;
- background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
- border-radius: 3px;
- color: #303030;
- border: 1px solid #a0a0a0;
- border-bottom-width: 2px;
- white-space: nowrap;
-}
-/* div's for warning, tip and note */
-.note,
-.tip,
-.warning {
- display:flex;
- align-items: center;
- border-radius: 0 4px 4px 0;
- box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
- padding: 0.2em;
- margin-top: 15px;
-}
-.note {
- border-left: 4px solid #FFDE09;
- background-color: #FFF4D0;
-}
-.tip {
- border-left: 4px solid #38618C;
- background-color: #DAE2EA;
-}
-.warning {
- border-left: 4px solid #FF5964;
- background-color: #FFE0E2;
-}
-.noteicon {
- padding:0.3em;
- transition: transform .2s; /* Animation */
-}
-.noteicon:hover {
- transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
-.notetext {
- padding:0.3em;
-}
-#DisplayArea h1,
-#DisplayArea h2,
-#DisplayArea h3,
-#DisplayArea h4,
-#DisplayArea h5,
-#DisplayArea h6 {
- margin-bottom: 0.67rem;
- color: #148603;
-}
-
-#DisplayArea p,
-#DisplayArea ol,
-#DisplayArea td {
- font-size: 1.17rem;
- margin: 2px 2px 2px 2px;
-}
-#DisplayArea p {
- margin-bottom: 10px;
-}
-
-#DisplayArea h1 {
- font-size: 1.83rem;
- font-weight: 300;
- border-bottom: 2px solid #148603;
- padding-bottom: 6px;
-}
-#DisplayArea h1 a {
- text-decoration: none;
-}
-#DisplayArea h2 {
- font-size: 1.55rem;
-}
-#DisplayArea h3 {
- font-size: 1.33rem;
-}
-#DisplayArea h4,
-#DisplayArea h5,
-#DisplayArea h6 {
- font-size: 1.17rem;
-}
-.avis {
- /* background-color: #EEEEEE;*/
-}
-.relatedtopics {
- font-weight: normal;
-}
-.relatedbody {
- margin-top: 2px;
- margin-bottom: 2px;
- margin-left: 5px;
-}
-.howtoget {
- background: #CCF4C6;
- border-left: 4px solid #148603;
- border-radius: 0 4px 4px 0;
- box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
- padding: 0.3em;
- display: flex;
- flex-direction: column;
-}
-.howtogetheader {
- background: #FFF;
- border-radius: 2px;
- box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
- display: inline-block;
- font-weight: bold;
- padding: 0.3em;
-}
-.howtogetbody {
-}
-.samplefilesection{
-}
-.wide {
- width: 100%;
-}
-.onecell{
- box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
- border-bottom: 1px solid #E8E8E8;
-}
-/* Special case of icon table*/
-icontable {
- display:flex;
- align-items:center;
-}
-.iconcell {
- padding:0.3em;
-}
-.imageicon {
- transition: transform .2s; /* Animation */
-}
-.imageicon:hover{
- transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
-
-#DisplayArea table {
- box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
- border-collapse: collapse;
- background: #fefefe;
-}
-#DisplayArea table,
-#DisplayArea th,
-#DisplayArea td {
- border-top: 0;
- border-bottom: 1px solid #E8E8E8;
- border-left: 0;
- border-right: 0;
- padding: 0.3em;
-}
-.tablehead,
-.tableheadintable {
- font-weight: bold;
- margin-top: 0px;
-}
-.tableheadcell {
- background: #148603;
- color: white;
- vertical-align:top;
-}
-#DisplayArea footer {
- border-top: 2px solid #148603;
- padding: 15px 10px 0 10px;
- margin: 40px 0;
-}
-#DisplayArea footer p {
- font-size: 0.98rem;
-}
-.embedded {
- background-color: #eeeeee;
- border:solid 1px black;
-}
-.bug {
- color: red;
-}
-.debugembed {
- color: magenta;
-}
-.debug {
- border: 1px solid black;
- padding: 3px;
- display: block;
- background-color: #222;
- color: red;
- text-align: left;
-}
-.donation {
- padding: 0 0 10px 0;
- margin-bottom: 1em;
- border-bottom: 1px dashed rgba(0,0,0,0.1);
-}
-.donation p{
- font-size:1.2rem;
-}
-.bascode {
- margin-top:15px;
- margin-bottom: 15px;
-}
-.screenshot, .genericimage {
- border-collapse: collapse;
- margin-left: auto;
- margin-right: auto;
- margin-top: 2em;
- margin-bottom: 2em;
- border-style:none;
- display:block;
- box-shadow: 10px 10px 5px grey;
-}
More information about the Libreoffice-commits
mailing list