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.hallot@libreoffice.org> Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>
author: Juan José González <juanjosegzl@libreoffice.org> 2023-12-22 07:17:30 -0700
committer: Olivier Hallot <olivier.hallot@libreoffice.org> 2023-12-23 16:41:28 +0100
commit: 0a2990a97b20220cd8c2f7dc2ba227488fc65349 (patch)
tree: 76e2cb71e4548cd3d7c337903bff677d1669f361
parent: 6a8ae15597c1ac0f5b13ff9cd7d1902707f4d9fc (diff)
5 files changed, 117 insertions, 31 deletions
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]}" : "&nbsp";
+      ?>
+      </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.'&nbsp;';
+               echo '<input type="radio" name="sys" id="' . $value . '" onclick="setSystemSpan(\''.$value.'\')" /><label for="' . $value . '">'.$value.'</label>&nbsp;';
                }
-            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.'&nbsp;';
+                echo '<input type="radio" name="app" onclick="setApplSpan(\''.$value.'\')" id="'. $value .'"><label for="'. $value .'">'.$value.'</label>&nbsp;';
             }
-            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
--- /dev/null
+++ b/help3/xhpeditor/logo.png
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;
+}
author	Juan José González <juanjosegzl@libreoffice.org>	2023-12-22 07:17:30 -0700
committer	Olivier Hallot <olivier.hallot@libreoffice.org>	2023-12-23 16:41:28 +0100
commit	0a2990a97b20220cd8c2f7dc2ba227488fc65349 (patch)
tree	76e2cb71e4548cd3d7c337903bff677d1669f361
parent	6a8ae15597c1ac0f5b13ff9cd7d1902707f4d9fc (diff)