From 5c474aee273b60b3f6238acffe71e88f66dc19f8 Mon Sep 17 00:00:00 2001 From: John Preston Date: Fri, 8 Jul 2016 13:06:41 +0300 Subject: [PATCH] Improved service messages layout. --- Telegram/Resources/basic.style | 2 +- Telegram/SourceFiles/app.cpp | 12 +++--- Telegram/SourceFiles/history.cpp | 6 +-- Telegram/SourceFiles/history/history.style | 4 ++ .../history/history_service_layout.cpp | 38 ++++++++++++++----- .../history/history_service_layout.h | 4 +- Telegram/SourceFiles/historywidget.cpp | 2 +- Telegram/SourceFiles/layout.h | 4 +- 8 files changed, 49 insertions(+), 23 deletions(-) diff --git a/Telegram/Resources/basic.style b/Telegram/Resources/basic.style index 502bed5d8..8516585ce 100644 --- a/Telegram/Resources/basic.style +++ b/Telegram/Resources/basic.style @@ -666,7 +666,7 @@ scrollDef: flatScroll { } msgRadius: 16px; -serviceMsgRadius: 10px; +dateRadius: 10px; buttonRadius: 3px; scrollCountries: flatScroll(scrollDef) { diff --git a/Telegram/SourceFiles/app.cpp b/Telegram/SourceFiles/app.cpp index 707a37b51..342e8cc16 100644 --- a/Telegram/SourceFiles/app.cpp +++ b/Telegram/SourceFiles/app.cpp @@ -2112,12 +2112,12 @@ namespace { ::cornersMaskSmall[i]->setDevicePixelRatio(cRetinaFactor()); } prepareCorners(WhiteCorners, st::buttonRadius, st::white); - prepareCorners(ServiceCorners, st::serviceMsgRadius, st::msgServiceBg); - prepareCorners(ServiceSelectedCorners, st::serviceMsgRadius, st::msgServiceSelectBg); + prepareCorners(StickerCorners, st::dateRadius, st::msgServiceBg); + prepareCorners(StickerSelectedCorners, st::dateRadius, st::msgServiceSelectBg); prepareCorners(SelectedOverlaySmallCorners, st::buttonRadius, st::msgSelectOverlay); prepareCorners(SelectedOverlayLargeCorners, st::msgRadius, st::msgSelectOverlay); - prepareCorners(DateCorners, st::serviceMsgRadius, st::msgDateImgBg); - prepareCorners(DateSelectedCorners, st::serviceMsgRadius, st::msgDateImgBgSelected); + prepareCorners(DateCorners, st::dateRadius, st::msgDateImgBg); + prepareCorners(DateSelectedCorners, st::dateRadius, st::msgDateImgBgSelected); prepareCorners(InShadowCorners, st::msgRadius, st::msgInShadow); prepareCorners(InSelectedShadowCorners, st::msgRadius, st::msgInShadowSelected); prepareCorners(ForwardCorners, st::msgRadius, st::forwardBg); @@ -2768,8 +2768,8 @@ namespace { uchar bsel = snap(qRound(((1. - alphaSel) * b + addSel) / alphaSel), 0, 0xFF); _msgServiceSelectBg = style::color(r, g, b, qRound(alphaSel * 0xFF)); - prepareCorners(ServiceCorners, st::serviceMsgRadius, _msgServiceBg); - prepareCorners(ServiceSelectedCorners, st::serviceMsgRadius, _msgServiceSelectBg); + prepareCorners(StickerCorners, st::dateRadius, _msgServiceBg); + prepareCorners(StickerSelectedCorners, st::dateRadius, _msgServiceSelectBg); uchar rScroll = uchar(componentsScroll[0]), gScroll = uchar(componentsScroll[1]), bScroll = uchar(componentsScroll[2]); _historyScrollBarColor = style::color(rScroll, gScroll, bScroll, qRound(st::historyScroll.barColor->c.alphaF() * 0xFF)); diff --git a/Telegram/SourceFiles/history.cpp b/Telegram/SourceFiles/history.cpp index c9d69b6a9..c021c3a0a 100644 --- a/Telegram/SourceFiles/history.cpp +++ b/Telegram/SourceFiles/history.cpp @@ -5043,7 +5043,7 @@ void HistorySticker::draw(Painter &p, const QRect &r, TextSelection selection, u // Make the bottom of the rect at the same level as the bottom of the info rect. recty -= st::msgDateImgDelta; - App::roundRect(p, rectx, recty, rectw, recth, selected ? App::msgServiceSelectBg() : App::msgServiceBg(), selected ? ServiceSelectedCorners : ServiceCorners); + App::roundRect(p, rectx, recty, rectw, recth, selected ? App::msgServiceSelectBg() : App::msgServiceBg(), selected ? StickerSelectedCorners : StickerCorners); rectx += st::msgReplyPadding.left(); rectw -= st::msgReplyPadding.left() + st::msgReplyPadding.right(); if (via) { @@ -6561,7 +6561,7 @@ void HistoryMessage::KeyboardStyle::repaint(const HistoryItem *item) const { } void HistoryMessage::KeyboardStyle::paintButtonBg(Painter &p, const QRect &rect, bool down, float64 howMuchOver) const { - App::roundRect(p, rect, App::msgServiceBg(), ServiceCorners); + App::roundRect(p, rect, App::msgServiceBg(), StickerCorners); if (down) { howMuchOver = 1.; } @@ -7289,7 +7289,7 @@ void HistoryMessage::drawInfo(Painter &p, int32 right, int32 bottom, int32 width App::roundRect(p, dateX - st::msgDateImgPadding.x(), dateY - st::msgDateImgPadding.y(), dateW, dateH, selected ? st::msgDateImgBgSelected : st::msgDateImgBg, selected ? DateSelectedCorners : DateCorners); } else if (type == InfoDisplayOverBackground) { int32 dateW = infoW + 2 * st::msgDateImgPadding.x(), dateH = st::msgDateFont->height + 2 * st::msgDateImgPadding.y(); - App::roundRect(p, dateX - st::msgDateImgPadding.x(), dateY - st::msgDateImgPadding.y(), dateW, dateH, selected ? App::msgServiceSelectBg() : App::msgServiceBg(), selected ? ServiceSelectedCorners : ServiceCorners); + App::roundRect(p, dateX - st::msgDateImgPadding.x(), dateY - st::msgDateImgPadding.y(), dateW, dateH, selected ? App::msgServiceSelectBg() : App::msgServiceBg(), selected ? StickerSelectedCorners : StickerCorners); } dateX += HistoryMessage::timeLeft(); diff --git a/Telegram/SourceFiles/history/history.style b/Telegram/SourceFiles/history/history.style index fdd6ab9cb..ecf537a67 100644 --- a/Telegram/SourceFiles/history/history.style +++ b/Telegram/SourceFiles/history/history.style @@ -45,3 +45,7 @@ membersInnerDropdown: InnerDropdown(defaultInnerDropdown) { } historyToDownBadgeFont: semiboldFont; historyToDownBadgeSize: 22px; + +historyServiceMsgRadius: 12px; +historyServiceMsgInvertedRadius: 6px; +historyServiceMsgInvertedShrink: 4px; diff --git a/Telegram/SourceFiles/history/history_service_layout.cpp b/Telegram/SourceFiles/history/history_service_layout.cpp index 2bc307901..4771f21ff 100644 --- a/Telegram/SourceFiles/history/history_service_layout.cpp +++ b/Telegram/SourceFiles/history/history_service_layout.cpp @@ -22,6 +22,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org #include "history/history_service_layout.h" #include "data/data_abstract_structure.h" +#include "styles/style_history.h" #include "mainwidget.h" #include "lang.h" @@ -58,14 +59,17 @@ void createCircleMasks() { serviceMessageStyle.createIfNull(); if (!serviceMessageStyle->circle[NormalMask].isNull()) return; - int size = st::serviceMsgRadius * 2; + int size = st::historyServiceMsgRadius * 2; serviceMessageStyle->circle[NormalMask] = style::createCircleMask(size); - serviceMessageStyle->circle[InvertedMask] = style::createInvertedCircleMask(size); + int sizeInverted = st::historyServiceMsgInvertedRadius * 2; + serviceMessageStyle->circle[InvertedMask] = style::createInvertedCircleMask(sizeInverted); } QPixmap circleCorner(int corner) { if (serviceMessageStyle->corners[corner].isNull()) { - int size = st::serviceMsgRadius * cIntRetinaFactor(); + int maskType = corner / MaskMultiplier; + int radius = (maskType == NormalMask ? st::historyServiceMsgRadius : st::historyServiceMsgInvertedRadius); + int size = radius * cIntRetinaFactor(); int xoffset = 0, yoffset = 0; if (corner & CornerRight) { @@ -74,7 +78,6 @@ QPixmap circleCorner(int corner) { if (corner & CornerBottom) { yoffset = size; } - int maskType = corner / MaskMultiplier; auto part = QRect(xoffset, yoffset, size, size); auto result = style::colorizeImage(serviceMessageStyle->circle[maskType], App::msgServiceBg(), part); result.setDevicePixelRatio(cRetinaFactor()); @@ -116,11 +119,22 @@ int paintBubbleSide(Painter &p, int x, int y, int width, SideStyle style, Corner } void paintBubblePart(Painter &p, int x, int y, int width, int height, SideStyle topStyle, SideStyle bottomStyle) { + if (topStyle == SideStyle::Inverted || bottomStyle == SideStyle::Inverted) { + width -= st::historyServiceMsgInvertedShrink * 2; + x += st::historyServiceMsgInvertedShrink; + } + if (int skip = paintBubbleSide(p, x, y, width, topStyle, CornerTop)) { y += skip; height -= skip; } - if (int skip = paintBubbleSide(p, x, y + height - st::serviceMsgRadius, width, bottomStyle, CornerBottom)) { + int bottomSize = 0; + if (bottomStyle == SideStyle::Rounded) { + bottomSize = st::historyServiceMsgRadius; + } else if (bottomStyle == SideStyle::Inverted) { + bottomSize = st::historyServiceMsgInvertedRadius; + } + if (int skip = paintBubbleSide(p, x, y + height - bottomSize, width, bottomStyle, CornerBottom)) { height -= skip; } @@ -137,7 +151,7 @@ void paintPreparedDate(Painter &p, const QString &dateText, int dateTextWidth, i left += (w - dateTextWidth - st::msgServicePadding.left() - st::msgServicePadding.right()) / 2; int height = st::msgServicePadding.top() + st::msgServiceFont->height + st::msgServicePadding.bottom(); - App::roundRect(p, left, y + st::msgServiceMargin.top(), dateTextWidth + st::msgServicePadding.left() + st::msgServicePadding.left(), height, App::msgServiceBg(), ServiceCorners); + ServiceMessagePainter::paintBubble(p, left, y + st::msgServiceMargin.top(), dateTextWidth + st::msgServicePadding.left() + st::msgServicePadding.left(), height); p.setFont(st::msgServiceFont); p.setPen(st::msgServiceColor); @@ -180,7 +194,7 @@ void ServiceMessagePainter::paint(Painter &p, const HistoryService *message, con QRect trect(QRect(left, st::msgServiceMargin.top(), width, height).marginsAdded(-st::msgServicePadding)); - paintBubble(p, left, width, message->_text, trect); + paintComplexBubble(p, left, width, message->_text, trect); if (width > message->maxWidth()) { left += (width - message->maxWidth()) / 2; @@ -205,7 +219,13 @@ void ServiceMessagePainter::paintDate(Painter &p, const QString &dateText, int d paintPreparedDate(p, dateText, dateTextWidth, y, w); } -void ServiceMessagePainter::paintBubble(Painter &p, int left, int width, const Text &text, const QRect &textRect) { +void ServiceMessagePainter::paintBubble(Painter &p, int x, int y, int w, int h) { + createCircleMasks(); + + paintBubblePart(p, x, y, w, h, SideStyle::Rounded, SideStyle::Rounded); +} + +void ServiceMessagePainter::paintComplexBubble(Painter &p, int left, int width, const Text &text, const QRect &textRect) { createCircleMasks(); auto lineWidths = countLineWidths(text, textRect); @@ -258,7 +278,7 @@ QVector ServiceMessagePainter::countLineWidths(const Text &text, const QRec lineWidths.reserve(linesCount); text.countLineWidths(textRect.width(), &lineWidths); - int minDelta = 4 * st::serviceMsgRadius; + int minDelta = 2 * (st::historyServiceMsgRadius + st::historyServiceMsgInvertedRadius - st::historyServiceMsgInvertedShrink); for (int i = 0, count = lineWidths.size(); i < count; ++i) { int width = qMax(lineWidths.at(i), 0); if (i > 0) { diff --git a/Telegram/SourceFiles/history/history_service_layout.h b/Telegram/SourceFiles/history/history_service_layout.h index eaa94567e..4c9beee4d 100644 --- a/Telegram/SourceFiles/history/history_service_layout.h +++ b/Telegram/SourceFiles/history/history_service_layout.h @@ -40,8 +40,10 @@ public: static void paintDate(Painter &p, const QDateTime &date, int y, int w); static void paintDate(Painter &p, const QString &dateText, int dateTextWidth, int y, int w); + static void paintBubble(Painter &p, int x, int y, int w, int h); + private: - static void paintBubble(Painter &p, int left, int width, const Text &text, const QRect &textRect); + static void paintComplexBubble(Painter &p, int left, int width, const Text &text, const QRect &textRect); static QVector countLineWidths(const Text &text, const QRect &textRect); }; diff --git a/Telegram/SourceFiles/historywidget.cpp b/Telegram/SourceFiles/historywidget.cpp index 6ab44da55..77712e9ae 100644 --- a/Telegram/SourceFiles/historywidget.cpp +++ b/Telegram/SourceFiles/historywidget.cpp @@ -8525,7 +8525,7 @@ void HistoryWidget::paintEvent(QPaintEvent *e) { style::font font(st::msgServiceFont); int32 w = font->width(lang(lng_willbe_history)) + st::msgPadding.left() + st::msgPadding.right(), h = font->height + st::msgServicePadding.top() + st::msgServicePadding.bottom() + 2; QRect tr((width() - w) / 2, (height() - _field.height() - 2 * st::sendPadding - h) / 2, w, h); - App::roundRect(p, tr, App::msgServiceBg(), ServiceCorners); + HistoryLayout::ServiceMessagePainter::paintBubble(p, tr.x(), tr.y(), tr.width(), tr.height()); p.setPen(st::msgServiceColor->p); p.setFont(font->f); diff --git a/Telegram/SourceFiles/layout.h b/Telegram/SourceFiles/layout.h index 6aa64f268..c7b1d341f 100644 --- a/Telegram/SourceFiles/layout.h +++ b/Telegram/SourceFiles/layout.h @@ -33,8 +33,8 @@ enum RoundCorners { LargeMaskCorners, WhiteCorners, - ServiceCorners, - ServiceSelectedCorners, + StickerCorners, + StickerSelectedCorners, SelectedOverlaySmallCorners, SelectedOverlayLargeCorners, DateCorners,