Add headings Text Colours and Background Colours to Font Colors dialogue. Add tooltips to the Background Colours ColorPickers to explain how to access the opacity.

Author: fjwright

src/fjwright/runreduce/FontColorsDialog.fxml

@@ -3,6 +3,7 @@
 <?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
 
 <VBox alignment="CENTER" spacing="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
       fx:controller="fjwright.runreduce.FontColorsDialog">
@@ -18,27 +19,55 @@
             <RowConstraints/>
             <RowConstraints/>
             <RowConstraints/>
+            <RowConstraints/>
+            <RowConstraints/>
         </rowConstraints>
+        <Label text="Text Colours" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER">
+            <font>
+                <Font size="14.0"/>
+            </font>
+            <padding>
+                <Insets bottom="2.0"/>
+            </padding>
+        </Label>
         <Label fx:id="algebraicInputLabel" style="-fx-background-color: white; -fx-label-padding: 2;"
-               text="Algebraic Input" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
-        <ColorPicker fx:id="algebraicInputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
+               text="Algebraic Input" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
+        <ColorPicker fx:id="algebraicInputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
         <Label fx:id="symbolicInputLabel" style="-fx-background-color: white; -fx-label-padding: 2;"
-               text="Symbolic Input" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
-        <ColorPicker fx:id="symbolicInputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
+               text="Symbolic Input" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
+        <ColorPicker fx:id="symbolicInputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
         <Label fx:id="algebraicOutputLabel" style="-fx-background-color: white; -fx-label-padding: 2;"
-               text="Algebraic Output" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
-        <ColorPicker fx:id="algebraicOutputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
+               text="Algebraic Output" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
+        <ColorPicker fx:id="algebraicOutputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
         <Label fx:id="symbolicOutputLabel" style="-fx-background-color: white; -fx-label-padding: 2;"
-               text="Symbolic Output" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
-        <ColorPicker fx:id="symbolicOutputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
+               text="Symbolic Output" GridPane.columnIndex="0" GridPane.rowIndex="4"/>
+        <ColorPicker fx:id="symbolicOutputColorPicker" GridPane.columnIndex="1" GridPane.rowIndex="4"/>
+        <Label text="Background Colours" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER"
+               GridPane.rowIndex="5">
+            <font>
+                <Font size="14.0"/>
+            </font>
+            <padding>
+                <Insets bottom="2.0" top="10.0"/>
+            </padding>
+        </Label>
         <Label fx:id="warningLabel" style="-fx-label-padding: 2;" text="Warning" GridPane.columnIndex="0"
-               GridPane.rowIndex="4"/>
+               GridPane.rowIndex="6"/>
         <ColorPicker fx:id="warningColorPicker" onAction="#warningColourAction" GridPane.columnIndex="1"
-                     GridPane.rowIndex="4"/>
+                     GridPane.rowIndex="6">
+            <tooltip>
+                <Tooltip fx:id="backgroundTooltip"
+                         text="Background colours are partially transparent by default.&#10;Click on Custom Color... to change the opacity."/>
+            </tooltip>
+        </ColorPicker>
         <Label fx:id="errorLabel" style="-fx-label-padding: 2;" text="Error" GridPane.columnIndex="0"
-               GridPane.rowIndex="5"/>
+               GridPane.rowIndex="7"/>
         <ColorPicker fx:id="errorColorPicker" onAction="#errorColourAction" GridPane.columnIndex="1"
-                     GridPane.rowIndex="5"/>
+                     GridPane.rowIndex="7">
+            <tooltip>
+                <fx:reference source="backgroundTooltip"/>
+            </tooltip>
+        </ColorPicker>
     </GridPane>
     <HBox alignment="CENTER" spacing="20.0">
         <Button mnemonicParsing="false" onAction="#resetDefaultsButtonAction" text="Reset Defaults"/>