improve numerical dialog design

4 years ago · 71f400f587
parent 79e302f922
commit 71f400f587
14 changed files with 160 additions and 55 deletions
--- a/uhabits-android/src/main/java/org/isoron/uhabits/activities/common/dialogs/NumberPickerFactory.kt
+++ b/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
--- a/uhabits-android/src/main/java/org/isoron/uhabits/activities/habits/list/ListHabitsScreen.kt
+++ b/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(
--- a/uhabits-android/src/main/java/org/isoron/uhabits/activities/habits/show/ShowHabitActivity.kt
+++ b/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(
--- a/uhabits-android/src/main/java/org/isoron/uhabits/widgets/activities/NumericalCheckmarkWidgetActivity.kt
+++ b/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()
    }
--- a/uhabits-android/src/main/res/drawable/dialog_bg_input_box.xml
+++ b/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>
--- a/uhabits-android/src/main/res/layout/number_picker_dialog.xml
+++ b/uhabits-android/src/main/res/layout/number_picker_dialog.xml
@ -21,14 +21,33 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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:layout_width="match_parent"
+        android:layout_height="wrap_content"
        android:orientation="horizontal"
-        android:gravity="center"
+        android:padding="5dp"
+        android:baselineAligned="false">
+
+        <FrameLayout
+            style="@style/FormOuterBox"
+            android:layout_width="0dp"
+            android:layout_weight="1">
+            <LinearLayout style="@style/DialogFormInnerBox">
+
+                <TextView
+                    style="@style/DialogFormLabel"
+                    android:text="@string/value" />
+
+                <LinearLayout
+                    android:orientation="horizontal"
+                    android:gravity="center_horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
-
                    <NumberPicker
                        android:id="@+id/picker"
                        android:layout_gravity="center"
@ -55,28 +74,41 @@

                </LinearLayout>

+            </LinearLayout>
+        </FrameLayout>
+
+    </LinearLayout>
+
+
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        android:padding="30dp">
+        android:orientation="horizontal"
+        android:padding="5dp"
+        android:baselineAligned="false">
+
+        <FrameLayout
+            style="@style/FormOuterBox"
+            android:layout_width="0dp"
+            android:layout_weight="1">
+
+            <LinearLayout style="@style/DialogFormInnerBox">

                <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            style="@style/TextAppearance.AppCompat.Title"
-            android:paddingBottom="10dp"
+                    style="@style/DialogFormLabel"
                    android:text="@string/notes" />

                <EditText
                    android:id="@+id/etNotes"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
                    android:inputType="textCapSentences|textMultiLine"
-            style="@style/TextAppearance.AppCompat.Body1"
+                    style="@style/FormInput"
                    android:scrollbars="vertical"
                    android:hint="@string/example_notes"/>

            </LinearLayout>

+        </FrameLayout>
+
+    </LinearLayout>
+
 </LinearLayout>
--- a/uhabits-android/src/main/res/values/attrs.xml
+++ b/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"/>

--- a/uhabits-android/src/main/res/values/strings.xml
+++ b/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>
--- a/uhabits-android/src/main/res/values/styles.xml
+++ b/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>
--- a/uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/models/Timestamp.kt
+++ b/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))
    }
--- a/uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/ui/screens/habits/list/ListHabitsBehavior.kt
+++ b/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(
--- a/uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/ui/screens/habits/show/views/HistoryCard.kt
+++ b/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(
--- a/uhabits-core/src/jvmMain/java/org/isoron/uhabits/core/utils/DateFormats.kt
+++ b/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)
    }
 }
--- a/uhabits-core/src/jvmTest/java/org/isoron/uhabits/core/ui/screens/habits/list/ListHabitsBehaviorTest.kt
+++ b/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))