BloomBooks · JohnThomson · Jun 7, 2019 · May 29, 2019
diff --git a/DistFiles/localization/en/Bloom.xlf b/DistFiles/localization/en/Bloom.xlf
@@ -1174,6 +1174,11 @@
         <source xml:lang="en">This sentence is too long for this level.</source>
         <note>ID: EditTab.EditTab.Toolbox.LeveledReaderTool.SentenceTooLong</note>
       </trans-unit>
+      <trans-unit id="EditTab.EnterpriseSettingsButton" sil:dynamic="true">
+        <source xml:lang="en">Bloom Enterprise Settings</source>
+        <note>ID: EditTab.EnterpriseSettingsButton</note>
+        <note>Text of button that appears when Bloom Enterprise is needed for access to a feature.</note>
+      </trans-unit>
       <trans-unit id="EditTab.ExperimentalNotice" sil:dynamic="true">
         <source xml:lang="en">This page is an experimental prototype which may have many problems, for which we apologize.</source>
         <note>ID: EditTab.ExperimentalNotice</note>
@@ -1605,6 +1610,11 @@
         <source xml:lang="en">You cannot put anything in there while making an original book.</source>
         <note>ID: EditTab.ReadOnlyInAuthorMode</note>
       </trans-unit>
+      <trans-unit id="EditTab.RequiresEnterprise" sil:dynamic="true">
+        <source xml:lang="en">To use this feature, you'll need to enable Bloom Enterprise.</source>
+        <note>ID: EditTab.RequiresEnterprise</note>
+        <note>Appears in notice (possibly obscuring other controls when they may not be used) because no Bloom Enterprise project has been selected.</note>
+      </trans-unit>
       <trans-unit id="EditTab.SavingNotification" sil:dynamic="true">
         <source xml:lang="en">Saving...</source>
         <note>ID: EditTab.SavingNotification</note>
@@ -2041,11 +2051,6 @@
         <source xml:lang="en">More...</source>
         <note>ID: EditTab.Toolbox.More</note>
       </trans-unit>
-      <trans-unit id="EditTab.Toolbox.RequiresEnterprise" sil:dynamic="true">
-        <source xml:lang="en">This feature requires Bloom Enterprise.</source>
-        <note>ID: EditTab.Toolbox.RequiresEnterprise</note>
-        <note>Appears in notice obscuring other controls when they may not be used because no Bloom Enterprise project has been selected.</note>
-      </trans-unit>
       <trans-unit id="EditTab.Toolbox.Settings.Unlock" sil:dynamic="true">
         <source xml:lang="en">Allow changes to this shellbook</source>
         <note>ID: EditTab.Toolbox.Settings.Unlock</note>

