Elastic skin support in acl plugin

plugins/acl/acl.js

@@ -245,7 +245,7 @@ rcube_webmail.prototype.acl_add_row = function(o, sel)
         if (cl == 'user')
             td.addClass(cl).append($('<a>').text(o.username));
         else
-            td.addClass(this.className + ' ' + rcmail.acl_class(o.acl, cl)).text('');
+            td.addClass(this.className + ' ' + rcmail.acl_class(o.acl, cl)).html('<span/>');
 
         $(this).replaceWith(td);
     });
@@ -350,7 +350,7 @@ rcube_webmail.prototype.acl_init_form = function(id)
         id ? this.get_label('acl.editperms') : this.get_label('acl.newuser'),
         buttons,
         {
-            button_classes: ['mainaction submit'],
+            button_classes: ['mainaction submit', 'cancel'],
             modal: true,
             closeOnEscape: true,
             close: function(e, ui) {

plugins/acl/acl.php

@@ -177,7 +177,7 @@ class acl extends rcube_plugin
         $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');
+        $this->include_stylesheet($this->local_skin_path() . '/acl.css', true);
 
         // add Info fieldset if it doesn't exist
         if (!isset($args['form']['props']['fieldsets']['info']))
@@ -318,8 +318,9 @@ class acl extends rcube_plugin
 
         $textfield = new html_inputfield($attrib);
 
-        $fields['user'] = html::label(array('for' => $attrib['id']), $this->gettext('username'))
-            . ' ' . $textfield->show();
+        $fields['user'] = html::div('input-group',
+            html::label(array('for' => $attrib['id'], 'class' => 'input-group-addon'), $this->gettext('username'))
+                . ' ' . $textfield->show());
 
         // Add special entries
         if (!empty($this->specials)) {
@@ -452,7 +453,7 @@ class acl extends rcube_plugin
                     case 1: $class = 'partial'; break;
                     default: $class = 'disabled'; break;
                 }
-                $table->add('acl' . $key . ' ' . $class, '');
+                $table->add('acl' . $key . ' ' . $class, '<span/>');
             }
 
             $js_table[$userid] = implode($userrights);

plugins/acl/localization/en_US.inc

@@ -20,6 +20,7 @@ $labels['sharing'] = 'Sharing';
 $labels['myrights'] = 'Access Rights';
 $labels['username'] = 'User:';
 $labels['advanced'] = 'Advanced mode';
+$labels['add'] = 'Add';
 $labels['newuser'] = 'Add entry';
 $labels['editperms'] = 'Edit permissions';
 $labels['actions'] = 'Access right actions...';

plugins/acl/skins/elastic/templates/table.html

@@ -0,0 +1,37 @@
+<div id="acllist-container" class="table-widget">
+	<div id="acllist-content" class="content">
+		<h2 class="voice" id="aria-label-acltable"><roundcube:label name="acl.ariasummaryacltable" /></h2>
+		<roundcube:object name="acltable" id="acltable" class="records-table options-table" aria-labelledby="aria-label-acltable" role="listbox" />
+	</div>
+	<div id="acllist-footer" class="footer toolbar">
+		<roundcube:button command="acl-create" type="link"
+			label="acl.add" title="acl.newuser"
+			class="button create disabled" classAct="button create" innerClass="inner" />
+		<roundcube:button name="aclmenulink" type="link"
+			label="actions" title="acl.actions" href="#acl-actions"
+			class="button actions" innerClass="inner" data-popup="acl-menu" />
+	</div>
+</div>
+
+<div id="acl-menu" class="popupmenu" aria-hidden="true" data-align="bottom">
+	<h3 id="aria-label-aclactions" class="voice"><roundcube:label name="acl.arialabelaclactions" /></h3>
+	<ul class="toolbarmenu listing iconized" role="menu" aria-labelledby="aria-label-aclactions">
+		<roundcube:button command="acl-edit" label="edit" type="link-menuitem" class="edit" classAct="edit active" />
+		<roundcube:button command="acl-delete" label="delete" type="link-menuitem" class="delete" classAct="delete active" />
+		<roundcube:if condition="!in_array('acl_advanced_mode', (array)config:dont_override)" />
+			<li role="menuitem" class="checkbox"><label id="acl-switch"><input type="checkbox" onchange="rcmail.command('acl-mode-switch')" /><roundcube:label name="acl.advanced" /></label></li>
+		<roundcube:endif />
+	</ul>
+</div>
+
+<div id="aclform" class="popupmenu propform" aria-labelledby="aria-label-aclform" role="form">
+	<h3 id="aria-label-aclform" class="voice"><roundcube:label name="acl.arialabelaclform" /></h3>
+	<div class="row form-group">
+		<label class="col-sm-4 col-form-label"><roundcube:label name="acl.identifier" /></label>
+		<roundcube:object name="acluser" id="acluser" class="proplist col-sm-8" />
+	</div>
+	<div class="row form-group">
+		<label class="col-sm-4 col-form-label"><roundcube:label name="acl.myrights" /></label>
+		<roundcube:object name="aclrights" class="proplist col-sm-8" />
+	</fieldset>
+</div>