Use standard dialog popups for the ACL permissions form; that will open it in the main window with enoough space and better UI integration

7 files changed, 41 insertions, 36 deletions

diff --git a/plugins/acl/acl.js b/plugins/acl/acl.js
index aa4293f02..0ee45d735 100644
--- a/plugins/acl/acl.js
+++ b/plugins/acl/acl.js
@@ -11,9 +11,11 @@ if (window.rcmail) {
             rcmail.acl_list_init();
             // enable autocomplete on user input
             if (rcmail.env.acl_users_source) {
-                rcmail.init_address_input_events($('#acluser'), {action:'settings/plugin.acl-autocomplete'});
+                var inst = rcmail.is_framed() ? parent.rcmail : rcmail;
+                inst.init_address_input_events($('#acluser'), {action:'settings/plugin.acl-autocomplete'});
+
                 // fix inserted value
-                rcmail.addEventListener('autocomplete_insert', function(e) {
+                inst.addEventListener('autocomplete_insert', function(e) {
                     if (e.field.id != 'acluser')
                         return;
 
@@ -64,14 +66,14 @@ rcube_webmail.prototype.acl_delete = function()
 // Save ACL data
 rcube_webmail.prototype.acl_save = function()
 {
-    var user = $('#acluser').val(), rights = '', type;
+    var user = $('#acluser', this.acl_form).val(), rights = '', type;
 
-    $(':checkbox', this.env.acl_advanced ? $('#advancedrights') : sim_ul = $('#simplerights')).map(function() {
+    $((this.env.acl_advanced ? '#advancedrights :checkbox' : '#simplerights :checkbox'), this.acl_form).map(function() {
         if (this.checked)
             rights += this.value;
     });
 
-    if (type = $('input:checked[name=usertype]').val()) {
+    if (type = $('input:checked[name=usertype]', this.acl_form).val()) {
         if (type != 'user')
             user = type;
     }
@@ -97,7 +99,7 @@ rcube_webmail.prototype.acl_save = function()
 rcube_webmail.prototype.acl_cancel = function()
 {
     this.ksearch_blur();
-    this.acl_form.hide();
+    this.acl_popup.dialog('close');
 }
 
 // Update data after save (and hide form)
@@ -115,7 +117,7 @@ rcube_webmail.prototype.acl_update = function(o)
     // hide autocomplete popup
     this.ksearch_blur();
     // hide form
-    this.acl_form.hide();
+    this.acl_popup.dialog('close');
 }
 
 // Switch table display mode
@@ -302,7 +304,6 @@ rcube_webmail.prototype.acl_init_form = function(id)
     if (id && (row = this.acl_list.rows[id])) {
         row = row.obj;
         li_elements.map(function() {
-            val = this.value;
             td = $('td.'+this.id, row);
             if (td.length && td.hasClass('enabled'))
                 this.checked = true;
@@ -314,22 +315,37 @@ rcube_webmail.prototype.acl_init_form = function(id)
             type = id;
     }
     // mark read (lrs) rights by default
-    else
+    else {
         li_elements.filter(function() { return this.id.match(/^acl([lrs]|read)$/); }).prop('checked', true);
+    }
 
     name_input.val(val);
     $('input[value='+type+']').prop('checked', true);
 
     this.acl_id = id;
 
-    // position the form horizontally
-    var bw = body.width(), mw = this.acl_form.width();
+    var me = this, inst = window.rcmail, body = document.body;
+    var buttons = {};
+    buttons[rcmail.gettext('save')] = function(e) { inst.command('acl-save'); };
+    buttons[rcmail.gettext('cancel')] = function(e) { inst.command('acl-cancel'); };
+
+    // display it as popup
+    this.acl_popup = rcmail.show_popup_dialog(
+        '<div style="width:480px;height:280px">&nbsp;</div>',
+        id ? rcmail.gettext('acl.editperms') : rcmail.gettext('acl.newuser'),
+        buttons,
+        {
+            modal: true,
+            closeOnEscape: false,
+            close: function(e, ui) {
+                me.acl_form.appendTo(body).hide();
+                $(this).remove();
+            }
+        }
+    );
 
-    if (bw >= mw)
-        this.acl_form.css({left: parseInt((bw - mw)/2)+'px'});
+    this.acl_form.appendTo(this.acl_popup).show();
 
-    // display it
-    this.acl_form.show();
     if (type == 'user')
         name_input.focus();
 
diff --git a/plugins/acl/acl.php b/plugins/acl/acl.php
index a840bcd58..681ef0ee9 100644
--- a/plugins/acl/acl.php
+++ b/plugins/acl/acl.php
@@ -150,7 +150,8 @@ class acl extends rcube_plugin
         $this->load_config();
         $this->specials = $this->rc->config->get('acl_specials', $this->specials);
         $this->add_texts('localization/', array('deleteconfirm', 'norights',
-            'nouser', 'deleting', 'saving'));
+            'nouser', 'deleting', 'saving', 'newuser', 'editperms'));
+        $this->rc->output->add_label('save', 'cancel');
         $this->include_script('acl.js');
         $this->rc->output->include_script('list.js');
         $this->include_stylesheet($this->local_skin_path().'/acl.css');
@@ -307,7 +308,7 @@ class acl extends rcube_plugin
                     . $val);
             }
 
-            $out = html::tag('ul', array('id' => 'usertype'), $ul, html::$common_attrib);
+            $out = html::tag('ul', array('id' => 'usertype', 'class' => $attrib['class']), $ul, html::$common_attrib);
         }
         // Display text input alone
         else {
diff --git a/plugins/acl/localization/en_US.inc b/plugins/acl/localization/en_US.inc
index 2ddd7e103..ce665768a 100644
--- a/plugins/acl/localization/en_US.inc
+++ b/plugins/acl/localization/en_US.inc
@@ -21,6 +21,7 @@ $labels['myrights'] = 'Access Rights';
 $labels['username'] = 'User:';
 $labels['advanced'] = 'Advanced mode';
 $labels['newuser'] = 'Add entry';
+$labels['editperms'] = 'Edit permissions';
 $labels['actions'] = 'Access right actions...';
 $labels['anyone'] = 'All users (anyone)';
 $labels['anonymous'] = 'Guests (anonymous)';
diff --git a/plugins/acl/skins/classic/acl.css b/plugins/acl/skins/classic/acl.css
index cf3391f49..e95e3b341 100644
--- a/plugins/acl/skins/classic/acl.css
+++ b/plugins/acl/skins/classic/acl.css
@@ -87,9 +87,7 @@
 
 #aclform
 {
-  top: 80px;
-  width: 480px;
-  padding: 10px;
+  display: none;
 }
 
 #aclform div
diff --git a/plugins/acl/skins/classic/templates/table.html b/plugins/acl/skins/classic/templates/table.html
index bca63d0b3..5c4d2d8a0 100644
--- a/plugins/acl/skins/classic/templates/table.html
+++ b/plugins/acl/skins/classic/templates/table.html
@@ -24,17 +24,13 @@
     </ul>
 </div>
 
-<div id="aclform" class="popupmenu">
+<div id="aclform" style="position:absolute; width:480px; top:0; left:0; padding:10px">
     <fieldset class="thinbordered"><legend><roundcube:label name="acl.identifier" /></legend>
         <roundcube:object name="acluser" class="toolbarmenu" id="acluser" size="35" />
     </fieldset>
     <fieldset class="thinbordered"><legend><roundcube:label name="acl.myrights" /></legend>
         <roundcube:object name="aclrights" class="toolbarmenu" />
     </fieldset>
-    <div>
-        <roundcube:button command="acl-cancel" type="input" class="button" label="cancel" />
-        <roundcube:button command="acl-save" type="input" class="button mainaction" label="save" />
-    </div>
 </div>
 
 <script type="text/javascript">
diff --git a/plugins/acl/skins/larry/acl.css b/plugins/acl/skins/larry/acl.css
index d010db0df..b16369907 100644
--- a/plugins/acl/skins/larry/acl.css
+++ b/plugins/acl/skins/larry/acl.css
@@ -104,10 +104,7 @@
 
 #aclform
 {
-  top: 80px;
-  width: 480px;
-  padding: 10px;
-  background-color: white;
+  display: none;
 }
 
 #aclform div
diff --git a/plugins/acl/skins/larry/templates/table.html b/plugins/acl/skins/larry/templates/table.html
index e48aad14b..c0b8329c6 100644
--- a/plugins/acl/skins/larry/templates/table.html
+++ b/plugins/acl/skins/larry/templates/table.html
@@ -17,15 +17,11 @@
     </ul>
 </div>
 
-<div id="aclform" class="popupmenu propform">
+<div id="aclform" class="propform" style="position:absolute; width:480px; top:0; left:0; padding:8px">
     <fieldset class="thinbordered"><legend><roundcube:label name="acl.identifier" /></legend>
-        <roundcube:object name="acluser" id="acluser" size="35" />
+        <roundcube:object name="acluser" id="acluser" size="35" class="proplist" />
     </fieldset>
     <fieldset class="thinbordered"><legend><roundcube:label name="acl.myrights" /></legend>
-        <roundcube:object name="aclrights" />
+        <roundcube:object name="aclrights" class="proplist" />
     </fieldset>
-    <div class="formbuttons">
-        <roundcube:button command="acl-cancel" type="input" class="button" label="cancel" />
-        <roundcube:button command="acl-save" type="input" class="button mainaction" label="save" />
-    </div>
 </div>