diff --git a/src/BloomBrowserUI/bloomMaterialUITheme.js b/src/BloomBrowserUI/bloomMaterialUITheme.js
@@ -24,7 +24,8 @@ const theme = createMuiTheme({
         warning: { main: "#F3AA18" }
     },
     typography: {
-        fontSize: 12
+        fontSize: 12,
+        fontFamily: ["NotoSans", "Roboto", "sans-serif"]
     },
     props: {
         MuiLink: {

diff --git a/src/BloomBrowserUI/bloomUI.less b/src/BloomBrowserUI/bloomUI.less
@@ -1,4 +1,7 @@
 /* Common Bloom UI styling */
+// This import needs to NOT be by "(reference)", since the UIFontStack variable we need is not a constant.
+// That also means that if you want this bloomUI file to govern the font-family of your Less that
+// imports this file, it should do a normal full import of bloomUI.less.
 @import "./bloomWebFonts.less";
 
 // Working towards making this the source of truth for the font size we use in our UI.
@@ -140,3 +143,15 @@ input[type="checkbox"]:indeterminate::after {
     -ms-user-select: text; // Edge/Internet Explorer
     user-select: text; // Chrome
 }
+
+// Moved from toolbox.less to here so it can be used by templatePagePreview
+.enterprise-only-flag::after {
+    content: "BE";
+    cursor: default;
+    color: @bloom-purple;
+    margin-left: 4px;
+    vertical-align: super;
+    font-style: italic;
+    font-weight: bold;
+    font-size: smaller;
+}
diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less
@@ -5,9 +5,6 @@
 
 @styleSelectWidth: 190px;
 #format-toolbar {
-    * {
-        font-family: "Segoe UI", Arial, sans-serif;
-    }
     h2 {
         font-size: 10pt;
     }

diff --git a/src/BloomBrowserUI/bookEdit/css/bloomDialog.less b/src/BloomBrowserUI/bookEdit/css/bloomDialog.less
@@ -1,4 +1,5 @@
 @import (reference) "../../bookLayout/basePage";
+@import "../../bloomWebFonts.less";
 // Common styles to be applied to htm-js-css dialogs in Bloom
 @backgroundColorWhite: rgb(255, 255, 255);
 @backgroundColorLight: rgb(240, 240, 240);
@@ -130,25 +131,27 @@
 .bloomDialogContainer .control-section {
     margin: 0 0 12px 0;
 }
-.bloomDialogContainer button,
-.bloomDialogContainer input {
-    background: linear-gradient(@backgroundColorLight, @backgroundColorDark);
-}
+// Interferes with Material UI background-color
+// .bloomDialogContainer button,
+// .bloomDialogContainer input {
+//     background: linear-gradient(@backgroundColorLight, @backgroundColorDark);
+// }
 .bloomDialogContainer button {
     .bdRounded;
     border: 1px solid @buttonBorder;
     box-shadow: 1px 2px 7px @buttonShadow;
 }
-.bloomDialogContainer button:hover,
-.bloomDialogContainer input:hover,
-.bloomDialogContainer select:hover,
-.bloomDialogContainer .select2-container--default:hover,
-.bloomDialogContainer .select2-container--focus {
-    background: linear-gradient(
-        @backgroundColorHoverLight,
-        @backgroundColorHoverDark
-    );
-}
+// Interferes with Material UI background-color
+// .bloomDialogContainer button:hover,
+// .bloomDialogContainer input:hover,
+// .bloomDialogContainer select:hover,
+// .bloomDialogContainer .select2-container--default:hover,
+// .bloomDialogContainer .select2-container--focus {
+//     background: linear-gradient(
+//         @backgroundColorHoverLight,
+//         @backgroundColorHoverDark
+//     );
+// }
 .bloomDialogContainer button[disabled] {
     border: 1px solid @disabledText;
     background: @backgroundColorLight;
@@ -170,7 +173,7 @@
     z-index: @dialogZindex;
     position: absolute;
     line-height: 1.8;
-    font-family: Segoe UI, Open Sans, Arial, sans-serif;
+    font-family: @UIFontStack;
 }
 .bloomDialogContainer .bloomDialogTitleBar {
     background-color: @backgroundColorTitleBar;
@@ -185,7 +188,6 @@
 .bloomDialogContainer .bloomDialogMainPage {
     background: @backgroundColorWhite;
     margin-left: 1em;
-    font-family: Segoe UI, Open Sans, Arial, sans-serif;
     font-size: 10pt;
 }
 

diff --git a/src/BloomBrowserUI/bookEdit/css/editMode.less b/src/BloomBrowserUI/bookEdit/css/editMode.less
@@ -77,7 +77,6 @@ div.bloom-imageContainer {
     left: 5mm;
     top: @PageLabelVerticalDisplacement;
     float: left;
-    font-family: "Segoe UI", "Open Sans", Arial, sans-serif;
     &[contenteditable="true"] {
         color: @ControlColor;
         padding: 0 2px;
@@ -499,7 +498,6 @@ div.bloom-editable.Heading2-style {
     /*Same grey color as pageLabel*/
     color: rgba(0, 0, 0, 0.2);
     font-size: small;
-    font-family: Arial, sans-serif; /* Arial matches .qtip-content */
     font-style: normal;
     font-weight: normal;
     line-height: 1; //else it will draw up in the box somewhere if the font is large

diff --git a/src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less b/src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less
@@ -1,6 +1,4 @@
-@import "../../bloomWebFonts.less";
-
-/* Unless otherwise noted, these rules have been moved from editMode.css
+/* Unless otherwise noted, these rules have been moved from editMode.css
     BODY is not within the scoped css DIV */
 
 body {
@@ -18,11 +16,6 @@ To handling the mis-match.*/
     z-index: 20000;
 }
 
-/* Qtip won't work if these rules are inside the scoped DIV */
-.qtip-content {
-    font-family: @UIFontStack; // for xmatter field definition bubbles
-}
-
 div.ui-tooltip-title {
     text-align: justify;
     margin-left: -9px;

diff --git a/src/BloomBrowserUI/bookEdit/css/origami.less b/src/BloomBrowserUI/bookEdit/css/origami.less
@@ -6,15 +6,14 @@
 // origamiEditing.less. The initial goal of splitting them up was to avoid
 // getting the origami editing behaviors while reading in BloomReader.
 @import (inline) "../../lib/split-pane/split-pane.css";
-@import (reference) "../../bloomUI.less";
+@import "../../bloomUI.less";
 
 @flowerPetalGrey: #7e7e7e; // shouldn't this just be @bloom-gray?
 @inactiveColor: @bloom-buff;
-@font: "Segoe UI", "Open Sans", Arial, sans-serif;
 
 .origami-ui {
     visibility: hidden;
-    font-family: @font;
+    font-family: @UIFontStack;
 }
 .origami-layout-mode .origami-ui {
     visibility: visible;

diff --git a/src/BloomBrowserUI/bookEdit/css/origamiEditing.less b/src/BloomBrowserUI/bookEdit/css/origamiEditing.less
@@ -10,8 +10,6 @@
 @DarkSwitch: @bloom-panelBackground;
 @ActiveSwitchColor: @ControlColor;
 
-@font: "Segoe UI", "Open Sans", Arial, sans-serif;
-
 @ToggleRightOffset: 19px;
 @ToggleVerticalOffset: -30px;
 @TogglePartsRadius: 8px;
@@ -101,7 +99,6 @@
     top: @ToggleVerticalOffset;
     line-height: 1em;
     color: @DisabledColor;
-    font-family: @font;
     div {
         color: @ActiveSwitchColor;
     }

diff --git a/src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less b/src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less
@@ -238,7 +238,7 @@ body > #menuIconHolder {
 }
 
 #toast-container {
-    font-family: "Segoe UI", "sans-serif";
+    font-family: @UIFontStack;
     font-size: 9pt;
 }
 

diff --git a/src/BloomBrowserUI/bookEdit/sourceBubbles/sourceBubbles.less b/src/BloomBrowserUI/bookEdit/sourceBubbles/sourceBubbles.less
@@ -1,7 +1,5 @@
 // This file gets imported by editMode.less
 
-@import "../../bloomWebFonts.less";
-
 @BubbleBorder: #e0deb7;
 @BubbleBackground: #faf7cc;
 @TabColor: @BubbleBorder;
@@ -115,7 +113,6 @@
                     outline: none;
                     text-decoration: none;
                     color: black;
-                    font-family: @UIFontStack;
                     &.active {
                         font-weight: bold;
                     }
@@ -138,7 +135,6 @@
         line-height: 1.5;
         color: black;
         padding-top: 4px;
-        font-family: @UIFontStack;
         &.active {
             overflow-y: hidden !important;
         }

diff --git a/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less b/src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.less
@@ -331,7 +331,7 @@ body .cursor-progress {
 
 #toast-container {
     z-index: 999999 !important;
-    font-family: "Segoe UI", "sans-serif";
+    font-family: @UIFontStack;
     font-size: 9pt;
 }
 #toast-container > .toast {

diff --git a/src/BloomBrowserUI/bookEdit/toolbox/toolbox.less b/src/BloomBrowserUI/bookEdit/toolbox/toolbox.less
@@ -109,17 +109,6 @@ div.checkbox-and-label {
     margin-top: -1px;
 }
 
-.enterprise-only-flag::after {
-    content: "BE";
-    cursor: default;
-    color: @bloom-purple;
-    margin-left: 4px;
-    vertical-align: super;
-    font-style: italic;
-    font-weight: bold;
-    font-size: smaller;
-}
-
 .ui-accordion h3 {
     padding-left: 28px;
 }

diff --git a/src/BloomBrowserUI/lib/long-press/longpress.css b/src/BloomBrowserUI/lib/long-press/longpress.css
@@ -4,42 +4,41 @@
     left: 0;
     right: 0;
     text-align: center;
-    background: #96668F;
+    background: #96668f;
     padding-top: 10px;
-    margin:0;
+    margin: 0;
     z-index: 2001;
 }
 .long-press-popup li {
-    display:inline-block;
+    display: inline-block;
     list-style: none;
     padding: 0px 15px 10px 15px;
     margin-right: 20px;
     margin-bottom: 10px;
     background: #000000;
-    cursor:pointer;
+    cursor: pointer;
     color: white;
     border: solid 4px black;
     border-radius: 12px;
     font-size: 24pt;
 
-    position: relative;/* without this, we've got 'static' and shortcut letters can't be posititioned*/
+    position: relative; /* without this, we've got 'static' and shortcut letters can't be posititioned*/
 }
 .long-press-popup li::before {
     content: attr(data-shortcut);
     position: absolute;
     font-size: 8pt;
     bottom: 0;
     right: 0;
-    color: #96668F;
+    color: #96668f;
 }
 .long-press-popup .selected {
     border-color: white;
     -webkit-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
-    -moz-box-shadow:    0 0 18px rgba(255, 255, 255, 0.75);
-    box-shadow:         0 0 18px rgba(255, 255, 255, 0.75);
+    -moz-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
+    box-shadow: 0 0 18px rgba(255, 255, 255, 0.75);
 }
 .long-press-popup .instructions {
-        font-family: Segoe UI, sans-serif;
-        font-size: 12pt;
-        margin-bottom: 10px;
+    font-size: 12pt;
+    margin-bottom: 10px;
 }
diff --git a/src/BloomBrowserUI/package.json b/src/BloomBrowserUI/package.json
@@ -33,7 +33,8 @@
         "watchTemplatesLess": "less-watch-compiler templates  ../../output/browser/templates",
         "watchBookEditLess": "less-watch-compiler bookEdit ../../output/browser/bookEdit",
         "watchBookLayoutLess": "less-watch-compiler bookLayout ../../output/browser/bookLayout",
-        "watch": "npm-run-all --parallel watchBrandingLess watchTemplatesLess watchBookEditLess watchBookLayoutLess watchBrandingFiles watchCode",
+        "watchPageChooserLess": "less-watch-compiler pageChooser ../../output/browser/pageChooser",
+        "watch": "npm-run-all --parallel watchBrandingLess watchTemplatesLess watchBookEditLess watchBookLayoutLess watchBrandingFiles watchPageChooserLess watchCode",
         "gitSemiClean": "git clean -X --dry-run --exclude='!node_modules'",
         "gitSemiCleanForReal": "git clean -fX --exclude='!node_modules'",
         "tslint": "tslint --project tsconfig.json",

diff --git a/src/BloomBrowserUI/pageChooser/page-chooser-main.pug b/src/BloomBrowserUI/pageChooser/page-chooser-main.pug
@@ -31,15 +31,4 @@ html
 								.gridItemCaption Page Title
 								.pageDescription
 			#singlePagePreview
-				img(src='')#preview
-				#previewCaption.previewCaption
-				#previewDescriptionText.DescriptionText Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel sodales justo.
-				label#convertWholeBook
-					input(type='checkbox' name='WholeBook')#convertWholeBookCheckbox
-					| Change all similar pages in this book to this layout.
-				#convertLosesMaterial Converting to this layout will cause some content to be lost.
-				label#convertAnyway
-					input(type='checkbox' name='Continue')#convertAnywayCheckbox
-					| Continue anyway
-
-				input(type="submit", value="Add Page").foo#addPageButton
+				//- This gets filled in by React