Merge pull request #362 from erqan/modal-warn

add modal inline warnings

css/style.css

@@ -1646,6 +1646,30 @@ ol.toptrends-list {
     padding: 10px 15px;
 }
 
+.inline-warn {
+    background-color: #FEFEDF;
+    padding: 10px;
+}
+
+.inline-warn .close {
+    float: right;
+    font-size: 1.2em;
+    color: #e34f42;
+    cursor: pointer;
+    margin: -8px 2px 8px 8px;
+}
+
+.inline-warn .text {
+    font-size: 0.8em;
+    text-align: center;
+}
+
+.inline-warn .options {
+    font-size: 0.8em;
+    text-align: right;
+    margin-top: 4px;
+}
+
 /*************************************
 ******** DIRECT MESSAGES MODAL *******
 **************************************/

home.html

@@ -426,6 +426,16 @@
         <div class="modal-blackout"></div>
     </div>
 
+    <div id="template-inline-warn">
+        <div class="inline-warn">
+            <div class="close">&times;</div>
+            <div class="text"></div>
+            <div class="options">
+                <div><input type="checkbox" class="never-again" /><span>don't show it again</span></div>
+            </div>
+        </div>
+    </div>
+
     <div class="prompt-wrapper">
       <div class="modal-header">
         <h3></h3>

js/interface_common.js

