mirror of
https://github.com/documize/community.git
synced 2025-07-23 15:19:42 +02:00
[WIP] space permissions UX
This commit is contained in:
parent
e10313b7cc
commit
1c08a7fbcf
8 changed files with 121 additions and 102 deletions
|
@ -109,11 +109,6 @@ export default Component.extend(NotifierMixin, {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.get('folderService').savePermissions(folder.get('id'), payload).then(() => {
|
|
||||||
this.showNotification('Saved permissions');
|
|
||||||
this.get('router').transitionTo('folder', folder.get('id'), folder.get('slug'));
|
|
||||||
});
|
|
||||||
|
|
||||||
if (is.not.undefined(hasEveryone)) {
|
if (is.not.undefined(hasEveryone)) {
|
||||||
folder.markAsPublic();
|
folder.markAsPublic();
|
||||||
this.showNotification('Marked space as public');
|
this.showNotification('Marked space as public');
|
||||||
|
@ -126,6 +121,12 @@ export default Component.extend(NotifierMixin, {
|
||||||
this.showNotification('Marked space as private');
|
this.showNotification('Marked space as private');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.get('folderService').savePermissions(folder.get('id'), payload).then(() => {
|
||||||
|
this.showNotification('Saved permissions');
|
||||||
|
$('#space-permission-modal').modal('hide');
|
||||||
|
$('#space-permission-modal').modal('dispose');
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -19,6 +19,7 @@ export default Component.extend({
|
||||||
title: 'Confirm',
|
title: 'Confirm',
|
||||||
show: false,
|
show: false,
|
||||||
buttonType: 'btn-secondary',
|
buttonType: 'btn-secondary',
|
||||||
|
size: '', // modal-lg, modal-sm
|
||||||
|
|
||||||
didInsertElement() {
|
didInsertElement() {
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
|
|
8
gui/app/styles/bootstrap.scss
vendored
8
gui/app/styles/bootstrap.scss
vendored
|
@ -98,5 +98,11 @@ $link-hover-decoration: none;
|
||||||
@import "node_modules/bootstrap/scss/utilities";
|
@import "node_modules/bootstrap/scss/utilities";
|
||||||
@import "node_modules/bootstrap/scss/popover";
|
@import "node_modules/bootstrap/scss/popover";
|
||||||
@import "node_modules/bootstrap/scss/tooltip";
|
@import "node_modules/bootstrap/scss/tooltip";
|
||||||
// @import "node_modules/bootstrap/scss/images";
|
@import "node_modules/bootstrap/scss/tables";
|
||||||
// @import "node_modules/bootstrap/scss/navbar";
|
// @import "node_modules/bootstrap/scss/navbar";
|
||||||
|
// @import "node_modules/bootstrap/scss/images";
|
||||||
|
|
||||||
|
|
||||||
|
.modal-80 {
|
||||||
|
max-width: 80% !important;
|
||||||
|
}
|
||||||
|
|
|
@ -1,48 +1,4 @@
|
||||||
.space-settings {
|
.space-settings {
|
||||||
> .panel {
|
|
||||||
@include content-container();
|
|
||||||
@include ease-in();
|
|
||||||
@extend .transition-all;
|
|
||||||
margin: 0 0 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissions-table {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 90%;
|
|
||||||
|
|
||||||
> .row {
|
|
||||||
padding: 8px 0;
|
|
||||||
|
|
||||||
> .permission-name-cell {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
background-color: $color-off-white;
|
|
||||||
padding: 10px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .permission-roles-cell {
|
|
||||||
margin: 15px 0 20px 40px;
|
|
||||||
|
|
||||||
> .role-container {
|
|
||||||
white-space: nowrap;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
> .role-category {
|
|
||||||
color: $color-gray;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> label {
|
|
||||||
color: $color-gray;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-table {
|
.category-table {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 0 0 20px;
|
margin: 0 0 0 20px;
|
||||||
|
|
|
@ -118,4 +118,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.space-admin {
|
||||||
|
> .permission-table {
|
||||||
|
// width: 100%;
|
||||||
|
// overflow-x: auto;
|
||||||
|
|
||||||
|
> tbody, > thead {
|
||||||
|
> tr, > th {
|
||||||
|
> td, > th {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> td:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> thead {
|
||||||
|
> tr {
|
||||||
|
> th {
|
||||||
|
background-color: $color-off-white;
|
||||||
|
color: $color-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
> th:first-child {
|
||||||
|
background-color: $color-white !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,49 +1,71 @@
|
||||||
<div class="space-settings">
|
<div id="space-permission-modal" class="modal" tabindex="-1" role="dialog">
|
||||||
<div class="panel">
|
<div class="modal-dialog modal-80">
|
||||||
<div class="form-header-sticky">
|
<div class="modal-content">
|
||||||
<div class="left-zone">
|
<div class="modal-header">Space Permissions</div>
|
||||||
<div class="title">Permissions</div>
|
<div class="modal-body" style="overflow-x: auto;">
|
||||||
<div class="tip">Define who can do what in this space</div>
|
|
||||||
|
<div class="space-admin">
|
||||||
|
<table class="table table-hover table-responsive permission-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th colspan="3">Spaces</th>
|
||||||
|
<th colspan="6" class="text-info">Documents</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>View</th>
|
||||||
|
<th>Manage</th>
|
||||||
|
<th>Owner</th>
|
||||||
|
<th class="text-info">Create</th>
|
||||||
|
<th class="text-info">Edit</th>
|
||||||
|
<th class="text-info">Delete</th>
|
||||||
|
<th class="text-info">Move</th>
|
||||||
|
<th class="text-info">Copy</th>
|
||||||
|
<th class="text-info">Templates</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{{#each permissions as |permission|}}
|
||||||
|
<tr>
|
||||||
|
<td>{{permission.fullname}} {{if (eq permission.userId session.user.id) '(you)'}}</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'space-role-view-' permission.userId) checked=permission.spaceView}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'space-role-manage-' permission.userId) checked=permission.spaceManage}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'space-role-owner-' permission.userId) checked=permission.spaceOwner}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'doc-role-add-' permission.userId) checked=permission.documentAdd}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'doc-role-edit-' permission.userId) checked=permission.documentEdit}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'doc-role-delete-' permission.userId) checked=permission.documentDelete}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'doc-role-move-' permission.userId) checked=permission.documentMove}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'doc-role-copy-' permission.userId) checked=permission.documentCopy}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{input type="checkbox" id=(concat 'doc-role-template-' permission.userId) checked=permission.documentTemplate}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right-zone">
|
<div class="modal-footer">
|
||||||
<div class="regular-button button-blue" {{action 'setPermissions'}}>GRANT</div>
|
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
|
||||||
</div>
|
<button type="button" class="btn btn-outline-success" onclick={{action 'setPermissions'}}>Save</button>
|
||||||
</div>
|
|
||||||
<div class="clearfix" />
|
|
||||||
<div class="input-control">
|
|
||||||
<div class="permissions-table">
|
|
||||||
{{#each permissions as |permission|}}
|
|
||||||
<div class="row">
|
|
||||||
<div class="permission-name-cell">{{permission.fullname}} {{if (eq permission.userId session.user.id) '(you)'}}</div>
|
|
||||||
<div class="permission-roles-cell">
|
|
||||||
<div class="role-container">
|
|
||||||
<span class="role-category">Space: </span>
|
|
||||||
{{input type="checkbox" id=(concat 'space-role-view-' permission.userId) checked=permission.spaceView}}
|
|
||||||
<label for="space-role-view-{{permission.userId}}">view</label>
|
|
||||||
{{input type="checkbox" id=(concat 'space-role-manage-' permission.userId) checked=permission.spaceManage}}
|
|
||||||
<label for="space-role-manage-{{permission.userId}}">manage</label>
|
|
||||||
{{input type="checkbox" id=(concat 'space-role-owner-' permission.userId) checked=permission.spaceOwner}}
|
|
||||||
<label for="space-role-owner-{{permission.userId}}">owner</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="role-container">
|
|
||||||
<span class="role-category">Document: </span>
|
|
||||||
{{input type="checkbox" id=(concat 'doc-role-add-' permission.userId) checked=permission.documentAdd}}
|
|
||||||
<label for="doc-role-add-{{permission.userId}}">create</label>
|
|
||||||
{{input type="checkbox" id=(concat 'doc-role-edit-' permission.userId) checked=permission.documentEdit}}
|
|
||||||
<label for="doc-role-edit-{{permission.userId}}">edit</label>
|
|
||||||
{{input type="checkbox" id=(concat 'doc-role-delete-' permission.userId) checked=permission.documentDelete}}
|
|
||||||
<label for="doc-role-delete-{{permission.userId}}">delete</label>
|
|
||||||
{{input type="checkbox" id=(concat 'doc-role-move-' permission.userId) checked=permission.documentMove}}
|
|
||||||
<label for="doc-role-move-{{permission.userId}}">move</label>
|
|
||||||
{{input type="checkbox" id=(concat 'doc-role-copy-' permission.userId) checked=permission.documentCopy}}
|
|
||||||
<label for="doc-role-copy-{{permission.userId}}">copy</label>
|
|
||||||
{{input type="checkbox" id=(concat 'doc-role-template-' permission.userId) checked=permission.documentTemplate}}
|
|
||||||
<label for="doc-role-template-{{permission.userId}}">templates</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,12 +16,10 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if spaceSettings}}
|
{{#if spaceSettings}}
|
||||||
{{#link-to 'folder.settings' space.id space.slug}}
|
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
|
||||||
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="User permissions">
|
<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
|
||||||
<i class="material-icons">security</i>
|
</div>
|
||||||
</div>
|
<div class="button-icon-gap" />
|
||||||
<div class="button-icon-gap" />
|
|
||||||
{{/link-to}}
|
|
||||||
|
|
||||||
<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
|
<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
|
||||||
<i class="material-icons" data-toggle="modal" data-target="#space-invite-modal" data-backdrop="static">person_add</i>
|
<i class="material-icons" data-toggle="modal" data-target="#space-invite-modal" data-backdrop="static">person_add</i>
|
||||||
|
@ -104,3 +102,5 @@
|
||||||
|
|
||||||
{{/toolbar/t-actions}}
|
{{/toolbar/t-actions}}
|
||||||
{{/toolbar/t-toolbar}}
|
{{/toolbar/t-toolbar}}
|
||||||
|
|
||||||
|
{{folder/permission-admin folders=spaces folder=space}}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div id="{{contentId}}" class="modal" tabindex="-1" role="dialog">
|
<div id="{{contentId}}" class="modal" tabindex="-1" role="dialog">
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog {{size}}" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">{{title}}</div>
|
<div class="modal-header">{{title}}</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue