From 33a8d845c12a9a6394a5fb8fa8edd851126e19e2 Mon Sep 17 00:00:00 2001 From: Treer Date: Wed, 4 May 2016 23:55:32 +1000 Subject: Refine permissions dialog UI --- view/js/acl.js | 37 ++++++++++++++++++++----- view/theme/redbasic/css/style.css | 57 ++++++++++++++++++++++++++++++++++----- view/tpl/acl_selector.tpl | 27 +++++++++++++++---- 3 files changed, 104 insertions(+), 17 deletions(-) (limited to 'view') diff --git a/view/js/acl.js b/view/js/acl.js index be215fc91..162ada764 100644 --- a/view/js/acl.js +++ b/view/js/acl.js @@ -14,8 +14,9 @@ function ACL(backend_url, preset) { that.nw = 4; //items per row. should be calulated from #acl-list.width that.list_content = $("#acl-list-content"); - that.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html()); - that.showall = $("#acl-showall"); + that.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html()); + that.showall = $("#acl-showall"); + that.showlimited = $("#acl-showlimited"); // set the initial ACL lists in case the enclosing form gets submitted before the ajax loader completes. that.on_submit(); @@ -26,6 +27,7 @@ function ACL(backend_url, preset) { $(document).ready(function() { that.showall.click(that.on_showall); + that.showlimited.click(that.on_showlimited); $(document).on('click','.acl-button-show',that.on_button_show); $(document).on('click','.acl-button-hide',that.on_button_hide); $("#acl-search").keypress(that.on_search); @@ -71,7 +73,8 @@ ACL.prototype.on_search = function(event) { }; ACL.prototype.on_showall = function(event) { - event.preventDefault(); + + // preventDefault() isn't called here as we want state changes from update_view() to be applied to the radiobutton event.stopPropagation(); if (that.showall.hasClass("btn-warning")) { @@ -87,9 +90,17 @@ ACL.prototype.on_showall = function(event) { that.update_view(); that.on_submit(); - return false; + return true; // return true so that state changes from update_view() will be applied }; +ACL.prototype.on_showlimited = function(event) { + // Prevent the radiobutton from being selected, as the showlimited radiobutton + // option is selected only by selecting show or hide options on channels or groups. + event.preventDefault(); + event.stopPropagation(); + return false; +} + ACL.prototype.on_selectall = function(event) { event.preventDefault(); event.stopPropagation(); @@ -188,18 +199,32 @@ ACL.prototype.set_deny = function(itemid) { that.update_view(); }; +ACL.prototype.update_radiobuttons = function(isPublic) { + + that.showall.prop('checked', isPublic); + that.showlimited.prop('checked', !isPublic); + that.showlimited.prop('disabled', isPublic); +}; + ACL.prototype.update_view = function() { if (that.allow_gid.length === 0 && that.allow_cid.length === 0 && that.deny_gid.length === 0 && that.deny_cid.length === 0) { + // btn-warning indicates that the permissions are public, it was chosen because + // that.showall used to be a normal button, which btn-warning is a bootstrap style for. that.showall.removeClass("btn-default").addClass("btn-warning"); + that.update_radiobuttons(true); + /* jot acl */ - $('#jot-perms-icon').removeClass('fa-lock').addClass('fa-unlock'); + $('#jot-perms-icon, #dialog-perms-icon').removeClass('fa-lock').addClass('fa-unlock'); $('#jot-public').show(); $('.profile-jot-net input').attr('disabled', false); + } else { that.showall.removeClass("btn-warning").addClass("btn-default"); + that.update_radiobuttons(false); + /* jot acl */ - $('#jot-perms-icon').removeClass('fa-unlock').addClass('fa-lock'); + $('#jot-perms-icon, #dialog-perms-icon').removeClass('fa-unlock').addClass('fa-lock'); $('#jot-public').hide(); $('.profile-jot-net input').attr('disabled', 'disabled'); diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 58f216029..4dd3488e5 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -912,19 +912,43 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover { clear: both; } +.modal-header .contextual-help-tool { + /* Mostly duplicating ".modal-header .close" and ".close" layout settings from bootstrap */ + float: right; + font-size: 21px; + padding: 0; + margin-top: -4px; + margin-right: 15px; + line-height: 1; +} + #acl-search { - margin-top: 20px; - padding: 8px; + padding: 4px; border: 1px solid #ccc; - width: 100%; + width: 90%; /* fallback if browser does not support calc() */ + width: calc(100% - 10px); + margin: 0px 0px 10px 10px; } #acl-search::-webkit-input-placeholder { - font-family: FontAwesome; + /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ + font-family: FontAwesome, sans-serif, arial, freesans; } #acl-search::-moz-placeholder { - font-family: FontAwesome; + /* non-fontawesome fonts set a fallback for text parts of the placeholder*/ + font-family: FontAwesome, sans-serif, arial, freesans; +} + +#acl-dialog-description { + font-size: 90%; + color: #888; +} +#acl-showlimited-description { + font-size: 90%; + color: #888; + margin-left: 10px; + margin-bottom: 4px; } #acl-list { @@ -933,11 +957,11 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover { overflow: auto; clear: both; min-height: 62px; - margin-top: 20px; padding: 10px 10px 0px 0px; -webkit-border-radius: $radiuspx ; -moz-border-radius: $radiuspx; border-radius: $radiuspx; + background-color: rgb(238,238,238); } #jotnets-wrapper, #jotnets-collapse { @@ -957,6 +981,7 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover { -webkit-border-radius: $radiuspx ; -moz-border-radius: $radiuspx; border-radius: $radiuspx; + background-color: white; } .acl-list-item.grouphide { @@ -995,6 +1020,26 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover { margin-left: 5px; } +#acl-showlimited-caption, +#acl-showall-caption { + font-size: 115%; +} + +#acl-radiowrapper-showall { + margin-bottom: 20px; +} +#acl-radiowrapper-showlimited { + margin-bottom: 0; +} + +#acl-showall + i { + font-size: 140%; +} + +#acl-showall-caption { + margin-left: 0.35em; +} + .contact-block-content { margin-top: 10px; } diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl index e57fdba12..49d90cd3e 100755 --- a/view/tpl/acl_selector.tpl +++ b/view/tpl/acl_selector.tpl @@ -3,9 +3,13 @@
-

{{$aclModalTitle}}

+ {{if $helpUrl}} + + {{/if}} +

{{$aclModalTitle}}

+
{{$aclModalDesc}}
{{if $jotnets}} {{/if}}
- - -
-
+
+ +
+
+ +
+ +
{{$showlimitedDesc}}
+
+
+
-- cgit v1.2.3 From e1e56936c971bee54f58664df3aa58796a71ead4 Mon Sep 17 00:00:00 2001 From: Treer Date: Thu, 5 May 2016 02:09:47 +1000 Subject: add help to some permissions dialogs --- view/theme/redbasic/css/style.css | 10 ++++++++++ view/tpl/acl_selector.tpl | 6 ++++-- 2 files changed, 14 insertions(+), 2 deletions(-) (limited to 'view') diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 4dd3488e5..48d93025b 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -940,10 +940,19 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover { font-family: FontAwesome, sans-serif, arial, freesans; } +#aclModal .modal-body { + padding-top: 10px; +} + #acl-dialog-description { font-size: 90%; color: #888; + padding-bottom: 4px; +} +#acl-dialog-description b { + color: black; } + #acl-showlimited-description { font-size: 90%; color: #888; @@ -1026,6 +1035,7 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover { } #acl-radiowrapper-showall { + margin-top: 20px; margin-bottom: 20px; } #acl-radiowrapper-showlimited { diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl index 49d90cd3e..a3fe73d0c 100755 --- a/view/tpl/acl_selector.tpl +++ b/view/tpl/acl_selector.tpl @@ -4,12 +4,14 @@
{{if $helpUrl}} - + {{/if}}

{{$aclModalTitle}}

-
{{$aclModalDesc}}
+ {{if $aclModalDesc}} +
{{$aclModalDesc}}
+ {{/if}} {{if $jotnets}}