[welcomeq] Use just one component to display requirements

- Do all the status indication in one component, but vary
  the top-level message based on whether the mandatory
  requirements are satisfied.
- Vary color and icon based on each requirement's *mandatory* setting.

src/modules/welcomeq/Recommended.qml

@@ -17,6 +17,8 @@
  *   along with Calamares. If not, see <http://www.gnu.org/licenses/>.
  */
 
+/* THIS COMPONENT IS UNUSED -- from the default welcomeq.qml at least */
+
 import io.calamares.core 1.0
 import io.calamares.ui 1.0
 

src/modules/welcomeq/Requirements.qml

@@ -44,8 +44,12 @@ Rectangle {
         activeFocusOnPress: false
         wrapMode: Text.WordWrap
 
-        text: qsTr("<p>This computer does not satisfy the minimum requirements for installing %1.<br/>
+        property var requirementsText: qsTr("<p>This computer does not satisfy the minimum requirements for installing %1.<br/>
         Installation cannot continue.</p>").arg(Branding.string(Branding.VersionedName))
+        property var recommendationsText: qsTr("<p>This computer does not satisfy some of the recommended requirements for setting up %1.<br/>
+        Setup can continue, but some features might be disabled.</p>").arg(Branding.string(Branding.VersionedName))
+
+        text: config.requirementsModel.satisfiedMandatory ? recommendationsText : requirementsText
     }
 
     Rectangle {
@@ -60,26 +64,34 @@ Rectangle {
 
             Item {
                 width: 640
-                height: 35
+                // Hide the satisfied requirements; we could do that with
+                // a filtering model, but here we'll just hide it, but also
+                // need to compensate for the spacing between items.
+                height: !satisfied ? 35 : -requirementsList.spacing
+                visible: !satisfied
 
                 Column {
                     anchors.centerIn: parent
 
                     Rectangle {
                         implicitWidth: 640
-                        implicitHeight: 35
+                        implicitHeight: !satisfied ? 35 : 0
-                        border.color: mandatory ? "#228b22" : "#ff0000"
+                        // Colors and images based on the two satisfied-bools:
-                        color: mandatory ? "#f0fff0" : "#ffc0cb"
+                        // - if satisfied, then green / ok
+                        // - otherwise if mandatory, then red / stop
+                        // - otherwise, then yellow / warning
+                        border.color: satisfied ? "#228b22" : (mandatory ? "#ff0000" : "#ffa411")
+                        color: satisfied ? "#f0fff0" : (mandatory ? "#ffc0cb" : "#ffefd5")
 
                         Image {
                             anchors.verticalCenter: parent.verticalCenter
                             anchors.right: parent.right
                             anchors.margins: 20
-                            source: mandatory ? "qrc:/data/images/yes.svgz" : "qrc:/data/images/no.svgz"
+                            source: satisfied ? "qrc:/data/images/yes.svgz" : (mandatory ? "qrc:/data/images/no.svgz" : "qrc:/data/images/information.svgz")
                         }
 
                         Text {
-                            text: mandatory ? details : negatedText
+                            text: satisfied ? details : negatedText
                             anchors.centerIn: parent
                             font.pointSize: 11
                         }
@@ -89,6 +101,7 @@ Rectangle {
         }
 
         ListView {
+            id: requirementsList
             anchors.fill: parent
             spacing: 5
             model: config.requirementsModel

src/modules/welcomeq/welcomeq.qml

@@ -56,12 +56,8 @@ Page
             fillMode: Image.PreserveAspectFit
         }
 
-        Recommended {
-            visible: !config.requirementsModel.satisfiedRequirements
-        }
-
         Requirements {
-            visible: !config.requirementsModel.satisfiedMandatory
+            visible: !config.requirementsModel.satisfiedRequirements
         }
 
         RowLayout {