From 57374638e01d3dd6be70189ae8d63d930cd608f9 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Mon, 15 Feb 2016 22:27:37 +0500 Subject: [PATCH] add #followers modal with brief explanation of current inability of obtaining of complete followers list --- css/style.css | 50 +++++++++++++++++++++++++ home.html | 19 +++++++++- js/interface_common.js | 46 +++++++++++++++++++++++ js/interface_home.js | 2 - js/interface_localization.js | 39 ++++++++++++++++++++ js/mobile_abstract.js | 8 ++++ theme_calm/css/style.css | 58 +++++++++++++++++++++++++++++ theme_nin/css/style.css | 71 ++++++++++++++++++++++++++++++++++++ 8 files changed, 290 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index f9ab85f..ac56237 100644 --- a/css/style.css +++ b/css/style.css @@ -768,6 +768,56 @@ textarea.splited-post { .post .show-more:before { content: '💭'; } + +/* FIXME need to rework and replace all .twister-user to get same vis */ +.twister-peer { + margin: 0; + min-height: 72px; + padding: 4px; + border-bottom: solid 1px rgba(69, 71, 77, .1); + border-top: solid 1px rgba(69, 71, 77, .1); +} + +.twister-peer + .twister-peer { + border-top: none; +} + +.twister-peer .avatar { + float: left; + width: 48px; + height: 48px; + overflow: hidden; + margin: 4px; +} + +.twister-peer .avatar img { + width: 48px; + height: auto; + border-radius: 16%; +} + +.twister-peer .name, .twister-peer .alias { + color: #E34F42; + display: inline-block; +} + +.twister-peer .name { + font-weight: 600; +} + +.twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover { + cursor: pointer; +} + +.twister-peer .bio { + text-align: center; + padding: 4px; +} + +.twister-peer .bio a { + color: #E34F42; +} + /*********************************** ********************* WHO TO FOLLOW ***********************************/ diff --git a/home.html b/home.html index d3c21f7..284c0c9 100644 --- a/home.html +++ b/home.html @@ -118,7 +118,7 @@
@@ -683,6 +683,23 @@
+
+
    +
    +
    +
    +
