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{