From 15c2da5539c88787caf839681d165ba5fd7589d1 Mon Sep 17 00:00:00 2001 From: luoying_ace_admin Date: Mon, 18 Apr 2022 20:40:59 +0800 Subject: [PATCH] fix UX for some components Signed-off-by: luoying_ace_admin --- .../declarative_frontend/jsview/js_rating.cpp | 8 +++++ .../core/components/box/rosen_render_box.cpp | 1 + .../components/button/rosen_render_button.cpp | 36 +++++++++++++++++++ .../components/button/rosen_render_button.h | 1 + .../core/components/rating/render_rating.h | 4 +-- .../components/rating/rosen_render_rating.cpp | 11 +++--- .../slider/rosen_render_circle_block.cpp | 1 + .../core/components/slider/slider_element.h | 2 +- .../components_v2/indexer/indexer_element.cpp | 2 +- 9 files changed, 56 insertions(+), 10 deletions(-) diff --git a/frameworks/bridge/declarative_frontend/jsview/js_rating.cpp b/frameworks/bridge/declarative_frontend/jsview/js_rating.cpp index 856fcc98..c10c8bd0 100644 --- a/frameworks/bridge/declarative_frontend/jsview/js_rating.cpp +++ b/frameworks/bridge/declarative_frontend/jsview/js_rating.cpp @@ -85,6 +85,14 @@ void JSRating::JSBind(BindingTarget globalObj) JSClass::StaticMethod("stepSize", &JSRating::SetStepSize, opt); JSClass::StaticMethod("starStyle", &JSRating::SetStarStyle, opt); JSClass::StaticMethod("onChange", &JSRating::SetOnChange); + + JSClass::StaticMethod("onAppear", &JSInteractableView::JsOnAppear); + JSClass::StaticMethod("onDisAppear", &JSInteractableView::JsOnDisAppear); + JSClass::StaticMethod("onTouch", &JSInteractableView::JsOnTouch); + JSClass::StaticMethod("onHover", &JSInteractableView::JsOnHover); + JSClass::StaticMethod("onKeyEvent", &JSInteractableView::JsOnKey); + JSClass::StaticMethod("onDeleteEvent", &JSInteractableView::JsOnDelete); + JSClass::StaticMethod("onClick", &JSInteractableView::JsOnClick); JSClass::Inherit(); JSClass::Bind<>(globalObj); } diff --git a/frameworks/core/components/box/rosen_render_box.cpp b/frameworks/core/components/box/rosen_render_box.cpp index dc104379..6f9fdd6d 100644 --- a/frameworks/core/components/box/rosen_render_box.cpp +++ b/frameworks/core/components/box/rosen_render_box.cpp @@ -415,6 +415,7 @@ void RosenRenderBox::PaintFocus(const SkRect& focusRect, RenderContext& context) paint.setStyle(SkPaint::Style::kStroke_Style); paint.setColor(FOCUS_COLOR); paint.setStrokeWidth(FOCUS_WIDTH); + paint.setAntiAlias(true); SkRRect rRect = SkRRect::MakeRectXY(focusRect, FOCUS_RADIUS_X, FOCUS_RADIUS_Y); canvas->drawRRect(rRect, paint); diff --git a/frameworks/core/components/button/rosen_render_button.cpp b/frameworks/core/components/button/rosen_render_button.cpp index 35f24ca2..663dcb2a 100644 --- a/frameworks/core/components/button/rosen_render_button.cpp +++ b/frameworks/core/components/button/rosen_render_button.cpp @@ -49,6 +49,10 @@ constexpr double PROGRESS_START_ANGLE = 1.5 * M_PI; // Definition for animation constexpr uint8_t DEFAULT_OPACITY = 255; +constexpr Dimension FOCUS_PADDING = 2.0_vp; +constexpr Dimension FOCUS_BORDER_WIDTH = 2.0_vp; +constexpr uint32_t FOCUS_BORDER_COLOR = 0xFF0A59F7; + } // namespace void RosenRenderButton::PerformLayout() @@ -106,6 +110,9 @@ void RosenRenderButton::Paint(RenderContext& context, const Offset& offset) } DrawButton(canvas, offset); RenderNode::Paint(context, offset); + if (isFocus_ && (isTablet_ || isPhone_)) { + PaintFocus(context, offset); + } } void RosenRenderButton::PaintButtonAnimation() @@ -452,4 +459,33 @@ void RosenRenderButton::ConvertToSkVector(const std::array& radii, Sk } } +void RosenRenderButton::PaintFocus(RenderContext& context, const Offset& offset) +{ + auto canvas = static_cast(&context)->GetCanvas(); + if (!canvas) { + LOGE("paint canvas is null"); + return; + } + Size canvasSize = GetLayoutSize(); + double focusBorderHeight = canvasSize.Height() + NormalizeToPx(FOCUS_PADDING * 2); + double focusBorderWidth = canvasSize.Width() + NormalizeToPx(FOCUS_PADDING * 2); + double focusRadius = focusBorderHeight / 2; + if (!buttonComponent_) { + return; + } + if (buttonComponent_->GetType() == ButtonType::NORMAL) { + focusRadius = rrectRadius_ + NormalizeToPx(FOCUS_PADDING); + } + + SkPaint paint; + paint.setColor(FOCUS_BORDER_COLOR); + paint.setStyle(SkPaint::Style::kStroke_Style); + paint.setStrokeWidth(NormalizeToPx(FOCUS_BORDER_WIDTH)); + paint.setAntiAlias(true); + SkRRect rRect; + rRect.setRectXY(SkRect::MakeIWH(focusBorderWidth, focusBorderHeight), focusRadius, focusRadius); + rRect.offset(offset.GetX() - NormalizeToPx(FOCUS_PADDING), offset.GetY() - NormalizeToPx(FOCUS_PADDING)); + canvas->drawRRect(rRect, paint); +} + } // namespace OHOS::Ace diff --git a/frameworks/core/components/button/rosen_render_button.h b/frameworks/core/components/button/rosen_render_button.h index 0924c827..5bdca47b 100644 --- a/frameworks/core/components/button/rosen_render_button.h +++ b/frameworks/core/components/button/rosen_render_button.h @@ -52,6 +52,7 @@ private: void DrawDownloadButton(SkCanvas* canvas, const Offset& offset); void DrawButton(SkCanvas* canvas, const Offset& offset); void ConvertToSkVector(const std::array& radii, SkVector* skRadii); + void PaintFocus(RenderContext& context, const Offset& offset); uint32_t GetStateColor(); bool NeedClickedColor(const Color& backgroundColor); diff --git a/frameworks/core/components/rating/render_rating.h b/frameworks/core/components/rating/render_rating.h index 8a9acc39..23e7124b 100644 --- a/frameworks/core/components/rating/render_rating.h +++ b/frameworks/core/components/rating/render_rating.h @@ -38,9 +38,9 @@ constexpr Dimension PRESS_BORDER_RADIUS = 4.0_vp; constexpr uint32_t PRESS_COLOR = 0x19000000; -constexpr Dimension FOCUS_BODER_PADING = 2.0_vp; +constexpr Dimension FOCUS_BORDER_PADDING = 2.0_vp; -constexpr uint32_t FOCUS_BODER_COLOR = 0xFF0A59F7; +constexpr uint32_t FOCUS_BORDER_COLOR = 0xFF0A59F7; enum class OperationEvent { RATING_TOUCH_EVENT = 0, diff --git a/frameworks/core/components/rating/rosen_render_rating.cpp b/frameworks/core/components/rating/rosen_render_rating.cpp index a7ae83b4..2d8008df 100644 --- a/frameworks/core/components/rating/rosen_render_rating.cpp +++ b/frameworks/core/components/rating/rosen_render_rating.cpp @@ -45,8 +45,7 @@ void RosenRenderRating::Paint(RenderContext& context, const Offset& offset) RequestFocusAnimation(animationOffset + GetGlobalOffset(), Size(focusRadius, focusRadius), focusRadius); } - if ((SystemProperties::GetDeviceType() == DeviceType::TABLET || SystemProperties::GetDeviceType() == - DeviceType::PHONE) && !isIndicator_ && operationEvent_ == OperationEvent::RATING_KEY_EVENT) { + if ((IsTablet() || IsPhone()) && !isIndicator_ && operationEvent_ == OperationEvent::RATING_KEY_EVENT) { Offset animationOffset = starOffset + Offset(offsetDeltaX, offsetDeltaY); PaintFocusForTABLET(animationOffset, focusBorderRadius_.Value(), Size(singleWidth_, ratingSize_.Height()), context); @@ -59,8 +58,7 @@ void RosenRenderRating::Paint(RenderContext& context, const Offset& offset) } PaintRatingBar(context, canvas); Offset pressstarOffset = Offset(singleWidth_ * pressstarNum_ + imageVerticalOffset, imageVerticalOffset); - if (!isIndicator_ && (SystemProperties::GetDeviceType() == DeviceType::TABLET || - SystemProperties::GetDeviceType() == DeviceType::PHONE) && isPress_) { + if (!isIndicator_ && (IsTablet() || IsPhone()) && isPress_) { Offset animationOffset = pressstarOffset + Offset(offsetDeltaX, offsetDeltaY); PaintPress(animationOffset + offset, NormalizeToPx(PRESS_BORDER_RADIUS), Size(singleWidth_, ratingSize_.Height()), context); @@ -179,9 +177,10 @@ void RosenRenderRating::PaintFocusForTABLET( } SkPaint paint; SkRRect rRect; - paint.setColor(FOCUS_BODER_COLOR); + paint.setColor(FOCUS_BORDER_COLOR); paint.setStyle(SkPaint::Style::kStroke_Style); - paint.setStrokeWidth(NormalizeToPx(FOCUS_BODER_PADING)); + paint.setStrokeWidth(NormalizeToPx(FOCUS_BORDER_PADDING)); + paint.setAntiAlias(true); rRect.setRectXY(SkRect::MakeWH(boardSize.Width(), boardSize.Height()), rRectRadius, rRectRadius); rRect.offset(offset.GetX(), offset.GetY()); canvas->drawRRect(rRect, paint); diff --git a/frameworks/core/components/slider/rosen_render_circle_block.cpp b/frameworks/core/components/slider/rosen_render_circle_block.cpp index 086f2c63..f390e590 100644 --- a/frameworks/core/components/slider/rosen_render_circle_block.cpp +++ b/frameworks/core/components/slider/rosen_render_circle_block.cpp @@ -72,6 +72,7 @@ void RosenRenderCircleBlock::Paint(RenderContext& context, const Offset& offset) focusPaint.setColor(FOCUS_BORDER_COLOR); focusPaint.setStyle(SkPaint::Style::kStroke_Style); focusPaint.setStrokeWidth(NormalizeToPx(FOCUS_BORDER_PADDING)); + focusPaint.setAntiAlias(true); canvas->drawCircle(offset.GetX(), offset.GetY(), radius + RADIUS_PADDING, focusPaint); SkPaint blockPaint; blockPaint.setColor(SkColorSetARGB(GetBlockColor().GetAlpha(), GetBlockColor().GetRed(), diff --git a/frameworks/core/components/slider/slider_element.h b/frameworks/core/components/slider/slider_element.h index 5268929c..3ea2f447 100644 --- a/frameworks/core/components/slider/slider_element.h +++ b/frameworks/core/components/slider/slider_element.h @@ -27,7 +27,7 @@ class SliderElement : public RenderElement, public FocusNode { public: bool OnKeyEvent(const KeyEvent& keyEvent) override { - if (keyEvent.action != KeyAction::UP) { + if (keyEvent.action != KeyAction::DOWN) { return false; } auto renderSlider = AceType::DynamicCast(renderNode_); diff --git a/frameworks/core/components_v2/indexer/indexer_element.cpp b/frameworks/core/components_v2/indexer/indexer_element.cpp index 8d3d5e23..5326edeb 100644 --- a/frameworks/core/components_v2/indexer/indexer_element.cpp +++ b/frameworks/core/components_v2/indexer/indexer_element.cpp @@ -79,7 +79,7 @@ bool IndexerElement::IndexMoveDown() bool IndexerElement::OnKeyEvent(const KeyEvent& keyEvent) { - if (keyEvent.action != KeyAction::UP) { + if (keyEvent.action != KeyAction::DOWN) { return false; } if (keyEvent.code == KeyCode::KEY_DPAD_UP) {