deliv2: modifying wiki editor ui

Gargi Sheguri [2023-03-19 17:Mar:th]
deliv2: modifying wiki editor ui

Signed-off-by: Chris Pollett <chris@pollett.org>
Filename
src/css/editor.css
src/css/search.css
src/scripts/wiki.js
diff --git a/src/css/editor.css b/src/css/editor.css
index 48f424284..3f9fcd4ab 100755
--- a/src/css/editor.css
+++ b/src/css/editor.css
@@ -42,30 +42,26 @@
 }
 .wiki-buttons
 {
+    margin-top: 6px;
     margin-bottom:2px;
 }
-.wiki-buttons input
+.wiki-buttons [class*='wikibtn-']
+{
+    border: white
+}
+.wiki-buttons span
 {
-    border-radius: 0;
-    border-style: solid;
     cursor: pointer;
-    display: inline-block;
-    height: 36px;
-    padding: 0;
-    margin:0;
-    vertical-align: top;
-    width: 36px;
 }
 .wiki-buttons select
 {
-    background: lightgray;
-    border: 1px solid #EEE;
-    border-radius: 0;
-    color: black;
-    font-size:14pt;
-    height:36px;
-    padding: 0;
-    margin: 2px 0 0 0;
+    cursor: pointer;
+    font-size:18pt;
+    margin:1px;
+    padding:5px;
+    text-align:center;
+    vertical-align:middle;
+    border: white
 }

 .wiki-popup-prompt
@@ -114,91 +110,6 @@
     margin: auto;
 }

-.wikibtn-bold
-{
-    background: url(../resources/wiki_button_images/wikibtn-bold.png) no-repeat;
-}
-.wikibtn-underline
-{
-    background: url(../resources/wiki_button_images/wikibtn-underline.png)
-        no-repeat;
-}
-.wikibtn-bullets
-{
-    background: url(../resources/wiki_button_images/wikibtn-bullets.png)
-        no-repeat;
-}
-.wikibtn-heading
-{
-    background: url(../resources/wiki_button_images/wikibtn-heading.png)
-        no-repeat;
-}
-.wikibtn-hr
-{
-    background: url(../resources/wiki_button_images/wikibtn-hr.png) no-repeat;
-}
-.wikibtn-hyperlink
-{
-    background: url(../resources/wiki_button_images/wikibtn-hyperlink.png)
-        no-repeat;
-}
-.wikibtn-italic
-{
-    background: url(../resources/wiki_button_images/wikibtn-italic.png)
-        no-repeat;
-}
-.wikibtn-nowiki
-{
-    background: url(../resources/wiki_button_images/wikibtn-nowiki.png)
-        no-repeat;
-}
-.wikibtn-numbers
-{
-    background:url(../resources/wiki_button_images/wikibtn-numbers.png)
-        no-repeat;
-}
-.wikibtn-strike
-{
-    background: url(../resources/wiki_button_images/wikibtn-strike.png)
-        no-repeat;
-}
-.wikibtn-table
-{
-    background: url(../resources/wiki_button_images/wikibtn-table.png)
-        no-repeat;
-}
-.wikibtn-search-widget
-{
-    background: url(../resources/wiki_button_images/wikibtn-search-widget.png)
-        no-repeat;
-}
-
-.wikibtn-slide
-{
-    background: url(../resources/wiki_button_images/wikibtn-slide.png)
-        no-repeat;
-}
-
-.wikibtn-definitionlist
-{
-    background: url(../resources/wiki_button_images/wikibtn-definitionlist.png)
-        no-repeat;
-}
-.wikibtn-centeraligned
-{
-    background: url(../resources/wiki_button_images/wikibtn-centeraligned.png)
-        no-repeat;
-}
-.wikibtn-rightaligned
-{
-    background: url(../resources/wiki_button_images/wikibtn-rightaligned.png)
-        no-repeat;
-}
-.wikibtn-leftaligned
-{
-    background: url(../resources/wiki_button_images/wikibtn-leftaligned.png)
-        no-repeat;
-}
 .wikibtn-bold:hover,
 .wikibtn-bullets:hover,
 .wikibtn-heading:hover,