@@ -63,6 +63,16 @@ function openModal(modal) {
     else
         modal.content = modal.self.find('.modal-content');
 
+    if (modal.warn && modal.warn.name && modal.warn.text) {
+        var elem = twister.tmpl.modalComponentWarn.clone(true)
+            .attr('data-warn-name', modal.warn.name)
+            .toggle(!$.Options.get('skipWarn' + modal.warn.name))
+        ;
+        fillElemWithTxt(elem.find('.text'), modal.warn.text, {markout: 'apply'});
+        elem.find('.options .never-again + span').text(polyglot.t('do_not_show_it_again'));
+        elem.insertBefore(modal.content);
+    }
+
     modal.self.appendTo('body').fadeIn('fast');  // FIXME maybe it's better to append it to some container inside body
 
     if (modal.classBase === '.modal-wrapper') {
@@ -71,7 +81,9 @@ function openModal(modal) {
 
         modal.drapper = $('<div>').appendTo(twister.html.detached);  // here modal goes instead detaching
 
-        modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
+        modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()
+            - modal.self.find('.inline-warn').outerHeight()
+            * (modal.warn && !$.Options.get('skipWarn' + modal.warn.name) ? 1 : 0));
 
         var windowHeight = $(window).height();
         if (modal.self.outerHeight() > windowHeight) {
@@ -587,7 +599,7 @@ function openMentionsModalHandler(peerAlias) {
 }
 
 function openFollowersModal(peerAlias) {
-    var followers, title, txtAlert;
+    var followers, title, warn;
 
     if (!peerAlias || peerAlias === defaultScreenName) {
         if (!defaultScreenName) {
@@ -600,22 +612,27 @@ function openFollowersModal(peerAlias) {
         }
         title = polyglot.t('Followers');
         followers = twisterFollowingO.knownFollowers.slice();
-        txtAlert = '* ' + polyglot.t('warn_followers_not_all');
+        warn = {
+            name: 'FollowersNotAll',
+            text: '* ' + polyglot.t('warn_followers_not_all')
+        };
     } else {
         title = polyglot.t('Followers_of', {alias: peerAlias});
         followers = whoFollows(peerAlias);
-        txtAlert = polyglot.t('warn_followers_not_all_of', {alias: peerAlias});
+        warn = {
+            name: 'FollowersNotAllOf',
+            text: polyglot.t('warn_followers_not_all_of', {alias: peerAlias})
+        };
     }
 
     var modal = openModal({
         classAdd: 'followers-modal',
         content: twister.tmpl.followersList.clone(true),
-        title: title
+        title: title,
+        warn: warn
     });
 
     appendFollowersToElem(modal.content.find('ol'), followers);
-
-    alertPopup({txtMessage: txtAlert});
 }
 
 function appendFollowersToElem(list, followers) {
@@ -2457,6 +2474,33 @@ function replaceDashboards() {
 }
 
 function initInterfaceCommon() {
+    twister.tmpl.modalComponentWarn = extractTemplate('#template-inline-warn');
+    twister.tmpl.modalComponentWarn.find('.close').on('click',
+        function(event) {
+            var i = $(event.target).closest('.modal-wrapper').attr('data-modal-id');
+
+            if (!i || !twister.modal[i]) return;
+
+            var modal = twister.modal[i];
+
+            modal.self.find('.inline-warn').hide();
+
+            modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
+
+            var windowHeight = $(window).height();
+            if (modal.self.outerHeight() > windowHeight) {
+                modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight);
+                modal.self.outerHeight(windowHeight);
+                modal.self.css('margin-top', - windowHeight / 2);
+            }
+        }
+    );
+    twister.tmpl.modalComponentWarn.find('.options .never-again').on('change',
+        function(event) {
+            $.Options.set('skipWarn' + $(event.target).closest('.inline-warn')
+                .attr('data-warn-name'), event.target.checked);  // e.g. 'skipWarnFollowersNotAll'
+        }
+    );
     twister.tmpl.commonDMsList = extractTemplate('#template-direct-messages-list');
     twister.tmpl.uriShortenerMC = extractTemplate('#template-uri-shortener-modal-content');
     twister.tmpl.uriShortenerMC

js/interface_localization.js

@@ -74,6 +74,7 @@ if(preferredLanguage == "en"){
       "display_mentions": "Display mentions",
       "Display retransmissions": "Display retransmissions",
       "DNS to obtain list of peers:": "DNS to obtain list of peers:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Downloading block chain, please wait before continuing (block chain is %{days} days old).",
       "download_posts_status": "Downloaded %{portion} posts", // Downloaded 10/30 posts
       "Enable": "Enable",
@@ -416,6 +417,7 @@ if(preferredLanguage == "es"){
       "display_mentions": "Visualización de menciones",
       "Display retransmissions": "Visualización de retransmisiones",
       "DNS to obtain list of peers:": "DNS para obtener la lista de los pares:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Descarga de la cadena de bloques, por favor espere antes de continuar (la cadena de bloques esta %{days} días).",
       "download_posts_status": "Post %{portion} descargados", // Downloaded 10/30 posts
       "Enable": "Permitir",
@@ -755,6 +757,7 @@ if(preferredLanguage == "uk"){
       "display_mentions": "Показати сповіщення",
       "Display retransmissions": "Показати пересилання",
       "DNS to obtain list of peers:": "DNS для отримання пірів:",
+      "do_not_show_it_again": "don't show it again",
       "dns address": "адреса DNS",
       "downloading_block_chain": "Завантаження ланцюга блоків, будь ласка, зачекайте перед продовженням (ланцюг блоків віком %{days} днів).",
       "download_posts_status": "Завантажено %{portion} твістів", // Downloaded 10/30 posts
@@ -1092,6 +1095,7 @@ if(preferredLanguage == "zh-CN"){
       "display_mentions": "显示",
       "Display retransmissions": "显示转发",
       "DNS to obtain list of peers:": "用DNS获取节点列表：",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "区块链下载中，请等待下载完成（区块链仍落后 %{days} 天）。",
       "download_posts_status": "已下载 %{portion} 推文", // Downloaded 10/30 posts
       "Enable": "开启",
@@ -1434,6 +1438,7 @@ if(preferredLanguage == "nl"){
       "display_mentions": "Toon vermeldingen",
       "Display retransmissions": "Toon retransmissions",
       "DNS to obtain list of peers:": "DNS om peers lijst op te halen:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Bezig met downloaden block chain, wacht a.u.b. voordat je doorgaat (block chain is %{days} dagen oud).",
       "download_posts_status": "%{portion} berichten gedownload", // Downloaded 10/30 posts
       "Enable": "Activeren",
@@ -1773,6 +1778,7 @@ if(preferredLanguage == "it"){
       "display_mentions": "Mostra le menzioni",
       "Display retransmissions": "Mostra Ripubblicazioni",
       "DNS to obtain list of peers:": "DNS per la lista dei nodi:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Scaricamento della catena di blocchi in corso, attendere prego (la catena risale a %{days} giorni fa).",
       "download_posts_status": "Scaricati %{portion} messaggi", // Downloaded 10/30 posts
       "Enable": "Attivato",
@@ -2110,6 +2116,7 @@ if(preferredLanguage == "fr"){
       "display_mentions": "Afficher les mentions",
       "Display retransmissions": "Afficher les retransmissions",
       "DNS to obtain list of peers:": "DNS où obtenir une liste des pairs:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Téléchargement de la chaîne de blocs, veuillez patienter avant de continuer (la chaîne de blocs a %{days} jours de retard).",
       "download_posts_status": "%{portion} billets téléchargés", // Downloaded 10/30 posts
       "Enable": "Activer",
@@ -2451,6 +2458,7 @@ if(preferredLanguage == "ru"){
        "display_mentions": "Показать упоминания",
        "Display retransmissions": "Показать репосты",
        "DNS to obtain list of peers:": "DNS адрес для получения пиров:",
+       "do_not_show_it_again": "не показывать больше",
        "downloading_block_chain": "Загрузка цепочки блоков, пожалуйста подождите, (Цепочка блоков устарела на %{days} дней).",
        "download_posts_status": "Загружено %{portion} постов", // Downloaded 10/30 posts
        "Enable": "Включено",
@@ -2794,6 +2802,7 @@ if(preferredLanguage == "de"){
       "display_mentions": "Zeige Erwähnungen", // Ist das richtig? Ich weiß nicht, in welchem Zusammenhang das benutzt wird.
       "Display retransmissions": "Weiterleitungen anzeigen",
       "DNS to obtain list of peers:": "DNS um Peer-Liste abzurufen:",
+      "do_not_show_it_again": "don't show it again",
       "dns address": "DNS-Adresse",
       "downloading_block_chain": "Block-Chain wird heruntergeladen, bitte warten (Block-Chain ist %{days} Tage alt).",
       "download_posts_status": "%{portion} Posts heruntergeladen", // Downloaded 10/30 posts
@@ -3135,6 +3144,7 @@ if(preferredLanguage == "ja"){
       "display_mentions": "メンションを表示する",
       "Display retransmissions": "リトランスミットを表示する",
       "DNS to obtain list of peers:": "ピア取得用のDNS:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "ブロックチェインをダウンロードしています。しばらくお待ちください。（ブロックチェーンは%{days}日送れています）",
       "download_posts_status": "ダウンロード済みの投稿 %{portion}", // Downloaded 10/30 posts
       "Enable": "有効",
@@ -3472,6 +3482,7 @@ if(preferredLanguage == "pt-BR"){
       "display_mentions": "Exibir menções",
       "Display retransmissions": "Exibir retransmissões",
       "DNS to obtain list of peers:": "DNS para obter a lista de nós:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Baixando a Cadeia de Blocos, por favor aguarde (A Cadeia de Blocos está %{days} dias desatualizada).",
       "download_posts_status": "%{portion} postagens carregadas.", // Downloaded 10/30 posts
       "Enable": "Habilitado",
@@ -3784,7 +3795,7 @@ if(preferredLanguage == "tr"){
       "busted_avowal": "Şüpheli bir şeyler iliştirmeye çalışırken enselendim.",
       "btn_ok": "Tamam",
       "Cancel": "İptal",
-      "clear_cache": "Clear cache",
+      "clear_cache": "Geçmişi temizle",
       "Confirm": "Onayla",
       "сonfirm_group_leaving_header": "Gruptan ayrılmayı onayla",
       "сonfirm_group_leaving_body": "%{alias} grubundan ayrılmak istiyor musun?",
@@ -3793,8 +3804,8 @@ if(preferredLanguage == "tr"){
             "Eğer bu sayfada kalırsanız eylemlerinizi işlemeyebilir.\n" +
             "Bunun yerine [Ağ Durumu sayfasını](%{page}) kontrol etmek ister misiniz?",
       "confirm_terminate_daemon": "Hizmeti sonlandırmak istiyor musun?\nTwister istemcisi çalışmayacak.",
-      "confirm_unfollow_@": "Are you sure you want to unfollow @%{alias}?",
-      "confirm_uri_shortener_clear_cache": "Are you sure you want to clear browser cache of shortened URIs?",
+      "confirm_unfollow_@": "@%{alias} kullanıcısını takip etmeyi bırakmak istiyor musun?",
+      "confirm_uri_shortener_clear_cache": "Kısaltılmış adres geçimişini temizlemek istiyor musun?",
       "Change user": "Kullanıcı değiştir",
       "Checking...": "Denetleniyor...", // checking if username is available
       "Collapse": "Kapat", // smaller view of a post
@@ -3813,6 +3824,7 @@ if(preferredLanguage == "tr"){
       "display_mentions": "Bahsedenleri göster",
       "Display retransmissions": "Tekrar iletimleri göster",
       "DNS to obtain list of peers:": "Eş listesini almak için DNS:",
+      "do_not_show_it_again": "bir daha gösterme",
       "downloading_block_chain": "Blok zinciri indiriliyor, devam edebilmek için lütfen bekleyiniz (blok zinciri %{days} günlük).",
       "download_posts_status": "Göderilerin indirilme oranı: %{portion}", // Downloaded 10/30 posts
       "Enable": "Kullanılabilir",
@@ -3916,7 +3928,7 @@ if(preferredLanguage == "tr"){
         + "Not: URL kısaltma işlemi tam URL'i barındıran 'boş' bir twist oluşturacak.\n"
         + "Bu özel twist görüntülenmeyecek, fakat gönderi sayınızda hesaba katılacak.",
       "shorten_URI_its_public_is_it_ok": "Your link will be public available! Are you OK with that?",
-      "URI_shortener": "URI Shortener",
+      "URI_shortener": "Adres kısalt",
       "The File APIs are not fully supported in this browser.": "Dosya API'si tarayıcınızda tam olarak desteklenmiyor.",
       "time_ago": "%{time} önce", // 5 minutes ago
       "Time of the last block:": "Son blok saati: ",
@@ -4151,6 +4163,7 @@ if(preferredLanguage == "cs"){
       "display_mentions": "Zobrazit zmínky",
       "Display retransmissions": "Zobrazit přeposlané",
       "DNS to obtain list of peers:": "DNS pro načtení seznamu uzlů:",
+      "do_not_show_it_again": "don't show it again",
       "downloading_block_chain": "Stahuji blockchain, prosím počkejte (blockchain je %{days} dnů starý).",
       "download_posts_status": "Staženo %{portion} příspěvků", // Downloaded 10/30 posts
       "Enable": "Zapnuto",

js/options.js

@@ -309,6 +309,16 @@ function twisterOptions() {
         name: 'WebTorrentAutoDownload',
         valDefault: 'enable'
     });
+    this.add({
+        name: 'skipWarnFollowersNotAll',
+        type: 'checkbox',
+        valDefault: false
+    });
+    this.add({
+        name: 'skipWarnFollowersNotAllOf',
+        type: 'checkbox',
+        valDefault: false
+    });
 }
 
 twisterOptions.prototype.add = function (option) {
@@ -316,6 +326,20 @@ twisterOptions.prototype.add = function (option) {
         this[option.name] = new twisterOption(option);
 };
 
+twisterOptions.prototype.get = function (optionName) {
+    if (optionName && typeof this[optionName] !== 'undefined')
+        return this[optionName].val;
+    else
+        console.warn('option \'' + optionName + '\' does not exist');
+};
+
+twisterOptions.prototype.set = function (optionName, val) {
+    if (optionName && typeof this[optionName] !== 'undefined')
+        this[optionName].set(val);
+    else
+        console.warn('option \'' + optionName + '\' does not exist');
+};
+
 twisterOptions.prototype.initControls = function () {
     var elem;
 

theme_calm/css/style.css

@@ -2019,6 +2019,30 @@ textarea.splited-post {
     padding: 10px 15px;
 }
 
+.inline-warn {
+    background-color: #FEFEDF;
+    padding: 10px;
+}
+
+.inline-warn .close {
+    float: right;
+    font-size: 1.2em;
+    color: #e34f42;
+    cursor: pointer;
+    margin: -8px 2px 8px 8px;
+}
+
+.inline-warn .text {
+    font-size: 0.8em;
+    text-align: center;
+}
+
+.inline-warn .options {
+    font-size: 0.8em;
+    text-align: right;
+    margin-top: 4px;
+}
+
 /*************************************
 ******** DIRECT MESSAGES MODAL *******
 **************************************/

theme_nin/css/style.css

@@ -2582,6 +2582,31 @@ ol.toptrends-list a:hover {
     margin: 4px;
 }
 
+
+.inline-warn {
+    background-color: #FEFEDF;
+    padding: 10px;
+}
+
+.inline-warn .close {
+    float: right;
+    font-size: 1.2em;
+    color: #e34f42;
+    cursor: pointer;
+    margin: -8px 2px 8px 8px;
+}
+
+.inline-warn .text {
+    font-size: 0.8em;
+    text-align: center;
+}
+
+.inline-warn .options {
+    font-size: 0.8em;
+    text-align: right;
+    margin-top: 4px;
+}
+
 /*************************************
 *********** CONFIRM POPUP ************
 **************************************/