#6802 another UI option: improve fonts (#6900)

* #6809 add tab-pane wrapper in notebook * #6809 keep styles in css file not in Widgets * #6809 DOMUtils helper * #6809 Remove style from Widget, notify parent when size changed * #6809 remove style from widget * #6809 SizeChangedMessage * #6809 update size when needed * #6809 OptionsWidget with tabs * #6809 import styles from css, remove styles from widget, use OptionsWidget with tabs * #6809 cleanup css * #6809 CS * #6809 fix lab * #6809 fix * #6802 wip * #6802 improve fonts handling
twosigma · Feb 27, 2018 · e2e9fb2 · e2e9fb2
1 parent 3e46c32
commit e2e9fb2
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 38 deletions.
diff --git a/beakerx/beakerx/static/custom/custom.css b/beakerx/beakerx/static/custom/custom.css
@@ -46,24 +46,24 @@
   font-weight: bold;
 }
 
-.CodeMirror pre,
-.rendered_html pre,
-.rendered_html code,
-.output_area pre {
+.improveFonts .CodeMirror pre,
+.improveFonts .rendered_html pre,
+.improveFonts .rendered_html code,
+.improveFonts .output_area pre {
   font-family: "Roboto Mono", monospace, sans-serif;
 }
 
 div.output_text {
   line-height: 1.3em;
 }
 
-.widget-html-content,
-.rendered_html,
-.cm-header-1,
-.cm-header-2,
-.cm-header-3,
-.cm-header-4,
-.cm-header-5,
-.cm-header-6 {
+.improveFonts .widget-html-content,
+.improveFonts .rendered_html,
+.improveFonts .cm-header-1,
+.improveFonts .cm-header-2,
+.improveFonts .cm-header-3,
+.improveFonts .cm-header-4,
+.improveFonts .cm-header-5,
+.improveFonts .cm-header-6 {
   font-family: "Lato", Helvetica, sans-serif;
 }
diff --git a/js/notebook/src/extension/UIOptionsHelper.ts b/js/notebook/src/extension/UIOptionsHelper.ts
@@ -30,7 +30,7 @@ export function registerFeature(baseUrl: string): void {
 
       setupAutoCloseBrackets(data.ui_options.auto_close);
       setupWideCells(data.ui_options.wide_cells);
-      // setupImproveFonts(data.ui_options.improve_fonts);
+      setupImproveFonts(data.ui_options.improve_fonts);
       setupShowPublication(data.ui_options.show_publication);
       setupAutoSave(data.ui_options.auto_save);
 
@@ -69,10 +69,13 @@ function setupWideCells(wideCells: boolean): void {
   document.body.appendChild(s);
 }
 
-// function setupImproveFonts(improveFonts: boolean) {
-//   // TODO;
-//   console.log('handle improve fonts', improveFonts);
-// }
+function setupImproveFonts(improveFonts: boolean) {
+  if (!improveFonts) {
+    return;
+  }
+
+  document.body.classList.add('improveFonts');
+}
 
 function setupShowPublication(showPublication: boolean) {
   if (!showPublication) {

diff --git a/js/notebook/src/plot/bko-combinedplot.css b/js/notebook/src/plot/bko-combinedplot.css
@@ -18,5 +18,8 @@
   background-color: #FEFEFE;
   border: none;
   position: relative;
+}
+
+.improveFonts .combplot-plotcontainer {
   font-family: "Lato", Helvetica, sans-serif;
 }
diff --git a/js/notebook/src/plot/bko-plot.css b/js/notebook/src/plot/bko-plot.css
@@ -22,7 +22,6 @@
   border-collapse: initial;
   border: 1px solid transparent;
   box-sizing: content-box;
-  font-family: "Lato", Helvetica, sans-serif;
 }
 
 .plot-test,
@@ -45,8 +44,7 @@
 
 .plot-label,
 .plot-xylabel,
-.plot-legend-label{
-  font-family: "Lato", Helvetica, sans-serif;
+.plot-legend-label {
   line-height: 1.38462;
 }
 .plot-label {
@@ -123,7 +121,6 @@
   font-weight: bold;
   font-size: 1.2em;
   margin: 5px;
-  font-family: "Lato", Helvetica, sans-serif;
 }
 
 .plot-legendbox {
@@ -279,7 +276,6 @@
 }
 .svg-export {
   font-size: 14px;
-  font-family: "Lato", Helvetica, sans-serif;
   line-height: 1.38462;
   color: #333333;
   background-color: white;
@@ -309,8 +305,17 @@
 .heatmap-tooltip{
   color: white;
   background-color: rgba(0,107,179,0.5);
-  font-family: "Lato", Helvetica, sans-serif;
   font-size: 13px;
   line-height: 1.38462;
   padding: 0.5em;
-}
+}
+
+.improveFonts .plot-plotcontainer,
+.improveFonts .plot-label,
+.improveFonts .plot-xylabel,
+.improveFonts .plot-legend-label,
+.improveFonts .plot-title,
+.improveFonts .svg-export,
+.improveFonts .heatmap-tooltip {
+  font-family: "Lato", Helvetica, sans-serif;
+}
diff --git a/js/notebook/src/shared/style/beakerx.scss b/js/notebook/src/shared/style/beakerx.scss
@@ -16,7 +16,7 @@
 
 $focusColor: #66bb6a;
 
-.context-menu-root .context-menu-item span {
+.improveFonts .context-menu-root .context-menu-item span {
   font-family: "Lato", Helvetica, sans-serif;
 }
 

diff --git a/js/notebook/src/tableDisplay/css/datatables.scss b/js/notebook/src/tableDisplay/css/datatables.scss
@@ -93,7 +93,6 @@ table.dataTable {
       position: static;
       z-index: 1;
     }
-    font-family: "Lato", Helvetica, sans-serif;
   }
   thead {
     background-color: #E6E6E6;
@@ -119,7 +118,7 @@ table.dataTable {
     > .selected,
     > .ui-selected,
     > .ui-selecting {
-        background-color: #B0BED9;
+      background-color: #B0BED9;
 
       &[class*="sorting_"] {
         background-color: #bec9e0 !important;
@@ -391,7 +390,6 @@ $fix-col-separator-width: 3px;
 .bko-table {
   left: 0;
   position: relative;
-  font-family: "Lato", Helvetica, sans-serif;
 }
 
 .bko-menu {
@@ -660,3 +658,15 @@ $fix-col-separator-width: 3px;
     margin-right: 6px;
   }
 }
+
+.improveFonts {
+  .bko-table {
+    font-family: "Lato", Helvetica, sans-serif;
+  }
+
+  table.dataTable {
+    thead th, tbody td {
+      font-family: "Lato", Helvetica, sans-serif;
+    }
+  }
+}
diff --git a/js/notebook/src/tree/Widgets/UIOptions/UIOptionsWidget.ts b/js/notebook/src/tree/Widgets/UIOptions/UIOptionsWidget.ts
@@ -44,10 +44,10 @@ export class UIOptionsWidget extends Widget implements UIOptionsWidgetInterface
       <input class="form-check-input" id="wide_cells" name="wide_cells" type="checkbox">
       <label class="form-check-label" for="wide_cells">Wide code cells</label>
     </div>
-    <!--<div class="form-check">-->
-      <!--<input class="form-check-input" id="improve_fonts" name="improve_fonts" type="checkbox">-->
-      <!--<label class="form-check-label" for="improve_fonts">Improve fonts</label>-->
-    <!--</div>-->
+    <div class="form-check">
+      <input class="form-check-input" id="improve_fonts" name="improve_fonts" type="checkbox">
+      <label class="form-check-label" for="improve_fonts">Improve fonts</label>
+    </div>
     <div class="form-check">
       <input class="form-check-input" id="show_publication" name="show_publication" type="checkbox">
       <label class="form-check-label" for="show_publication">Show publication button and menu item</label>
@@ -90,7 +90,7 @@ export class UIOptionsWidget extends Widget implements UIOptionsWidgetInterface
 
     this.setWideCells(options.wide_cells);
     this.setAutoClose(options.auto_close);
-    // this.setImproveFonts(options.improve_fonts);
+    this.setImproveFonts(options.improve_fonts);
     this.setShowPublication(options.show_publication);
     this.setAutoSave(options.auto_save);
   }
@@ -128,11 +128,11 @@ export class UIOptionsWidget extends Widget implements UIOptionsWidgetInterface
       .prop('checked', checked);
   }
 
-  // private setImproveFonts(checked: boolean) {
-  //   this.$node
-  //     .find(this.IMPROVE_FONTS_SELECTOR)
-  //     .prop('checked', checked);
-  // }
+  private setImproveFonts(checked: boolean) {
+    this.$node
+      .find(this.IMPROVE_FONTS_SELECTOR)
+      .prop('checked', checked);
+  }
 
   private setShowPublication(checked: boolean) {
     this.$node