UI: Transition button and item focus/presses.

Just a quick touch of transition.

ext/native/ui/ui_tween.cpp

@@ -77,6 +77,12 @@ void TextColorTween::DoApply(View *view, float pos) {
 	tv->SetTextColor(Current(pos));
 }
 
+void CallbackColorTween::DoApply(View *view, float pos) {
+	if (callback_) {
+		callback_(view, Current(pos));
+	}
+}
+
 void VisibilityTween::DoApply(View *view, float pos) {
 	view->SetVisibility(Current(pos));
 }

ext/native/ui/ui_tween.h

@@ -2,6 +2,7 @@
 
 #include <algorithm>
 #include <cstdint>
+#include <functional>
 #include "base/timeutil.h"
 #include "ui/view.h"
 
@@ -157,6 +158,20 @@ protected:
 	void DoApply(View *view, float pos) override;
 };
 
+class CallbackColorTween : public ColorTween {
+public:
+	using ColorTween::ColorTween;
+
+	void SetCallback(const std::function<void(View *v, uint32_t c)> &cb) {
+		callback_ = cb;
+	}
+
+protected:
+	void DoApply(View *view, float pos) override;
+
+	std::function<void(View *v, uint32_t c)> callback_;
+};
+
 class VisibilityTween : public TweenBase<Visibility> {
 public:
 	using TweenBase::TweenBase;

ext/native/ui/view.cpp

@@ -261,6 +261,22 @@ bool View::SetFocus() {
 	return false;
 }
 
+Clickable::Clickable(LayoutParams *layoutParams)
+	: View(layoutParams) {
+	// We set the colors later once we have a UIContext.
+	bgColor_ = AddTween(new CallbackColorTween(0.1f));
+	bgColor_->Persist();
+}
+
+void Clickable::DrawBG(UIContext &dc, const Style &style) {
+	if (style.background.type == DRAW_SOLID_COLOR) {
+		bgColor_->Divert(style.background.color, down_ ? 0.05f : 0.1f);
+		dc.FillRect(Drawable(bgColor_->CurrentValue()), bounds_);
+	} else {
+		dc.FillRect(style.background, bounds_);
+	}
+}
+
 void Clickable::Click() {
 	UI::EventParams e{};
 	e.v = this;
@@ -460,7 +476,7 @@ void ClickableItem::Draw(UIContext &dc) {
 		style = dc.theme->itemDownStyle;
 	}
 
-	dc.FillRect(style.background, bounds_);
+	DrawBG(dc, style);
 }
 
 void Choice::GetContentDimensionsBySpec(const UIContext &dc, MeasureSpec horiz, MeasureSpec vert, float &w, float &h) const {
@@ -512,7 +528,8 @@ void Choice::Draw(UIContext &dc) {
 		if (HasFocus()) {
 			style = dc.theme->itemFocusedStyle;
 		}
-		dc.FillRect(style.background, bounds_);
+
+		DrawBG(dc, style);
 	}
 
 	Style style = dc.theme->itemStyle;
@@ -548,11 +565,30 @@ void Choice::Draw(UIContext &dc) {
 	}
 }
 
+InfoItem::InfoItem(const std::string &text, const std::string &rightText, LayoutParams *layoutParams)
+	: Item(layoutParams), text_(text), rightText_(rightText) {
+	// We set the colors later once we have a UIContext.
+	bgColor_ = AddTween(new CallbackColorTween(0.1f));
+	bgColor_->Persist();
+	fgColor_ = AddTween(new CallbackColorTween(0.1f));
+	fgColor_->Persist();
+}
+
 void InfoItem::Draw(UIContext &dc) {
 	Item::Draw(dc);
 
 	UI::Style style = HasFocus() ? dc.theme->itemFocusedStyle : dc.theme->infoStyle;
-	style.background.color &= 0x7fffffff;
+
+	if (style.background.type == DRAW_SOLID_COLOR) {
+		// For a smoother fade, using the same color with 0 alpha.
+		if ((style.background.color & 0xFF000000) == 0)
+			style.background.color = dc.theme->itemFocusedStyle.background.color & 0x00FFFFFF;
+		bgColor_->Divert(style.background.color & 0x7fffffff);
+		style.background.color = bgColor_->CurrentValue();
+	}
+	fgColor_->Divert(style.fgColor);
+	style.fgColor = fgColor_->CurrentValue();
+
 	dc.FillRect(style.background, bounds_);
 
 	int paddingX = 12;
@@ -690,7 +726,7 @@ void Button::Draw(UIContext &dc) {
 	if (!IsEnabled()) style = dc.theme->buttonDisabledStyle;
 
 	// dc.Draw()->DrawImage4Grid(style.image, bounds_.x, bounds_.y, bounds_.x2(), bounds_.y2(), style.bgColor);
-	dc.FillRect(style.background, bounds_);
+	DrawBG(dc, style);
 	float tw, th;
 	dc.MeasureText(dc.theme->uiFont, 1.0f, 1.0f, text_.c_str(), &tw, &th);
 	if (tw > bounds_.w || imageID_ != -1) {

ext/native/ui/view.h

@@ -347,6 +347,7 @@ private:
 View *GetFocusedView();
 
 class Tween;
+class CallbackColorTween;
 
 class View {
 public:
@@ -468,8 +469,7 @@ public:
 // All these light up their background when touched, or have focus.
 class Clickable : public View {
 public:
-	Clickable(LayoutParams *layoutParams)
+	Clickable(LayoutParams *layoutParams);
-		: View(layoutParams), downCountDown_(0), dragging_(false), down_(false){}
 
 	bool Key(const KeyInput &input) override;
 	void Touch(const TouchInput &input) override;
@@ -483,10 +483,12 @@ protected:
 	// the event.
 	// Use it for checking/unchecking checkboxes, etc.
 	virtual void Click();
+	void DrawBG(UIContext &dc, const Style &style);
 
-	int downCountDown_;
+	CallbackColorTween *bgColor_ = nullptr;
-	bool dragging_;
+	int downCountDown_ = 0;
-	bool down_;
+	bool dragging_ = false;
+	bool down_ = false;
 };
 
 class Button : public Clickable {
@@ -613,11 +615,11 @@ public:
 // Use to trigger something or open a submenu screen.
 class Choice : public ClickableItem {
 public:
-	Choice(const std::string &text, LayoutParams *layoutParams = 0)
+	Choice(const std::string &text, LayoutParams *layoutParams = nullptr)
-		: ClickableItem(layoutParams), text_(text), smallText_(), atlasImage_(-1), iconImage_(-1), centered_(false), highlighted_(false), selected_(false) {}
+		: Choice(text, std::string(), false, layoutParams) {}
-	Choice(const std::string &text, const std::string &smallText, bool selected = false, LayoutParams *layoutParams = 0)
+	Choice(const std::string &text, const std::string &smallText, bool selected = false, LayoutParams *layoutParams = nullptr)
 		: ClickableItem(layoutParams), text_(text), smallText_(smallText), atlasImage_(-1), iconImage_(-1), centered_(false), highlighted_(false), selected_(selected) {}
-	Choice(ImageID image, LayoutParams *layoutParams = 0)
+	Choice(ImageID image, LayoutParams *layoutParams = nullptr)
 		: ClickableItem(layoutParams), atlasImage_(image), iconImage_(-1), centered_(false), highlighted_(false), selected_(false) {}
 
 	virtual void HighlightChanged(bool highlighted);
@@ -670,8 +672,7 @@ protected:
 
 class InfoItem : public Item {
 public:
-	InfoItem(const std::string &text, const std::string &rightText, LayoutParams *layoutParams = 0)
+	InfoItem(const std::string &text, const std::string &rightText, LayoutParams *layoutParams = nullptr);
-		: Item(layoutParams), text_(text), rightText_(rightText) {}
 
 	void Draw(UIContext &dc) override;
 
@@ -689,6 +690,9 @@ public:
 	}
 
 private:
+	CallbackColorTween *bgColor_ = nullptr;
+	CallbackColorTween *fgColor_ = nullptr;
+
 	std::string text_;
 	std::string rightText_;
 };