Updated Submit and Unknown buttons for Fever and Symptom Start follow…

… up views. (#225)
Co-Epi · Jun 8, 2020 · f6c4a9d · f6c4a9d
1 parent d7ebd07
commit f6c4a9d
Show file tree

Hide file tree

Showing 21 changed files with 152 additions and 49 deletions.
diff --git a/CoEpi/ui/home/HomeViewController.swift b/CoEpi/ui/home/HomeViewController.swift
@@ -66,8 +66,8 @@ class HomeViewController: UIViewController {
 
         //setup button labels
 
-        ButtonStyles.applyStyleHomeCard(to: reportButtonLabel)
-        ButtonStyles.applyStyleHomeCard(to: alertButtonLabel)
+        ButtonStyles.applyHomeCard(to: reportButtonLabel)
+        ButtonStyles.applyHomeCard(to: alertButtonLabel)
 
         howDataUsedLabel.setTitle(L10n.Ux.Home.how, for: .normal)
 

diff --git a/CoEpi/ui/onboarding/OnboardingViewController.swift b/CoEpi/ui/onboarding/OnboardingViewController.swift
@@ -100,6 +100,10 @@ class OnboardingViewController: UIViewController {
         joinButtonLabel.setTitle(L10n.Ux.Onboarding.join, for: .normal)
         questionsButtonLabel.setTitle(L10n.Ux.Onboarding.questions, for: .normal)
 
+        ButtonStyles.applyUnselected(to: joinButtonLabel)
+        ButtonStyles.applyUnselected(to: questionsButtonLabel)
+        ButtonStyles.applySelected(to: nextButtonLabel)
+
         state = 1
 
         updateState(state: state)

diff --git a/CoEpi/ui/onboarding/OnboardingViewController.xib b/CoEpi/ui/onboarding/OnboardingViewController.xib
@@ -113,8 +113,12 @@
                 </stackView>
                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZJU-0a-YmX">
                     <rect key="frame" x="288" y="809" width="106" height="26"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="106" id="nNw-Z9-SCh"/>
+                        <constraint firstAttribute="height" constant="26" id="pGw-at-3WJ"/>
+                    </constraints>
                     <fontDescription key="fontDescription" type="boldSystem" pointSize="14"/>
-                    <state key="normal" backgroundImage="SubmitButton_Selected">
+                    <state key="normal">
                         <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                     </state>
                     <connections>
@@ -132,7 +136,7 @@
                     </connections>
                 </button>
                 <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="30" translatesAutoresizingMaskIntoConstraints="NO" id="xnb-Z9-ga8">
-                    <rect key="frame" x="20" y="523" width="374" height="213"/>
+                    <rect key="frame" x="20" y="533" width="374" height="203"/>
                     <subviews>
                         <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="pSa-In-5b8">
                             <rect key="frame" x="0.0" y="0.0" width="374" height="29"/>
@@ -147,17 +151,17 @@
                             <nil key="highlightedColor"/>
                         </label>
                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="eEK-TU-JXw">
-                            <rect key="frame" x="0.0" y="113" width="374" height="35"/>
-                            <state key="normal" title="Button" backgroundImage="onboardingButton">
+                            <rect key="frame" x="0.0" y="113" width="374" height="30"/>
+                            <state key="normal" title="Button">
                                 <color key="titleColor" name="CoEpiPurple"/>
                             </state>
                             <connections>
                                 <action selector="joinButtonAction:" destination="-1" eventType="touchUpInside" id="Yg3-VK-9xM"/>
                             </connections>
                         </button>
                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="3qA-FX-jYw">
-                            <rect key="frame" x="0.0" y="178" width="374" height="35"/>
-                            <state key="normal" title="Button" backgroundImage="onboardingButton">
+                            <rect key="frame" x="0.0" y="173" width="374" height="30"/>
+                            <state key="normal" title="Button">
                                 <color key="titleColor" name="CoEpiPurple"/>
                             </state>
                             <connections>
@@ -189,9 +193,7 @@
         </view>
     </objects>
     <resources>
-        <image name="SubmitButton_Selected" width="106" height="26"/>
         <image name="family icon" width="400" height="400"/>
-        <image name="onboardingButton" width="321" height="35"/>
         <image name="stepper" width="20" height="20"/>
         <image name="stepperSelected" width="20" height="20"/>
         <namedColor name="CoEpiPurple">

diff --git a/CoEpi/ui/styles/ButtonStyles.swift b/CoEpi/ui/styles/ButtonStyles.swift
@@ -5,32 +5,32 @@ struct ButtonStyles{
 
     private init(){}
 
-    static func applyStyleHomeCard(to button: UIButton){
+    static func applyHomeCard(to button: UIButton){
         button.layer.cornerRadius = 15
-        applyStyleShadows(to: button)
+        applyShadows(to: button)
     }
 
-    static func applyStyleSelectedButton(to button : UIButton){
+    static func applySelected(to button : UIButton){
         button.backgroundColor = .coEpiPurple
         button.setTitleColor(.white, for:.normal)
-        applyStyleShadows(to: button)
-        applyStyleRoundedEnds(to: button)
+        applyShadows(to: button)
+        applyRoundedEnds(to: button)
     }
 
-    static func applyStyleUnselectedButton(to button: UIButton){
+    static func applyUnselected(to button: UIButton){
         button.backgroundColor = .white
         button.setTitleColor(.coEpiPurple, for:.normal)
         button.layer.borderColor = UIColor.coEpiPurple.cgColor
         button.layer.borderWidth = 1
-        applyStyleShadows(to: button)
-        applyStyleRoundedEnds(to: button)
+        applyShadows(to: button)
+        applyRoundedEnds(to: button)
     }
 
-    static func applyStyleRoundedEnds(to button:  UIButton){
+    static func applyRoundedEnds(to button:  UIButton){
         button.layer.cornerRadius = button.frame.height * 0.50
     }
 
-    static func applyStyleShadows(to button: UIButton){
+    static func applyShadows(to button: UIButton){
         button.layer.shadowColor = UIColor.black.cgColor
         button.layer.shadowOffset = CGSize(width: 4, height: 4)
         button.layer.shadowRadius = 4

diff --git a/CoEpi/ui/symptomReport/FollowUp/Cough/CoughDaysViewController.swift b/CoEpi/ui/symptomReport/FollowUp/Cough/CoughDaysViewController.swift
@@ -54,6 +54,19 @@ class CoughDaysViewController: UIViewController {
 
         unknownButtonLabel.setTitle(L10n.Ux.unknown, for: .normal)
         submitButtonLabel.setTitle(L10n.Ux.submit, for: .normal)
+
+        ButtonStyles.applyUnselected(to: unknownButtonLabel)
+        ButtonStyles.applyRoundedEnds(to: submitButtonLabel)
+        ButtonStyles.applyShadows(to: submitButtonLabel)
+
+        viewModel.submitButtonEnabled
+            .drive(submitButtonLabel.rx.isEnabled)
+            .disposed(by: disposeBag)
+
+        viewModel.submitButtonEnabled
+            .map{ $0 ? .systemBlue : .lightGray }
+            .drive(submitButtonLabel.rx.backgroundColor)
+            .disposed(by: disposeBag)
 
         daysInput.rx.text
             .distinctUntilChanged()

diff --git a/CoEpi/ui/symptomReport/FollowUp/Cough/CoughDaysViewController.xib b/CoEpi/ui/symptomReport/FollowUp/Cough/CoughDaysViewController.xib
@@ -64,7 +64,7 @@
                                         <constraint firstAttribute="width" secondItem="c8o-zr-cck" secondAttribute="height" multiplier="139:39" id="Dvh-Oj-Nmv"/>
                                     </constraints>
                                     <fontDescription key="fontDescription" type="system" pointSize="18"/>
-                                    <state key="normal" backgroundImage="UnknownButton">
+                                    <state key="normal">
                                         <color key="titleColor" name="CoEpiPurple"/>
                                     </state>
                                     <connections>
@@ -77,7 +77,7 @@
                                         <constraint firstAttribute="width" secondItem="NhT-mO-Llb" secondAttribute="height" multiplier="38:13" id="6du-Jw-vgq"/>
                                     </constraints>
                                     <fontDescription key="fontDescription" type="boldSystem" pointSize="15"/>
-                                    <state key="normal" backgroundImage="SubmitButton_Selected">
+                                    <state key="normal">
                                         <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                     </state>
                                     <connections>
@@ -131,8 +131,6 @@
     </objects>
     <resources>
         <image name="HeaderLabel" width="375" height="109"/>
-        <image name="SubmitButton_Selected" width="106" height="26"/>
-        <image name="UnknownButton" width="131" height="31"/>
         <namedColor name="CoEpiPurple">
             <color red="0.52899998426437378" green="0.0080000003799796104" blue="0.83099997043609619" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
         </namedColor>

diff --git a/CoEpi/ui/symptomReport/FollowUp/Cough/CoughDaysViewModel.swift b/CoEpi/ui/symptomReport/FollowUp/Cough/CoughDaysViewModel.swift
@@ -5,11 +5,21 @@ import os.log
 
 class CoughDaysViewModel {
     private let symptomFlowManager: SymptomFlowManager
+
+    private let daysIsEmpty: BehaviorRelay<Bool>
+    let submitButtonEnabled: Driver<Bool>
 
     let title = L10n.Ux.Cough.heading
 
     init(symptomFlowManager: SymptomFlowManager) {
         self.symptomFlowManager = symptomFlowManager
+
+        daysIsEmpty = BehaviorRelay<Bool>(value: true)
+
+        submitButtonEnabled = daysIsEmpty
+            .asObservable()
+            .map{!$0}
+            .asDriver(onErrorJustReturn: false)
     }
 
     func onDaysChanged(daysStr: String) {
@@ -23,6 +33,7 @@ class CoughDaysViewModel {
                 os_log("Invalid input: %{public}@ TODO handle", log: servicesLog, type: .debug, "\(daysStr)")
             }
         }
+        daysIsEmpty.accept(daysStr.isEmpty)
     }
 
     func onSubmitTap() {

diff --git a/CoEpi/ui/symptomReport/FollowUp/Cough/CoughHowViewController.swift b/CoEpi/ui/symptomReport/FollowUp/Cough/CoughHowViewController.swift
@@ -52,6 +52,10 @@ class CoughHowViewController: UIViewController {
         subtitleLabel.text = L10n.Ux.Cough.subtitle3
         skipButtonLabel.setTitle(L10n.Ux.skip, for: .normal)
 
+        ButtonStyles.applyUnselected(to: betterButtonLabel)
+        ButtonStyles.applyUnselected(to: worseButtonLabel)
+        ButtonStyles.applyUnselected(to: sameButtonLabel)
+
         betterButtonLabel.setTitle(L10n.Ux.Cough.better, for: .normal)
         worseButtonLabel.setTitle(L10n.Ux.Cough.worse, for: .normal)
         sameButtonLabel.setTitle(L10n.Ux.Cough.same, for: .normal)

diff --git a/CoEpi/ui/symptomReport/FollowUp/Cough/CoughHowViewController.xib b/CoEpi/ui/symptomReport/FollowUp/Cough/CoughHowViewController.xib
@@ -35,8 +35,11 @@
                     <subviews>
                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="BRl-UE-BCP">
                             <rect key="frame" x="0.0" y="0.0" width="314" height="54"/>
-                            <fontDescription key="fontDescription" type="system" pointSize="13"/>
-                            <state key="normal" backgroundImage="largeOvalButton">
+                            <constraints>
+                                <constraint firstAttribute="height" constant="54" id="dNc-c6-S7z"/>
+                            </constraints>
+                            <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                            <state key="normal">
                                 <color key="titleColor" name="CoEpiPurple"/>
                             </state>
                             <state key="highlighted" backgroundImage="largeOvalButton_Selected">
@@ -48,8 +51,11 @@
                         </button>
                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="1Ui-1B-6uO">
                             <rect key="frame" x="0.0" y="79" width="314" height="54"/>
-                            <fontDescription key="fontDescription" type="system" pointSize="13"/>
-                            <state key="normal" backgroundImage="largeOvalButton">
+                            <constraints>
+                                <constraint firstAttribute="height" constant="54" id="EP6-bM-sPN"/>
+                            </constraints>
+                            <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                            <state key="normal">
                                 <color key="titleColor" name="CoEpiPurple"/>
                             </state>
                             <state key="highlighted" backgroundImage="largeOvalButton_Selected">
@@ -61,8 +67,11 @@
                         </button>
                         <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="VxT-rb-ljy">
                             <rect key="frame" x="0.0" y="158" width="314" height="54"/>
-                            <fontDescription key="fontDescription" type="system" pointSize="13"/>
-                            <state key="normal" backgroundImage="largeOvalButton">
+                            <constraints>
+                                <constraint firstAttribute="height" constant="54" id="nR9-gC-5e9"/>
+                            </constraints>
+                            <fontDescription key="fontDescription" type="system" pointSize="15"/>
+                            <state key="normal">
                                 <color key="titleColor" name="CoEpiPurple"/>
                             </state>
                             <state key="highlighted" backgroundImage="largeOvalButton_Selected">
@@ -119,7 +128,6 @@
     </objects>
     <resources>
         <image name="HeaderLabel" width="375" height="109"/>
-        <image name="largeOvalButton" width="294" height="54"/>
         <image name="largeOvalButton_Selected" width="294" height="54"/>
         <namedColor name="CoEpiPurple">
             <color red="0.52899998426437378" green="0.0080000003799796104" blue="0.83099997043609619" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>

diff --git a/CoEpi/ui/symptomReport/FollowUp/Fever/FeverDaysViewController.swift b/CoEpi/ui/symptomReport/FollowUp/Fever/FeverDaysViewController.swift
@@ -54,6 +54,19 @@ class FeverDaysViewController: UIViewController {
 
         unknownButtonLabel.setTitle(L10n.Ux.unknown, for: .normal)
         submitButtonLabel.setTitle(L10n.Ux.submit, for: .normal)
+
+        ButtonStyles.applyUnselected(to: unknownButtonLabel)
+        ButtonStyles.applyRoundedEnds(to: submitButtonLabel)
+        ButtonStyles.applyShadows(to: submitButtonLabel)
+
+        viewModel.submitButtonEnabled
+            .drive(submitButtonLabel.rx.isEnabled)
+            .disposed(by: disposeBag)
+
+        viewModel.submitButtonEnabled
+            .map{ $0 ? .systemBlue : .lightGray }
+            .drive(submitButtonLabel.rx.backgroundColor)
+            .disposed(by: disposeBag)
 
         daysInput.rx.text
             .distinctUntilChanged()

diff --git a/CoEpi/ui/symptomReport/FollowUp/Fever/FeverDaysViewController.xib b/CoEpi/ui/symptomReport/FollowUp/Fever/FeverDaysViewController.xib
@@ -64,7 +64,7 @@
                                         <constraint firstAttribute="width" secondItem="iky-2v-L9z" secondAttribute="height" multiplier="139:39" id="cdg-Tl-8Lu"/>
                                     </constraints>
                                     <fontDescription key="fontDescription" type="system" pointSize="18"/>
-                                    <state key="normal" backgroundImage="UnknownButton">
+                                    <state key="normal">
                                         <color key="titleColor" name="CoEpiPurple"/>
                                     </state>
                                     <connections>
@@ -77,7 +77,7 @@
                                         <constraint firstAttribute="width" secondItem="l9z-cQ-12D" secondAttribute="height" multiplier="38:13" id="KDe-Zp-ZbZ"/>
                                     </constraints>
                                     <fontDescription key="fontDescription" type="boldSystem" pointSize="15"/>
-                                    <state key="normal" backgroundImage="SubmitButton_Selected">
+                                    <state key="normal">
                                         <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                     </state>
                                     <connections>
@@ -131,8 +131,6 @@
     </objects>
     <resources>
         <image name="HeaderLabel" width="375" height="109"/>
-        <image name="SubmitButton_Selected" width="106" height="26"/>
-        <image name="UnknownButton" width="131" height="31"/>
         <namedColor name="CoEpiPurple">
             <color red="0.52899998426437378" green="0.0080000003799796104" blue="0.83099997043609619" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
         </namedColor>

diff --git a/CoEpi/ui/symptomReport/FollowUp/Fever/FeverDaysViewModel.swift b/CoEpi/ui/symptomReport/FollowUp/Fever/FeverDaysViewModel.swift
@@ -6,10 +6,21 @@ import os.log
 class FeverDaysViewModel {
     private let symptomFlowManager: SymptomFlowManager
 
+
+    private let daysIsEmpty: BehaviorRelay<Bool>
+    let submitButtonEnabled: Driver<Bool>
+
     let title = L10n.Ux.Fever.heading
 
     init(symptomFlowManager: SymptomFlowManager) {
         self.symptomFlowManager = symptomFlowManager
+
+        daysIsEmpty = BehaviorRelay<Bool>(value: true)
+
+        submitButtonEnabled = daysIsEmpty
+            .asObservable()
+            .map{!$0}
+            .asDriver(onErrorJustReturn: false)
     }
 
     func onDaysChanged(daysStr: String) {
@@ -23,6 +34,7 @@ class FeverDaysViewModel {
                 os_log("Invalid input: %{public}@ TODO handle", log: servicesLog, type: .debug, "\(daysStr)")
             }
         }
+        daysIsEmpty.accept(daysStr.isEmpty)
     }
 
     func onSubmitTap() {

diff --git a/CoEpi/ui/symptomReport/FollowUp/Fever/FeverTempViewController.swift b/CoEpi/ui/symptomReport/FollowUp/Fever/FeverTempViewController.swift
@@ -78,6 +78,19 @@ class FeverTempViewController: UIViewController {
     private func setupStyle() {
         view.backgroundColor = UIColor(patternImage: UIImage(named: "Background_white.png")!)
         scaleButtonLabel.tintColor = .black
+
+        ButtonStyles.applyUnselected(to: unknownButtonLabel)
+        ButtonStyles.applyRoundedEnds(to: submitButtonLabel)
+        ButtonStyles.applyShadows(to: submitButtonLabel)
+
+        viewModel.submitButtonEnabled
+            .drive(submitButtonLabel.rx.isEnabled)
+            .disposed(by: disposeBag)
+
+        viewModel.submitButtonEnabled
+            .map{ $0 ? .systemBlue : .lightGray }
+            .drive(submitButtonLabel.rx.backgroundColor)
+            .disposed(by: disposeBag)
     }
 
     private func setupText() {