improve numerical dialog design

uhabits-android/src/main/java/org/isoron/uhabits/activities/common/dialogs/NumberPickerFactory.kt

@@ -48,6 +48,7 @@ class NumberPickerFactory
         value: Double,
         unit: String,
         notes: String,
+        dateString: String,
         callback: ListHabitsBehavior.NumberPickerCallback
     ): AlertDialog {
         val inflater = LayoutInflater.from(context)
@@ -82,7 +83,7 @@ class NumberPickerFactory
         etNotes.setText(notes)
         val dialog = AlertDialog.Builder(context)
             .setView(view)
-            .setTitle(R.string.change_value)
+            .setTitle(dateString)
             .setPositiveButton(R.string.save) { _, _ ->
                 picker.clearFocus()
                 val v = picker.value + 0.01 * picker2.value

uhabits-android/src/main/java/org/isoron/uhabits/activities/habits/list/ListHabitsScreen.kt

@@ -228,9 +228,10 @@ class ListHabitsScreen
         value: Double,
         unit: String,
         notes: String,
+        dateString: String,
         callback: ListHabitsBehavior.NumberPickerCallback
     ) {
-        numberPickerFactory.create(value, unit, notes, callback).show()
+        numberPickerFactory.create(value, unit, notes, dateString, callback).show()
     }
 
     override fun showCheckmarkDialog(

uhabits-android/src/main/java/org/isoron/uhabits/activities/habits/show/ShowHabitActivity.kt

@@ -166,9 +166,10 @@ class ShowHabitActivity : AppCompatActivity(), CommandRunner.Listener {
             value: Double,
             unit: String,
             notes: String,
+            dateString: String,
             callback: ListHabitsBehavior.NumberPickerCallback,
         ) {
-            NumberPickerFactory(this@ShowHabitActivity).create(value, unit, notes, callback).show()
+            NumberPickerFactory(this@ShowHabitActivity).create(value, unit, notes, dateString, callback).show()
         }
 
         override fun showCheckmarkDialog(

uhabits-android/src/main/java/org/isoron/uhabits/widgets/activities/NumericalCheckmarkWidgetActivity.kt

@@ -80,6 +80,7 @@ class NumericalCheckmarkWidgetActivity : Activity(), ListHabitsBehavior.NumberPi
             entry.value / 1000.0,
             data.habit.unit,
             entry.notes,
+            today.toDialogDateString(),
             this
         ).show()
     }

uhabits-android/src/main/res/drawable/dialog_bg_input_box.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Copyright (C) 2016-2021 Álinson Santos Xavier <git@axavier.org>
+  ~
+  ~ This file is part of Loop Habit Tracker.
+  ~
+  ~ Loop Habit Tracker is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by the
+  ~ Free Software Foundation, either version 3 of the License, or (at your
+  ~ option) any later version.
+  ~
+  ~ Loop Habit Tracker is distributed in the hope that it will be useful, but
+  ~ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+  ~ or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along
+  ~ with this program. If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <stroke android:width="1dp" android:color="?attr/contrast40" />
+    <corners android:radius="4dp"/>
+    <padding
+        android:left="0dp"
+        android:top="8dp"
+        android:right="0dp"
+        android:bottom="0dp" />
+</shape>

uhabits-android/src/main/res/layout/number_picker_dialog.xml

@@ -19,63 +19,95 @@
   -->
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              android:orientation="vertical"
+    android:orientation="vertical"
-              android:layout_width="wrap_content"
+    android:layout_width="wrap_content"
-              android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:paddingTop="12dp"
+    android:paddingStart="10dp"
+    android:paddingEnd="10dp">
 
     <LinearLayout
-        android:orientation="horizontal"
-        android:gravity="center"
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="wrap_content"
-
+        android:orientation="horizontal"
-        <NumberPicker
+        android:padding="5dp"
-            android:id="@+id/picker"
+        android:baselineAligned="false">
-            android:layout_gravity="center"
+
-            android:layout_width="wrap_content"
+        <FrameLayout
-            android:layout_height="wrap_content"/>
+            style="@style/FormOuterBox"
-
+            android:layout_width="0dp"
-        <TextView
+            android:layout_weight="1">
-            android:id="@+id/tvSeparator"
+            <LinearLayout style="@style/DialogFormInnerBox">
-            android:layout_width="wrap_content"
+
-            android:layout_height="wrap_content"
+                <TextView
-            />
+                    style="@style/DialogFormLabel"
-
+                    android:text="@string/value" />
-        <NumberPicker
+
-            android:id="@+id/picker2"
+                <LinearLayout
-            android:layout_gravity="center"
+                    android:orientation="horizontal"
-            android:layout_width="wrap_content"
+                    android:gravity="center_horizontal"
-            android:layout_height="wrap_content"
+                    android:layout_width="match_parent"
-            />
+                    android:layout_height="match_parent">
-
+                    <NumberPicker
-        <TextView
+                        android:id="@+id/picker"
-            android:id="@+id/tvUnit"
+                        android:layout_gravity="center"
-            android:layout_width="wrap_content"
+                        android:layout_width="wrap_content"
-            android:layout_height="wrap_content"/>
+                        android:layout_height="wrap_content"/>
+
+                    <TextView
+                        android:id="@+id/tvSeparator"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        />
+
+                    <NumberPicker
+                        android:id="@+id/picker2"
+                        android:layout_gravity="center"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        />
+
+                    <TextView
+                        android:id="@+id/tvUnit"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"/>
+
+                </LinearLayout>
+
+            </LinearLayout>
+        </FrameLayout>
 
     </LinearLayout>
 
+
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical"
+        android:orientation="horizontal"
-        android:padding="30dp">
+        android:padding="5dp"
-
+        android:baselineAligned="false">
-        <TextView
+
-            android:layout_width="wrap_content"
+        <FrameLayout
-            android:layout_height="wrap_content"
+            style="@style/FormOuterBox"
-            style="@style/TextAppearance.AppCompat.Title"
+            android:layout_width="0dp"
-            android:paddingBottom="10dp"
+            android:layout_weight="1">
-            android:text="@string/notes"/>
+
-
+            <LinearLayout style="@style/DialogFormInnerBox">
-        <EditText
+
-            android:id="@+id/etNotes"
+                <TextView
-            android:layout_width="match_parent"
+                    style="@style/DialogFormLabel"
-            android:layout_height="wrap_content"
+                    android:text="@string/notes" />
-            android:inputType="textCapSentences|textMultiLine"
+
-            style="@style/TextAppearance.AppCompat.Body1"
+                <EditText
-            android:scrollbars="vertical"
+                    android:id="@+id/etNotes"
-            android:hint="@string/example_notes"/>
+                    android:inputType="textCapSentences|textMultiLine"
+                    style="@style/FormInput"
+                    android:scrollbars="vertical"
+                    android:hint="@string/example_notes"/>
+
+            </LinearLayout>
+
+        </FrameLayout>
 
     </LinearLayout>
 

uhabits-android/src/main/res/values/attrs.xml

@@ -43,6 +43,7 @@
     <attr name="iconFilter" format="reference"/>
     <attr name="iconArrowUp" format="reference"/>
     <attr name="iconArrowDown" format="reference"/>
+    <attr name="dialogFormLabelColor" format="reference"/>
 
     <attr name="toolbarPopupTheme" format="reference"/>
 

uhabits-android/src/main/res/values/strings.xml

@@ -181,7 +181,7 @@
     <string name="by_status">By status</string>
     <string name="export">Export</string>
     <string name="long_press_to_edit">Press-and-hold to change the value</string>
-    <string name="change_value">Change value</string>
+    <string name="value">Value</string>
     <string name="calendar">Calendar</string>
     <string name="unit">Unit</string>
     <string name="target_type">Target Type</string>

uhabits-android/src/main/res/values/styles.xml

@@ -63,6 +63,7 @@
         <item name="windowBackgroundColor">@color/grey_200</item>
         <item name="android:textColorAlertDialogListItem">@color/grey_800</item>
         <item name="singleLineTitle">false</item>
+        <item name="dialogFormLabelColor">@color/white</item>
     </style>
 
     <style name="AppBaseThemeDark" parent="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
@@ -110,6 +111,7 @@
         <item name="buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>
         <item name="android:textColorAlertDialogListItem">@color/grey_100</item>
         <item name="singleLineTitle">false</item>
+        <item name="dialogFormLabelColor">@color/grey_800</item>
     </style>
 
     <style name="AppBaseThemeDark.PureBlack">
@@ -130,6 +132,7 @@
         <item name="textColorAlertDialogListItem">@color/grey_100</item>
         <item name="windowBackgroundColor">@color/black</item>
         <item name="preferenceTheme">@style/PreferenceThemeOverlay.v14.Material.PureBlack</item>
+        <item name="dialogFormLabelColor">@color/grey_800</item>
     </style>
 
     <style name="BaseDialog" parent="Theme.AppCompat.Light.Dialog">
@@ -140,6 +143,7 @@
         <item name="contrast80">@color/grey_700</item>
         <item name="contrast100">@color/grey_800</item>
         <item name="palette">@array/lightPalette</item>
+        <item name="dialogFormLabelColor">@color/white</item>
     </style>
 
     <style name="BaseDialogDark" parent="Theme.AppCompat.Dialog">
@@ -150,6 +154,7 @@
         <item name="contrast80">@color/grey_300</item>
         <item name="contrast100">@color/grey_100</item>
         <item name="palette">@array/darkPalette</item>
+        <item name="dialogFormLabelColor">@color/grey_800</item>
     </style>
 
     <style name="PreferenceThemeOverlay.v14.Material.PureBlack">
@@ -360,4 +365,26 @@
         <item name="android:layout_height">1dp</item>
         <item name="android:background">?attr/contrast20</item>
     </style>
+
+    <style name="DialogFormInnerBox">
+        <item name="android:background">@drawable/dialog_bg_input_box</item>
+        <item name="android:clipChildren">false</item>
+        <item name="android:clipToPadding">false</item>
+        <item name="android:orientation">vertical</item>
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">match_parent</item>
+    </style>
+
+    <style name="DialogFormLabel">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_marginStart">8dp</item>
+        <item name="android:layout_marginTop">-15dp</item>
+        <item name="android:layout_marginBottom">-4dp</item>
+        <item name="android:paddingStart">8dp</item>
+        <item name="android:background">?attr/dialogFormLabelColor</item>
+        <item name="android:paddingEnd">8dp</item>
+        <item name="android:textSize">@dimen/smallTextSize</item>
+    </style>
+
 </resources>

uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/models/Timestamp.kt

@@ -20,6 +20,7 @@ package org.isoron.uhabits.core.models
 
 import org.isoron.platform.time.LocalDate
 import org.isoron.uhabits.core.utils.DateFormats.Companion.getCSVDateFormat
+import org.isoron.uhabits.core.utils.DateFormats.Companion.getDialogDateFormat
 import org.isoron.uhabits.core.utils.DateUtils
 import org.isoron.uhabits.core.utils.DateUtils.Companion.getStartOfTodayCalendar
 import org.isoron.uhabits.core.utils.DateUtils.Companion.truncate
@@ -81,6 +82,10 @@ data class Timestamp(var unixTime: Long) : Comparable<Timestamp> {
         return day
     }
 
+    fun toDialogDateString(): String {
+        return getDialogDateFormat().format(Date(unixTime))
+    }
+
     override fun toString(): String {
         return getCSVDateFormat().format(Date(unixTime))
     }

uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/ui/screens/habits/list/ListHabitsBehavior.kt

@@ -54,7 +54,8 @@ open class ListHabitsBehavior @Inject constructor(
             screen.showNumberPicker(
                 oldValue / 1000,
                 habit.unit,
-                entry.notes
+                entry.notes,
+                timestamp.toDialogDateString(),
             ) { newValue: Double, newNotes: String, ->
                 val value = (newValue * 1000).roundToInt()
                 commandRunner.run(CreateRepetitionCommand(habitList, habit, timestamp, value, newNotes))
@@ -159,6 +160,7 @@ open class ListHabitsBehavior @Inject constructor(
             value: Double,
             unit: String,
             notes: String,
+            dateString: String,
             callback: NumberPickerCallback
         )
         fun showCheckmarkDialog(

uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/ui/screens/habits/show/views/HistoryCard.kt

@@ -110,7 +110,8 @@ class HistoryCardPresenter(
         screen.showNumberPicker(
             oldValue / 1000.0,
             habit.unit,
-            entry.notes
+            entry.notes,
+            timestamp.toDialogDateString(),
         ) { newValue: Double, newNotes: String ->
             val thousands = (newValue * 1000).roundToInt()
             commandRunner.run(
@@ -195,6 +196,7 @@ class HistoryCardPresenter(
             value: Double,
             unit: String,
             notes: String,
+            dateString: String,
             callback: ListHabitsBehavior.NumberPickerCallback,
         )
         fun showCheckmarkDialog(

uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/utils/DateFormats.kt

@@ -41,5 +41,8 @@ class DateFormats {
 
         @JvmStatic fun getCSVDateFormat(): SimpleDateFormat =
             fromSkeleton("yyyy-MM-dd", Locale.US)
+
+        @JvmStatic fun getDialogDateFormat(): SimpleDateFormat =
+            fromSkeleton("MMM dd, yyyy", Locale.US)
     }
 }

uhabits-core/src/jvmTest/java/org/isoron/uhabits/core/ui/screens/habits/list/ListHabitsBehaviorTest.kt

@@ -79,7 +79,7 @@ class ListHabitsBehaviorTest : BaseUnitTest() {
     @Test
     fun testOnEdit() {
         behavior.onEdit(habit2, getToday())
-        verify(screen).showNumberPicker(eq(0.1), eq("miles"), eq(""), picker.capture())
+        verify(screen).showNumberPicker(eq(0.1), eq("miles"), eq(""), eq("Jan 25, 2015"), picker.capture())
         picker.lastValue.onNumberPicked(100.0, "")
         val today = getTodayWithOffset()
         assertThat(habit2.computedEntries.get(today).value, equalTo(100000))