Try desktop suggestion (#2050)

* truncating filename without extension * try desktop suggestion
zhukov · Jan 17, 2021 · b6f8668 · b6f8668
1 parent aae0c67
commit b6f8668
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 0 deletions.
diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -161,6 +161,18 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     var nextTimeout
     var updatePasswordTimeout = false
 
+    $scope.try_desktop = {
+      shown: false,
+      domain: Config.Navigator.osX ? 'macos.telegram.org' : 'desktop.telegram.org'
+    }
+    $scope.closeTryDesktop = function() {
+      $scope.try_desktop.shown = false;
+      ConfigStorage.set({try_desktop_hidden: 1})
+    };
+    ConfigStorage.get('try_desktop_hidden', function (td_hidden) {
+      $scope.try_desktop.shown = !Config.Navigator.mobile && !td_hidden;
+    })
+
     function saveAuth (result) {
       MtpApiManager.setUserAuth(options.dcID, {
         id: result.user.id
@@ -520,6 +532,22 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       skipped: false
     }
 
+    $scope.try_desktop = {
+      shown: false,
+      domain: Config.Navigator.osX ? 'macos.telegram.org' : 'desktop.telegram.org'
+    }
+    $scope.closeTryDesktop = function() {
+      $scope.try_desktop.shown = false;
+      onContentLoaded(function () {
+        $scope.$broadcast('ui_dialogs_update');
+        $scope.$broadcast('ui_panel_update');
+      })
+      ConfigStorage.set({try_desktop_hidden: 1})
+    };
+    ConfigStorage.get('try_desktop_hidden', function (td_hidden) {
+      $scope.try_desktop.shown = !Config.Navigator.mobile && !td_hidden;
+    })
+
     $scope.openSettings = function () {
       $modal.open({
         templateUrl: templateUrl('settings_modal'),

diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json
@@ -592,6 +592,9 @@
 	"login_sign_up": "Sign up",
 	"login_about_title": "About",
 	"login_about_hide": "hide",
+	"login_try_desktop": "For best experience on your computer, try {telegram-link}",
+	"login_try_desktop_btn": "Download Telegram",
+	"login_try_desktop_short_btn": "Download",
 	"login_about_desc1_md": "The Telegram web-client is a free, fast and secure way to enjoy most of **Telegram**'s features right in your **web-browser**.",
 	"login_about_desc2_md": "It is always synced with the **Telegram app** on your mobile device, which makes it a perfect tool for messaging and file sharing.",
 	"login_about_desc3_md": "Our {source-link: source code} is open, so everyone can make a contribution.",

diff --git a/app/less/desktop.less b/app/less/desktop.less
@@ -65,6 +65,105 @@
   }
 }
 
+.login_try_desktop,
+.tg_try_desktop {
+  background: #24a3f8;
+  background: linear-gradient(90deg, #2496ff 0%, #24b0f1 100%);
+  -webkit-font-smoothing: antialiased;
+  text-align: center;
+  position: relative;
+  z-index: 100;
+
+  .try_desktop_text {
+    font-size: 14px;
+    font-weight: bold;
+    padding: 22px 15px;
+    margin-bottom: 0;
+    color: #fff;
+
+    & a {
+      color: #fff;
+    }
+  }
+
+  a.try_desktop_btn {
+    display: inline-block;
+    font-size: 13px;
+    line-height: 22px;
+    padding: 8px 20px;
+    border-radius: 19px;
+    font-weight: bold;
+    background: #fff;
+    color: #539def;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+      color: #539def;
+    }
+  }
+
+  .try_desktop_close {
+    position: absolute;
+    display: inline-block;
+    width: 21px;
+    height: 21px;
+    margin: 10px 12px;
+    background: url('data:image/svg+xml,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5.3%205.3c.4-.4%201-.4%201.4%200l3.5%203.5%203.6-3.5c.4-.4%201-.4%201.4%200s.4%201%200%201.4l-3.5%203.5%203.5%203.6c.4.3.4.9.1%201.3l-.1.1c-.4.4-1%20.4-1.4%200l-3.6-3.5-3.5%203.5c-.4.4-1%20.4-1.4%200s-.4-1%200-1.4l3.5-3.6-3.5-3.5c-.4-.4-.4-.9-.1-1.3z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
+    cursor: pointer;
+    right: 0;
+    top: 0;
+  }
+}
+
+.login_try_desktop {
+  margin-bottom: -64px;
+  height: 120px;
+
+  &:before,
+  &:after {
+    position: absolute;
+    display: inline-block;
+    pointer-events: none;
+    content: '';
+    width: 314px;
+    height: 120px;
+    opacity: .25;
+    top: 0;
+  }
+
+  &:before {
+    background: url('data:image/svg+xml,%3Csvg%20height%3D%22120%22%20viewBox%3D%220%200%20314%20120%22%20width%3D%22314%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m-65.3-70c54.8%200%20102%2034.5%20122.6%2083.8%203.6-.5%207.3-.8%2011.1-.8%2022.3%200%2042.6%209.1%2057.5%2024h2.4c24.1%200%2044.9%2014.9%2054.4%2036.3.2.1.3.1.5.2.5.1%201.1.1%201.8%200%206.2-2.6%2012.9-4%2019.9-4%2021.8%200%2040.5%2013.5%2048.9%2033%20.3.2.6.4.9.5.4.1.9.2%201.4.2%205.6-4.4%2012.6-6.9%2020.1-6.9%2018.1%200%2032.8%2014.7%2032.8%2032.8%200%2018.2-14.7%2032.9-32.8%2032.9-9.4%200-18-4-23.9-10.5-9%2017.7-26.8%2029.8-47.4%2029.8-19.6%200-36.7-11.1-46-27.5-9%205.7-19.4%209-30.6%209-.8%200-1.6-.1-2.4-.1-14.9%2014.9-35.2%2024.1-57.5%2024.1-16.4%200-31.6-5-44.5-13.4-23.6%2022.1-54.9%2035.6-89.2%2035.6-73.8%200-133.7-62.5-133.7-139.5s59.9-139.5%20133.7-139.5z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
+    left: 0;
+  }
+
+  &:after {
+    background: url('data:image/svg+xml,%3Csvg%20height%3D%22120%22%20viewBox%3D%220%200%20314%20120%22%20width%3D%22314%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m333.8-24c64.2%200%20116.2%2049.2%20116.2%20109.9%200%2060.8-52%20110-116.2%20110-18%200-35-3.9-50.2-10.8-15.8%2013-36.5%2020.9-59.1%2020.9-31.1%200-58.6-14.9-74.9-37.7-7.7%203.9-16.5%206.1-25.9%206.1-12%200-23.2-3.6-32.3-9.7-8.6%208.5-20.8%2013.8-34.3%2013.8-15.8%200-29.9-7.3-38.5-18.7-4.1%2012.6-16.5%2021.8-31.1%2021.8-18%200-32.5-13.7-32.5-30.6%200-17%2014.5-30.7%2032.5-30.7%207.5%200%2014.5%202.5%2020%206.6.6.4%201.2.9%201.8%201.4.1%200%20.2-.1.4-.1.1-.1.1-.1.2-.1.1-.9.3-1.9.4-2.8%204-21.1%2023.5-37%2046.8-37%206.5%200%2012.6%201.2%2018.2%203.4.6%200%201.1.1%201.4%200%20.3-.2.6-.3.9-.5%2010.1-13.8%2027-22.9%2046.1-22.9%209%200%2017.5%202%2025%205.5%2016.1-23.4%2044.1-38.9%2075.8-38.9%202.1%200%204.2%200%206.2.2%2019.4-35.1%2058.3-59.1%20103.1-59.1z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
+    right: 0;
+  }
+
+  a.try_desktop_btn {
+    margin-top: -2px;
+  }
+}
+.tg_try_desktop {
+  max-width: 1010px;
+  margin: 0 auto;
+  height: 66px;
+
+  .try_desktop_close {
+    margin: 22px 19px 0 0;
+  }
+
+  a.try_desktop_btn {
+    display: inline;
+    padding: 7px 15px;
+    border-radius: 15px;
+    margin-left: 15px;
+  }
+}
+
 .icon-hamburger-wrap {
   display: inline-block;
   width: 18px;

diff --git a/app/partials/desktop/head.html b/app/partials/desktop/head.html
@@ -1,4 +1,8 @@
 <div class="tg_page_head tg_head_wrap noselect clearfix">
+  <div class="tg_try_desktop" ng-if="try_desktop.shown">
+    <span class="try_desktop_close" ng-click="closeTryDesktop()"></span>
+    <p class="try_desktop_text"><my-i18n msgid="login_try_desktop"><my-i18n-param name="telegram-link"><a href="https://{{try_desktop.domain}}/" target="_blank">{{try_desktop.domain}}</a></my-i18n-param></my-i18n><a class="try_desktop_btn" href="https://{{try_desktop.domain}}/" target="_blank" my-i18n="login_try_desktop_short_btn"></a></p>
+  </div>
   <div class="tg_head_split">
 
     <div class="tg_head_logo_wrap">

diff --git a/app/partials/desktop/login.html b/app/partials/desktop/login.html
@@ -1,4 +1,9 @@
 <div class="login_page_wrap" my-custom-background="#e7ebf0">
+  <div class="login_try_desktop" ng-if="try_desktop.shown">
+    <span class="try_desktop_close" ng-click="closeTryDesktop()"></span>
+    <p class="try_desktop_text" my-i18n="login_try_desktop"><my-i18n-param name="telegram-link"><a href="https://{{try_desktop.domain}}/" target="_blank">{{try_desktop.domain}}</a></my-i18n-param></p>
+    <a class="try_desktop_btn" href="https://{{try_desktop.domain}}/" target="_blank" my-i18n="login_try_desktop_btn"></a>
+  </div>
   <div class="login_head_bg"></div>
   <div class="login_page">
     <div class="login_head_wrap clearfix" ng-switch="progress.enabled">