diff options
Diffstat (limited to 'Pages/Component')
| -rw-r--r-- | Pages/Component/AclDialog.razor | 57 | ||||
| -rw-r--r-- | Pages/Component/AclDialog.razor.css | 30 | ||||
| -rw-r--r-- | Pages/Component/Dialog.razor | 14 | ||||
| -rw-r--r-- | Pages/Component/Switch.razor.css | 8 |
4 files changed, 79 insertions, 30 deletions
diff --git a/Pages/Component/AclDialog.razor b/Pages/Component/AclDialog.razor index 8116f04..87fbd6e 100644 --- a/Pages/Component/AclDialog.razor +++ b/Pages/Component/AclDialog.razor @@ -2,35 +2,46 @@ @inject IDbContextFactory<HBContext> dbFactory; @implements IDialog -<Dialog Title="Edit permissions" @ref=dialog> - @if(obj?.Acl is not null) { - <table class="data-table"> - <tr> - <th>Action</th> - <th>Subject</th> - <th>Permissions</th> - <th></th> - </tr> - @foreach(var rule in obj.Acl.Rules.OrderByDescending(r => r.Action)) { - <tr> - <td><div><AclActionSwitch InitialValue=@(rule.Action == AclRuleAction.Allow)/></div></td> - <td>@rule.Principal.ToString()</td> - <td>@GetActivePermissions(rule)</td> - <td> - <a title="Edit" href="javascript:;">🖉</a> - <a title="Delete" href="javascript:;">✖</a> - </td> - </tr> +<Dialog WidthPixels=900 Title="Edit permissions" @ref=dialog> + <div class="container"> + <div> + @if(obj?.Acl is not null) { + <table class="data-table"> + <tr> + <th>Action</th> + <th>Subject</th> + <th colspan="2">Permissions</th> + </tr> + @foreach(var rule in obj.Acl.Rules.OrderByDescending(r => r.Action)) { + <tr> + <td><div><AclActionSwitch InitialValue=@(rule.Action == AclRuleAction.Allow)/></div></td> + <td> + <a class="nondecorated" href="javascript:;">@(WellKnownSid.TranslateSid(rule.Principal) ?? rule.Principal.ToString())</a> + </td> + <td>@GetActivePermissions(rule)</td> + <td> + <a title="Edit" href="javascript:;">🖉</a> + <a title="Delete" href="javascript:;">✖</a> + </td> + </tr> + } + </table> + <br/> + <center><a href="javascript:;">Add new</a></center> + } else { + <center><i>This item does not have any permissions set!</i></center> } - </table> - <br/> - <center><a href="javascript:;">Add new</a></center> + </div> + <div> + <p><i>Click Edit next to an ACL to edit it's permissions</i></p> + </div> + </div> + @if(obj?.Acl is not null) { <ButtonContainer> <button class="secondary" @onclick=Hide>Cancel</button> <button data-keyboard-shortcut="a" @onclick=Hide><u>A</u>pply</button> </ButtonContainer> } else { - <center><i>This item does not have any permissions set!</i></center> <ButtonContainer> <button class="secondary" @onclick=Hide>Cancel</button> </ButtonContainer> diff --git a/Pages/Component/AclDialog.razor.css b/Pages/Component/AclDialog.razor.css index f1b7931..b98cc6d 100644 --- a/Pages/Component/AclDialog.razor.css +++ b/Pages/Component/AclDialog.razor.css @@ -1,4 +1,28 @@ -table p { +div.container { + display: flex; + flex-direction: row; +} + +div.container > div { + width: 50%; +} + +div.container > div:first-child { + border-right: 1px solid white; + padding-right: 15px; +} + +div.container > div:last-child { + padding-left: 15px; + height: stretch; +} + +div.container > div:last-child p { + vertical-align: middle; + text-align: center; +} + +table p { margin: 8px 0 8px 0; } @@ -17,6 +41,10 @@ table td:last-child { font-size: 12pt; } +table td:nth-last-child(2) { + border-right: none !important; +} + table tr:nth-child(2n+1) td:not(:first-child) { background: rgba(255, 255, 255, 0.1); } diff --git a/Pages/Component/Dialog.razor b/Pages/Component/Dialog.razor index 673ec2f..8e8ddca 100644 --- a/Pages/Component/Dialog.razor +++ b/Pages/Component/Dialog.razor @@ -4,7 +4,7 @@ <div class="dialog" onmousedown="dialogMouseDown(event)" - style="opacity:0;visibility:hidden;@(heightStyle)" + style="opacity:0;visibility:hidden;@(sizeStyle)" @ref=dialogDiv> @if(Title is not null) { <div class="titlebar" onmousedown="dialogTitleMouseDown(event)"> @@ -25,6 +25,8 @@ public RenderFragment ChildContent { get; set; } [Parameter] + public int WidthPixels { set => width = $"{value}px"; } + [Parameter] public int HeightPixels { set => height = $"{value}px"; } [Parameter] public int HeightPercent { set => height = $"{value}%"; } @@ -41,6 +43,7 @@ private bool visible = false; + private string? width; private string? height; private ElementReference dialogDiv; @@ -53,7 +56,7 @@ await jsRuntime.InvokeVoidAsync("dialogAddObjectReference", new object[] { dialogDiv, DotNetObjectReference.Create(this) - }); + }); } } @@ -65,6 +68,11 @@ } } + private string sizeStyle => widthStyle + heightStyle; + + private string widthStyle => + $"{(width is null ? "" : $"width:{width};")}"; + private string heightStyle => - $"{(height is null ? "" : $"max-height:{height};")}"; + $"{(height is null ? "" : $"max-height:{height};")}"; } diff --git a/Pages/Component/Switch.razor.css b/Pages/Component/Switch.razor.css index 6b1f5d5..4c2d3a5 100644 --- a/Pages/Component/Switch.razor.css +++ b/Pages/Component/Switch.razor.css @@ -11,9 +11,11 @@ div.switch-inner { background: var(--col-switch-fg); border-radius: 20px; - height: 20px; + height: 18px; transition: margin-left 0.1s linear; - width: 20px; + width: 18px; + margin-top: 1px; + margin-left: 1px; } input:checked + div.switch-outer { @@ -21,5 +23,5 @@ input:checked + div.switch-outer { } input:checked + div.switch-outer > div.switch-inner { - margin-left: 20px; + margin-left: 21px; } |