Add top dropdown menu.

Telegram/Resources/iv_html/page.js

@@ -185,6 +185,11 @@ var IV = {
 		button.appendChild(ripple);
 	},
 	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) {
 			const ripple = ripples[i];
@@ -193,6 +198,15 @@ var IV = {
 			}
 		}
 	},
+	clearFrozenRipple: function () {
+		if (IV.frozenRipple) {
+			const button = document.getElementById(IV.frozenRipple);
+			IV.frozenRipple = null;
+			if (button) {
+				IV.stopRipples(button);
+			}
+		}
+	},
 	init: function () {
 		IV.hash = window.location.hash.substr(1);
 
@@ -203,7 +217,10 @@ var IV = {
 				IV.addRipple(e.currentTarget, e.clientX, e.clientY);
 			});
 			button.addEventListener('mouseup', function (e) {
-				IV.stopRipples(e.currentTarget);
+				const id = e.currentTarget.id;
+				setTimeout(function () {
+					IV.stopRipples(id);
+				}, 0);
 			});
 			button.addEventListener('mouseleave', function (e) {
 				IV.stopRipples(e.currentTarget);
@@ -226,6 +243,10 @@ var IV = {
 	scrollTo: function (y) {
 		document.getElementById('bottom_up').classList.add('hidden');
 		window.scrollTo({ top: y || 0, behavior: 'smooth' });
+	},
+	menu: function (button) {
+		IV.frozenRipple = button.id;
+		IV.notify({ event: 'menu', hash: IV.hash });
 	}
 };
 

Telegram/Resources/langs/lang.strings

@@ -4866,6 +4866,9 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_contact_add" = "Add";
 "lng_contact_send_message" = "message";
 
+"lng_iv_open_in_browser" = "Open in Browser";
+"lng_iv_share" = "Share";
+
 // Wnd specific
 
 "lng_wnd_choose_program_menu" = "Choose Default Program...";

Telegram/SourceFiles/iv/iv.style

@@ -98,3 +98,4 @@ ivTitle: WindowTitle(defaultWindowTitle) {
 	};
 }
 ivTitleExpandedHeight: 76px;
+ivMenuPosition: point(-8px, 36px);

Telegram/SourceFiles/iv/iv_controller.cpp

@@ -13,12 +13,15 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "lang/lang_keys.h"
 #include "ui/platform/ui_platform_window_title.h"
 #include "ui/widgets/rp_window.h"
+#include "ui/widgets/popup_menu.h"
+#include "ui/basic_click_handlers.h"
 #include "ui/painter.h"
 #include "webview/webview_data_stream_memory.h"
 #include "webview/webview_embed.h"
 #include "webview/webview_interface.h"
 #include "styles/palette.h"
 #include "styles/style_iv.h"
+#include "styles/style_menu_icons.h"
 #include "styles/style_widgets.h"
 #include "styles/style_window.h"
 
@@ -168,7 +171,7 @@ namespace {
 				<path d="M11.5,18.3 L5.27277119,12.0707223 C5.23375754,12.0316493 5.23375754,11.9683507 5.27277119,11.9292777 L11.5,5.7 L11.5,5.7"></path>
 			</svg>
 		</button>
-		<button class="fixed_button" id="top_menu" onclick="IV.menu();">
+		<button class="fixed_button" id="top_menu" onclick="IV.menu(this);">
 			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 				<circle cx="12" cy="17.4" r="1.7"></circle>
 				<circle cx="12" cy="12" r="1.7"></circle>
@@ -346,6 +349,7 @@ void Controller::showInWindow(
 	Expects(_container != nullptr);
 
 	const auto window = _window.get();
+	_url = page.url;
 	_webview = std::make_unique<Webview::Window>(
 		_container,
 		Webview::WindowConfig{
@@ -410,6 +414,8 @@ void Controller::showInWindow(
 				if (!script.isEmpty()) {
 					_webview->eval(script);
 				}
+			} else if (event == u"menu"_q) {
+				menu(object.value("hash").toString());
 			}
 		});
 	});
@@ -524,6 +530,38 @@ void Controller::minimize() {
 	}
 }
 
