From ae4d660c381cc5b3d6a0fb140f0fbdefdeaed112 Mon Sep 17 00:00:00 2001 From: John Preston Date: Thu, 18 May 2023 14:04:14 +0400 Subject: [PATCH] Improve stories controls geometry constraints. --- .../chat_helpers/chat_helpers.style | 4 ++ .../chat_helpers/emoji_suggestions_widget.cpp | 1 + .../chat_helpers/field_autocomplete.cpp | 9 ++++- .../history_view_compose_controls.cpp | 4 ++ .../stories/media_stories_controller.cpp | 37 +++++++++++++++---- .../media/stories/media_stories_reply.cpp | 6 +-- .../media/stories/media_stories_sibling.cpp | 16 ++++---- .../SourceFiles/media/view/media_view.style | 5 ++- .../media/view/media_view_overlay_widget.cpp | 1 + 9 files changed, 60 insertions(+), 23 deletions(-) diff --git a/Telegram/SourceFiles/chat_helpers/chat_helpers.style b/Telegram/SourceFiles/chat_helpers/chat_helpers.style index 3d40ef02d..4e03be93a 100644 --- a/Telegram/SourceFiles/chat_helpers/chat_helpers.style +++ b/Telegram/SourceFiles/chat_helpers/chat_helpers.style @@ -172,6 +172,8 @@ ComposeControls { emoji: EmojiButton; suggestions: EmojiSuggestions; tabbed: EmojiPan; + tabbedHeightMin: pixels; + tabbedHeightMax: pixels; record: RecordBar; } @@ -982,5 +984,7 @@ defaultComposeControls: ComposeControls { emoji: historyAttachEmoji; suggestions: defaultEmojiSuggestions; tabbed: defaultEmojiPan; + tabbedHeightMin: emojiPanMinHeight; + tabbedHeightMax: emojiPanMaxHeight; record: defaultRecordBar; } diff --git a/Telegram/SourceFiles/chat_helpers/emoji_suggestions_widget.cpp b/Telegram/SourceFiles/chat_helpers/emoji_suggestions_widget.cpp index ccd235355..7233c5a21 100644 --- a/Telegram/SourceFiles/chat_helpers/emoji_suggestions_widget.cpp +++ b/Telegram/SourceFiles/chat_helpers/emoji_suggestions_widget.cpp @@ -866,6 +866,7 @@ void SuggestionsController::showWithQuery(SuggestionsQuery query) { const auto force = base::take(_keywordsRefreshed); _lastShownQuery = query; _suggestions->showWithQuery(_lastShownQuery, force); + _container->resizeToContent(); } SuggestionsQuery SuggestionsController::getEmojiQuery() { diff --git a/Telegram/SourceFiles/chat_helpers/field_autocomplete.cpp b/Telegram/SourceFiles/chat_helpers/field_autocomplete.cpp index 6f312926f..7f5c7a52e 100644 --- a/Telegram/SourceFiles/chat_helpers/field_autocomplete.cpp +++ b/Telegram/SourceFiles/chat_helpers/field_autocomplete.cpp @@ -693,9 +693,14 @@ void FieldAutocomplete::recount(bool resetScroll) { if (h > _boundings.height()) h = _boundings.height(); if (h > maxh) h = maxh; if (width() != _boundings.width() || height() != h) { - setGeometry(_boundings.x(), _boundings.y() + _boundings.height() - h, _boundings.width(), h); + setGeometry( + _boundings.x(), + _boundings.y() + _boundings.height() - h, + _boundings.width(), + h); _scroll->resize(_boundings.width(), h); - } else if (y() != _boundings.y() + _boundings.height() - h) { + } else if (x() != _boundings.x() + || y() != _boundings.y() + _boundings.height() - h) { move(_boundings.x(), _boundings.y() + _boundings.height() - h); } if (resetScroll) st = 0; diff --git a/Telegram/SourceFiles/history/view/controls/history_view_compose_controls.cpp b/Telegram/SourceFiles/history/view/controls/history_view_compose_controls.cpp index 50fe6c136..29f1736ae 100644 --- a/Telegram/SourceFiles/history/view/controls/history_view_compose_controls.cpp +++ b/Telegram/SourceFiles/history/view/controls/history_view_compose_controls.cpp @@ -2596,6 +2596,10 @@ void ComposeControls::createTabbedPanel() { setTabbedPanel(std::make_unique( _parent, std::move(descriptor))); + _tabbedPanel->setDesiredHeightValues( + st::emojiPanHeightRatio, + _st.tabbedHeightMin, + _st.tabbedHeightMax); } void ComposeControls::setTabbedPanel( diff --git a/Telegram/SourceFiles/media/stories/media_stories_controller.cpp b/Telegram/SourceFiles/media/stories/media_stories_controller.cpp index a0ff10a86..f46f37304 100644 --- a/Telegram/SourceFiles/media/stories/media_stories_controller.cpp +++ b/Telegram/SourceFiles/media/stories/media_stories_controller.cpp @@ -31,7 +31,8 @@ namespace { constexpr auto kPhotoProgressInterval = crl::time(100); constexpr auto kPhotoDuration = 5 * crl::time(1000); constexpr auto kFullContentFade = 0.35; -constexpr auto kSiblingMultiplier = 0.448; +constexpr auto kSiblingMultiplierDefault = 0.448; +constexpr auto kSiblingMultiplierMax = 0.72; constexpr auto kSiblingOutsidePart = 0.24; constexpr auto kSiblingUserpicSize = 0.3; constexpr auto kInnerHeightMultiplier = 1.6; @@ -217,12 +218,30 @@ void Controller::initLayout() { layout.controlsWidth, layout.controlsBottomPosition.y()); - const auto siblingSize = layout.content.size() * kSiblingMultiplier; + const auto sidesAvailable = size.width() - layout.content.width(); + const auto widthForSiblings = sidesAvailable + - 2 * st::storiesFieldMargin.bottom(); + const auto siblingWidthMax = widthForSiblings + / (2 * (1. - kSiblingOutsidePart)); + const auto siblingMultiplierMax = std::max( + kSiblingMultiplierDefault, + st::storiesSiblingWidthMin / float64(layout.content.width())); + const auto siblingMultiplier = std::min({ + siblingMultiplierMax, + kSiblingMultiplierMax, + siblingWidthMax / layout.content.width(), + }); + const auto siblingSize = layout.content.size() * siblingMultiplier; const auto siblingTop = (size.height() - siblingSize.height()) / 2; - const auto outside = int(base::SafeRound( + const auto outsideMax = int(base::SafeRound( siblingSize.width() * kSiblingOutsidePart)); - const auto xLeft = -outside; - const auto xRight = size.width() - siblingSize.width() + outside; + const auto leftAvailable = layout.content.x() - siblingSize.width(); + const auto xDesired = leftAvailable / 3; + const auto xPossible = std::min( + xDesired, + (leftAvailable - st::storiesControlSize)); + const auto xLeft = std::max(xPossible, -outsideMax); + const auto xRight = size.width() - siblingSize.width() - xLeft; const auto userpicSize = int(base::SafeRound( siblingSize.width() * kSiblingUserpicSize)); const auto innerHeight = userpicSize * kInnerHeightMultiplier; @@ -234,11 +253,13 @@ void Controller::initLayout() { userpicSize ).translated(geometry.topLeft()); }; - const auto nameFontSize = st::storiesMaxNameFontSize * contentHeight - / st::storiesMaxSize.height(); + const auto nameFontSize = std::max( + (st::storiesMaxNameFontSize * contentHeight + / st::storiesMaxSize.height()), + st::fsize); const auto nameBoundingRect = [&](QRect geometry, bool left) { const auto skipSmall = nameFontSize; - const auto skipBig = skipSmall + outside; + const auto skipBig = skipSmall - std::min(xLeft, 0); const auto top = userpic(geometry).y() + innerHeight; return QRect( left ? skipBig : skipSmall, diff --git a/Telegram/SourceFiles/media/stories/media_stories_reply.cpp b/Telegram/SourceFiles/media/stories/media_stories_reply.cpp index 1f6aca80a..49b2e70a3 100644 --- a/Telegram/SourceFiles/media/stories/media_stories_reply.cpp +++ b/Telegram/SourceFiles/media/stories/media_stories_reply.cpp @@ -65,16 +65,16 @@ void ReplyArea::initGeometry() { _controls->height() ) | rpl::start_with_next([=](const Layout &layout, int height) { const auto content = layout.content; - _controls->resizeToWidth(content.width()); + _controls->resizeToWidth(layout.controlsWidth); if (_controls->heightCurrent() == height) { const auto position = layout.controlsBottomPosition - QPoint(0, height); _controls->move(position.x(), position.y()); const auto &tabbed = st::storiesComposeControls.tabbed; const auto upper = QRect( - content.x(), + position.x(), content.y(), - content.width(), + layout.controlsWidth, (position.y() + tabbed.autocompleteBottomSkip - content.y())); diff --git a/Telegram/SourceFiles/media/stories/media_stories_sibling.cpp b/Telegram/SourceFiles/media/stories/media_stories_sibling.cpp index 05e66297b..a37b4a472 100644 --- a/Telegram/SourceFiles/media/stories/media_stories_sibling.cpp +++ b/Telegram/SourceFiles/media/stories/media_stories_sibling.cpp @@ -338,18 +338,16 @@ QPoint Sibling::namePosition( const QImage &image) const { const auto size = image.size() / image.devicePixelRatio(); const auto width = size.width(); + const auto bounding = layout.nameBoundingRect; const auto left = layout.geometry.x() + (layout.geometry.width() - width) / 2; - if (left < layout.nameBoundingRect.x()) { - return layout.nameBoundingRect.topLeft(); - } else if (left + width > layout.nameBoundingRect.x() + layout.nameBoundingRect.width()) { - return layout.nameBoundingRect.topLeft() - + QPoint(layout.nameBoundingRect.width() - width, 0); + const auto top = bounding.y() + bounding.height() - size.height(); + if (left < bounding.x()) { + return { bounding.x(), top }; + } else if (left + width > bounding.x() + bounding.width()) { + return { bounding.x() + bounding.width() - width, top }; } - const auto top = layout.nameBoundingRect.y() - + layout.nameBoundingRect.height() - - size.height(); - return QPoint(left, top); + return { left, top }; } void Sibling::check() { diff --git a/Telegram/SourceFiles/media/view/media_view.style b/Telegram/SourceFiles/media/view/media_view.style index 98ff6dd4f..c97645659 100644 --- a/Telegram/SourceFiles/media/view/media_view.style +++ b/Telegram/SourceFiles/media/view/media_view.style @@ -408,6 +408,7 @@ pipVolumeIcon2Over: icon {{ "player/player_volume_on", mediaviewPipControlsFgOve speedSliderDividerSize: size(2px, 8px); storiesMaxSize: size(540px, 960px); +storiesSiblingWidthMin: 200px; // Try making sibling not less than this. storiesMaxNameFontSize: 17px; storiesRadius: 8px; storiesControlSize: 64px; @@ -433,7 +434,7 @@ storiesHeaderDate: FlatLabel(defaultFlatLabel) { storiesHeaderDatePosition: point(50px, 17px); storiesShadowTop: icon{{ "mediaview/shadow_bottom-flip_vertical", windowShadowFg }}; storiesShadowBottom: mediaviewShadowBottom; -storiesControlsMinWidth: 200px; +storiesControlsMinWidth: 280px; storiesFieldMargin: margins(0px, 14px, 0px, 16px); storiesSideSkip: 145px; storiesCaptionFull: FlatLabel(defaultFlatLabel) { @@ -640,6 +641,8 @@ storiesComposeControls: ComposeControls(defaultComposeControls) { } autocompleteBottomSkip: 10px; } + tabbedHeightMin: 220px; + tabbedHeightMax: 480px; record: RecordBar(defaultRecordBar) { bg: storiesComposeBg; durationFg: storiesComposeWhiteText; diff --git a/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp b/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp index 8ff30f817..cd34868a0 100644 --- a/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp +++ b/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp @@ -5025,6 +5025,7 @@ void OverlayWidget::setStoriesUser(UserData *user) { updateControlsGeometry(); }, _stories->lifetime()); _storiesChanged.fire({}); + _dropdown->raise(); } }