Improved header style for charts.

Telegram/SourceFiles/info/statistics/info_statistics_widget.cpp

@@ -266,7 +266,7 @@ void FillOverview(
 		const auto header = content->add(
 			object_ptr<Statistic::Header>(content),
 			st::statisticsLayerMargins);
-		header->resize(header->width(), st::statisticsChartHeaderHeight);
+		header->resizeToWidth(header->width());
 		header->setTitle(tr::lng_stats_overview_title(tr::now));
 		const auto formatter = u"MMM d"_q;
 		const auto from = QDateTime::fromSecsSinceEpoch(startDate);

Telegram/SourceFiles/statistics/chart_header_widget.cpp

@@ -13,10 +13,13 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 namespace Statistic {
 
 void Header::setTitle(QString title) {
-	_titleWidth = st::statisticsHeaderTitleTextStyle.font->width(title);
 	_title.setText(st::statisticsHeaderTitleTextStyle, std::move(title));
 }
 
+int Header::resizeGetHeight(int newWidth) {
+	return st::statisticsChartHeaderHeight;
+}
+
 void Header::setRightInfo(QString rightInfo) {
 	_rightInfo.setText(
 		st::statisticsHeaderDatesTextStyle,
@@ -29,17 +32,15 @@ void Header::paintEvent(QPaintEvent *e) {
 	p.fillRect(rect(), st::boxBg);
 
 	p.setPen(st::boxTextFg);
-	const auto top = (height()
-		- st::statisticsHeaderTitleTextStyle.font->height) / 2;
-	_title.drawLeftElided(p, 0, top, width(), width());
-	_rightInfo.drawRightElided(
-		p,
-		0,
-		top,
-		width() - _titleWidth,
-		width(),
-		1,
-		style::al_right);
+	_title.drawLeftElided(p, 0, 0, width(), width());
+
+	p.setPen(st::windowSubTextFg);
+	_rightInfo.drawLeftElided(p, 0, _infoTop, width(), width());
+}
+
+void Header::resizeEvent(QResizeEvent *e) {
+	_infoTop = e->size().height()
+		- st::statisticsHeaderDatesTextStyle.font->height;
 }
 
 } // namespace Statistic

Telegram/SourceFiles/statistics/chart_header_widget.h

@@ -20,11 +20,14 @@ public:
 
 protected:
 	void paintEvent(QPaintEvent *e) override;
+	void resizeEvent(QResizeEvent *e) override;
+
+	int resizeGetHeight(int newWidth) override;
 
 private:
 	Ui::Text::String _title;
 	Ui::Text::String _rightInfo;
-	int _titleWidth = 0;
+	int _infoTop = 0;
 
 };
 

Telegram/SourceFiles/statistics/chart_widget.cpp

@@ -861,18 +861,20 @@ int ChartWidget::resizeGetHeight(int newWidth) {
 		? (_filterButtons->height()
 			+ st::statisticsFilterButtonsPadding.bottom())
 		: 0;
-	const auto resultHeight = st::statisticsChartHeaderHeight
+	const auto &headerPadding = st::statisticsChartHeaderPadding;
+	{
+		_header->moveToLeft(headerPadding.left(), headerPadding.top());
+		_header->resizeToWidth(newWidth - rect::m::sum::h(headerPadding));
+	}
+	const auto headerHeight = rect::m::sum::v(headerPadding)
+		+ _header->height();
+	const auto resultHeight = headerHeight
 		+ st::statisticsChartHeight
 		+ st::statisticsChartFooterHeight
 		+ st::statisticsChartFooterSkip
 		+ filtersTopSkip
 		+ filtersHeight;
 	{
-		_header->setGeometry(
-			0,
-			0,
-			newWidth,
-			st::statisticsChartHeaderHeight);
 		_footer->setGeometry(
 			0,
 			resultHeight
@@ -886,9 +888,10 @@ int ChartWidget::resizeGetHeight(int newWidth) {
 		}
 		_chartArea->setGeometry(
 			0,
-			st::statisticsChartHeaderHeight,
+			headerHeight,
 			newWidth,
 			resultHeight
+				- headerHeight
 				- st::statisticsChartFooterHeight
 				- filtersTopSkip
 				- filtersHeight
@@ -1490,7 +1493,8 @@ void ChartWidget::setZoomedChartData(
 	Ui::Animations::ShowWidgets({ _zoomedChartWidget.get(), customHeader });
 	Ui::Animations::HideWidgets({ this });
 
-	customHeader->setGeometry(0, 0, width(), st::statisticsChartHeaderHeight);
+	customHeader->moveToLeft(0, 0);
+	customHeader->resizeToWidth(width());
 	zoomOutButton->moveToLeft(0, 0);
 }
 

Telegram/SourceFiles/statistics/statistics.style

@@ -14,7 +14,7 @@ statisticsLayerMargins: margins(20px, 0px, 20px, 0px);
 
 statisticsChartHeight: 150px;
 
-statisticsChartEntryPadding: margins(0px, 8px, 0px, 8px);
+statisticsChartEntryPadding: margins(0px, 13px, 0px, 8px);
 
 statisticsDetailsArrowShift: 2px;
 statisticsDetailsArrowStroke: 1.5;
@@ -30,7 +30,7 @@ statisticsChartFooterArrowSize: size(10px, 30px);
 
 statisticsChartHorizontalLineCaptionSkip: 4px;
 
-statisticsChartBottomCaptionHeight: 30px;
+statisticsChartBottomCaptionHeight: 14px;
 statisticsChartBottomCaptionSkip: 15px;
 
 statisticsChartBottomCaptionMaxWidth: 44px;
@@ -56,12 +56,13 @@ statisticsDetailsBottomCaptionStyle: TextStyle(defaultTextStyle) {
 statisticsPieChartFont: font(20px);
 statisticsPieChartPartOffset: 8px;
 
-statisticsChartHeaderHeight: 20px;
+statisticsChartHeaderHeight: 36px;
+statisticsChartHeaderPadding: margins(2px, 0px, 0px, 10px);
 statisticsHeaderTitleTextStyle: TextStyle(defaultTextStyle) {
-	font: font(12px semibold);
+	font: font(13px);
 }
 statisticsHeaderDatesTextStyle: TextStyle(defaultTextStyle) {
-	font: font(11px semibold);
+	font: font(11px);
 }
 statisticsHeaderButton: RoundButton(defaultLightButton) {
 	width: -14px;