added options of desktop notifications, fixed somewhat

css/style.css

@@ -297,11 +297,7 @@ button.disabled:hover
     border: solid 1px rgba( 69, 71, 77, .1 );
     background: #fff;
 }
-.options .module
-{
-    margin: 5px;
-    padding: 5px;
-}
+
 .messages-qtd
 {
     position: absolute;
@@ -1761,19 +1757,34 @@ ol.toptrends-list {
   }
 }
 
-/* Options */
-#playerVol {
-    float: right;
-    margin-right: 20px;
+/*************************************
+****************** OPTIONS ***********
+**************************************/
+
+.options .module
+{
+    margin: 5px;
+    padding: 15px;
 }
-.volValue {
-    float: right;
-    margin-right: -163px;
+
+.options .container
+{
+    margin: 5px 0px 5px 10px;
+}
+
+.options .label-h {
+  font-weight: 700;
+}
+
+.options .module label {
     font: 12px "Open Sans", sans-serif;
 }
-#notifyForm p, #choseLanguage p, #keysOpt p {
-    margin-top: 15px;
+
+.volValue {
+    vertical-align: top;
+    font: 12px "Open Sans", sans-serif;
 }
+
 .suboptions {
     margin: 5px 30px;
     border: double 2px rgba( 69, 71, 77, .1 );

js/interface_common.js

@@ -202,10 +202,12 @@ function updateHashtagModal(postboard,hashtag,timeoutArgs) {
     requestHashtag(postboard,hashtag,resource,timeoutArgs);
 
     if( _hashtagPendingPostsUpdated ) {
-        showDesktopNotification(false, polyglot.t('You got')+' '+polyglot.t("new_posts", _hashtagPendingPostsUpdated)+' '+polyglot.t('in search result')+'.', false,'twister_notification_new_posts_modal', function() {
+        if ($.Options.getShowDesktopNotifPostsModalOpt() === 'enable') {
+            $.MAL.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t("new_posts", _hashtagPendingPostsUpdated)+' '+polyglot.t('in search result')+'.', false,'twister_notification_new_posts_modal', $.Options.getShowDesktopNotifPostsModalTimerOpt(), function() {
                     $(".postboard-news").hide();
                     displayHashtagPending($(".hashtag-modal .postboard-posts"));
                 }, false)
+        }
 
         _hashtagPendingPostsUpdated = 0;
     }
@@ -819,36 +821,6 @@ function replyTextKeypress(e) {
     }
 }
 
-function showDesktopNotification(notifyTitle, notifyBody, notifyIcon, notifyTag, actionOnClick, actionOnPermDenied) {
-    function doNotification(notifyTitle, notifyBody, notifyIcon, notifyTag, actionOnClick) {
-        if (!notifyTitle) {
-            notifyTitle = polyglot.t('notify_desktop_title');
-        }
-        if (!notifyIcon) {
-            notifyIcon = '../img/twister_mini.png';
-        }
-        if (!notifyTag) {
-            notifyTag = 'twister_notification';
-        }
-
-        var desktopNotification = new Notify(notifyTitle, {
-            body: notifyBody,
-            icon: notifyIcon,
-            tag: notifyTag,
-            timeout: _desktopNotificationTimeout,
-            notifyClick: actionOnClick,
-            notifyError: function() { alert(polyglot.t('notify_desktop_error')) }
-        });
-        desktopNotification.show();
-    }
-
-    if (Notify.needsPermission) {
-        Notify.requestPermission(false, actionOnPermDenied);
-    } else {
-        doNotification(notifyTitle, notifyBody, notifyIcon, notifyTag, actionOnClick);
-    }
-}
-
 /*
  *  unicode convertion list
  *  k: original string to be replaced

js/interface_localization.js

@@ -101,7 +101,7 @@ if(preferredLanguage == "en"){
       "Not available": "Not available", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Number of blocks in block chain: ",
       "Number of CPUs to use": "Number of CPUs to use ",
@@ -196,6 +196,7 @@ if(preferredLanguage == "en"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -232,6 +233,7 @@ if(preferredLanguage == "en"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "second(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -342,7 +344,7 @@ if(preferredLanguage == "es"){
       "Not available": "No disponible", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Número de bloques en la cadena de bloques: ",
       "Number of CPUs to use": "Número de CPUs para utilizar ",
@@ -365,7 +367,7 @@ if(preferredLanguage == "es"){
       "Retransmits": "Retransmiciones",
       "Retransmitted by": "Retransmitido por",
       "search": "search",
-      "seconds": "%{smart_count} segundos |||| %{smart_count} segundos",
+      "seconds": "%{smart_count} segundo |||| %{smart_count} segundos",
       "send": "send",
       "Send post with username": "Enviar post con nombre de usuario ",
       "Sent Direct Message": "Mensaje directo",
@@ -437,6 +439,7 @@ if(preferredLanguage == "es"){
       "Notifications": "Notificaciones",
       "Desktop notifications": "Notificaciones de Escritorio",
       "Sound notifications": "Notificaciones de Sonido",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -472,7 +475,8 @@ if(preferredLanguage == "es"){
       "Postboard displays": "Postboard displays",
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
-      "hour(s)": "hour(s)",
+      "hour(s)": "hora(s)",
+      "second(s)": "segundo(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -581,7 +585,7 @@ if(preferredLanguage == "uk"){
       "Not available": "Не доступне", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Кількість блоків у ланцюгу: ",
       "Number of CPUs to use": "Кількість CPUs до використання ",
@@ -675,6 +679,7 @@ if(preferredLanguage == "uk"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -711,6 +716,7 @@ if(preferredLanguage == "uk"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "second(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -818,7 +824,7 @@ if(preferredLanguage == "zh"){
       "Not available": "用户名不可用", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "块链中的块数：",
       "Number of CPUs to use": "使用CPU数目 ",
@@ -912,6 +918,7 @@ if(preferredLanguage == "zh"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -948,6 +955,7 @@ if(preferredLanguage == "zh"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "second(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -1055,7 +1063,7 @@ if(preferredLanguage == "nl"){
       "Not available": "Niet beschikbaar", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Aantal blocks in block chain: ",
       "Number of CPUs to use": "Aantal CPUs om te gebruiken ",
@@ -1150,6 +1158,7 @@ if(preferredLanguage == "nl"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -1186,6 +1195,7 @@ if(preferredLanguage == "nl"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "seconde(n)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -1293,7 +1303,7 @@ if(preferredLanguage == "it"){
       "Not available": "Non disponibile", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Numero di blocchi nella catena: ",
       "Number of CPUs to use": "Numero di processori da usare:",
@@ -1385,6 +1395,7 @@ if(preferredLanguage == "it"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -1421,6 +1432,7 @@ if(preferredLanguage == "it"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "secondo(i)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -1529,7 +1541,7 @@ if(preferredLanguage == "fr"){
       "Not available": "Non disponible", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Nombre de blocs dans la chaîne de blocs: ",
       "Number of CPUs to use": "Nombre de processeurs à utiliser",
@@ -1624,6 +1636,7 @@ if(preferredLanguage == "fr"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -1660,6 +1673,7 @@ if(preferredLanguage == "fr"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "seconde(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -1761,7 +1775,7 @@ if(preferredLanguage == "ru"){
        "Network status": "Состояние сети",
        "New direct message...": "Новое личное сообщение...",
        "New Post...": "Новый пост...",
-       "You got": "У вас там",
+       "You got": "А у вас там",
        "in postboard": "в ленте",
        "in search result": "в результатах поиска",
        "new_posts": "%{smart_count} новый пост |||| %{smart_count} новых постов",
@@ -1771,7 +1785,7 @@ if(preferredLanguage == "ru"){
        "Not available": "Недоступно",
        "notify_desktop_error": "Твистер не может выполнить уведомление: произошла неизвестная ошибка.",
        "notify_desktop_perm_denied": "Твистер не может выполниь уведомление: разрешение не получено.\n\nЧтобы получать уведомления, разрешите их для этого домена в настройках вашего браузера.",
-       "notify_desktop_test": "Лягушка сказала: 'если не буду квакать — лопну'. Вы нужны нам, берегите себя.",
+       "notify_desktop_test": "Одна лягушка сказала:\n'если не буду квакать — лопну'.\nВы нужны нам, берегите себя.",
        "notify_desktop_title": "Watch out, it's twister over here!",
        "Number of blocks in block chain:": "Количество блоков в цепочке: ",
        "Number of CPUs to use": "Сколько использовать ядер процессора",
@@ -1866,6 +1880,7 @@ if(preferredLanguage == "ru"){
        "Notifications": "Уведомления",
        "Desktop notifications": "Уведомления рабочего стола",
        "Sound notifications": "Звуковые уведомления",
+       "Test": "Проверка",
        "Send key": "Отправка сообщения",
        "Posts display": "Отображение сообщений",
        "Post editor": "Редактор сообщения",
@@ -1902,6 +1917,7 @@ if(preferredLanguage == "ru"){
        "RTs those are close to original twist": "Перепосты сразу после исходного сообщения",
        "Show if the original is older than": "Показывать если исходное сообщение старше",
        "hour(s)": "час(ов)",
+       "second(s)": "секунд(а,ы)",
        "only numbers are allowed!": "только числа!",
        "Show with every user name": "Показывать везде около имени пользователя",
        "Show at profile modal only": "Показывать только в окне профиля",
@@ -2014,7 +2030,7 @@ if(preferredLanguage == "de"){
       "Not available": "Nicht verfügbar", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Anzahl der Blöcke in der Block-Chain: ",
       "Number of CPUs to use": "Anzahl der zu benutzenden CPU's ",
@@ -2110,6 +2126,7 @@ if(preferredLanguage == "de"){
       "Notifications": "Benachrichtigungen",
       "Desktop notifications": "Desktophinweisen",
       "Sound notifications": "Audioeinstellungen",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Nachrichten-Editor",
@@ -2146,6 +2163,7 @@ if(preferredLanguage == "de"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "Sekunde(n)",
       "only numbers are allowed!": "only numbers are allowed!",      
       "Show with every user name": "Zeige mit jedem Benutzernamen",
       "Show at profile modal only": "Show at profile modal only",
@@ -2253,7 +2271,7 @@ if(preferredLanguage == "ja"){
       "Not available": "使用中", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "全ブロック数: ",
       "Number of CPUs to use": "利用するCPUの数",
@@ -2345,6 +2363,7 @@ if(preferredLanguage == "ja"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -2381,6 +2400,7 @@ if(preferredLanguage == "ja"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "second(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -2489,7 +2509,7 @@ if(preferredLanguage == "pt-BR"){
       "Not available": "Indisponível", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Número de blocos: ",
       "Number of CPUs to use": "Número de CPUs a serem utilizados ",
@@ -2586,6 +2606,7 @@ if(preferredLanguage == "pt-BR"){
       "Notifications": "Notifications",
       "Desktop notifications": "Desktop notifications",
       "Sound notifications": "Sound notifications",
+      "Test": "Test",
       "Send key": "Send key",
       "Posts display": "Posts display",
       "Post editor": "Post editor",
@@ -2622,6 +2643,7 @@ if(preferredLanguage == "pt-BR"){
       "RTs those are close to original twist": "RTs those are close to original twist",
       "Show if the original is older than": "Show if the original is older than",
       "hour(s)": "hour(s)",
+      "second(s)": "segundo(s)",
       "only numbers are allowed!": "only numbers are allowed!",
       "Show with every user name": "Show with every user name",
       "Show at profile modal only": "Show at profile modal only",
@@ -2729,7 +2751,7 @@ if(preferredLanguage == "tr"){
       "Not available": "Kullanılamaz", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Blok zincirindeki blok sayısı: ",
       "Number of CPUs to use": "Kullanılacak CPU sayısı ",
@@ -2814,6 +2836,7 @@ if(preferredLanguage == "tr"){
       "Notifications": "Uyarılar",
       "Desktop notifications": "Masaüstü uyarılar",
       "Sound notifications": "Sesli uyarılar",
+      "Test": "Test",
       "Send key": "Gönderme tuşu",
       "Posts display": "Gönderiler",
       "Post editor": "Gönderi düzenleyici",
@@ -2859,6 +2882,7 @@ if(preferredLanguage == "tr"){
       "RTs those are close to original twist": "Orjinal twist'e yakın olan RTler",
       "Show if the original is older than": "Orjinali yandaki süreden daha eskiyse göster",
       "hour(s)": "saat",
+      "second(s)": "saniye",
       "only numbers are allowed!": "sadece rakam girilebilir!",
       "Show with every user name": "Tüm kullanıcı adlarının yanında göster",
       "Show at profile modal only": "Sadece profilinde göster",
@@ -2966,7 +2990,7 @@ if(preferredLanguage == "cs"){
       "Not available": "Tuto přezdívku již někdo používá", // username is not available
       "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. Now you are welcome too.",
+      "notify_desktop_test": "All the twisters gonna twist.\nNow you are welcome too.",
       "notify_desktop_title": "Watch out, it's twister over here!",
       "Number of blocks in block chain:": "Počet bloků v blockchainu: ",
       "Number of CPUs to use": "Kolik jader procesoru použít? ",
@@ -3059,6 +3083,7 @@ if(preferredLanguage == "cs"){
       "Notifications": "Upozornění",
       "Desktop notifications": "Upozornění na ploše",
       "Sound notifications": "Zvuková upozornění",
+      "Test": "Test",
       "Send key": "Klávesa pro odeslání",
       "Posts display": "Zobrazení příspěvků",
       "Post editor": "Editor příspěvků",
@@ -3095,6 +3120,7 @@ if(preferredLanguage == "cs"){
       "RTs those are close to original twist": "Přeposlání blízká původnímu příspěvku",
       "Show if the original is older than": "Ukázat pokud je už originál starší než",
       "hour(s)": "hodin",
+      "second(s)": "vteřinou(ami)",
       "only numbers are allowed!": "povolena jsou jen čísla!",
       "Show with every user name": "Ukázat u každé přezdívky",
       "Show at profile modal only": "Ukázat jen v okně profilu",

js/mobile_abstract.js

@@ -103,9 +103,11 @@ var MAL = function()
                 newTweetsBarMenu.text(String(newPosts));
                 newTweetsBarMenu.addClass("show");
 
-                showDesktopNotification(false, polyglot.t('You got')+' '+polyglot.t("new_posts", newPosts)+' '+polyglot.t('in postboard')+'.', false,'twister_notification_new_posts', function() {
+                if ($.Options.getShowDesktopNotifPostsOpt() === 'enable') {
+                    this.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t("new_posts", newPosts)+' '+polyglot.t('in postboard')+'.', false,'twister_notification_new_posts', $.Options.getShowDesktopNotifPostsTimerOpt(), function() {
                             requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);
                         }, false)
+                }
             } else {
                 newTweetsBar.hide();
                 newTweetsBar.text("");
@@ -375,6 +377,39 @@ var MAL = function()
          }
     }
 
+    this.showDesktopNotif = function(notifyTitle, notifyBody, notifyIcon, notifyTag, notifyTimer, actionOnClick, actionOnPermDenied) {
+        function doNotification(notifyTitle, notifyBody, notifyIcon, notifyTag, notifyTimer, actionOnClick) {
+            if (!notifyTitle) {
+                notifyTitle = polyglot.t('notify_desktop_title');
+            }
+            if (!notifyIcon) {
+                notifyIcon = '../img/twister_mini.png';
+            }
+            if (!notifyTag) {
+                notifyTag = 'twister_notification';
+            }
+            if (!notifyTimer) {
+                notifyTimer = 3600 * 24 * 30; // one month
+            }
+
+            var desktopNotification = new Notify(notifyTitle, {
+                body: notifyBody,
+                icon: notifyIcon,
+                tag: notifyTag,
+                timeout: notifyTimer,
+                notifyClick: actionOnClick,
+                notifyError: function() { alert(polyglot.t('notify_desktop_error')) }
+            });
+            desktopNotification.show();
+        }
+
+        if (Notify.needsPermission) {
+            Notify.requestPermission(false, actionOnPermDenied);
+        } else {
+            doNotification(notifyTitle, notifyBody, notifyIcon, notifyTag, notifyTimer, actionOnClick);
+        }
+    }
+
     this.reqRepAfterCB = function(postLi, postsFromJson) {
         if ($.hasOwnProperty("mobile")) {
             for( var i = 0; i < postsFromJson.length; i++) {

js/options.js

@@ -90,9 +90,129 @@ var TwisterOptions = function()
         player[0].play();
     }
 
-    this.notificationDesktopTest = function() {
-        $('#notifications-desktop-test').on('click', function() {
-            showDesktopNotification(false, polyglot.t('notify_desktop_test'), false,'twister_notification_test', false, function() { alert(polyglot.t('notify_desktop_perm_denied')) })
+    this.getShowDesktopNotifPostsOpt = function() {
+        return $.Options.getOption('showDesktopNotifPosts','enable');
+    }
+
+    this.setShowDesktopNotifPostsOpt = function () {
+        function showDesktopNotifPostsDesc() {
+            if ($.Options.getShowDesktopNotifPostsOpt() === 'enable') {
+                $('#showDesktopNotifPostsDesc')[0].style.display= 'inline';
+            } else {
+                $('#showDesktopNotifPostsDesc')[0].style.display= 'none';
+            }
+        }
+        $('#showDesktopNotifPosts').val(this.getShowDesktopNotifPostsOpt());
+        showDesktopNotifPostsDesc();
+        $('#showDesktopNotifPosts').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            showDesktopNotifPostsDesc();
+        });
+    }
+
+    this.getShowDesktopNotifPostsTimerOpt = function () {
+        return parseInt($.Options.getOption('showDesktopNotifPostsTimer', '6'));
+    }
+
+    this.setShowDesktopNotifPostsTimerOpt = function () {
+        $('#showDesktopNotifPostsTimer')[0].value = this.getShowDesktopNotifPostsTimerOpt().toString();
+
+        $('#showDesktopNotifPostsTimer').on('keyup', function () {setElemValNumeric(this, polyglot.t('second(s)'));});
+    }
+
+    this.getShowDesktopNotifPostsModalOpt = function() {
+        return $.Options.getOption('showDesktopNotifPostsModal','enable');
+    }
+
+    this.setShowDesktopNotifPostsModalOpt = function () {
+        function showDesktopNotifPostsModalDesc() {
+            if ($.Options.getShowDesktopNotifPostsModalOpt() === 'enable') {
+                $('#showDesktopNotifPostsModalDesc')[0].style.display= 'inline';
+            } else {
+                $('#showDesktopNotifPostsModalDesc')[0].style.display= 'none';
+            }
+        }
+        $('#showDesktopNotifPostsModal').val(this.getShowDesktopNotifPostsModalOpt());
+        showDesktopNotifPostsModalDesc();
+        $('#showDesktopNotifPostsModal').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            showDesktopNotifPostsModalDesc();
+        });
+    }
+
+    this.getShowDesktopNotifPostsModalTimerOpt = function () {
+        return parseInt($.Options.getOption('showDesktopNotifPostsModalTimer', '6'));
+    }
+
+    this.setShowDesktopNotifPostsModalTimerOpt = function () {
+        $('#showDesktopNotifPostsModalTimer')[0].value = this.getShowDesktopNotifPostsModalTimerOpt().toString();
+
+        $('#showDesktopNotifPostsModalTimer').on('keyup', function () {setElemValNumeric(this, polyglot.t('second(s)'));});
+    }
+
+    this.getShowDesktopNotifMentionsOpt = function() {
+        return $.Options.getOption('showDesktopNotifMentions','enable');
+    }
+
+    this.setShowDesktopNotifMentionsOpt = function () {
+        function showDesktopNotifMentionsDesc() {
+            if ($.Options.getShowDesktopNotifMentionsOpt() === 'enable') {
+                $('#showDesktopNotifMentionsDesc')[0].style.display= 'inline';
+            } else {
+                $('#showDesktopNotifMentionsDesc')[0].style.display= 'none';
+            }
+        }
+        $('#showDesktopNotifMentions').val(this.getShowDesktopNotifMentionsOpt());
+        showDesktopNotifMentionsDesc();
+        $('#showDesktopNotifMentions').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            showDesktopNotifMentionsDesc();
+        });
+    }
+
+    this.getShowDesktopNotifMentionsTimerOpt = function () {
+        return parseInt($.Options.getOption('showDesktopNotifMentionsTimer', '60'));
+    }
+
+    this.setShowDesktopNotifMentionsTimerOpt = function () {
+        $('#showDesktopNotifMentionsTimer')[0].value = this.getShowDesktopNotifMentionsTimerOpt().toString();
+
+        $('#showDesktopNotifMentionsTimer').on('keyup', function () {setElemValNumeric(this, polyglot.t('second(s)'));});
+    }
+
+    this.getShowDesktopNotifDMsOpt = function() {
+        return $.Options.getOption('showDesktopNotifDMs','enable');
+    }
+
+    this.setShowDesktopNotifDMsOpt = function () {
+        function showDesktopNotifDMsDesc() {
+            if ($.Options.getShowDesktopNotifDMsOpt() === 'enable') {
+                $('#showDesktopNotifDMsDesc')[0].style.display= 'inline';
+            } else {
+                $('#showDesktopNotifDMsDesc')[0].style.display= 'none';
+            }
+        }
+        $('#showDesktopNotifDMs').val(this.getShowDesktopNotifDMsOpt());
+        showDesktopNotifDMsDesc();
+        $('#showDesktopNotifDMs').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            showDesktopNotifDMsDesc();
+        });
+    }
+
+    this.getShowDesktopNotifDMsTimerOpt = function () {
+        return parseInt($.Options.getOption('showDesktopNotifDMsTimer', '60'));
+    }
+
+    this.setShowDesktopNotifDMsTimerOpt = function () {
+        $('#showDesktopNotifDMsTimer')[0].value = this.getShowDesktopNotifDMsTimerOpt().toString();
+
+        $('#showDesktopNotifDMsTimer').on('keyup', function () {setElemValNumeric(this, polyglot.t('second(s)'));});
+    }
+
+    this.setTestDesktopNotif = function() {
+        $('#testDesktopNotif').on('click', function() {
+            $.MAL.showDesktopNotif(false, polyglot.t('notify_desktop_test'), false,'twister_notification_test', false, function() { alert(polyglot.t('notify_desktop_perm_denied')) })
         })
     }
 
@@ -307,16 +427,7 @@ var TwisterOptions = function()
     this.setHideCloseRTsHourOpt = function () {
         $('#hideCloseRtsHour')[0].value = this.getHideCloseRTsHourOpt().toString();
 
-        $('#hideCloseRtsHour').on('keyup', function () {
-            if (/^\d+$/.test(this.value)) {
-                this.style.backgroundColor = '';
-                $.Options.setOption(this.id, this.value);
-                $(this).next('span').text(polyglot.t('hour(s)'));
-            } else {
-                this.style.backgroundColor = '#f00';
-                $(this).next('span').text(polyglot.t('only numbers are allowed!'));
-            }
-        });
+        $('#hideCloseRtsHour').on('keyup', function () {setElemValNumeric(this, polyglot.t('hour(s)'));});
     };
 
     this.getIsFollowingMeOpt = function () {
@@ -346,10 +457,18 @@ var TwisterOptions = function()
     this.InitOptions = function() {
         this.soundNotifOptions();
         this.volumeControl();
-        this.notificationDesktopTest();
         this.keysSend();
         this.setLang();
         this.setTheme();
+        this.setShowDesktopNotifPostsOpt();
+        this.setShowDesktopNotifPostsTimerOpt();
+        this.setShowDesktopNotifPostsModalOpt();
+        this.setShowDesktopNotifPostsModalTimerOpt();
+        this.setShowDesktopNotifMentionsOpt();
+        this.setShowDesktopNotifMentionsTimerOpt();
+        this.setShowDesktopNotifDMsOpt();
+        this.setShowDesktopNotifDMsTimerOpt();
+        this.setTestDesktopNotif();
         this.setLineFeedsOpt();
         this.setShowPreviewOpt();
         this.setUnicodeConversionOpt();
@@ -366,6 +485,18 @@ var TwisterOptions = function()
         this.setIsFollowingMeOpt();
         this.setDMCopySelfOpt();
     }
+
+    function setElemValNumeric(elem, mes) {
+        //var elem = $(elem_nm);
+        if (/^\d+$/.test(elem.value)) {
+            elem.style.backgroundColor = '';
+            $.Options.setOption(elem.id, elem.value);
+            $(elem).next('span').text(mes);
+        } else {
+            elem.style.backgroundColor = '#f00';
+            $(elem).next('span').text(polyglot.t('only numbers are allowed!'));
+        }
+    };
 }
 
 jQuery.Options = new TwisterOptions;

js/twister_newmsgs.js

@@ -100,7 +100,9 @@ function requestMentionsCount() {
 
         $.MAL.soundNotifyMentions();
 
-        showDesktopNotification(false, polyglot.t('You got')+' '+polyglot.t('new_mentions', _newMentions)+'.', false,'twister_notification_new_mentions', openMentionsModal, false)
+        if ($.Options.getShowDesktopNotifMentionsOpt() === 'enable') {
+            $.MAL.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t('new_mentions', _newMentions)+'.', false,'twister_notification_new_mentions', $.Options.getShowDesktopNotifMentionsTimerOpt(), openMentionsModal, false)
+        }
     }
 
     // was moved here from requestDMsCount() because that is not ticking right
@@ -112,12 +114,14 @@ function requestMentionsCount() {
         if ( newDMs ) {
             $.MAL.soundNotifyDM();
 
-            showDesktopNotification(false, polyglot.t('You got')+' '+polyglot.t('new_direct_messages', newDMs)+'.', false, 'twister_notification_new_DMs', function() {
+            if ($.Options.getShowDesktopNotifDMsOpt() === 'enable') {
+                $.MAL.showDesktopNotif(false, polyglot.t('You got')+' '+polyglot.t('new_direct_messages', newDMs)+'.', false, 'twister_notification_new_DMs', $.Options.getShowDesktopNotifDMsTimerOpt(), function() {
                         window.location.hash = '#directmessages';
                     }, false)
             }
         }
     }
+}
 
 function resetMentionsCount() {
     _newMentions = 0;

options.html

@@ -67,10 +67,9 @@
       <div class="tab-content">
 
         <div class="language">
-
           <div class="module">
-            <p class="label"> Use language </p>
-            <div>
+            <p class="label label-h"> Use language </p>
+            <div class="container">
               <form action="" id="selectLanguage">
                 <select name="" id="language">
                   <option value="auto">Auto</option>
@@ -94,8 +93,8 @@
 
         <div class="theme">
           <div class="module">
-            <p class="label"> Theme </p>
-            <div>
+            <p class="label label-h"> Theme </p>
+            <div class="container">
               <form action="" id="selectTheme">
                 <select name="" id="theme">
                   <option value="original">Original</option>
@@ -112,12 +111,12 @@
 
         <div class="notifications">
           <div class="module">
-            <p class="label"> Sound notifications </p>
-            <div>
+            <p class="label label-h"> Sound notifications </p>
+            <div class="container">
               <form action="" id="notifyForm">
                 <div>
                   <p class="label">Mentions</p>
-                  <select name="" id="sndMention" class="sndOpt">
+                  <select name="" id="sndMention" class="sndOpt container">
                     <option value="false">none</option>
                     <option value="1">beat</option>
                     <option value="2">pip</option>
@@ -128,7 +127,7 @@
                 </div>
                 <div>
                   <p class="label">Direct Messages</p>
-                  <select name="" id="sndDM" class="sndOpt">
+                  <select name="" id="sndDM" class="sndOpt container">
                     <option value="false">none</option>
                     <option value="1">beat</option>
                     <option value="2">pip</option>
@@ -137,26 +136,77 @@
                     <option value="5">click</option>
                   </select>
                 </div>
-                <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
+                <div>
+                  <p class="label">Volume</p>
+                <input type="range" name="playerVol" id="playerVol" class="container" min="0" max="1" step="0.01"><span class="volValue container">0</span>
+                </div>
               </form>
               <audio id="player"></audio>
             </div>
           </div>
           <div class="module">
-            <p class="label"> Desktop notifications </p>
+            <p class="label label-h"> Desktop notifications </p>
+            <div class="container">
+              <form action="" id="optionsShowDesktopNotif">
+                <div>
+                  <p class="label">Mentions</p>
+                  <select id="showDesktopNotifMentions" class="container">
+                      <option value="enable">Enable</option>
+                      <option value="disable">Disable</option>
+                  </select>
+                  <div id="showDesktopNotifMentionsDesc" class="container">
+                    <input name="" id="showDesktopNotifMentionsTimer" maxlength="3" size="1"/> <span class="label">second(s)</span>
+                  </div>
+                </div>
                 <div>
-                <button id="notifications-desktop-test">Test</button>
+                  <p class="label">Direct Messages</p>
+                  <select id="showDesktopNotifDMs" class="container">
+                      <option value="enable">Enable</option>
+                      <option value="disable">Disable</option>
+                  </select>
+                  <div id="showDesktopNotifDMsDesc" class="container">
+                    <input name="" id="showDesktopNotifDMsTimer" maxlength="3" size="1"/> <span class="label">second(s)</span>
+                  </div>
+                </div>
+                <div>
+                  <p class="label">Posts</p>
+                  <div class="container">
+                    <span class="label">in postboard</span>
+                    <select id="showDesktopNotifPosts">
+                        <option value="enable">Enable</option>
+                        <option value="disable">Disable</option>
+                    </select>
+                    <div id="showDesktopNotifPostsDesc" class="container">
+                      <input name="" id="showDesktopNotifPostsTimer" maxlength="3" size="1"/> <span class="label">second(s)</span>
+                    </div>
+                  </div>
+                  <div class="container">
+                    <span class="label">in search result</span>
+                    <select id="showDesktopNotifPostsModal">
+                        <option value="enable">Enable</option>
+                        <option value="disable">Disable</option>
+                    </select>
+                    <div id="showDesktopNotifPostsModalDesc" class="container">
+                      <input name="" id="showDesktopNotifPostsModalTimer" maxlength="3" size="1"/> <span class="label">second(s)</span>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div class="container">
+                <p class="label">Test</p>
+                <button id="testDesktopNotif" class="container">notify_desktop_title</button>
             </div>
           </div>
         </div>
 
         <div class="keys">
           <div class="module">
-            <p class="label"> Keys </p>
-            <div>
+            <p class="label label-h"> Keys </p>
+            <div class="container">
               <form action="" id="keysOpt">
                 <p class="label">Send key</p>
-                <select name="" id="keysSend">
+                <select name="" id="keysSend" class="container">
                   <option value="enter">Enter</option>
                   <option value="ctrlenter">Ctrl/Cmd+Enter</option>
                 </select>
@@ -167,119 +217,117 @@
 
         <div class="postboard-display">
           <div class="module">
-            <p class="label"> Postboard displays </p>
-            <div>
+            <p class="label label-h"> Postboard displays </p>
+            <div class="container">
               <form action="" id="hideRepliesOpt">
                 <p class="label">Posts that begin with mention</p>
-                <select name="" id="hideReplies">
+                <select name="" id="hideReplies" class="container">
                   <option value="disable">Show all</option>
                   <option value="only-me">Show only if I am in</option>
                   <option value="following">Show if it's between users I follow</option>
                 </select>
               </form>
             </div>
-            <div>
+            <div class="container">
               <form action="" id="hideCloseRTsOpt">
                 <p class="label">RTs those are close to original twist</p>
-                <select name="" id="hideCloseRTs">
+                <select name="" id="hideCloseRTs" class="container">
                   <option value="disable">Show all</option>
                   <option value="show-if">Show if the original is older than</option>
                 </select>
-                <div id="hideCloseRTsDesc">
-                  <input name="" id="hideCloseRtsHour" maxlength="2" size="3"/> <span class="label">hour(s)</span>
-                </div>
+                <p id="hideCloseRTsDesc">
+                  <input name="" id="hideCloseRtsHour" class="container" maxlength="2" size="1"/> <span class="label">hour(s)</span>
+                </p>
               </form>
             </div>
           </div>
           <div class="module">
-            <p class="label"> Posts display </p>
-            <div>
+            <p class="label label-h"> Posts display </p>
+            <div class="container">
               <form action="" id="lineFeedsOpt">
                 <p class="label">Line feeds</p>
-                <select name="" id="displayLineFeeds">
+                <select name="" id="displayLineFeeds" class="container">
                   <option value="disable">Ignore</option>
                   <option value="enable">Display</option>
                 </select>
               </form>
             </div>
-            <div>
+            <div class="container">
               <form action="" id="showPreviewOpt">
                 <p class="label">Inline image preview</p>
-              <select name="" id="displayPreview">
+                <select name="" id="displayPreview" class="container">
                   <option value="disable">Ignore</option>
                   <option value="enable">Display</option>
                 </select>
               </form>
             </div>
-          <div>
+            <div class="container">
               <form action="" id="useProxyOpt">
                 <p class="label">Use external links behind a proxy</p>
-              <select name="" id="useProxy">
+                <select name="" id="useProxy" class="container">
                   <option value="disable">none</option>
                   <option value="ssl-proxy-my-addr">ssl-proxy.my-addr.org</option>
                   <option value="anonymouse">anonymouse.org</option>
                 </select>
-              <input name="" id="useProxyForImgOnly" type="checkbox" /> <span class="label">Use proxy for image preview only</span>
+                <input name="" id="useProxyForImgOnly" class="container" type="checkbox" /> <span class="label">Use proxy for image preview only</span>
               </form>
             </div>
           </div>
+
         <div class="post-editor">
           <div class="module">
-            <p class="label"> Post editor</p>
-            <div>
+            <p class="label label-h"> Post editor </p>
+            <div class="container">
               <form action="" id="unicodeConversionOpt">
                 <p class="label">Automatic unicode conversion options</p>
-                <select name="" id="unicodeConversion">
+                <select name="" id="unicodeConversion" class="container">
                   <option value="disable">Ignore</option>
                   <option value="enable">Convert all</option>
                   <option value="custom">Custom</option>
                 </select>
                 <div class="suboptions unicode-suboptions">
                   <input name="" id="convertPunctuationsOpt" type="checkbox" /> <span class="label">Convert punctuations to unicode</span><br/>
-                  <div>
-                    <label class="label">Supported punctuations: </label>
+                  <div class="container">
+                    <label>Supported punctuations: </label>
                     <span>‥ … ⁇ ⁈ ⁉ ‼ — ⁓</span>
                   </div> 
                   <input name="" id="convertEmotionsOpt" type="checkbox" /> <span class="label">Convert emotions codes to unicode symbols</span>
-                  <div>
-                    <label class="label">Supported emotions: </label>
+                  <div class="container">
+                    <label>Supported emotions: </label>
                     <span>😃 😇 🍺 😈 ❤ 😕 😢 😞 😎 😊 😊 😗 😆 😛 😉 😉 😮 😱 😐</span>
                   </div>
                   <input name="" id="convertSignsOpt" type="checkbox" /> <span class="label">Convert common signs to unicode</span><br/>
-                  <div>
-                    <label class="label">Supported signs:</label>
+                  <div class="container">
+                    <label>Supported signs:</label>
                     <span>℡ ℻</span>
                   </div>
                   <input name="" id="convertFractionsOpt" type="checkbox" /> <span class="label">Convert fractions to unicode</span><br/>
-                  <div>
-                    <label class="label">Supported fractions:</label>
+                  <div class="container">
+                    <label>Supported fractions:</label>
                     <span>½ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅐ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒</span>
                   </div>
                 </div>
               </form>
             </div>
-
-              <div>
+            <div class="container">
               <form action="" id="splitPostsOpt">
                 <p class="label">Split long posts</p>
-                <select name="" id="splitPosts">
+                <select name="" id="splitPosts" class="container">
                   <option value="disable">Don't split</option>
                   <option value="enable">Split all</option>
                   <option value="only-new">Split only new post</option>
                 </select>
               </form>
             </div>
-
-              <div>
+            <div class="container">
               <form action="" id="dmCopySelfOpt">
                 <p class="label">Direct Message's copy to self</p>
-                  <select name="" id="dmCopySelf">
+                <select name="" id="dmCopySelf" class="container">
                   <option value="disable">Disable</option>
                   <option value="enable">Enable</option>
                 </select>
               </form>
             </div>
-
           </div>
         </div>
         </div>
@@ -287,8 +335,8 @@
         <div class="users">
           <div class="module">
             <form action="" id="isFollowingMeOpt">
-              <p class="label">Show if a user follows me</p>
-              <select name="" id="isFollowingMe">
+              <p class="label label-h">Show if a user follows me</p>
+              <select name="" id="isFollowingMe" class="container">
                 <option value="in-profile">Show at profile modal only</option>
                 <option value="everywhere">Show with every user name</option>
               </select>

theme_calm/css/style.css

@@ -415,10 +415,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 .dashboard .module {
     border-radius: 6px;
 }
-.options .module {
-    margin: 5px;
-    padding: 5px;
-}
 .messages-qtd
 {
     position: absolute;
@@ -2226,24 +2222,35 @@ textarea.splited-post {
     left: 2px;
   }
 }
-/* Options */
-#playerVol {
-    float: right;
-    margin-right: 30px;
+
+/*************************************
+****************** OPTIONS ***********
+**************************************/
+
+.options .module
+{
+    margin: 5px;
+    padding: 15px;
 }
-.volValue {
-    float: right;
-    margin-right: -160px;
-    font: 12px "Open Sans", sans-serif;
+
+.options .container
+{
+    margin: 5px 0px 5px 10px;
 }
-.optionsPage .module h1 {
-    font-size: 14px;
-    margin-bottom: 5px;
+
+.options .label-h {
+  font-weight: 700;
 }
-.optionsPage .module h2 {
-    margin-top: 10px;
-    font-size: 12px;
+
+.options .module label {
+    font: 12px "Open Sans", sans-serif;
 }
+
+.volValue {
+    vertical-align: top;
+    font: 12px "Open Sans", sans-serif;
+}
+
 .suboptions {
     margin: 5px 30px;
     border: double 2px rgba( 69, 71, 77, .1 );
@@ -2255,6 +2262,7 @@ textarea.splited-post {
     -o-transition: height 1s linear;
     -ms-transition: height 1s linear;
 }
+
 /* Following page */
 .following ol.following-list > li{
     display: inline-block;
@@ -2293,11 +2301,6 @@ textarea.splited-post {
     float: right;
     vertical-align: middle;
 }
-.optionsPage .module label {
-    font: 12px "Open Sans", sans-serif;
-    display: block;
-    float: right;
-}
 
 /* Autocomplite*/
 .textcomplete-wrapper textarea {

theme_nin/css/style.css

@@ -1659,40 +1659,45 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
   position: relative;
 }
 /* line 4, ../sass/_tabs.sass */
-.options .label {
+.options .label-h {
   font-weight: 700;
 }
 /* line 7, ../sass/_tabs.sass */
 .options label {
   cursor: pointer;
 }
+/* line 14, ../sass/_tabs.sass */
+.options .container
+{
+    margin: 5px 0px 5px 10px;
+}
 /* line 9, ../sass/_tabs.sass */
 .options input[type=radio] {
   display: none !important;
   visibility: hidden;
   opacity: 0;
 }
-/* line 14, ../sass/_tabs.sass */
+/* line 17, ../sass/_tabs.sass */
 .options .postboard-display div {
   clear: both;
 }
-/* line 16, ../sass/_tabs.sass */
+/* line 19, ../sass/_tabs.sass */
 .options .postboard-display div div {
   float: left;
   clear: none;
   padding: 10px;
 }
-/* line 20, ../sass/_tabs.sass */
+/* line 23, ../sass/_tabs.sass */
 .options .postboard-display div div .label {
   font-weight: 400;
 }
-/* line 24, ../sass/_tabs.sass */
+/* line 27, ../sass/_tabs.sass */
 .options .tab-content {
   background: white;
   position: relative;
   padding: 20px;
 }
-/* line 29, ../sass/_tabs.sass */
+/* line 32, ../sass/_tabs.sass */
 .options .tab-content > div {
   position: absolute;
   top: 0;
@@ -1703,14 +1708,14 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
   opacity: 0;
   visibility: hidden;
 }
-/* line 39, ../sass/_tabs.sass */
+/* line 42, ../sass/_tabs.sass */
 .options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .postboard-display, .options input#t-6:checked ~ .tab-content .users {
   position: relative;
   z-index: 10;
   opacity: 1;
   visibility: visible;
 }
-/* line 50, ../sass/_tabs.sass */
+/* line 53, ../sass/_tabs.sass */
 .options label.tabs {
   text-align: center;
   width: auto;
@@ -1720,11 +1725,11 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
   color: #aaa;
   background: #f3f2f1;
 }
-/* line 51, ../sass/_tabs.sass */
+/* line 54, ../sass/_tabs.sass */
 .options label.tabs:hover {
   color: #66686B;
 }
-/* line 61, ../sass/_tabs.sass */
+/* line 64, ../sass/_tabs.sass */
 .options input:checked + label.tabs {
   background: white;
   color: #66686B;

theme_nin/sass/_tabs.sass

@@ -1,7 +1,7 @@
 .options
   position: relative
 
-  .label
+  .label-h
     font-weight: 700
 
   label
@@ -11,6 +11,9 @@
     visibility: hidden
     opacity: 0
 
+  .container
+    margin: 5px 0px 5px 10px
+
   .postboard-display div
     clear: both
     div