help3/xhpeditor/index.php | 42 ++++++++------
help3/xhpeditor/logo.png |binary
help3/xhpeditor/views/empty_preview.php | 11 +++
help3/xhpeditor/xhp2html.js | 2
help3/xhpeditor/xhpeditor.css | 93 +++++++++++++++++++++++++++-----
5 files changed, 117 insertions(+), 31 deletions(-)
New commits:
commit 0a2990a97b20220cd8c2f7dc2ba227488fc65349
Author: Juan José González <juanjose...@libreoffice.org>
AuthorDate: Fri Dec 22 07:17:30 2023 -0700
Commit: Olivier Hallot <olivier.hal...@libreoffice.org>
CommitDate: Sat Dec 23 16:41:28 2023 +0100
Add header, menu bar and toolbar takes the whole width of the window
empty preview message.
A couple of screenshots
https://s3.us-west-1.amazonaws.com/juanjosegzl.com/images/xhpeditorempty+message.png
https://s3.us-west-1.amazonaws.com/juanjosegzl.com/images/xhpeditorrender.png
Change-Id: If0790ac728cf4f5ea8725a4c691d75b6a36fc607
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/161208
Reviewed-by: Olivier Hallot <olivier.hal...@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hal...@libreoffice.org>
diff --git a/help3/xhpeditor/index.php b/help3/xhpeditor/index.php
index 710f8adb..1af632e5 100644
--- a/help3/xhpeditor/index.php
+++ b/help3/xhpeditor/index.php
@@ -9,7 +9,11 @@
<?php
require_once './config.php';
require_once './snippets.php';
-$xhp = $_POST["xhpdoc"];
+$xhp = isset($_POST["xhpdoc"]) ? $_POST["xhpdoc"] : null;
+
+if ($xhp) {
+ $xhp_filename = simplexml_load_string($xhp)->xpath("//filename");
+}
?>
<html>
<head>
@@ -52,32 +56,38 @@ $xhp = $_POST["xhpdoc"];
</head>
<body style="font-family:sans-serif;">
- <div id="editorpageheader">
- <h2>LibreOffice Documentation XHP Editor</h2>
- <?php include './menu.php';?>
- <?php include './toolbar.php'; ?>
- </div>
+ <div id="editorpageheader">
+ <header>
+ <img class="logo" src="logo.png" />
+ <h1>LibreOffice Documentation XHP Editor</h1>
+ <p>
+ <?php
+ echo isset($xhp_filename) ? "Editing: {$xhp_filename[0]}" : " ";
+ ?>
+ </p>
+ </header>
+ <?php include './menu.php';?>
+ <?php include './toolbar.php'; ?>
+ </div>
<div id="editortextarea">
<form id="CMtextarea" method="post" action="index.php">
<textarea id="xhpeditor" name="xhpdoc" form="CMtextarea"><?php
echo htmlspecialchars($xhp,ENT_NOQUOTES);?></textarea>
</form>
</div>
<?php
- $xhp = $_POST["xhpdoc"];
- $xhp_filename = simplexml_load_string($xhp)->xpath("//filename");
if (isset($_POST["render_page"])) {
- echo '<div id="renderedpageheader"><h2>Rendered page:
'.$xhp_filename[0];
- echo '</h2><div class="buttonrow"><div
class="systembuttons"><p>System: ';
+ echo '<div id="renderedpageheader">';
+ echo '<div class="buttonrow"><div class="systembuttons">System: ';
$opSys = array("MAC", "WIN", "UNIX");
foreach ($opSys as $value) {
- echo '<input type="radio" name="sys"
onclick="setSystemSpan(\''.$value.'\')">'.$value.' ';
+ echo '<input type="radio" name="sys" id="' . $value . '"
onclick="setSystemSpan(\''.$value.'\')" /><label for="' . $value .
'">'.$value.'</label> ';
}
- echo '</p></div><div class="applbuttons"><p> Module: ';
+ echo '</div><div class="applbuttons">Module: ';
$appModule = array("WRITER", "CALC", "IMPRESS", "DRAW", "BASE",
"MATH", "CHART");
foreach ($appModule as $value){
- echo '<input type="radio" name="app"
onclick="setApplSpan(\''.$value.'\')">'.$value.' ';
+ echo '<input type="radio" name="app"
onclick="setApplSpan(\''.$value.'\')" id="'. $value .'"><label for="'. $value
.'">'.$value.'</label> ';
}
- echo '</p></div></div></div><div id="renderedpage">';
+ echo '</div></div></div><div id="renderedpage">';
$xml = new DOMDocument();
$xml->loadXML($xhp);
$xsl = new DOMDocument;
@@ -87,7 +97,7 @@ $xhp = $_POST["xhpdoc"];
$proc->setParameter("","productname",$CONFIG["productname"]);
$proc->setParameter("","iconpath",$CONFIG["icon_path"]);
$proc->importStyleSheet($xsl);
- echo $proc->transformToXml($xml);
+ echo @$proc->transformToXml($xml);
echo "</div>";
}elseif (isset($_POST["check_xhp"])) {
libxml_use_internal_errors(true);
@@ -153,7 +163,7 @@ $xhp = $_POST["xhpdoc"];
echo "</div>";
} else {
echo '<div id="renderedpageheader">';
- echo '<h2>Viewing Area</h2>';
+ include 'views/empty_preview.php';
echo "</div>";
};
?>
diff --git a/help3/xhpeditor/logo.png b/help3/xhpeditor/logo.png
new file mode 100644
index 00000000..ad22bf16
Binary files /dev/null and b/help3/xhpeditor/logo.png differ
diff --git a/help3/xhpeditor/views/empty_preview.php
b/help3/xhpeditor/views/empty_preview.php
new file mode 100644
index 00000000..6bb4afbf
--- /dev/null
+++ b/help3/xhpeditor/views/empty_preview.php
@@ -0,0 +1,11 @@
+<div>
+ <div class="card">
+ <div class="card-header">
+ <h2>Create or open a file</h2>
+ </div>
+ <div class="card-body">
+ <p>Start working on a <a href="#" onclick="startNewXHPDoc()">new
file</a>. Or</p>
+ <p><a href="#"
onclick="document.getElementById('file-input').click()">Open an existing
file.</a></p>
+ </div>
+ </div>
+</div>
diff --git a/help3/xhpeditor/xhp2html.js b/help3/xhpeditor/xhp2html.js
index 930b451b..4ce2886f 100644
--- a/help3/xhpeditor/xhp2html.js
+++ b/help3/xhpeditor/xhp2html.js
@@ -37,7 +37,7 @@ var editor =
CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
hintOptions: {schemaInfo: this.xhptags}
});
-const height = window.innerHeight -
document.getElementById('editorpageheader').offsetHeight - 16;
+const height = window.innerHeight -
document.getElementById('editorpageheader').offsetHeight;
editor.setSize(null, height);
function readSingleFile(e) {
diff --git a/help3/xhpeditor/xhpeditor.css b/help3/xhpeditor/xhpeditor.css
index 7d9bdce4..c4b91e49 100644
--- a/help3/xhpeditor/xhpeditor.css
+++ b/help3/xhpeditor/xhpeditor.css
@@ -1,4 +1,4 @@
-/* -*- Mode: C++; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+/* -*- Mode: css; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
/*
* This file is part of the LibreOffice project.
*
@@ -19,6 +19,25 @@ ol, ul {
/* css for the main editor web page */
+*, ::after, ::before {
+ box-sizing: border-box;
+}
+
+#editorpageheader img {
+ height: 50px;
+}
+
+#editorpageheader h1 {
+ font-size: 1em;
+}
+
+#editorpageheader header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 1em;
+}
+
.form_area{
border:1px solid grey;
height: auto;
@@ -100,14 +119,12 @@ ol, ul {
top:0px;
margin: 0px;
z-index:100;
- background: Beige;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
#editortextarea{
grid-area: editortextarea;
margin: 0px;
- background: Beige;
border-right: 1px solid gray;
}
@@ -117,8 +134,8 @@ ol, ul {
top:0px;
margin: 0px;
background: AliceBlue;
- border-bottom: 1px solid gray;
}
+
#renderedpage {
grid-area:renderedpage;
padding: 3px;
@@ -128,15 +145,30 @@ ol, ul {
display:inline-block;
}
.buttonrow{
- margin:5px;
- display:flow-root;
+ margin:6px;
}
-.systembuttons{
- float:left;
+
+.buttonrow input {
+ position: absolute;
+ clip: rect(0,0,0,0);
+ pointer-events: none;
}
-.applbuttons{
- float:right;
+
+.applbuttons {
+ padding: 16px 0;
}
+
+.buttonrow label {
+ padding: 4px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ border-color: lightgray;
+}
+
+.buttonrow input:checked + label{
+ background-color: white;
+}
+
/* Use @supports to sneak these rules past IE */
@supports (grid-area: auto) {
@media screen and (max-width: 800px) {
@@ -156,8 +188,9 @@ ol, ul {
overflow:hidden;
display: grid;
grid-template-columns: 50vw 50vw;
- grid-template-rows: minmax(10vh, auto) minmax(auto, 90vh);
- grid-template-areas: "editorpageheader renderedpageheader"
+ grid-template-rows: minmax(10vh, auto) minmax(10vh, auto)
minmax(auto, 90vh);
+ grid-template-areas: "editorpageheader editorpageheader"
+ "editortextarea renderedpageheader"
"editortextarea renderedpage"
}
}
@@ -166,6 +199,7 @@ ol, ul {
/* Toolbar */
ul#editor-toolbar {
+ background-color: lightgray;
margin: 0;
line-height: 17px;
padding: 0;
@@ -174,7 +208,11 @@ ul#editor-toolbar {
ul#editor-toolbar li {
display: inline-block;
- padding: 4px 8px;
+ padding: 8px 12px;
+}
+
+#editor-toolbar i.bi {
+ color: black;
}
ul#editor-toolbar li:hover {
@@ -184,7 +222,34 @@ ul#editor-toolbar li:hover {
}
ul#editor-toolbar li.separator {
- border-left: 1px solid lightgray;
+ border-left: 1px solid black;
padding: 4px 0;
width: 0;
}
+
+
+/* Card */
+div.card {
+ border: 1px solid lightgray;
+ border-radius: 6px;
+ margin: 24px;
+ padding: 0px;
+}
+
+div.card div.card-header {
+ border-bottom: 1px solid lightgray;
+ padding: 12px 24px;
+ background-color: #333;
+ color: white;
+ border-radius: 6px 6px 0 0;
+}
+
+div.card div.card-header * {
+ margin: 0;
+}
+
+div.card div.card-body {
+ padding: 12px 24px;
+ border-radius: 0 0 6px 6px;
+ background-color: #fefefe;
+}
