liquid_feedback_frontend

diff app/main/member/settings_notification.lua @ 1485:2626155efb83

Updated notification settings view for better user experience
author bsw
date Wed Oct 31 12:21:44 2018 +0100 (2018-10-31)
parents 32cc544d5a5b
children 678c7146f27b
line diff
     1.1 --- a/app/main/member/settings_notification.lua	Mon Oct 29 14:35:37 2018 +0100
     1.2 +++ b/app/main/member/settings_notification.lua	Wed Oct 31 12:21:44 2018 +0100
     1.3 @@ -26,11 +26,10 @@
     1.4              }
     1.5            },
     1.6            content = function()
     1.7 -
     1.8 -          
     1.9 +            
    1.10              ui.container{ content = function()
    1.11                ui.tag{ tag = "label", attr = {
    1.12 -                  class = "mdl-radio mdl-js-radio mdl-js-ripple-effect",
    1.13 +                  class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect",
    1.14                    ["for"] = "notify_level_all"
    1.15                  },
    1.16                  content = function()
    1.17 @@ -38,13 +37,14 @@
    1.18                      tag = "input",
    1.19                      attr = {
    1.20                        id = "notify_level_all",
    1.21 -                      class = "mdl-radio__button",
    1.22 -                      type = "radio", name = "disable_notifications", value = "false",
    1.23 +                      class = "mdl-checkbox__input",
    1.24 +                      type = "checkbox", name = "enable_notifications", value = "true",
    1.25                        checked = not app.session.member.disable_notifications and "checked" or nil,
    1.26 +                      onchange = [[ display = document.getElementById("view_on_notify_level_all_false").style.display = this.checked ? "block" : "none"; ]]
    1.27                      }
    1.28                    }
    1.29                    ui.tag{
    1.30 -                    attr = { class = "mdl-radio__label", ['for'] = "notify_level_all" },
    1.31 +                    attr = { class = "mdl-checkbox__label", ['for'] = "notify_level_all" },
    1.32                      content = _"I like to receive notifications"
    1.33                    }
    1.34                  end
    1.35 @@ -52,14 +52,14 @@
    1.36              end }
    1.37              
    1.38              
    1.39 -            ui.container{ attr = { class = "view_on_notify_level_all_false", style = "margin-left: 3em;" }, content = function()
    1.40 +            ui.container{ attr = { id = "view_on_notify_level_all_false" }, content = function()
    1.41                slot.put("<br />")
    1.42              
    1.43                ui.container{ content = _"You will receive status update notification on issue phase changes. Additionally you can subscribe for a regular digest including updates on initiative drafts and new suggestions." }
    1.44                slot.put("<br />")
    1.45                ui.container{ content = function()
    1.46                  ui.tag{ tag = "label", attr = {
    1.47 -                    class = "mdl-radio mdl-js-radio mdl-js-ripple-effect",
    1.48 +                    class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect",
    1.49                      ["for"] = "digest_on"
    1.50                    },
    1.51                    content = function()
    1.52 @@ -67,20 +67,21 @@
    1.53                        tag = "input", 
    1.54                        attr = {
    1.55                          id = "digest_on",
    1.56 -                        class = "mdl-radio__button",
    1.57 -                        type = "radio", name = "digest", value = "true",
    1.58 -                        checked = (app.session.member.disable_notifications or app.session.member.notification_hour ~= nil) and "checked" or nil,
    1.59 +                        class = "mdl-checkbox__input",
    1.60 +                        type = "checkbox", name = "digest", value = "true",
    1.61 +                        checked = app.session.member.notification_hour ~= nil and "checked" or nil,
    1.62 +                        onchange = [[ display = document.getElementById("view_on_digest_true").style.display = this.checked ? "block" : "none"; ]]
    1.63                        }
    1.64                      }
    1.65                      ui.tag{
    1.66 -                      attr = { class = "mdl-radio__label", ['for'] = "digest_on" },
    1.67 +                      attr = { class = "mdl-checkbox__label", ['for'] = "digest_on" },
    1.68                        content = _"I want to receive a regular digest"
    1.69                      }
    1.70                    end
    1.71                  }
    1.72                end }
    1.73            
    1.74 -              ui.container{ attr = { class = "view_on_digest_true", style = "margin-left: 4em;" }, content = function()
    1.75 +              ui.container{ attr = { id = "view_on_digest_true", style = "margin-left: 4em;" }, content = function()
    1.76  
    1.77                  ui.tag{ content = _"every" }
    1.78                  slot.put(" ")
    1.79 @@ -128,56 +129,19 @@
    1.80                    value = random_hour or app.session.member.notification_hour
    1.81                  }
    1.82                end }
    1.83 -              
    1.84 -              ui.container{ content = function()
    1.85 -                ui.tag{ tag = "label", attr = {
    1.86 -                    class = "mdl-radio mdl-js-radio mdl-js-ripple-effect",
    1.87 -                    ["for"] = "digest_off"
    1.88 -                  },
    1.89 -                  content = function()
    1.90 -                    ui.tag{
    1.91 -                      tag = "input", 
    1.92 -                      attr = {
    1.93 -                        id = "digest_off",
    1.94 -                        class = "mdl-radio__button",
    1.95 -                        type = "radio", name = "digest", value = "false",
    1.96 -                        checked = not app.session.member.disable_notifications and app.session.member.notification_dow == nil and app.session.member.notification_hour == nil and "checked" or nil,
    1.97 -                      }
    1.98 -                    }
    1.99 -                    ui.tag{
   1.100 -                      tag = "label", attr = { class = "mdl-radio__label", ['for'] = "digest_off" },
   1.101 -                      content = _"don't send me a digest"
   1.102 -                    }
   1.103 -                  end
   1.104 -                }
   1.105 -              end }
   1.106 +
   1.107              end }
   1.108              
   1.109              slot.put("<br />")
   1.110              
   1.111 -            ui.container{ content = function()
   1.112 -              ui.tag{ tag = "label", attr = {
   1.113 -                  class = "mdl-radio mdl-js-radio mdl-js-ripple-effect",
   1.114 -                  ["for"] = "notify_level_none"
   1.115 -                },
   1.116 -                content = function()
   1.117 -                  ui.tag{
   1.118 -                    tag = "input", 
   1.119 -                    attr = {
   1.120 -                      id = "notify_level_none",
   1.121 -                      class = "mdl-radio__button",
   1.122 -                      type = "radio", name = "disable_notifications", value = "true",
   1.123 -                      checked = app.session.member.disable_notifications and "checked" or nil
   1.124 -                    }
   1.125 -                  }
   1.126 -                  ui.tag{
   1.127 -                    attr = { class = "mdl-radio__label", ['for'] = "notify_level_none" },
   1.128 -                    content = _"don't send me notifications by email"
   1.129 -                  }
   1.130 -                end
   1.131 -              }
   1.132 -            end }
   1.133 +            if app.session.member.disable_notifications then
   1.134 +              ui.script{ script = [[ document.getElementById("view_on_notify_level_all_false").style.display = "none"; ]] }
   1.135 +            end
   1.136              
   1.137 +            if app.session.member.notification_hour == nil  then
   1.138 +              ui.script{ script = [[ document.getElementById("view_on_digest_true").style.display = "none"; ]] }
   1.139 +            end
   1.140 +   
   1.141              slot.put("<br />")
   1.142            
   1.143              ui.tag{

Impressum / About Us