1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 07:39:43 +02:00

Applied new layout to space admin screens

Applied the new master layout and UI controls to the following space admin screens:

1. General options.
2. Deletion.
3. Permissions.
4. Content blocks.

Co-Authored-By: Harvey Kandola <harvey@documize.com>
This commit is contained in:
McMatts 2018-12-17 18:32:26 +00:00
parent d5b5e015d1
commit 60e92b63a9
15 changed files with 309 additions and 226 deletions

View file

@ -1,14 +1,21 @@
<div class="content-zone">
<div class="explainer-header explainer-gap">Content blocks provide re-usable content that can be inserted into any document</div>
{{#each blocks as |block|}}
<div class="mb-5">
<h1>{{block.title}}</h1>
<p>{{block.excerpt}}</p>
<button type="button" class="btn btn-outline-success" onclick={{action "onEdit" block.id}}>Edit</button>
<div class="button-gap" />
<button type="button" class="btn btn-outline-danger" onclick={{action "onShowDeleteDialog" block.id}}>Delete</button>
</div>
{{/each}}
{{layout/logo-heading
title="Content Blocks"
desc="Content blocks provide re-usable content that can be inserted into any document"
icon=constants.Icon.Blocks}}
<div class="space-admin">
<div class="blocks">
{{#each blocks as |block|}}
<div class="block">
<div class="name">{{block.title}}</div>
<div class="desc">{{block.excerpt}}</div>
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray tooltip="Edit block" onClick=(action "onEdit" block.id)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete block" onClick=(action "onShowDeleteDialog" block.id)}}
{{/ui/ui-toolbar}}
</div>
{{/each}}
</div>
</div>
{{#if isSpaceAdmin}}

View file

@ -1,11 +1,19 @@
<div class="content-zone">
<div class="explainer-header explainer-gap">Delete this space and all documents</div>
<form>
<div class="form-group">
<label>Please type space name to confirm</label>
{{focus-input id="delete-space-name" type="text" value=deleteSpaceName class="form-control mousetrap" placeholder="Space name" autocomplete="off"}}
<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
</div>
</form>
<button type="button" class="btn btn-danger mt-3" onclick={{action "onDelete"}}>Delete Space</button>
</div>
{{layout/logo-heading
title="Delete Space"
desc="Proceed with caution as there is no undo"
icon=constants.Icon.Delete}}
<form>
<div class="form-group">
<label>Please type space name to confirm</label>
{{focus-input id="delete-space-name" type="text" value=deleteSpaceName class="form-control mousetrap" placeholder="Space name" autocomplete="off"}}
<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
</div>
</form>
{{ui/ui-button
color=constants.Color.Red
icon=constants.Icon.Delete
label=constants.Label.Delete
light=true
onClick=(action 'onDelete')}}

View file

@ -1,31 +1,36 @@
<div class="content-zone">
<div class="explainer-header explainer-gap">General options for this space</div>
<form>
<div class="form-group">
<label>Space Name</label>
{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError "form-control is-invalid" "form-control") placeholder="Space name" autocomplete="off"}}
</div>
{{layout/logo-heading
title="General Options"
desc="Set options to control how people interact with this space"
icon=constants.Icon.Settings}}
<div class="form-group">
<label>Space Type</label>
{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
<small class="form-text text-muted">Who can see this space?</small>
</div>
<form>
<div class="form-group">
<label>Space Name</label>
{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError "form-control is-invalid" "form-control") placeholder="Space name" autocomplete="off"}}
</div>
<div class="form-group">
<label>Space Type</label>
{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
</div>
<div class="form-group">
<label>Enable Like/Dislike Feedback</label>
{{x-toggle value=allowLikes size="medium" theme="light" onToggle=(action (mut allowLikes))}}
</div>
{{#if allowLikes}}
<div class="form-group">
<label>Content Liking</label>
{{#if allowLikes}}
<label>Feedback Prompt</label>
{{input type="text" id="space-likes-prompt" class="form-control" placeholder="Enter prompt asking for user feedback" value=likes}}
<small class="form-text text-muted">Specify the prompt, e.g. Did this help you? Was this helpful? Did you find what you needed?</small>
<div class="mt-4">
<button type="button" class="btn btn-outline-danger" onclick={{action "onSetLikes" false}}>Do not allow users to like content</button>
</div>
{{else}}
<div>
<button type="button" class="btn btn-outline-success" onclick={{action "onSetLikes" true}}>Allow users to like content</button>
</div>
{{/if}}
</div>
</form>
<button type="button" class="btn btn-success mt-3" onclick={{action "onSave"}}>Save</button>
</div>
{{/if}}
</form>
{{ui/ui-button
color=constants.Color.Green
icon=constants.Icon.Settings
label=constants.Label.Save
light=true
onClick=(action 'onSave')}}

View file

@ -1,17 +1,76 @@
<div class="content-zone">
<div class="explainer-header">Who can see this space and perform actions</div>
</div>
{{layout/logo-heading
title="Space Permissions"
desc="Assign permissions to users or groups and invite new users to this space"
icon=constants.Icon.Locked}}
<div class="container-fluid my-3">
<div class="row justify-content-center">
<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowAddModal"}}>Add existing users</button>
&nbsp;&nbsp;
<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowInviteModal"}}>Invite new users</button>
<div class="view-customize">
<div class="explain-user-perms">
<div class="title" {{action "toggleSpacePerms"}}>
Space Permissions Explained
{{#if showSpacePermExplain}}
<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
{{else}}
<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
{{/if}}
</div>
<div class="perms space-perms">
<div class="perm-name">View</div>
<div class="perm-desc">See content within this space</div>
<div class="perm-name">Manage</div>
<div class="perm-desc">Manage all aspects of space except deletion</div>
<div class="perm-name">Owner</div>
<div class="perm-desc">Manage and delete space</div>
</div>
{{ui/ui-spacer size=200}}
<div class="title" {{action "toggleDocumentPerms"}}>
Document Permissions Explained
{{#if showDocumentPermExplain}}
<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
{{else}}
<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
{{/if}}
</div>
<div class="perms document-perms">
<div class="perm-name">Create</div>
<div class="perm-desc">Can create new documents in space</div>
<div class="perm-name">Edit</div>
<div class="perm-desc">Can change document contents</div>
<div class="perm-name">Delete</div>
<div class="perm-desc">Can remove documents from space</div>
<div class="perm-name">Move</div>
<div class="perm-desc">Can move documents from this space to another space</div>
<div class="perm-name">Copy</div>
<div class="perm-desc">Can duplicate documents</div>
<div class="perm-name">Templates</div>
<div class="perm-desc">Can create and publish document templates</div>
<div class="perm-name">Approval</div>
<div class="perm-desc">Can approve or reject document content changes</div>
<div class="perm-name">Lifecycle</div>
<div class="perm-desc">Can mark documents as Draft, Live and Archived</div>
<div class="perm-name">Versions</div>
<div class="perm-desc">Can create document version and link them together</div>
</div>
</div>
</div>
{{ui/ui-spacer size=300}}
<div class="text-center">
{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Person
label="Add Existing User"
onClick=(action "onShowAddModal")}}
{{ui/ui-button-gap}}
{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Plus
label="Invite New User"
onClick=(action "onShowInviteModal")}}
</div>
{{ui/ui-spacer size=300}}
<div class="space-admin table-responsive">
<table class="table table-hover permission-table mb-3">
<table class="table table-hover permission-table">
<thead>
<tr>
<th></th>
@ -88,36 +147,8 @@
</table>
</div>
<button type="button" class="btn btn-success bold-700 text-uppercase my-3" onclick={{action "onSave"}}>SAVE</button>
<div class="row my-3">
<div class="col-12 col-md-6">
<div class="content-zone">
<p class="explainer-text">Space permissions:</p>
<ul class="explainer-list">
<li>View &mdash; see content within this space</li>
<li>Manage &mdash; manage all aspects of space except deletion</li>
<li>Owner &mdash; manage and delete space</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6">
<div class="content-zone">
<p class="explainer-text">Document permissions:</p>
<ul class="explainer-list explainer-gap">
<li>Create &mdash; create new documents</li>
<li>Edit &mdash; edit documents</li>
<li>Delete &mdash; delete documents</li>
<li>Move &mdash; move content between documents</li>
<li>Copy &mdash; copy content between documents</li>
<li>Templates &mdash; create, edit, delete document templates and content blocks</li>
<li>Approval &mdash; approve or reject content changes</li>
<li>Lifecycle &mdash; mark documents as Draft, Live or Archived</li>
<li>Versions &mdash; create versions of documents (baselining)</li>
</ul>
</div>
</div>
</div>
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Locked
label=constants.Label.Save onClick=(action "onSave")}}
<div id="space-add-user-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
@ -135,7 +166,7 @@
{{/each}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
</div>
</div>
</div>
@ -160,8 +191,11 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" onclick={{action "onSpaceInvite"}}>Invite</button>
{{ui/ui-button color=constants.Color.Gray light=true
label=constants.Label.Close dismiss=true}}
{{ui/ui-button-gap}}
{{ui/ui-button color=constants.Color.Green light=true
label=constants.Label.Invite onClick=(action "onSpaceInvite")}}
</div>
</div>
</div>