Mobile: Dialog styling for phones

5 files changed, 61 insertions, 22 deletions

diff --git a/src/ui/color.c b/src/ui/color.c
index 02ee59d6..3c504c14 100644
--- a/src/ui/color.c
+++ b/src/ui/color.c
@@ -299,6 +299,10 @@ void setThemePalette_Color(enum iColorTheme theme) {
                                                 0.4f));
     palette_[uiMarked_ColorId].a = 128;
     palette_[uiMatching_ColorId].a = 128;
+    if (deviceType_App() == phone_AppDeviceType) {
+        copy_(uiInputBackground_ColorId, uiBackgroundSidebar_ColorId);
+        copy_(uiInputFrame_ColorId, uiBackgroundSidebar_ColorId);
+    }
 }
 
 iColor get_Color(int color) {
diff --git a/src/ui/inputwidget.c b/src/ui/inputwidget.c
index 267ccdf7..3f178fc5 100644
--- a/src/ui/inputwidget.c
+++ b/src/ui/inputwidget.c
@@ -117,8 +117,8 @@ static void invalidateBuffered_InputWidget_(iInputWidget *d) {
 static void updateMetrics_InputWidget_(iInputWidget *d) {
     iWidget *w = as_Widget(d);
     /* Caller must arrange the width, but the height is fixed. */
-    w->rect.size.y = lineHeight_Text(default_FontId) + 2 * gap_UI;
-#if defined (iPlatformAppleMobile)
+    w->rect.size.y = lineHeight_Text(d->font) * 1.3f;
+#if defined (iPlatformMobile)
     w->rect.size.y += 2 * gap_UI;
 #endif
     invalidateBuffered_InputWidget_(d);
diff --git a/src/ui/util.c b/src/ui/util.c
index 29ac04a3..ad72a11e 100644
--- a/src/ui/util.c
+++ b/src/ui/util.c
@@ -455,19 +455,22 @@ static iWidget *makeMenuSeparator_(void) {
 
 iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
     iWidget *menu = new_Widget();
-    setFrameColor_Widget(menu, uiSeparator_ColorId);
     setBackgroundColor_Widget(menu, uiBackground_ColorId);
     if (deviceType_App() != desktop_AppDeviceType) {
         setPadding1_Widget(menu, 2 * gap_UI);
     }
+    const iBool isPortraitPhone = (deviceType_App() == phone_AppDeviceType && isPortrait_App());
+    int64_t itemFlags = (deviceType_App() != desktop_AppDeviceType ? 0 : 0) |
+                        (isPortraitPhone ? extraPadding_WidgetFlag : 0);
     setFlags_Widget(menu,
                     keepOnTop_WidgetFlag | collapse_WidgetFlag | hidden_WidgetFlag |
                         arrangeVertical_WidgetFlag | arrangeSize_WidgetFlag |
-                        resizeChildrenToWidestChild_WidgetFlag | overflowScrollable_WidgetFlag,
+                        resizeChildrenToWidestChild_WidgetFlag | overflowScrollable_WidgetFlag |
+                        (isPortraitPhone ? drawBackgroundToVerticalSafeArea_WidgetFlag : 0),
                     iTrue);
-    const iBool isPortraitPhone = (deviceType_App() == phone_AppDeviceType && isPortrait_App());
-    int64_t itemFlags = (deviceType_App() != desktop_AppDeviceType ? 0 : 0) |
-                        (isPortraitPhone ? extraPadding_WidgetFlag : 0);
+    if (!isPortraitPhone) {
+        setFrameColor_Widget(menu, uiSeparator_ColorId);
+    }
     iBool haveIcons = iFalse;
     for (size_t i = 0; i < n; ++i) {
         const iMenuItem *item = &items[i];
@@ -478,7 +481,8 @@ iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
             iLabelWidget *label = addChildFlags_Widget(
                 menu,
                 iClob(newKeyMods_LabelWidget(item->label, item->key, item->kmods, item->command)),
-                noBackground_WidgetFlag | frameless_WidgetFlag | alignLeft_WidgetFlag | drawKey_WidgetFlag | itemFlags);
+                noBackground_WidgetFlag | frameless_WidgetFlag | alignLeft_WidgetFlag |
+                                                       drawKey_WidgetFlag | itemFlags);
             haveIcons |= checkIcon_LabelWidget(label);
             updateSize_LabelWidget(label); /* drawKey was set */
         }
@@ -487,7 +491,8 @@ iWidget *makeMenu_Widget(iWidget *parent, const iMenuItem *items, size_t n) {
         addChild_Widget(menu, iClob(makeMenuSeparator_()));
         addChildFlags_Widget(menu,
                              iClob(new_LabelWidget("Cancel", "cancel")),
-                             itemFlags | frameless_WidgetFlag | alignLeft_WidgetFlag);
+                             itemFlags | noBackground_WidgetFlag | frameless_WidgetFlag |
+                             alignLeft_WidgetFlag);
     }
     if (haveIcons) {
         /* All items must have icons if at least one of them has. */
@@ -953,7 +958,8 @@ void finalizeSheet_Widget(iWidget *sheet) {
                 /* Toggles have the button on the right. */
                 if (valueLabel && cmp_String(command_LabelWidget(valueLabel), "toggle") == 0) {
                     iWidget *div = new_Widget();
-                    setFrameColor_Widget(div, uiSeparator_ColorId);
+                    setBackgroundColor_Widget(div, uiBackgroundSidebar_ColorId);
+//                    setFrameColor_Widget(div, uiSeparator_ColorId);
                     setPadding_Widget(div, gap_UI, gap_UI, 4 * gap_UI, gap_UI);
                     addChildFlags_Widget(div, iClob(heading), 0);
                     setFont_LabelWidget((iLabelWidget *) heading, defaultBig_FontId);
@@ -961,7 +967,7 @@ void finalizeSheet_Widget(iWidget *sheet) {
                     addChild_Widget(div, iClob(value));
                     addChildFlags_Widget(sheet,
                                          iClob(div),
-                                         arrangeHeight_WidgetFlag |
+                                         borderBottom_WidgetFlag | arrangeHeight_WidgetFlag |
                                             resizeWidthOfChildren_WidgetFlag |
                                             arrangeHorizontal_WidgetFlag);
                 }
@@ -969,27 +975,48 @@ void finalizeSheet_Widget(iWidget *sheet) {
                     if (valueLabel && isEmpty_String(text_LabelWidget(valueLabel))) {
                         /* Subheading padding goes above. */
                         addChild_Widget(sheet, iClob(value));
-                        addChild_Widget(sheet, iClob(heading));
+                        addChildFlags_Widget(sheet, iClob(heading), 0);
                         setFont_LabelWidget(headingLabel, uiLabelBold_FontId);
                     }
                     else {
-                        addChild_Widget(sheet, iClob(heading));
+                        addChildFlags_Widget(sheet, iClob(heading), borderBottom_WidgetFlag);
                         if (headingLabel) {
                             setTextColor_LabelWidget(headingLabel, uiSubheading_ColorId);
                             setText_LabelWidget(headingLabel,
                                                 collect_String(upper_String(text_LabelWidget(headingLabel))));
                         }
-                        addChild_Widget(sheet, iClob(value));
+                        const iBool isMenuButton = findChild_Widget(value, "menu") != NULL;
+                        if (isMenuButton) {
+                            setFlags_Widget(value, noBackground_WidgetFlag | frameless_WidgetFlag, iTrue);
+                        }
+                        if (valueInput || isMenuButton) {
+                            setFlags_Widget(value, borderBottom_WidgetFlag, iFalse);
+                            iWidget *pad = new_Widget();
+                            setBackgroundColor_Widget(pad, uiBackgroundSidebar_ColorId);
+                            setPadding_Widget(pad, 0, 1 * gap_UI, 0, 1 * gap_UI);
+                            addChild_Widget(pad, iClob(value));
+                            addChildFlags_Widget(sheet, iClob(pad), borderBottom_WidgetFlag |
+                                                 arrangeVertical_WidgetFlag |
+                                                 resizeToParentWidth_WidgetFlag |
+                                                 resizeWidthOfChildren_WidgetFlag |
+                                                 arrangeHeight_WidgetFlag);
+                        }
+                        else {
+                            addChild_Widget(sheet, iClob(value));
+                        }
                         /* Align radio buttons to the right. */
-                        if (childCount_Widget(value)) {
+                        if (childCount_Widget(value) >= 2) {
+                            setBackgroundColor_Widget(value, uiBackgroundSidebar_ColorId);
+                            setPadding_Widget(value, 4 * gap_UI, 2 * gap_UI, 4 * gap_UI, 2 * gap_UI);
                             setFlags_Widget(value,
+                                            borderBottom_WidgetFlag |
                                             resizeToParentWidth_WidgetFlag |
                                             resizeWidthOfChildren_WidgetFlag,
                                             iTrue);
                             iForEach(ObjectList, sub, children_Widget(value)) {
                                 if (isInstance_Object(sub.object, &Class_LabelWidget)) {
                                     iLabelWidget *opt = sub.object;
-                                    setFont_LabelWidget(opt, defaultBig_FontId);
+                                    setFont_LabelWidget(opt, defaultMedium_FontId);
                                 }
                             }
                         }
diff --git a/src/ui/widget.c b/src/ui/widget.c
index bb5431eb..c54ea444 100644
--- a/src/ui/widget.c
+++ b/src/ui/widget.c
@@ -680,12 +680,6 @@ void drawBackground_Widget(const iWidget *d) {
     if (d->flags & (hidden_WidgetFlag | noBackground_WidgetFlag)) {
         return;
     }
-    if (d->flags & borderTop_WidgetFlag) {
-        const iRect rect = bounds_Widget(d);
-        iPaint p;
-        init_Paint(&p);
-        drawHLine_Paint(&p, topLeft_Rect(rect), width_Rect(rect), uiBackgroundFramelessHover_ColorId);
-    }
     /* Popup menus have a shadowed border. */
     const iBool shadowBorder =
         (d->flags & keepOnTop_WidgetFlag && ~d->flags & mouseModal_WidgetFlag) != 0;
@@ -757,6 +751,19 @@ void drawBackground_Widget(const iWidget *d) {
             drawRectThickness_Paint(&p, rect, gap_UI / 4, d->frameColor);
         }
     }
+    if (d->flags & (borderTop_WidgetFlag | borderBottom_WidgetFlag)) {
+        const iRect rect = bounds_Widget(d);
+        iPaint p;
+        init_Paint(&p);
+        if (d->flags & borderTop_WidgetFlag) {
+            drawHLine_Paint(&p, topLeft_Rect(rect), width_Rect(rect),
+                            uiBackgroundFramelessHover_ColorId);
+        }
+        if (d->flags & borderBottom_WidgetFlag) {
+            drawHLine_Paint(&p, addY_I2(bottomLeft_Rect(rect), -1), width_Rect(rect),
+                            uiBackgroundFramelessHover_ColorId);
+        }
+    }
 }
 
 iLocalDef iBool isDrawn_Widget_(const iWidget *d) {
diff --git a/src/ui/widget.h b/src/ui/widget.h
index 48070158..b1ee8c73 100644
--- a/src/ui/widget.h
+++ b/src/ui/widget.h
@@ -102,6 +102,7 @@ enum iWidgetFlag {
 #define noTopFrame_WidgetFlag               iBit64(47)
 #define unpadded_WidgetFlag                 iBit64(48) /* ignore parent's padding */
 #define extraPadding_WidgetFlag             iBit64(49)
+#define borderBottom_WidgetFlag             iBit64(50)
 
 enum iWidgetAddPos {
     back_WidgetAddPos,