diff --git a/Telegram/Resources/iv_html/page.css b/Telegram/Resources/iv_html/page.css
index e6bd5af80..bdc44f184 100644
--- a/Telegram/Resources/iv_html/page.css
+++ b/Telegram/Resources/iv_html/page.css
@@ -82,43 +82,24 @@ html.custom_scroll ::-webkit-scrollbar-thumb:hover {
opacity: 1;
}
}
-#top_menu circle {
- fill: var(--td-history-to-down-fg);
+#top_shadow {
+ z-index: 999;
+ position: fixed;
+ top: 0;
+ height: 1px;
+ width: 100%;
+ left: 0;
+ background-color: var(--td-shadow-fg)
}
-#top_menu:hover circle {
- fill: var(--td-history-to-down-fg-over);
-}
-#top_menu {
- top: 10px;
- right: 10px;
-}
-#top_back path,
-#top_back line,
#bottom_up path {
stroke: var(--td-history-to-down-fg);
}
-#top_back path,
-#top_back line {
- stroke-width: 1.5;
- stroke-linecap: round;
- stroke-linejoin: round;
-}
#bottom_up path {
stroke-width: 1.4;
}
-#top_back:hover path,
-#top_back:hover line,
#bottom_up:hover path {
stroke: var(--td-history-to-down-fg-over);
}
-#top_back {
- top: 10px;
- left: 10px;
- transition: left 200ms linear;
-}
-#top_back.hidden {
- left: -36px;
-}
#bottom_up {
bottom: 10px;
right: 10px;
@@ -210,6 +191,14 @@ article a[href] {
color: var(--td-window-active-text-fg);
text-decoration: none;
}
+article a.internal-iv-link {
+ border-radius: 3px;
+ margin: 0px -3px;
+ padding: 0px 3px;
+ position: relative;
+ background: var(--td-light-button-bg-over);
+ color: var(--td-light-button-fg);
+}
article span.reference {
border: dotted var(--td-window-sub-text-fg);
border-width: 1px 1px 1px 2px;
diff --git a/Telegram/Resources/iv_html/page.js b/Telegram/Resources/iv_html/page.js
index c44463551..ae6e50519 100644
--- a/Telegram/Resources/iv_html/page.js
+++ b/Telegram/Resources/iv_html/page.js
@@ -206,9 +206,6 @@ var IV = {
},
stopRipples: function (button) {
const id = button.id ? button.id : button;
- if (IV.frozenRipple === id) {
- return;
- }
button = document.getElementById(id);
const ripples = button.getElementsByClassName('ripple');
for (var i = 0; i < ripples.length; ++i) {
@@ -218,15 +215,6 @@ var IV = {
}
}
},
- clearFrozenRipple: function () {
- if (IV.frozenRipple) {
- const button = document.getElementById(IV.frozenRipple);
- IV.frozenRipple = null;
- if (button) {
- IV.stopRipples(button);
- }
- }
- },
init: function () {
IV.platform = window.navigator.platform.toLowerCase();
IV.mac = IV.platform.startsWith('mac');
@@ -310,12 +298,6 @@ var IV = {
behavior: instant ? 'instant' : 'smooth'
});
},
- menu: function (button) {
- IV.frozenRipple = button.id;
- const state = this.computeCurrentState();
- IV.notify({ event: 'menu', index: state.index, hash: state.hash });
- },
-
computeCurrentState: function () {
var now = IV.findPageScroll();
return {
@@ -490,13 +472,13 @@ var IV = {
was.classList.add(back ? 'hidden-right' : 'hidden-left');
now.classList.remove(back ? 'hidden-left' : 'hidden-right');
- var topBack = document.getElementById('top_back');
- if (!IV.position) {
- topBack.classList.add('hidden');
- } else {
- topBack.classList.remove('hidden');
- }
IV.index = index;
+ IV.notify({
+ event: 'location_change',
+ index: IV.index,
+ position: IV.position,
+ hash: IV.computeCurrentState().hash,
+ });
if (IV.cache[index].contentUpdated) {
IV.cache[index].contentUpdated = false;
IV.applyUpdatedContent(index);
diff --git a/Telegram/SourceFiles/data/data_web_page.cpp b/Telegram/SourceFiles/data/data_web_page.cpp
index bac9f6386..9f17fdfdc 100644
--- a/Telegram/SourceFiles/data/data_web_page.cpp
+++ b/Telegram/SourceFiles/data/data_web_page.cpp
@@ -21,25 +21,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
namespace {
-QString SiteNameFromUrl(const QString &url) {
- const auto u = QUrl(url);
- QString pretty = u.isValid() ? u.toDisplayString() : url;
- const auto m = QRegularExpression(u"^[a-zA-Z0-9]+://"_q).match(pretty);
- if (m.hasMatch()) pretty = pretty.mid(m.capturedLength());
- int32 slash = pretty.indexOf('/');
- if (slash > 0) pretty = pretty.mid(0, slash);
- QStringList components = pretty.split('.', Qt::SkipEmptyParts);
- if (components.size() >= 2) {
- components = components.mid(components.size() - 2);
- return components.at(0).at(0).toUpper()
- + components.at(0).mid(1)
- + '.'
- + components.at(1);
- }
- return QString();
-}
-
-WebPageCollage ExtractCollage(
+[[nodiscard]] WebPageCollage ExtractCollage(
not_null owner,
const QVector &items,
const QVector &photos,
@@ -256,7 +238,7 @@ bool WebPageData::applyChanges(
} else if (!newDescription.text.isEmpty()
&& viewTitleText.isEmpty()
&& !resultUrl.isEmpty()) {
- return SiteNameFromUrl(resultUrl);
+ return Iv::SiteNameFromUrl(resultUrl);
}
return QString();
}();
diff --git a/Telegram/SourceFiles/iv/iv.style b/Telegram/SourceFiles/iv/iv.style
index efd083f44..c8c9c6b69 100644
--- a/Telegram/SourceFiles/iv/iv.style
+++ b/Telegram/SourceFiles/iv/iv.style
@@ -8,94 +8,35 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
using "ui/basic.style";
using "ui/widgets/widgets.style";
-ivTitleHeight: 24px;
-ivTitleIconShift: point(0px, 0px);
-ivTitleButton: IconButton(windowTitleButton) {
- height: ivTitleHeight;
- iconPosition: ivTitleIconShift;
-}
-ivTitleButtonClose: IconButton(windowTitleButtonClose) {
- height: ivTitleHeight;
- iconPosition: ivTitleIconShift;
-}
+ivMenuToggle: IconButton(defaultIconButton) {
+ width: 48px;
+ height: 48px;
-ivTitleButtonSize: size(windowTitleButtonWidth, ivTitleHeight);
-ivTitle: WindowTitle(defaultWindowTitle) {
- height: ivTitleHeight;
- style: TextStyle(defaultTextStyle) {
- font: font(semibold 12px);
+ icon: icon {{ "title_menu_dots", menuIconColor }};
+ iconOver: icon {{ "title_menu_dots", menuIconColor }};
+
+ rippleAreaPosition: point(6px, 6px);
+ rippleAreaSize: 36px;
+ ripple: RippleAnimation(defaultRippleAnimation) {
+ color: windowBgOver;
}
- shadow: false;
- minimize: IconButton(ivTitleButton) {
- icon: icon {
- { ivTitleButtonSize, titleButtonBg },
- { "title_button_minimize", titleButtonFg, ivTitleIconShift },
- };
- iconOver: icon {
- { ivTitleButtonSize, titleButtonBgOver },
- { "title_button_minimize", titleButtonFgOver, ivTitleIconShift },
- };
- }
- minimizeIconActive: icon {
- { ivTitleButtonSize, titleButtonBgActive },
- { "title_button_minimize", titleButtonFgActive, ivTitleIconShift },
- };
- minimizeIconActiveOver: icon {
- { ivTitleButtonSize, titleButtonBgActiveOver },
- { "title_button_minimize", titleButtonFgActiveOver, ivTitleIconShift },
- };
- maximize: IconButton(windowTitleButton) {
- icon: icon {
- { ivTitleButtonSize, titleButtonBg },
- { "title_button_maximize", titleButtonFg, ivTitleIconShift },
- };
- iconOver: icon {
- { ivTitleButtonSize, titleButtonBgOver },
- { "title_button_maximize", titleButtonFgOver, ivTitleIconShift },
- };
- }
- maximizeIconActive: icon {
- { ivTitleButtonSize, titleButtonBgActive },
- { "title_button_maximize", titleButtonFgActive, ivTitleIconShift },
- };
- maximizeIconActiveOver: icon {
- { ivTitleButtonSize, titleButtonBgActiveOver },
- { "title_button_maximize", titleButtonFgActiveOver, ivTitleIconShift },
- };
- restoreIcon: icon {
- { ivTitleButtonSize, titleButtonBg },
- { "title_button_restore", titleButtonFg, ivTitleIconShift },
- };
- restoreIconOver: icon {
- { ivTitleButtonSize, titleButtonBgOver },
- { "title_button_restore", titleButtonFgOver, ivTitleIconShift },
- };
- restoreIconActive: icon {
- { ivTitleButtonSize, titleButtonBgActive },
- { "title_button_restore", titleButtonFgActive, ivTitleIconShift },
- };
- restoreIconActiveOver: icon {
- { ivTitleButtonSize, titleButtonBgActiveOver },
- { "title_button_restore", titleButtonFgActiveOver, ivTitleIconShift },
- };
- close: IconButton(windowTitleButtonClose) {
- icon: icon {
- { ivTitleButtonSize, titleButtonCloseBg },
- { "title_button_close", titleButtonCloseFg, ivTitleIconShift },
- };
- iconOver: icon {
- { ivTitleButtonSize, titleButtonCloseBgOver },
- { "title_button_close", titleButtonCloseFgOver, ivTitleIconShift },
- };
- }
- closeIconActive: icon {
- { ivTitleButtonSize, titleButtonCloseBgActive },
- { "title_button_close", titleButtonCloseFgActive, ivTitleIconShift },
- };
- closeIconActiveOver: icon {
- { ivTitleButtonSize, titleButtonCloseBgActiveOver },
- { "title_button_close", titleButtonCloseFgActiveOver, ivTitleIconShift },
- };
}
-ivTitleExpandedHeight: 76px;
-ivMenuPosition: point(-8px, 36px);
+ivMenuPosition: point(-2px, 40px);
+ivBack: IconButton(ivMenuToggle) {
+ width: 60px;
+ icon: icon {{ "box_button_back", menuIconColor }};
+ iconOver: icon {{ "box_button_back", menuIconColor }};
+ rippleAreaPosition: point(12px, 6px);
+}
+ivSubtitleFont: font(16px semibold);
+ivSubtitle: FlatLabel(defaultFlatLabel) {
+ textFg: boxTitleFg;
+ maxHeight: 26px;
+ style: TextStyle(defaultTextStyle) {
+ font: ivSubtitleFont;
+ }
+}
+ivSubtitleHeight: 48px;
+ivSubtitleTop: 12px;
+ivSubtitleLeft: 22px;
+ivSubtitleSkip: 0px;
diff --git a/Telegram/SourceFiles/iv/iv_controller.cpp b/Telegram/SourceFiles/iv/iv_controller.cpp
index c4e391254..20dc2b104 100644
--- a/Telegram/SourceFiles/iv/iv_controller.cpp
+++ b/Telegram/SourceFiles/iv/iv_controller.cpp
@@ -13,8 +13,11 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
#include "iv/iv_data.h"
#include "lang/lang_keys.h"
#include "ui/platform/ui_platform_window_title.h"
+#include "ui/widgets/buttons.h"
+#include "ui/widgets/labels.h"
#include "ui/widgets/rp_window.h"
#include "ui/widgets/popup_menu.h"
+#include "ui/wrap/fade_wrap.h"
#include "ui/basic_click_handlers.h"
#include "ui/painter.h"
#include "webview/webview_data_stream_memory.h"
@@ -35,11 +38,14 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
#include
#include
+#include "base/call_delayed.h"
+
namespace Iv {
namespace {
[[nodiscard]] QByteArray ComputeStyles() {
static const auto map = base::flat_map{
+ { "shadow-fg", &st::shadowFg },
{ "scroll-bg", &st::scrollBg },
{ "scroll-bg-over", &st::scrollBgOver },
{ "scroll-bar-bg", &st::scrollBarBg },
@@ -54,6 +60,8 @@ namespace {
{ "window-shadow-fg", &st::windowShadowFg },
{ "box-divider-bg", &st::boxDividerBg },
{ "box-divider-fg", &st::boxDividerFg },
+ { "light-button-fg", &st::lightButtonFg },
+ { "light-button-bg-over", &st::lightButtonBgOver },
{ "menu-icon-fg", &st::menuIconFg },
{ "menu-icon-fg-over", &st::menuIconFgOver },
{ "menu-bg", &st::menuBg },
@@ -164,19 +172,7 @@ namespace {
-
-
+