This is an automated email from the ASF dual-hosted git repository. humbedooh pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-ponymail-foal.git
commit 44efe36244152b09042d84fec95859c1d1b9b9d3 Author: Daniel Gruno <[email protected]> AuthorDate: Sun Nov 21 03:11:58 2021 +0100 Refactor preferences area --- webui/css/scaffolding.css | 94 ++++++++++++++++++++++-------------------- webui/js/source/preferences.js | 46 +++++++++++++++++---- webui/list.html | 59 +++++++++++++------------- webui/thread.html | 46 +++++++++++++-------- 4 files changed, 146 insertions(+), 99 deletions(-) diff --git a/webui/css/scaffolding.css b/webui/css/scaffolding.css index db94647..466caed 100644 --- a/webui/css/scaffolding.css +++ b/webui/css/scaffolding.css @@ -644,64 +644,70 @@ a.dropdown-toggle { margin-top: -16px; margin-left: 39px; } - #userprefs { - width: 100px; - position: absolute; - right: 18px; - top: 0px; - } #project_select_form { display: none; } - #prefs #login { - width:64px; + +} + +#display_options_dropdown, #login_dropdown { + z-index: 10; + background-color: white; +} + +#preferences_ul { + width: 160px; + position: absolute; + right: 16px; + top: 12px; + z-index: 9; + display: inline; + list-style: none; + margin: 0; +} + +#preferences_ul li{ display: inline; - margin-top: -20px !important; - } - - #threading_mobile { - margin-top: -4px !important; - } - } -#userprefs { +#preferences_ul > li > a > img { + margin-top: -5px; +} + +#preferences_ul li a { + display: inline !important; +} + +#preferences_ul .dropdown-menu { position: absolute; - right: 18px; - top: 0px; + margin-top: 10px; + left: auto; + right: 0; +} + +#display_options_dropdown { + width: 380px; + z-index: 12; +} + +.navbar-default { + height: 48px; +} + +@media only screen and (max-width: 440px) { + #preferences_ul #display_options_dropdown { + width: 300px; + } } @media only screen and (max-width: 860px) { .navbar-brand { display: none; } - #userprefs { - width: 100px; - z-index: 9; - } .dropdown-toggle { height: 40px; } - #prefs ul li { - display: none; - } - - #prefs ul li#login { - display: inline-block; - margin-top: -10px; - } - #prefs ul #prefs_dropdown li { - display: inline-block; - background: #FFC; - color: #333; - } - - #threading_mobile { - display: inline !important; - float: right; - margin-top: 4px; - } - + } @media only screen and (max-width: 1200px) { @@ -1054,7 +1060,7 @@ a.chatty_title { font-size: 2.8rem; margin-top: 12px; width: 32px; - height: 27px; + height: 26px; margin-right: 10px; background-image: url(../images/sr_off.png); background-size: contain; @@ -1301,4 +1307,4 @@ pre { padding: 6px; padding-top: 14px; font-weight: lighter; -} \ No newline at end of file +} diff --git a/webui/js/source/preferences.js b/webui/js/source/preferences.js index 4cef1ea..a309b0c 100644 --- a/webui/js/source/preferences.js +++ b/webui/js/source/preferences.js @@ -34,14 +34,38 @@ function init_preferences(state, json) { } } - // color some links - let cl = document.getElementById('chatty_link'); + // Set chatty/plain email rendering mode: + let cl = document.getElementById('chatty_link'); // legacy button if (cl) { cl.setAttribute("class", G_chatty_layout ? "enabled" : "disabled"); } + let cle = document.getElementById('email_mode_chatty'); + if (cle) { + cle.checked = G_chatty_layout; + } + let cld = document.getElementById('email_mode_plain'); + if (cld) { + cld.checked = !G_chatty_layout; + } + + // Set list display mode: + let dmt = document.getElementById('display_mode_threaded'); + if (dmt) { + dmt.checked = (G_current_listmode == 'threaded'); + } + let dmf = document.getElementById('display_mode_flat'); + if (dmf) { + dmf.checked = (G_current_listmode == 'flat'); + } + let dmtr = document.getElementById('display_mode_treeview'); + if (dmtr) { + dmtr.checked = (G_current_listmode == 'treeview'); + } + + if (G_ponymail_preferences.login && G_ponymail_preferences.login.credentials) { - let prefsmenu = document.getElementById('prefs_dropdown'); + let prefsmenu = document.getElementById('login_dropdown') || document.getElementById('prefs_dropdown'); let uimg = document.getElementById('uimg'); uimg.setAttribute("src", "images/user.png"); uimg.setAttribute("title", "Logged in as %s".format(G_ponymail_preferences.login.credentials.fullname)); @@ -57,7 +81,7 @@ function init_preferences(state, json) { prefsmenu.inject(li); } else { - let prefsmenu = document.getElementById('prefs_dropdown'); + let prefsmenu = document.getElementById('login_dropdown') || document.getElementById('prefs_dropdown'); if (prefsmenu) { prefsmenu.innerHTML = ""; let login = new HTML('a', { @@ -112,7 +136,11 @@ function set_theme(theme) { } function set_skin(skin) { - G_chatty_layout = !G_chatty_layout; + if (typeof(enable_chatty) === "boolean") { + G_chatty_layout = enable_chatty; + } else { + G_chatty_layout = !G_chatty_layout; + } let cl = document.getElementById('chatty_link'); if (cl) { cl.setAttribute("class", G_chatty_layout ? "enabled" : "disabled"); @@ -123,8 +151,12 @@ function set_skin(skin) { } // set_skin, but for permalinks -function set_skin_permalink(skin) { - G_chatty_layout = !G_chatty_layout; +function set_skin_permalink(enable_chatty) { + if (typeof(enable_chatty) === "boolean") { + G_chatty_layout = enable_chatty; + } else { + G_chatty_layout = !G_chatty_layout; + } let cl = document.getElementById('chatty_link'); if (cl) { cl.setAttribute("class", G_chatty_layout ? "enabled" : "disabled"); diff --git a/webui/list.html b/webui/list.html index 573477d..f6bbc21 100644 --- a/webui/list.html +++ b/webui/list.html @@ -84,43 +84,42 @@ the License. --> <form id="project_select_form"> <select style="float: left; margin-top: 12px; display: none;" id="project_select" onchange='switch_project(this.value);'></select> </form> - - <div id="prefs" style="float: left;"> - - - <ul class="nav navbar-nav" id="userprefs" style="position: absolute; right: 18px;"> + + <!-- User preferences and display options --> + <div id="preferences"> + <ul class="nav" id="preferences_ul"> <li class="dropdown navbar-right"> - <!-- themes --> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img id="timg" src="images/themes.png" alt="Themes logo" style="width: 32px;" title="Theme selector"/> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <img src="images/cog.png" alt="Display Settings" style="width: 32px;" title="Display Settings "/> <span class="caret"></span> </a> - <ul class="dropdown-menu" id="themes_dropdown"> - <li><a href="javascript:void(0)" onclick="set_theme('threaded')">Threaded view</a></li> - <li><a href="javascript:void(0)" onclick="set_theme('flat')">Flat view</a></li> - <li><a href="javascript:void(0)" onclick="set_theme('treeview')">Tree view</a></li> - <!-- <li><a href="api/static.lua/" onclick="location.href='/api/static.lua/' + current_list + '@' + current_domain;return false;">Static HTML lists</a></li> --> - </ul> + <div class="dropdown-menu" id="display_options_dropdown"> + <div style="width: 45%; display: inline-block; float: left; border-radius: 5px; border: 0.75px solid #3339; margin: 1%; padding: 1%;"> + <b>List display mode:</b><hr/> + <input type="radio" id="display_mode_threaded" name="ui_threading" value="threaded" onchange="set_theme('threaded');"><label for="display_mode_threaded">Threaded view</label><br/> + <input type="radio" id="display_mode_flat" name="ui_threading" value="threaded" onchange="set_theme('flat');"><label for="display_mode_flat">Flat view</label><br/> + <input type="radio" id="display_mode_treeview" name="ui_threading" value="threaded" onchange="set_theme('treeview');"><label for="display_mode_treeview">Treeview</label><br/> + + </div> + <div style="width: 45%; display: inline-block; float: right; border-radius: 5px; border: 1px solid #3339; margin: 1%; padding: 1%;"> + <b>Email display mode:</b><hr/> + <input type="radio" id="email_mode_chatty" name="ui_emailmode" value="chatty" onchange="set_skin(true);"><label for="email_mode_chatty">Modern rendering</label><br/> + <input type="radio" id="email_mode_plain" name="ui_emailmode" value="plain" onchange="set_skin(false);"><label for="email_mode_plain">Legacy rendering</label><br/> + + </div> + + </div> </li> - <li id="threading_mobile" class="navbar-right" style="display: none;"> - <img onclick="set_theme( (current_listmode == 'threaded') ? 'flat' : 'threaded');" title="Enabl or disable threaded view" id="threaded_mobile_img" src="images/threading_disabled.png" alt="Threading disabled" style="width: 32px;"/> + + <li class="dropdown navbar-right" id="login"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img id="uimg" src="images/user_loggedout.png" alt="Logged out" style="width: 32px;" title="Not logged in"/> + <span class="caret"></span></a> + <ul class="dropdown-menu" id="login_dropdown"> + </ul> </li> - <li class="dropdown navbar-right" id="login"> - - <!-- user prefs --> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img id="uimg" src="images/user_loggedout.png" alt="Logged out" style="width: 32px; margin-top: -4px;" title="Not logged in"/> - <span class="caret"></span></a> - <ul class="dropdown-menu" id="prefs_dropdown"> - - </ul> - </li> - - - <li> - <div title="Enable/disable social rendering" onclick="set_skin('chatty');" id="chatty_link" > </div> - </li> </ul> - </div> + </div> </header> diff --git a/webui/thread.html b/webui/thread.html index af34500..ee59354 100644 --- a/webui/thread.html +++ b/webui/thread.html @@ -46,26 +46,36 @@ the License. --> <div class="navbar-header collapse navbar-collapse"> <a class="navbar-brand" href="./"><span><img src="images/logo.png" alt="Foal logo" style="margin-top: -10px !important;" height="30"/> </a> </div> - - - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="float: left;"> - - <ul class="nav navbar-nav" id="userprefs" style="position: absolute; right: 18px;"> - <li> - <div title="Enable/disable social rendering" onclick="set_skin_permalink('chatty');" id="chatty_link" > </div> - </li> - <li class="dropdown navbar-right" id="login"> - <!-- user prefs --> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img id="uimg" src="images/user_loggedout.png" alt="Logged out" style="width: 32px; margin-top: -4px;" title="Not logged in"/> - <span class="caret"></span></a> - <ul class="dropdown-menu" id="prefs_dropdown"> - </ul> - </li> - </ul> - - </div> + <!-- User preferences and display options --> + <div id="preferences"> + <ul class="nav" id="preferences_ul"> + <li class="dropdown navbar-right"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <img src="images/cog.png" alt="Display Settings" style="width: 32px;" title="Display Settings "/> + <span class="caret"></span> + </a> + <div class="dropdown-menu" id="display_options_dropdown"> + + <div style="width: 95%; display: inline-block; float: right; border-radius: 5px; border: 1px solid #3339; margin: 1%; padding: 1%;"> + <b>Email display mode:</b><hr/> + <input type="radio" id="email_mode_chatty" name="ui_emailmode" value="chatty" onchange="set_skin_permalink(true);"><label for="email_mode_chatty">Modern rendering</label><br/> + <input type="radio" id="email_mode_plain" name="ui_emailmode" value="plain" onchange="set_skin_permalink(false);"><label for="email_mode_plain">Legacy rendering</label><br/> + + </div> + + </div> + </li> + + <li class="dropdown navbar-right" id="login"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img id="uimg" src="images/user_loggedout.png" alt="Logged out" style="width: 32px;" title="Not logged in"/> + <span class="caret"></span></a> + <ul class="dropdown-menu" id="login_dropdown"> + </ul> + </li> + </ul> + </div> </div>
