void/AyuGramDesktop
2
0
Fork 0
mirror of https://github.com/AyuGram/AyuGramDesktop.git synced 2025-06-05 06:33:57 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve button and dropdown layout.

Browse source
This commit is contained in:
John Preston 2022-01-07 12:23:47 +03:00
parent e0fd5d8795
commit a51be85199
2 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
Telegram/SourceFiles/history/view/history_view_react_button.cpp
View file

@ -25,7 +25,6 @@ constexpr auto kToggleDuration = crl::time(120);
constexpr auto kActivateDuration = crl::time(150); constexpr auto kActivateDuration = crl::time(150);
constexpr auto kExpandDuration = crl::time(300); constexpr auto kExpandDuration = crl::time(300);
constexpr auto kCollapseDuration = crl::time(250); constexpr auto kCollapseDuration = crl::time(250);
constexpr auto kHoverScaleDuration = crl::time(120);
constexpr auto kBgCacheIndex = 0; constexpr auto kBgCacheIndex = 0;
constexpr auto kShadowCacheIndex = 0; constexpr auto kShadowCacheIndex = 0;
constexpr auto kEmojiCacheIndex = 1; constexpr auto kEmojiCacheIndex = 1;
@ -36,6 +35,7 @@ constexpr auto kButtonExpandDelay = crl::time(25);
constexpr auto kButtonHideDelay = crl::time(300); constexpr auto kButtonHideDelay = crl::time(300);
constexpr auto kButtonExpandedHideDelay = crl::time(0); constexpr auto kButtonExpandedHideDelay = crl::time(0);
constexpr auto kSizeForDownscale = 96; constexpr auto kSizeForDownscale = 96;
constexpr auto kHoverScaleDuration = crl::time(200);
constexpr auto kHoverScale = 1.24; constexpr auto kHoverScale = 1.24;
[[nodiscard]] QPoint LocalPosition(not_null<QWheelEvent*> e) { [[nodiscard]] QPoint LocalPosition(not_null<QWheelEvent*> e) {
@ -184,7 +184,8 @@ void Button::applyParameters(
void Button::updateExpandDirection(const ButtonParameters &parameters) { void Button::updateExpandDirection(const ButtonParameters &parameters) {
const auto maxAddedHeight = (parameters.reactionsCount - 1) const auto maxAddedHeight = (parameters.reactionsCount - 1)
* (st::reactionCornerSize.height() + st::reactionCornerSkip); * (st::reactionCornerSize.height() + st::reactionCornerSkip)
+ (parameters.reactionsCount > 1 ? 2 * st::reactionExpandedSkip : 0);
_expandedInnerHeight = _collapsed.height() + maxAddedHeight; _expandedInnerHeight = _collapsed.height() + maxAddedHeight;
const auto addedHeight = std::min( const auto addedHeight = std::min(
maxAddedHeight, maxAddedHeight,
@ -280,8 +281,8 @@ void Button::applyState(State state, Fn<void(QRect)> update) {
float64 Button::ScaleForState(State state) { float64 Button::ScaleForState(State state) {
switch (state) { switch (state) {
case State::Hidden: return 0.5; case State::Hidden: return 1. / 3;
case State::Shown: return 0.7; case State::Shown: return 2. / 3;
case State::Active: case State::Active:
case State::Inside: return 1.; case State::Inside: return 1.;
} }
@ -728,11 +729,16 @@ void Manager::paintButton(
} }
const auto current = (button == _button.get()); const auto current = (button == _button.get());
const auto expandRatio = expanded
? (float64(expanded) / (button->expandedHeight() - _outer.height()))
: 0.;
const auto expandedSkip = int(base::SafeRound(
expandRatio * st::reactionExpandedSkip));
const auto mainEmojiPosition = !expanded const auto mainEmojiPosition = !expanded
? position ? position
: button->expandUp() : button->expandUp()
? QPoint(0, expanded) ? QPoint(0, expanded - expandedSkip)
: QPoint(); : QPoint(0, expandedSkip);
if (expanded || (current && !onlyMainEmojiVisible())) { if (expanded || (current && !onlyMainEmojiVisible())) {
const auto origin = expanded ? QPoint() : position; const auto origin = expanded ? QPoint() : position;
paintAllEmoji(*q, button, scale, origin, mainEmojiPosition); paintAllEmoji(*q, button, scale, origin, mainEmojiPosition);
@ -748,8 +754,6 @@ void Manager::paintButton(
} }
if (expanded) { if (expanded) {
const auto expandRatio = float64(expanded)
/ (button->expandedHeight() - _outer.height());
overlayExpandedBorder(*q, size, expandRatio, scale, shadow); overlayExpandedBorder(*q, size, expandRatio, scale, shadow);
layeredPainter.reset(); layeredPainter.reset();
p.drawImage( p.drawImage(
@ -770,7 +774,7 @@ void Manager::overlayExpandedBorder(
const QColor &shadow) { const QColor &shadow) {
const auto maxSide = _inner.width(); const auto maxSide = _inner.width();
const auto radius = expandRatio * (maxSide / 2.) const auto radius = expandRatio * (maxSide / 2.)
+ (1. - expandRatio) * st::reactionCornerRadius; + (1. - expandRatio) * (_inner.height() / 2.);
const auto minHeight = int(std::ceil(radius * 2)) + 1; const auto minHeight = int(std::ceil(radius * 2)) + 1;
const auto maskSize = QRect(0, 0, maxSide, minHeight).marginsAdded( const auto maskSize = QRect(0, 0, maxSide, minHeight).marginsAdded(
@ -1035,17 +1039,17 @@ QRect Manager::validateShadow(
_shadowBuffer.fill(Qt::transparent); _shadowBuffer.fill(Qt::transparent);
auto p = QPainter(&_shadowBuffer); auto p = QPainter(&_shadowBuffer);
auto hq = PainterHighQualityEnabler(p); auto hq = PainterHighQualityEnabler(p);
const auto radius = st::reactionCornerRadius;
const auto center = _inner.center(); const auto center = _inner.center();
const auto add = style::ConvertScale(2.5); const auto add = style::ConvertScale(2.5);
const auto shift = style::ConvertScale(0.5); const auto shift = style::ConvertScale(0.5);
const auto extended = QRectF(_inner).marginsAdded({add, add, add, add}); const auto big = QRectF(_inner).marginsAdded({ add, add, add, add });
const auto radius = big.height() / 2.;
p.setPen(Qt::NoPen); p.setPen(Qt::NoPen);
p.setBrush(shadow); p.setBrush(shadow);
p.translate(center); p.translate(center);
p.scale(scale, scale); p.scale(scale, scale);
p.translate(-center); p.translate(-center);
p.drawRoundedRect(extended.translated(0, shift), radius, radius); p.drawRoundedRect(big.translated(0, shift), radius, radius);
p.end(); p.end();
_shadowBuffer = Images::prepareBlur(std::move(_shadowBuffer)); _shadowBuffer = Images::prepareBlur(std::move(_shadowBuffer));
@ -1112,7 +1116,7 @@ QRect Manager::validateFrame(
auto hq = PainterHighQualityEnabler(p); auto hq = PainterHighQualityEnabler(p);
const auto inner = _inner.translated(position); const auto inner = _inner.translated(position);
const auto radius = st::reactionCornerRadius; const auto radius = inner.height() / 2.;
const auto center = inner.center(); const auto center = inner.center();
p.setPen(Qt::NoPen); p.setPen(Qt::NoPen);
p.setBrush(background); p.setBrush(background);

15
Telegram/SourceFiles/ui/chat/chat.style
View file

@ -974,13 +974,16 @@ reactionInfoSkip: 3px;
reactionInfoDigitSkip: 6px; reactionInfoDigitSkip: 6px;
reactionInfoBetween: 3px; reactionInfoBetween: 3px;
reactionCornerSize: size(40px, 32px); reactionCornerSize: size(36px, 32px);
reactionCornerRadius: 14px; reactionCornerCenter: point(7px, -9px);
reactionCornerCenter: point(12px, -12px); reactionCornerImage: 22px;
reactionCornerImage: 24px;
reactionCornerShadow: margins(4px, 8px, 4px, 8px); reactionCornerShadow: margins(4px, 8px, 4px, 8px);
reactionCornerActiveAreaPadding: margins(10px, 10px, 10px, 10px); reactionCornerActiveAreaPadding: margins(10px, 10px, 10px, 10px);
reactionCornerAddedHeightMax: 120px; reactionCornerAddedHeightMax: 100px;
reactionCornerSkip: 2px; reactionCornerSkip: -4px;
reactionExpandedSkip: 2px;
reactionGradientStart: 8px;
reactionGradientSize: 24px;
reactionGradientFadeSize: 24px;
reactionAppearStartSkip: 2px; reactionAppearStartSkip: 2px;