Clean font css. Add font options.

src/_h5ai/backend/php/core/class-context.php

@@ -267,21 +267,47 @@ class Context {
         return $this->setup->get('PUBLIC_HREF') . 'ext/' . $href;
     }
 
+    private function get_fonts_html() {
+
+        $fonts = $this->query_option('view.fonts', []);
+        $fonts_mono = $this->query_option('view.fontsMono', []);
+
+        $html = '<style class="x-head">';
+
+        if (sizeof($fonts) > 0) {
+            $html .= '#root, #root input, #root select {font-family: "';
+            $html .= implode('","', $fonts);
+            $html .= '" !important}';
+        }
+
+        if (sizeof($fonts_mono) > 0) {
+            $html .= '#root pre, #root code {font-family: "';
+            $html .= implode('","', $fonts_mono);
+            $html .= '" !important}';
+        }
+
+        $html .= '</style>';
+
+        return $html;
+    }
+
     public function get_x_head_html() {
 
         $scripts = $this->query_option('resources.scripts', []);
         $styles = $this->query_option('resources.styles', []);
 
-        $tags = '';
+        $html = '';
 
         foreach ($styles as $href) {
-            $tags .= '<link rel="stylesheet" href="' . $this->prefix_x_head_href($href) . '" class="x-head">';
+            $html .= '<link rel="stylesheet" href="' . $this->prefix_x_head_href($href) . '" class="x-head">';
         }
 
         foreach ($scripts as $href) {
-            $tags .= '<script src="' . $this->prefix_x_head_href($href) . '" class="x-head"></script>';
+            $html .= '<script src="' . $this->prefix_x_head_href($href) . '" class="x-head"></script>';
         }
 
-        return $tags;
+        $html .= $this->get_fonts_html();
+
+        return $html;
     }
 }

src/_h5ai/conf/options.json

@@ -40,6 +40,8 @@ Options
 
     - binaryPrefix: boolean, set to true uses 1024B=1KiB when formatting file sizes (see http://en.wikipedia.org/wiki/Binary_prefix)
     - fastBrowsing: boolean, use History API if available (no need to reload the whole page)
+    - fonts: array of strings, fonts to use in regular context
+    - fontsMono: array of strings, fonts to use in monopspaced context
     - hidden: array of strings, don't list items matching these regular expressions
     - hideFolders: boolean, hide all folders in the main view
     - hideIf403: boolean, hide files and folders that are not readable by the server
@@ -64,6 +66,8 @@ Options
     "view": {
         "binaryPrefix": false,
         "fastBrowsing": true,
+        "fonts": ["Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif"],
+        "fontsMono": ["Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace"],
         "hidden": ["^\\.", "^_{{pkg.name}}"],
         "hideFolders": false,
         "hideIf403": true,

src/_h5ai/public/css/inc/ext/custom.less

@@ -13,10 +13,6 @@
         }
     }
 
-    pre, code {
-        font-family: @font-family-mono;
-    }
-
     h1, h2, h3, h4, h5, h6, p {
         margin: 0.1em 0;
     }

src/_h5ai/public/css/inc/ext/filter.less

@@ -3,7 +3,6 @@
     input {
         display: none;
         border: none;
-        font-family: @font-family;
         font-weight: lighter;
         font-size: 16px;
         color: @col-text;

src/_h5ai/public/css/inc/ext/preview-txt.less

@@ -11,8 +11,6 @@
     &.highlighted {
 
         code {
-            font-family: @font-family-mono;
-            font-size: @font-size;
             line-height: 1.2em;
         }
 
@@ -105,9 +103,6 @@
             }
         }
 
-        pre, code {
-            font-family: @font-family-mono;
-        }
         code {
             color: #008200;
         }

src/_h5ai/public/css/inc/ext/search.less

@@ -3,7 +3,6 @@
     input {
         display: none;
         border: none;
-        font-family: @font-family;
         font-weight: lighter;
         font-size: 16px;
         color: @col-text;

src/_h5ai/public/css/inc/fonts.less

@@ -1,4 +1,4 @@
-@font-family: Roboto, Helvetica, Arial, sans-serif;
+@font-family: "Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif";
 @font-weight: normal;
 @font-size: 13px;
-@font-family-mono: monospace;
+@font-family-mono: "Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace";

src/_h5ai/public/css/inc/main/info.less

@@ -12,7 +12,6 @@
         margin: 0 0.2em;
         padding: 2px 4px;
         border-radius: 4px;
-        font-family: @font-family-mono;
         letter-spacing: 0.05em;
         background: @col-back-panel;
         border: 1px solid @col-border;

src/_h5ai/public/css/inc/misc.less

@@ -1,8 +1,3 @@
-html {
-    min-height: 100%;
-    overflow: auto;
-}
-
 ::-moz-selection {
     color: @col-text-native-selection;
     background: @col-back-native-selection;

src/_h5ai/public/css/inc/mixins.less

@@ -60,9 +60,6 @@
     .card;
     .rounded;
     .clear-appearance;
-    font-family: @font-family;
-    font-weight: @font-weight;
-    color: @col-text;
     background: @col-back-paper;
     border: none;
     outline: none;

src/_h5ai/public/css/inc/view/root.less

@@ -5,6 +5,7 @@
     top: 0;
     right: 0;
     bottom: 0;
+    overflow: hidden;
 
     font-family: @font-family;
     font-size: @font-size;
@@ -12,3 +13,17 @@
     color: @col-text;
     background: @col-back;
 }
+
+input, select {
+    font-family: @font-family;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text;
+}
+
+pre, code {
+    font-family: @font-family-mono;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text;
+}

src/_h5ai/public/css/inc/view/sidebar.less

@@ -54,10 +54,6 @@
 
     input, select {
         .clear-appearance;
-        font-family: @font-family;
-        font-size: @font-size;
-        font-weight: @font-weight;
-        color: @col-text;
         background: transparent;
         width: 100%;
         border: 0 solid #000;