+
+ +
+
  • +
    avatar
    +
    +
    +
    +
    • +
    +
      diff --git a/js/interface_common.js b/js/interface_common.js index 911a660..159365c 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -544,6 +544,46 @@ function openMentionsModalHandler(peerAlias) { } } +function openFollowersModal(peerAlias) { + if (!peerAlias && !defaultScreenName) { + alertPopup({ + //txtTitle: polyglot.t(''), add some title (not 'error', please) or just KISS + txtMessage: polyglot.t('You don\'t have any followers because you are not logged in.') + }); + history.back(); + return; + } + + var modal = openModal({ + classAdd: 'followers-modal', + content: twister.tmpl.followersList.clone(true), + title: polyglot.t('Followers') + }); + + appendKnownFollowersToElem(modal.content.find('ol')); + + alertPopup({txtMessage: '* ' + polyglot.t('warn_followers_not_all')}); +} + +function appendKnownFollowersToElem(list) { + for (var i = 0; i < twisterFollowingO.knownFollowers.length; i++) + addPeerToFollowersList(list, twisterFollowingO.knownFollowers[i]); + + $.MAL.listLoaded(list); +} + +function addPeerToFollowersList(list, peerAlias) { + var item = twister.tmpl.followersPeer.clone(true).attr('data-peer-alias', peerAlias); + + item.find('.alias').text('@' + peerAlias); + item.find('.alias, .avatar, .name').on('mouseup', {route: $.MAL.userUrl(peerAlias)}, routeOnClick); + getAvatar(peerAlias, item.find('.avatar img')); + getFullname(peerAlias, item.find('.name')); + getBioToElem(peerAlias, item.find('.bio')); + + item.prependTo(list); +} + function openFollowingModal(peerAlias) { if (!peerAlias || peerAlias === defaultScreenName) { if (!defaultScreenName) { @@ -838,6 +878,8 @@ function loadModalFromHash() { } } else if (hashstring === '#directmessages') openCommonDMsModal(); + else if (hashstring === '#followers') + openFollowersModal(); else if (hashstring === '#following') openFollowingModal(); else if (hashstring === '#groupmessages') @@ -2040,6 +2082,8 @@ function initInterfaceCommon() { closePrompt(event); }); + $('.open-followers').on('mouseup', {route: '#followers'}, routeOnClick); + $('.post-text').on('click', 'a', muteEvent); $('.post-reply').on('click', postReplyClick); $('.post-propagate').on('click', reTwistPopup); @@ -2210,6 +2254,8 @@ function setTextcompleteDropdownListPos(position) { $(document).ready(function () { twister.html.blanka.appendTo('body').hide(); + twister.tmpl.followersList = extractTemplate('#template-followers-list'); + twister.tmpl.followersPeer = extractTemplate('#template-followers-peer'); twister.tmpl.followingList = extractTemplate('#template-following-list'); twister.tmpl.followingUser = extractTemplate('#template-following-user'); twister.tmpl.commonDMsListItem = extractTemplate('#template-direct-messages-list-item') diff --git a/js/interface_home.js b/js/interface_home.js index c7b4e1b..d24904b 100644 --- a/js/interface_home.js +++ b/js/interface_home.js @@ -60,8 +60,6 @@ var InterfaceFunctions = function() { $miniProfile.find("a.open-following-page").attr("href","#"); $miniProfile.find("a.open-following-page").bind("click", function() { alert(polyglot.t("You are not following anyone because you are not logged in."))} ); - $miniProfile.find("a.open-followers").bind("click", function() - { alert(polyglot.t("You don't have any followers because you are not logged in."))} ); $(".dropdown-menu-following").attr("href","#"); $(".dropdown-menu-following").bind("click", function() { alert(polyglot.t("You are not following anyone because you are not logged in."))} ); diff --git a/js/interface_localization.js b/js/interface_localization.js index a76107b..6d7b7b0 100644 --- a/js/interface_localization.js +++ b/js/interface_localization.js @@ -128,6 +128,9 @@ if(preferredLanguage == "en"){ "nobody": "nobody", // used to promote a post without attaching the user "Not available": "Not available", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.", "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.", "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.", @@ -451,6 +454,9 @@ if(preferredLanguage == "es"){ "nobody": "Nadie", // used to promote a post without attaching the user "Not available": "No disponible", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.", "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.", "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.", @@ -759,6 +765,9 @@ if(preferredLanguage == "uk"){ "nobody": "анонім", // used to promote a post without attaching the user "Not available": "Не доступне", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister не може створити сповіщення: невідома помилка.", "notify_desktop_perm_denied": "Twister не може створити сповіщення на робочому столі: доступ обмежено.\n\nЯкщо ви бажаєте отримувати сповіщення, дозвольте їх виконання в налаштуваннях браузера для %{this_domain}.", "notify_desktop_test": "Є дещо новеньке у стрічці.", @@ -1064,6 +1073,9 @@ if(preferredLanguage == "zh-CN"){ "nobody": "无名", // used to promote a post without attaching the user "Not available": "用户名不可用", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister 无法发出桌面提醒：发生未知错误。", "notify_desktop_perm_denied": "Twister 无法发出桌面提醒：权限被拒绝。\n\n如果你想收到提醒，请在你的浏览器设置中允许 %{this_domain} 发出提醒。", "notify_desktop_test": "我们都在用 Twister。\n欢迎你的加入。", @@ -1387,6 +1399,9 @@ if(preferredLanguage == "nl"){ "nobody": "nobody", // used to promote a post without attaching the user "Not available": "Niet beschikbaar", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.", "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.", "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.", @@ -1694,6 +1709,9 @@ if(preferredLanguage == "it"){ "nobody": "nessuno", // used to promote a post without attaching the user "Not available": "Non disponibile", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.", "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.", "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.", @@ -1999,6 +2017,9 @@ if(preferredLanguage == "fr"){ "nobody": "nobody", // used to promote a post without attaching the user "Not available": "Non disponible", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Impossible d'afficher les notifications: une erreur inconnue est survenue.", "notify_desktop_perm_denied": "Impossible d'afficher les notifications: autorisation refusée.\n\nSi tu souhaites afficher les notifications, autorise le %{this_domain} dans les paramêtres de ton navigateur.", "notify_desktop_test": "All the twisters gonna twist.\nBienvenue à toi!", @@ -2308,6 +2329,9 @@ if(preferredLanguage == "ru"){ "nobody": "Анонимно", // used to promote a post without attaching the user "Not available": "Недоступно", "warn_following_not_any": "Пока что таки нет читаемых!\nПоди ж найди кого-нибудь да и подпишись.", + "warn_followers_not_all": "Пока что нет простого способа узнать список всех подписчиков.\n" + + "Счётчик показывает лишь количество известных пиров твоего торрента.\n" + + "В списке ниже включены те, главным образом, на кого подписан(а) ты сам(а).", "notify_desktop_error": "Твистер не может выполнить уведомление: произошла неизвестная ошибка.", "notify_desktop_perm_denied": "Твистер не может выполнить уведомление: разрешение не получено.\n\nЧтобы получать уведомления, разрешите их для %{this_domain} в настройках вашего браузера.", "notify_desktop_test": "Одна лягушка сказала:\n'если не буду квакать — лопну'.\nВы нужны нам, берегите себя.", @@ -2620,6 +2644,9 @@ if(preferredLanguage == "de"){ "nobody": "nobody", // used to promote a post without attaching the user "Not available": "Nicht verfügbar", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister kann keine Desktop-Meldungen anzeigen: ein unbekannter Fehler trat auf.", "notify_desktop_perm_denied": "Twister kann keine Desktop-Meldungen anzeigen: Keine Berechtigung.\n\nWenn Du Meldungen angezeigt haben möchtest, erlaube sie für %{this_domain} in den Einstellungen Deines Browsers.", "notify_desktop_test": "All die Twisterer werden twisten..\nDu bist nun auch willkommen!", @@ -2928,6 +2955,9 @@ if(preferredLanguage == "ja"){ "nobody": "ナナシ", // used to promote a post without attaching the user "Not available": "使用中", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.", "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.", "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.", @@ -3233,6 +3263,9 @@ if(preferredLanguage == "pt-BR"){ "nobody": "nobody", // used to promote a post without attaching the user "Not available": "Indisponível", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister cannot perform desktop notification: unknown error occured.", "notify_desktop_perm_denied": "Twister cannot perform desktop notification: permission denied.\n\nIf you want to get notifications, allow them for %{this_domain} in settings of your browser.", "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.", @@ -3542,6 +3575,9 @@ if(preferredLanguage == "tr"){ "nobody": "hiçkimse", // used to promote a post without attaching the user "Not available": "Kullanılamaz", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twister masaüstü uyarısını gösterimiyor: bilimeyen bir hata oluştu.", "notify_desktop_perm_denied": "Twister masaüstü uyarısını gösteremiyor: yetkilendirme hatası.\n\nUyarıları almak istiyorsanız, tarayıcı ayarlarında %{this_domain} alan adı için izin veriniz.", "notify_desktop_test": "Kasırga her yanı saracak\nBu karnavala hoşgeldin!", @@ -3848,6 +3884,9 @@ if(preferredLanguage == "cs"){ "nobody": "nikdo", // used to promote a post without attaching the user "Not available": "Tuto přezdívku již někdo používá", // username is not available "warn_following_not_any": "Not following any twisters!\nSearch and follow someone.", + "warn_followers_not_all": "Well, currently here's no easy way to obtain all your followers.\n" + + "The counter indicates only a number of known peers sharing your torrent.\n" + + "In the list below are included ones, mostly, who are followed by you.", "notify_desktop_error": "Twisteru se nepodařilo zobrazit upozornění na ploše: došlo k neznámé chybě.", "notify_desktop_perm_denied": "Twisteru se nepodařilo zobrazit upozornění na ploše: přístup byl odepřen.\n\nPokud chcete používat upozornění na ploše, povolte je pro %{this_domain} v nastavení vašeho prohlížeče.", "notify_desktop_test": "Twister to umí pořádně roztočit.\nKaždý je tu vítán.", diff --git a/js/mobile_abstract.js b/js/mobile_abstract.js index 7ecba97..d2af9b1 100644 --- a/js/mobile_abstract.js +++ b/js/mobile_abstract.js @@ -73,6 +73,14 @@ var MAL = function() }); }; + this.listLoaded = function (list) { + if ($.hasOwnProperty('mobile')) { + $.mobile.hidePageLoadingMsg(); + list.listview('refresh'); + } else + list.find('.loading-roller').hide(); + }; + this.followingListLoaded = function(followingList) { if ($.hasOwnProperty('mobile')) { $.mobile.hidePageLoadingMsg(); diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index dc0fe85..156e034 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -944,6 +944,64 @@ textarea.splited-post { .post .show-more:before { content: '💭'; } + +/* FIXME need to rework and replace all .twister-user to get same vis */ +.twister-peer { + margin: 0; + min-height: 72px; + padding: 4px; + border-bottom: solid 1px rgba(69, 71, 77, .1); + border-top: solid 1px rgba(69, 71, 77, .1); +} + +.twister-peer + .twister-peer { + border-top: none; +} + +.twister-peer .avatar { + float: left; + width: 48px; + height: 48px; + overflow: hidden; + margin: 4px; +} + +.twister-peer .avatar img { + width: 48px; + height: auto; + border-radius: 16%; +} + +.twister-peer .name, .twister-peer .alias { + color: #768fCE; + display: inline-block; +} + +.twister-peer .name { + font-weight: 600; +} + +.twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover { + cursor: pointer; +} + +.twister-peer .bio { + text-align: center; + padding: 4px; +} + +.twister-peer .bio a { + font: italic 1.1em "Open Sans", sans-serif; + text-decoration: none; + color: #B46E67; + transition: all 200ms; +} + +.twister-peer .bio a:hover { + color: #E18881; + opacity: .8; +} + /*********************************** ********************* WHO TO FOLLOW ***********************************/ diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 5925a73..8ba0d16 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -2084,6 +2084,63 @@ textarea.splited-post { color: #ff0000; } +/* FIXME need to rework and replace all .twister-user to get same vis */ +.twister-peer { + margin: 0; + min-height: 72px; + padding: 4px; + border-bottom: solid 1px rgba(69, 71, 77, .1); + border-top: solid 1px rgba(69, 71, 77, .1); + background: #FFF; +} + +.twister-peer + .twister-peer { + border-top: none; +} + +.twister-peer .avatar { + float: left; + width: 48px; + height: 48px; + overflow: hidden; + margin: 4px; +} + +.twister-peer .avatar img { + width: 48px; + height: auto; +} + +.twister-peer .name { + display: inline-block; +} + +.twister-peer .name:hover { + color: #AAA; +} + +.twister-peer .alias { + color: #AAA; + display: inline-block; +} + +.twister-peer .alias:hover { + color: #B4C669; +} + +.twister-peer .name { + font-weight: 600; +} + +.twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover { + cursor: pointer; +} + +.twister-peer .bio { + text-align: center; + padding: 4px; +} + /******** WHO TO FOLLOW ********/ /* line 411, ../sass/style.sass */ @@ -2981,6 +3038,20 @@ ol.toptrends-list a:hover { padding: 0; } +/************************************* +*********** FOLLOWERS MODAL ********** +**************************************/ + +.modal-wrapper.followers-modal { + width: 520px; + height: 720px; + margin: -360px 0 0 -260px; +} + +.followers-modal .modal-content { + padding: 0; +} + /****** FOLLOWING MODAL****** */ /* line 920, ../sass/style.sass */ .modal-wrapper.following-modal {