+void Controller::menu(const QString &hash) {
+	if (!_webview || _menu) {
+		return;
+	}
+	_menu = base::make_unique_q<Ui::PopupMenu>(
+		_window.get(),
+		st::popupMenuWithIcons);
+	_menu->setDestroyedCallback(crl::guard(_window.get(), [
+			this,
+			menu = _menu.get()] {
+		if (_webview) {
+			_webview->eval("IV.clearFrozenRipple();");
+		}
+	}));
+
+	const auto url = _url + (hash.isEmpty() ? u""_q : ('#' + hash));
+	const auto openInBrowser = crl::guard(_window.get(), [=] {
+		_events.fire({ .type = Event::Type::OpenLinkExternal, .url = url });
+	});
+	_menu->addAction(
+		tr::lng_iv_open_in_browser(tr::now),
+		openInBrowser,
+		&st::menuIconIpAddress);
+
+	_menu->addAction(tr::lng_iv_share(tr::now), [=] {
+	}, &st::menuIconShare);
+
+	_menu->setForcedOrigin(Ui::PanelAnimation::Origin::TopRight);
+	_menu->popup(_window->body()->mapToGlobal(
+		QPoint(_window->body()->width(), 0) + st::ivMenuPosition));
+}
+
 void Controller::escape() {
 	close();
 }

Telegram/SourceFiles/iv/iv_controller.h

@@ -8,6 +8,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #pragma once
 
 #include "base/invoke_queued.h"
+#include "base/unique_qptr.h"
 #include "ui/effects/animations.h"
 #include "ui/text/text.h"
 
@@ -21,6 +22,7 @@ class Window;
 namespace Ui {
 class RpWidget;
 class RpWindow;
+class PopupMenu;
 } // namespace Ui
 
 namespace Iv {
@@ -40,6 +42,7 @@ public:
 			JoinChannel,
 			OpenPage,
 			OpenLink,
+			OpenLinkExternal,
 		};
 		Type type = Type::Close;
 		QString url;
@@ -81,12 +84,14 @@ private:
 	void processKey(const QString &key, const QString &modifier);
 	void processLink(const QString &url, const QString &context);
 
+	void menu(const QString &hash);
 	void escape();
 	void close();
 	void quit();
 
 	std::unique_ptr<Ui::RpWindow> _window;
 	std::unique_ptr<Ui::RpWidget> _title;
+	base::unique_qptr<Ui::PopupMenu> _menu;
 	Ui::Text::String _titleText;
 	int _titleLeftSkip = 0;
 	int _titleRightSkip = 0;
@@ -96,6 +101,7 @@ private:
 	rpl::event_stream<Event> _events;
 	base::flat_map<QByteArray, bool> _inChannelChanged;
 	SingleQueuedInvokation _updateStyles;
+	QString _url;
 	bool _subscribedToColors = false;
 	bool _ready = false;
 

Telegram/SourceFiles/iv/iv_data.h

@@ -18,6 +18,7 @@ struct Options {
 struct Prepared {
 	QString title;
 	QByteArray content;
+	QString url;
 	QString hash;
 	std::vector<QByteArray> resources;
 	base::flat_map<QByteArray, QByteArray> embeds;

Telegram/SourceFiles/iv/iv_instance.cpp

@@ -39,6 +39,8 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "window/window_session_controller.h"
 #include "window/window_session_controller_link_info.h"
 
+#include <QtGui/QDesktopServices>
+
 namespace Iv {
 namespace {
 
@@ -186,6 +188,7 @@ Shown::Shown(
 	data->prepare({ .saveToFolder = base }, [=](Prepared result) {
 		result.hash = hash;
 		crl::on_main(weak, [=, result = std::move(result)]() mutable {
+			result.url = _id;
 			_embeds = std::move(result.embeds);
 			fillChannelJoinedValues(result);
 			if (!base.isEmpty()) {
@@ -790,6 +793,9 @@ void Instance::show(
 		case Type::JoinChannel:
 			processJoinChannel(event.context);
 			break;
+		case Type::OpenLinkExternal:
+			QDesktopServices::openUrl(event.url);
+			break;
 		case Type::OpenPage:
 		case Type::OpenLink:
 			_shownSession->api().request(MTPmessages_GetWebPage(