diff --git a/src/css/search.css b/src/css/search.css
index 931aaea94..b6854b485 100755
--- a/src/css/search.css
+++ b/src/css/search.css
@@ -4378,12 +4378,10 @@ ul.link-dropdown:focus-within li ul
 }
 .upload-box
 {
-    background-color: floralwhite;
+    background-color: lightgray;
     color: black;
-    border:1px solid black;
-    border-radius: 5px;
     font-size:10pt;
-    margin: 0 auto 0 auto;
+    margin: 4px 0;
     text-align: center;
     width:100%;
 }
diff --git a/src/scripts/wiki.js b/src/scripts/wiki.js
index c71a346c6..a9df43fb2 100755
--- a/src/scripts/wiki.js
+++ b/src/scripts/wiki.js
@@ -66,6 +66,30 @@ var editor_buttons = [];
  * @var Object
  */
 var editor_buffer = {};
+/**
+ * Object containing all icons for editor toolbar
+ * @var Object
+ */
+var editor_toolbar_icons = {
+    "wikibtn-bold": "<b>B</b>",
+    "wikibtn-italic": "<i>I</i>",
+    "wikibtn-underline": "<u>U</u>",
+    "wikibtn-strike": "<s>S</s>",
+    "wikibtn-nowiki": "<s>W</s>",
+    "wikibtn-hyperlink": "🔗",
+    "wikibtn-bullets": "≔",
+    "wikibtn-numbers": "🔢",
+    "wikibtn-hr": "⎯",
+    "wikibtn-heading": "H",
+    "wikibtn-search-widget": "🔎",
+    "wikibtn-table": "⊞",
+    "wikibtn-slide": "📊",
+    "wikibtn-definitionlist": "📋",
+    "wikibtn-leftaligned": "⇇",
+    "wikibtn-centeraligned": "≣",
+    "wikibtn-rightaligned": "⇉",
+};
+
 /*
  * Add buttons for common wiki operation before the textareas on a page.
  */
@@ -123,9 +147,13 @@ function editorize(id)
             && (no_buttons.indexOf(prop) === -1)) {
             translate_prop = tl[prop.replace(/wikibtn-/, 'wiki_js_')];
             button_string +=
-                '<input type="button" title="' +translate_prop +
-                '" class="' +prop +
-                '" onclick="wikifySelection(\'' + prop + '\', \''+ id +'\');">';
+                '<div class="' + prop +' icon-button-container">' +
+                '<a class="icon-anchor-button">' +
+                '<span role="img" ' +
+                'aria-label="' + translate_prop +
+                '" onclick="wikifySelection(\'' +prop + '\', \''+ id +'\');">'+
+                editor_toolbar_icons[prop] +
+                '</span></a></div>';
         }
     }
     /*
@@ -157,19 +185,26 @@ function editorize(id)
      */
     if (editor_buttons[id].hasOwnProperty('wikibtn-table')) {
         translate_prop = tl['wiki_js_add_wiki_table'];
-        editor_toolbar += '<input type="button" class="wikibtn-table" ' +
-            ' title="' + translate_prop + '" "' +
-            ' onclick="addWikiTable(\''+ id +'\');" >';
+        editor_toolbar += '<div class="wikibtn-table icon-button-container">' +
+            '<a class="icon-anchor-button">' +
+            '<span role = "img" ' +
+            'aria-label = "' +translate_prop +
+            '" onclick = "addWikiTable(\''+ id +'\');">'+
+            editor_toolbar_icons["wikibtn-table"] +
+            '</span></a></div>';
     }
     /*
      check if search was desired and render if was.
      */
     if (editor_buttons[id].hasOwnProperty('wikibtn-search')) {
         translate_prop = tl['wiki_js_add_search'];
-        editor_toolbar += '<input type="button" ' +
-            ' title="' + translate_prop + '" "' +
-            ' class="wikibtn-search-widget" ' +
-            ' onclick="addWikiSearch(\''+ id +'\');" >';
+        editor_toolbar += '<div class="wikibtn-search-widget ' +
+            'icon-button-container">' +
+            '<a class="icon-anchor-button">' +
+            '<span role="img" aria-label="' + translate_prop +
+            '" onclick = "addWikiSearch(\''+ id +'\');">'+
+            editor_toolbar_icons["wikibtn-search-widget"] +
+            '</span></a></div>';
     }
     editor_toolbar += '</div>';
     /*
ViewGit