From d4d7d0384a7fe0b52233e203f0b8e1d542d0bdca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=B4me=20Chilliet?= <come.chilliet@fusiondirectory.org>
Date: Tue, 20 Oct 2020 17:16:25 +0200
Subject: [PATCH] :sparkles: feat(acl) Move styling to CSS
Moved styling from HTML code to CSS for ACL edition template.
We should also look into using colors from the theme instead of hard
coded ones.
issue #6119
---
html/themes/breezy/less/style.less | 47 +++++
html/themes/breezy/plugin.css | 2 +-
html/themes/breezy/style.css | 42 +++++
plugins/admin/aclrole/acleditiondialog.tpl | 189 +++++++++++----------
4 files changed, 191 insertions(+), 89 deletions(-)
diff --git a/html/themes/breezy/less/style.less b/html/themes/breezy/less/style.less
index ca6a2dcfb..85aa32a7c 100644
--- a/html/themes/breezy/less/style.less
+++ b/html/themes/breezy/less/style.less
@@ -448,6 +448,53 @@ div.setup-header {
color: @text-color;
}
+/*** ACL edition ***/
+div.acledition {
+ div.togglebuttons input {
+ width:100px;
+ }
+ div.setbuttons input {
+ width:50px;
+ }
+ > table {
+ width:100%;
+ border:1px solid #A0A0A0;
+ border-spacing:0;
+ border-collapse:collapse;
+ > tbody > tr:nth-child(1) > td {
+ background-color:#C8C8C8;
+ height:1.8em;
+ }
+ &.expand > tbody > tr:nth-child(1) > td {
+ background-color:#C8C8FF;
+ }
+ > tbody > tr:nth-child(2) {
+ > td:nth-child(1) {
+ background-color:#E0E0E0;
+ }
+ > td:nth-child(2) {
+ background-color:#D4D4D4;
+ }
+ }
+ > tbody > tr:nth-child(3) {
+ vertical-align:top;
+ height:0px;
+ > td > div {
+ width:100%;
+ > table {
+ width:100%;
+ border-collapse: collapse;
+ border:1px solid;
+ > tbody > tr > td {
+ border:1px solid #A0A0A0;
+ width:33%;
+ }
+ }
+ }
+ }
+ }
+}
+
/* On small screens */
@media (max-width: 640px) {
div.setup-header {
diff --git a/html/themes/breezy/plugin.css b/html/themes/breezy/plugin.css
index 45c3a743a..12fd99b8e 100644
--- a/html/themes/breezy/plugin.css
+++ b/html/themes/breezy/plugin.css
@@ -17,7 +17,7 @@ div.pluginfo {
margin-bottom: 0;
vertical-align: middle;
background-color: #eff0f1;
- font-size: 11px;
+ font-size: 12px;
}
html.ltr div.pluginfo {
text-align: right;
diff --git a/html/themes/breezy/style.css b/html/themes/breezy/style.css
index e7e8e3e25..e9b6aafdb 100644
--- a/html/themes/breezy/style.css
+++ b/html/themes/breezy/style.css
@@ -423,6 +423,48 @@ div.setup-header {
padding: 4px 5px 4px;
color: #31363b;
}
+/*** ACL edition ***/
+div.acledition div.togglebuttons input {
+ width: 100px;
+}
+div.acledition div.setbuttons input {
+ width: 50px;
+}
+div.acledition > table {
+ width: 100%;
+ border: 1px solid #A0A0A0;
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+div.acledition > table > tbody > tr:nth-child(1) > td {
+ background-color: #C8C8C8;
+ height: 1.8em;
+}
+div.acledition > table.expand > tbody > tr:nth-child(1) > td {
+ background-color: #C8C8FF;
+}
+div.acledition > table > tbody > tr:nth-child(2) > td:nth-child(1) {
+ background-color: #E0E0E0;
+}
+div.acledition > table > tbody > tr:nth-child(2) > td:nth-child(2) {
+ background-color: #D4D4D4;
+}
+div.acledition > table > tbody > tr:nth-child(3) {
+ vertical-align: top;
+ height: 0px;
+}
+div.acledition > table > tbody > tr:nth-child(3) > td > div {
+ width: 100%;
+}
+div.acledition > table > tbody > tr:nth-child(3) > td > div > table {
+ width: 100%;
+ border-collapse: collapse;
+ border: 1px solid;
+}
+div.acledition > table > tbody > tr:nth-child(3) > td > div > table > tbody > tr > td {
+ border: 1px solid #A0A0A0;
+ width: 33%;
+}
/* On small screens */
@media (max-width: 640px) {
div.setup-header {
diff --git a/plugins/admin/aclrole/acleditiondialog.tpl b/plugins/admin/aclrole/acleditiondialog.tpl
index 1a336d83b..05b39bcd6 100644
--- a/plugins/admin/aclrole/acleditiondialog.tpl
+++ b/plugins/admin/aclrole/acleditiondialog.tpl
@@ -14,101 +14,114 @@
<input type="hidden" name="acl_dummy_0_0_0" value="1"/>
- <input style="width:100px;" type="button" name="toggle_all_create" onClick="acl_toggle_all('_0_c$');" value="Toggle C"/><input style="width:100px;" type="button" name="toggle_all_move" onClick="acl_toggle_all('_0_m$');" value="Toggle M"/><input style="width:100px;" type="button" name="toggle_all_remove" onClick="acl_toggle_all('_0_d$');" value="Toggle D"/>
- -
- <input style="width:100px;" type="button" name="toggle_all_read" onClick="acl_toggle_all('_0_r$');" value="Toggle R"/><input style="width:100px;" type="button" name="toggle_all_write" onClick="acl_toggle_all('_0_w$');" value="Toggle W"/>
- -
- <input style="width:100px;" type="button" name="toggle_all_sub_read" onClick="acl_toggle_all('[^0]_r$');" value="R+"/><input style="width:100px;" type="button" name="toggle_all_sub_write" onClick="acl_toggle_all('[^0]_w$');" value="W+"/>
+ <div class="acledition">
- <br/>
+ <div class="togglebuttons">
+ <input type="button" name="toggle_all_create" onClick="acl_toggle_all('_0_c$');" value="Toggle C"/>
+ <input type="button" name="toggle_all_move" onClick="acl_toggle_all('_0_m$');" value="Toggle M"/>
+ <input type="button" name="toggle_all_remove" onClick="acl_toggle_all('_0_d$');" value="Toggle D"/>
+ -
+ <input type="button" name="toggle_all_read" onClick="acl_toggle_all('_0_r$');" value="Toggle R"/>
+ <input type="button" name="toggle_all_write" onClick="acl_toggle_all('_0_w$');" value="Toggle W"/>
+ -
+ <input type="button" name="toggle_all_sub_read" onClick="acl_toggle_all('[^0]_r$');" value="R+"/>
+ <input type="button" name="toggle_all_sub_write" onClick="acl_toggle_all('[^0]_w$');" value="W+"/>
+ </div>
+ <div class="setbuttons">
+ <input type="button" name="set_true_all_create" onClick="acl_set_all('_0_c$',true);" value="C+"/><input type="button" name="set_false_all_create" onClick="acl_set_all('_0_c$',false);" value="C-"/>
+ <input type="button" name="set_true_all_move" onClick="acl_set_all('_0_m$',true);" value="M+"/><input type="button" name="set_false_all_move" onClick="acl_set_all('_0_m$',false);" value="M-"/>
+ <input type="button" name="set_true_all_remove" onClick="acl_set_all('_0_d$',true);" value="D+"/><input type="button" name="set_false_all_remove" onClick="acl_set_all('_0_d$',false);" value="D-"/>
+ -
+ <input type="button" name="set_true_all_read" onClick="acl_set_all('_0_r$',true);" value="R+"/><input type="button" name="set_false_all_read" onClick="acl_set_all('_0_r$',false);" value="R-"/>
+ <input type="button" name="set_true_all_write" onClick="acl_set_all('_0_w$',true);" value="W+"/><input type="button" name="set_false_all_write" onClick="acl_set_all('_0_w$',false);" value="W-"/>
+ -
+ <input type="button" name="set_true_all_read" onClick="acl_set_all('[^0]_r$',true);" value="R+"/><input type="button" name="set_false_all_read" onClick="acl_set_all('[^0]_r$',false);" value="R-"/>
+ <input type="button" name="set_true_all_write" onClick="acl_set_all('[^0]_w$',true);" value="W+"/><input type="button" name="set_false_all_write" onClick="acl_set_all('[^0]_w$',false);" value="W-"/>
+ </div>
- <input style="width:50px;" type="button" name="set_true_all_create" onClick="acl_set_all('_0_c$',true);" value="C+"/><input style="width:50px;" type="button" name="set_false_all_create" onClick="acl_set_all('_0_c$',false);" value="C-"/><input style="width:50px;" type="button" name="set_true_all_move" onClick="acl_set_all('_0_m$',true);" value="M+"/><input style="width:50px;" type="button" name="set_false_all_move" onClick="acl_set_all('_0_m$',false);" value="M-"/><input style="width:50px;" type="button" name="set_true_all_remove" onClick="acl_set_all('_0_d$',true);" value="D+"/><input style="width:50px;" type="button" name="set_false_all_remove" onClick="acl_set_all('_0_d$',false);" value="D-"/>
- -
- <input style="width:50px;" type="button" name="set_true_all_read" onClick="acl_set_all('_0_r$',true);" value="R+"/><input style="width:50px;" type="button" name="set_false_all_read" onClick="acl_set_all('_0_r$',false);" value="R-"/><input style="width:50px;" type="button" name="set_true_all_write" onClick="acl_set_all('_0_w$',true);" value="W+"/><input style="width:50px;" type="button" name="set_false_all_write" onClick="acl_set_all('_0_w$',false);" value="W-"/>
- -
- <input style="width:50px;" type="button" name="set_true_all_read" onClick="acl_set_all('[^0]_r$',true);" value="R+"/><input style="width:50px;" type="button" name="set_false_all_read" onClick="acl_set_all('[^0]_r$',false);" value="R-"/><input style="width:50px;" type="button" name="set_true_all_write" onClick="acl_set_all('[^0]_w$',true);" value="W+"/><input style="width:50px;" type="button" name="set_false_all_write" onClick="acl_set_all('[^0]_w$',false);" value="W-"/>
+ {foreach from=$aclObjects key=$key item=$infos}
+ <table {if $infos.expand}class="expand"{/if}>
+ <tbody>
+ <tr>
+ <td colspan="2">
+ <b>{t}Object{/t}: {$infos.name}</b>
+ </td>
+ <td align="right">
+ <input id="show{$infos.tname}" type="button" onclick="$('{$infos.tname}').toggle();" value="{t}Show/hide advanced settings{/t}"/>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ {makeCheckbox id={$infos.tname|cat:'_0_c'} label=_("Create objects") checked=preg_match('/c/', $infos.globalAcl)}
+ {makeCheckbox id={$infos.tname|cat:'_0_m'} label=_("Move objects") checked=preg_match('/m/', $infos.globalAcl)}
+ {makeCheckbox id={$infos.tname|cat:'_0_d'} label=_("Remove objects") checked=preg_match('/d/', $infos.globalAcl)}
+ {if $infos.self}
+ {makeCheckbox id={$infos.tname|cat:'_0_s'} label=_("Grant permission to owner") checked=preg_match('/s/', $infos.globalAcl)}
+ {/if}
+ </td>
+ <td>
+ {t}Complete object{/t}:
+ {makeCheckbox id={$infos.tname|cat:'_0_r'} label=_("read") checked=preg_match('/r/', $infos.globalAcl)}
+ {makeCheckbox id={$infos.tname|cat:'_0_w'} label=_("write") checked=preg_match('/w/', $infos.globalAcl)}
+ </td>
+ </tr>
+ <tr id="tr_{$infos.tname}">
+ <td colspan="3">
+ <div id="{$infos.tname}" style="display:none;">
+ <table>
+ <tbody>
+ {* Walk through the list of attributes *}
+ {$cnt = 1}
+ {foreach from=$infos.attrs key=$attr item=$dsc}
+ {* Skip pl* attributes, they are internal... *}
+ {if preg_match('/^pl[A-Z]+.*$/', $attr)}
+ continue;
+ {/if}
- {foreach from=$aclObjects key=$key item=$infos}
- {if $infos.expand}
- {$back_color = '#C8C8FF'}
- {else}
- {$back_color = '#C8C8C8'}
- {/if}
- <table style="width:100%;border:1px solid #A0A0A0;border-spacing:0;border-collapse:collapse;">
- <tr>
- <td style="background-color:{$back_color};height:1.8em;" colspan="2">
- <b>{t}Object{/t}: {$infos.name}</b>
- </td>
- <td align="right" style="background-color:{$back_color};height:1.8em;">
- <input id="show{$infos.tname}" type="button" onclick="$('{$infos.tname}').toggle();" value="{t}Show/hide advanced settings{/t}"/></td>
- </tr>
- <tr>
- <td style="background-color:#E0E0E0" colspan="2">
- {makeCheckbox id={$infos.tname|cat:'_0_c'} label=_("Create objects") checked=preg_match('/c/', $infos.globalAcl)}
- {makeCheckbox id={$infos.tname|cat:'_0_m'} label=_("Move objects") checked=preg_match('/m/', $infos.globalAcl)}
- {makeCheckbox id={$infos.tname|cat:'_0_d'} label=_("Remove objects") checked=preg_match('/d/', $infos.globalAcl)}
- {if $infos.self}
- {makeCheckbox id={$infos.tname|cat:'_0_s'} label=_("Grant permission to owner") checked=preg_match('/s/', $infos.globalAcl)}
- {/if}
- </td>
- <td style="background-color:#D4D4D4">
- {t}Complete object{/t}:
- {makeCheckbox id={$infos.tname|cat:'_0_r'} label=_("read") checked=preg_match('/r/', $infos.globalAcl)}
- {makeCheckbox id={$infos.tname|cat:'_0_w'} label=_("write") checked=preg_match('/w/', $infos.globalAcl)}
- </td>
- </tr>
- <tr id="tr_{$infos.tname}" style="vertical-align:top;height:0px;">
- <td colspan="3">
- <div id="{$infos.tname}" style="overflow:hidden; display:none;vertical-align:top;width:100%;">
- <table style="width:100%;border-collapse: collapse;" border="1">
- {* Walk through the list of attributes *}
- {$cnt = 1}
- {foreach from=$infos.attrs key=$attr item=$dsc}
- {* Skip pl* attributes, they are internal... *}
- {if preg_match('/^pl[A-Z]+.*$/', $attr)}
- continue;
- {/if}
+ {* Open table row *}
+ {if ($cnt == 1)}
+ <tr>
+ {/if}
- {* Open table row *}
- {if ($cnt == 1)}
- <tr>
- {/if}
+ {* Collect list of attributes *}
+ {$state = ''}
+ {if isset($infos.acl[$attr])}
+ {$state = $infos.acl[$attr]}
+ {/if}
+ <td>
+ <b>{$dsc}</b> ({$attr})<br/>
+ {$rchecked = preg_match('/r/', $state)}
+ {$wchecked = preg_match('/w/', $state)}
- {* Collect list of attributes *}
- {$state = ''}
- {if isset($infos.acl[$attr])}
- {$state = $infos.acl[$attr]}
- {/if}
- <td style="border:1px solid #A0A0A0;width:33%">
- <b>{$dsc}</b> ({$attr})<br/>
- {$rchecked = preg_match('/r/', $state)}
- {$wchecked = preg_match('/w/', $state)}
+ <input id="acl_{$infos.tname}_{$attr}_r" type="checkbox" name="acl_{$key}_{$attr}_r"{if $rchecked} checked="checked"{/if}/>
+ <label for="acl_{$infos.tname}_{$attr}_r">{t}read{/t}</label>
+ <input id="acl_{$infos.tname}_{$attr}_w" type="checkbox" name="acl_{$key}_{$attr}_w"{if $wchecked} checked="checked"{/if}/>
+ <label for="acl_{$infos.tname}_{$attr}_w">{t}write{/t}</label>
+ </td>
- <input id="acl_{$infos.tname}_{$attr}_r" type="checkbox" name="acl_{$key}_{$attr}_r"{if $rchecked} checked="checked"{/if}/>
- <label for="acl_{$infos.tname}_{$attr}_r">{t}read{/t}</label>
- <input id="acl_{$infos.tname}_{$attr}_w" type="checkbox" name="acl_{$key}_{$attr}_w"{if $wchecked} checked="checked"{/if}/>
- <label for="acl_{$infos.tname}_{$attr}_w">{t}write{/t}</label>
- </td>
+ {* Close table row *}
+ {if ($cnt == 3)}
+ {$cnt = 1}
+ </tr>
+ {else}
+ {$cnt = $cnt+1}
+ {/if}
+ {/foreach}
+ {* Fill missing td's if needed *}
+ {while (($cnt == 3) || ($cnt == 2))}
+ <td> </td>
+ {$cnt = $cnt+1}
+ {/while}
+ </tbody>
+ </table>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table><br/>
+ {/foreach}
- {* Close table row *}
- {if ($cnt == 3)}
- {$cnt = 1}
- </tr>
- {else}
- {$cnt = $cnt+1}
- {/if}
- {/foreach}
- {* Fill missing td's if needed *}
- {while (($cnt == 3) || ($cnt == 2))}
- <td style="border:1px solid #A0A0A0;width:33%"> </td>
- {$cnt = $cnt+1}
- {/while}
- </table>
- </div>
- </td>
- </tr>
- </table><br/>
- {/foreach}
+ </div>
<p class="plugbottom">
<input type="submit" name="submit_edit_acl" value="{msgPool type=applyButton}"/>
--
GitLab