help3/xhpeditor/buttons.php | 213 +++++++++++++++++++++++++-----------------
help3/xhpeditor/index.php | 21 +---
help3/xhpeditor/xhp2html.js | 4
help3/xhpeditor/xhpeditor.css | 97 +++++++++++++++++--
4 files changed, 226 insertions(+), 109 deletions(-)
New commits:
commit 87321bdeb812cbb4e1b6bd668156dac03f9d81f8
Author: Olivier Hallot <olivier.hal...@libreoffice.org>
AuthorDate: Sun Jan 12 10:28:36 2020 -0300
Commit: Olivier Hallot <olivier.hal...@libreoffice.org>
CommitDate: Sun Jan 12 14:35:58 2020 +0100
xhpeditor: Add dropdown menu
- Add css-only dropdown menu from W3C
- Add Help for XHP ref and editor commands
- Fix header divs on top to display when scrollng
- Refactor large chunks of page elemets display
Change-Id: Ie173c492a72b9f49200303d99b30544bdfc0d53e
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/86636
Reviewed-by: Olivier Hallot <olivier.hal...@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hal...@libreoffice.org>
diff --git a/help3/xhpeditor/buttons.php b/help3/xhpeditor/buttons.php
index ead4776..cd90f4e 100644
--- a/help3/xhpeditor/buttons.php
+++ b/help3/xhpeditor/buttons.php
@@ -1,86 +1,129 @@
-<div class="buttonrow">
- <div class="snip_heading">File:</div>
- <div class="snip_buttons">Open: <input type="file" id="file-input"
accept=".xhp"/></div>
- <button
onclick="download(editor.getValue(),getFileNameFromXML(),'text/xml')"
class="snip_buttons">Save local file</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Edit: </div>
- <button class="snip_buttons" onclick="editor.undo()">Undo</button>
- <button class="snip_buttons" onclick="editor.redo()">Redo</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Document: </div>
- <button onclick="startNewXHPDoc()" class="snip_buttons">Start new XHP
document</button>
- <button onclick="docHeading()" class="snip_buttons">DocHeading</button>
- <button onclick="snippet7()" class="snip_buttons"><ahelp></button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Bookmarks: </div>
- <button onclick="bookmarkValue()" class="snip_buttons">bmk-value</button>
- <button onclick="bookmarkBranch()" class="snip_buttons">bmk-hid</button>
- <button onclick="bookmarkIndex()" class="snip_buttons">bmk-index</button>
- <button onclick="bookmarkNoWidget()"
class="snip_buttons">bmk-nowidget</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Sections: </div>
- <button onclick="section_div()" class="snip_buttons">Section</button>
- <button onclick="related_topics()" class="snip_buttons">Related
Topics</button>
- <button onclick="howtoget()" class="snip_buttons">How to get</button>
- <button onclick="bascode_div()" class="snip_buttons">bascode div</button>
- <button onclick="pycode_div()" class="snip_buttons">pycode div</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Tables: </div>
- <button onclick="table2R3C()" class="snip_buttons">Table Full</button>
- <button onclick="tableRow()" class="snip_buttons">Table Row</button>
- <button onclick="tableCell()" class="snip_buttons">Table Cell</button>
- <button onclick="iconTable()" class="snip_buttons">Icon Table</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Paragraph: </div>
- <button onclick="paragraph('paragraph')"
class="snip_buttons"><paragraph></button>
- <button onclick="note()" class="snip_buttons"><note></button>
- <button onclick="warning()" class="snip_buttons"><warning></button>
- <button onclick="tip()" class="snip_buttons"><tip></button>
- <button onclick="bascode_par()" class="snip_buttons">bascode-par</button>
- <button onclick="pycode_par()" class="snip_buttons">pycode-par</button>
- <button onclick="image_par()" class="snip_buttons">image-par</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Characters: </div>
- <button onclick="emph()" class="snip_buttons"><emph></button>
- <button onclick="c_menuitem()"
class="snip_buttons"><menuitem></button>
- <button onclick="_input()" class="snip_buttons"><input></button>
- <button onclick="_literal()" class="snip_buttons"><literal></button>
- <button onclick="_keystroke()"
class="snip_buttons"><keycode></button>
- <button onclick="_widget()" class="snip_buttons"><widget></button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Headings:</div>
- <button onclick="heading('1')" class="snip_buttons"><H1></button>
- <button onclick="heading('2')" class="snip_buttons"><H2></button>
- <button onclick="heading('3')" class="snip_buttons"><H3></button>
- <button onclick="heading('4')" class="snip_buttons"><H4></button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Switches: </div>
- <button onclick="switchXHP('appl')" class="snip_buttons">Switch
appl</button>
- <button onclick="switchXHP('sys')" class="snip_buttons">Switch sys</button>
- <button onclick="switchInline('appl')" class="snip_buttons">Switchinline
appl</button>
- <button onclick="switchInline('sys')" class="snip_buttons">Switchinline
sys</button>
- <button onclick="MenuPrefMAC()" class="snip_buttons">Menu MAC</button>
- <button onclick="KeyMAC()" class="snip_buttons">Key MAC</button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Lists: </div>
- <button onclick="tList('unordered')"
class="snip_buttons"><ul></button>
- <button onclick="tList('ordered')" class="snip_buttons"><ol></button>
- <button onclick="listItem()" class="snip_buttons"><listitem></button>
-</div>
-<div class="buttonrow">
- <div class="snip_heading">Links:</div>
- <button onclick="tVariable()"
class="snip_buttons"><variable></button>
- <button onclick="tEmbed()" class="snip_buttons"><embed></button>
- <button onclick="tEmbedvar()"
class="snip_buttons"><embedvar></button>
- <button onclick="tLink()" class="snip_buttons"><link></button>
+<div class="navbar">
+ <div class="dropdown">
+ <button class="dropbtn">File</button>
+ <div class="dropdown-content">
+ <input type="file" id="file-input" accept=".xhp" value="Open"/>
+ <a href="#"
onclick="download(editor.getValue(),getFileNameFromXML(),'text/xml')">Save</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Edit</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="editor.undo()">Undo</a>
+ <a href="#" onclick="editor.redo()">Redo</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Document</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="startNewXHPDoc()">Start new XHP document</a>
+ <a href="#" onclick="docHeading()">DocHeading</a>
+ <a href="#" onclick="snippet7()"><ahelp></a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Bookmarks</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="bookmarkValue()">bmk-value</a>
+ <a href="#" onclick="bookmarkBranch()">bmk-hid</a>
+ <a href="#" onclick="bookmarkIndex()">bmk-index</a>
+ <a href="#" onclick="bookmarkNoWidget()">bmk-nowidget</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Sections</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="section_div()">Section</a>
+ <a href="#" onclick="related_topics()">Related Topics</a>
+ <a href="#" onclick="howtoget()">How to get</a>
+ <a href="#" onclick="bascode_div()">bascode div</a>
+ <a href="#" onclick="pycode_div()">pycode div</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Tables</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="table2R3C()">Table Full</a>
+ <a href="#" onclick="tableRow()">Table Row</a>
+ <a href="#" onclick="tableCell()">Table Cell</a>
+ <a href="#" onclick="iconTable()">Icon Table</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Paragraph</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="paragraph('paragraph')"><paragraph></a>
+ <a href="#" onclick="note()"><note></a>
+ <a href="#" onclick="warning()"><warning></a>
+ <a href="#" onclick="tip()"><tip></a>
+ <a href="#" onclick="bascode_par()">bascode-par</a>
+ <a href="#" onclick="pycode_par()">pycode-par</a>
+ <a href="#" onclick="image_par()">image-par</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Characters</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="emph()"><emph></a>
+ <a href="#" onclick="c_menuitem()"><menuitem></a>
+ <a href="#" onclick="_input()"><input></a>
+ <a href="#" onclick="_literal()"><literal></a>
+ <a href="#" onclick="_keystroke()"><keycode></a>
+ <a href="#" onclick="_widget()"><widget></a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Headings</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="heading('1')"><H1></a>
+ <a href="#" onclick="heading('2')"><H2></a>
+ <a href="#" onclick="heading('3')"><H3></a>
+ <a href="#" onclick="heading('4')"><H4></a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Switches</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="switchXHP('appl')">Switch appl</a>
+ <a href="#" onclick="switchXHP('sys')">Switch sys</a>
+ <a href="#" onclick="switchInline('appl')">Switchinline appl</a>
+ <a href="#" onclick="switchInline('sys')">Switchinline sys</a>
+ <a href="#" onclick="MenuPrefMAC()">Menu MAC</a>
+ <a href="#" onclick="KeyMAC()">Key MAC</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Lists</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="tList('unordered')"><ul></a>
+ <a href="#" onclick="tList('ordered')"><ol></a>
+ <a href="#" onclick="listItem()"><listitem></a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Links</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="tVariable()"><variable></a>
+ <a href="#" onclick="tEmbed()"><embed></a>
+ <a href="#" onclick="tEmbedvar()"><embedvar></a>
+ <a href="#" onclick="tLink()"><link></a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Tools</button>
+ <div class="dropdown-content">
+ <input type="submit" form="CMtextarea" name="render_page"
value="Render page"/>
+ <input type="submit" form="CMtextarea" name="get_patch"
value="Generate patch"/>
+ <input type="submit" form="CMtextarea" name="check_xhp" value="Check
XHP"/>
+ <input type="submit" form="CMtextarea" name="open_master" value="Open
Master"/>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Help</button>
+ <div class="dropdown-content">
+ <a
href="https://wiki.documentfoundation.org/Documentation/Understanding,_Authoring_and_Editing_Openoffice.org_Help/3";
target="_blank">XHP Reference</a>
+ <a href="doc/manual.html#commands" target="_blank">Editor shortcuts</a>
+ <a href="#" target="_blank">Editor</a>
+ </div>
+ </div>
</div>
diff --git a/help3/xhpeditor/index.php b/help3/xhpeditor/index.php
index 9e1b066..58a1915 100644
--- a/help3/xhpeditor/index.php
+++ b/help3/xhpeditor/index.php
@@ -39,18 +39,15 @@ $xhp = $_POST["xhpdoc"];
<body style="font-family:sans-serif;">
<div id="leftside">
- <h2>LibreOffice Documentation XHP Editor</h2>
-
- <form id="CMtextarea" class="form_area" method="post" action="index.php">
- <input type="submit" name="render_page" value="Render page"/>
- <input type="submit" name="get_patch" value="Generate patch"/>
- <input type="submit" name="check_xhp" value="Check XHP"/>
- <input type="submit" name="open_master" value="Open Master"/>
- <textarea id="xhpeditor" name="xhpdoc" form="CMtextarea"><?php echo
$xhp;?></textarea></br>
- </form>
- <div class="buttonsdiv">
+ <div id="editorpageheader">
+ <h2>LibreOffice Documentation XHP Editor</h2>
<?php include './buttons.php';?>
</div>
+ <div id="editortextarea">
+ <form id="CMtextarea" method="post" action="index.php">
+ <textarea id="xhpeditor" name="xhpdoc" form="CMtextarea"><?php
echo $xhp;?></textarea>
+ </form>
+ </div>
</div>
<div id="rightside">
<?php
@@ -59,12 +56,12 @@ $xhp = $_POST["xhpdoc"];
echo '<div id="renderedpageheader"><h2>Rendered page</h2><div
class="buttonrow"><div class="systembuttons"><p>System: ';
$opSys = array("MAC", "WIN", "UNIX");
foreach ($opSys as $value) {
- echo '<input type="radio" name="sys"
onclick="setSystemSpan(\''.$value.'\')" class="snip_buttons">'.$value.' ';
+ echo '<input type="radio" name="sys"
onclick="setSystemSpan(\''.$value.'\')">'.$value.' ';
}
echo '</p></div><div class="applbuttons"><p> Module: ';
$appModule = array("WRITER", "CALC", "IMPRESS", "DRAW", "BASE",
"MATH");
foreach ($appModule as $value){
- echo '<input type="radio" name="app"
onclick="setApplSpan(\''.$value.'\')" class="snip_buttons">'.$value.' ';
+ echo '<input type="radio" name="app"
onclick="setApplSpan(\''.$value.'\')">'.$value.' ';
}
echo '</p></div></div></div><div id="renderedpage">';
$xml = new DOMDocument();
diff --git a/help3/xhpeditor/xhp2html.js b/help3/xhpeditor/xhp2html.js
index 6ff45af..170b846 100644
--- a/help3/xhpeditor/xhp2html.js
+++ b/help3/xhpeditor/xhp2html.js
@@ -57,6 +57,7 @@ function download(data, filename, type) {
// Codemirror configuration
var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
lineNumbers: true,
+ viewportMargin: Infinity,
indentUnit: 4,
indentWithTabs: false,
mode: "xml",
@@ -69,6 +70,5 @@ var editor =
CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
"' '": completeIfInTag,
"'='": completeIfInTag,
"Ctrl-Space": "autocomplete"
- },
- hintOptions: {schemaInfo: tags}
+ }
});
diff --git a/help3/xhpeditor/xhpeditor.css b/help3/xhpeditor/xhpeditor.css
index d85e145..251672e 100644
--- a/help3/xhpeditor/xhpeditor.css
+++ b/help3/xhpeditor/xhpeditor.css
@@ -7,24 +7,86 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
-/* css for the man editor web page */
+/* css for the main editor web page */
.form_area{
border:1px solid grey;
+ height: auto;
}
-.snip_buttons{
- display:inline-block;
-}
-.snip_heading{
- display:inline-block;
- width:6em;
+
+.CodeMirror {
+ border: 1px solid #eee;
+ height: auto;
}
+
.buttonrow{
margin-top:5px;
margin-left:10px;
}
-.buttonsdiv{
- display:block;
+
+/* CSS for the menu (W3Schools) */
+.navbar {
+ overflow: hidden;
+ background-color: #333;
+}
+
+.navbar a {
+ float: left;
+ font-size: 16px;
+ color: white;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+}
+
+.dropdown {
+ float: left;
+ overflow: hidden;
+}
+
+.dropdown .dropbtn {
+ font-size: 16px;
+ border: none;
+ outline: none;
+ color: white;
+ padding: 14px 16px;
+ background-color: inherit;
+ font-family: inherit;
+ margin: 0;
+}
+
+.navbar a:hover, .dropdown:hover .dropbtn {
+ background-color: #148603;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+.dropdown-content a, .dropdown-content input {
+ float: none;
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ text-align: left;
+}
+
+.dropdown-content input{
+
+}
+
+.dropdown-content a:hover, .dropdown-content input:hover {
+ background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+ display: block;
}
#leftside{
@@ -36,7 +98,22 @@
background: Beige;
display:block;
border:1px solid grey;
- overflow: scroll;
+ overflow: auto;
+}
+#editorpageheader{
+ top: 0%;
+ left: 0%;
+ position:absolute;
+ margin: 0px 10px 10px 10px;
+ z-index:100;
+}
+#editortextarea{
+ margin: 170px 10px 10px 10px;
+ left:0%;
+ right: 50%;
+ line-height: normal;
+ clear:right;
+ overflow: auto;
}
#rightside{
top: 0%;
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
