mirror of
https://github.com/documize/community.git
synced 2025-07-20 13:49:42 +02:00
revised form styling
This commit is contained in:
Harvey Kandola
parent
671a76ac55
commit
c09e23a0da
12 changed files with 200 additions and 203 deletions
|
|
@ -1,45 +1,43 @@
|
|||
<div class="global-folder-settings">
|
||||
<div class="input-form form-borderless">
|
||||
<form>
|
||||
<div class="heading">
|
||||
<div class="title">{{folders.length}} shared {{label}}</div>
|
||||
<div class="tip">View and change shared space ownership</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<table class="basic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bordered">Space</th>
|
||||
<th class="bordered">Participants</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each folders as |folder|}}
|
||||
<tr>
|
||||
<td class="bordered">
|
||||
{{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
|
||||
</td>
|
||||
<td class="bordered">
|
||||
{{#each folder.sharedWith as |person|}}
|
||||
{{#if person.isEveryone}}
|
||||
Everyone
|
||||
{{else}}
|
||||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">{{folders.length}} shared {{label}}</div>
|
||||
<div class="tip">View and change shared space ownership</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<table class="basic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bordered">Space</th>
|
||||
<th class="bordered">Participants</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each folders as |folder|}}
|
||||
<tr>
|
||||
<td class="bordered">
|
||||
{{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
|
||||
</td>
|
||||
<td class="bordered">
|
||||
{{#each folder.sharedWith as |person|}}
|
||||
{{#if person.isEveryone}}
|
||||
Everyone
|
||||
{{else}}
|
||||
|
||||
{{#if person.isOwner}}
|
||||
<span class="bold">{{person.firstname}} {{person.lastname}} (owner)</span>
|
||||
{{else}}
|
||||
{{person.firstname}} {{person.lastname}}
|
||||
<a class="action-link" {{action "changeOwner" folder.id person.userId}}>make owner</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<br/>
|
||||
{{/each}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
{{#if person.isOwner}}
|
||||
<span class="bold">{{person.firstname}} {{person.lastname}} (owner)</span>
|
||||
{{else}}
|
||||
{{person.firstname}} {{person.lastname}}
|
||||
<a class="action-link" {{action "changeOwner" folder.id person.userId}}>make owner</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<br/>
|
||||
{{/each}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
<div class="input-form form-borderless">
|
||||
{{general-settings model=model save=(action 'save')}}
|
||||
</div>
|
||||
{{general-settings model=model save=(action 'save')}}
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
<div class="input-form form-borderless">
|
||||
{{global-settings model=model save=(action 'save')}}
|
||||
</div>
|
||||
{{global-settings model=model save=(action 'save')}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<div class="input-form form-borderless">
|
||||
{{user-settings add=(action 'add')}}
|
||||
</div>
|
||||
{{user-settings add=(action 'add')}}
|
||||
|
||||
<div class="clearfix" />
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.input-control {
|
||||
position: relative;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
> label {
|
||||
color: $color-input;
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
> select,
|
||||
> div select {
|
||||
> div select,
|
||||
> select {
|
||||
background-color: $color-white;
|
||||
padding: 5px;
|
||||
border: 1px solid $color-input;
|
||||
|
|
@ -163,42 +163,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.input-form {
|
||||
border: 1px solid $color-border;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
background-color: $color-white;
|
||||
padding: 30px 50px;
|
||||
.form-bordered {
|
||||
padding: 30px 40px;
|
||||
border: 10px solid $color-border;
|
||||
@include border-radius(15px);
|
||||
|
||||
> .heading,
|
||||
> form .heading {
|
||||
> .form-header {
|
||||
> .title {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
font-family: $font-semibold;
|
||||
pointer-events: none;
|
||||
font-weight: bold;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
color: $color-input;
|
||||
font-size: 0.9em;
|
||||
font-size: 1.2rem;
|
||||
margin: 5px 0 30px;
|
||||
padding: 0;
|
||||
font-family: $font-light;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-bordered {
|
||||
padding: 30px 40px;
|
||||
border: 10px solid $color-border;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
|
||||
.form-borderless {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.form-divider {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Meta Information</div>
|
||||
<div class="tip">Name, owner, excerpt</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Owner</label>
|
||||
<div class="tip">Set the document owner</div>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,87 @@
|
|||
<div class="folder-settings">
|
||||
{{#if tabGeneral}}
|
||||
<div class="input-form form-borderless">
|
||||
<form>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
<div class="tip">Concise name helps everyone understand what this space contains</div>
|
||||
{{focus-input id="folderName" type="text" value=folder.name}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'rename' }}>save</div>
|
||||
</form>
|
||||
<div class="form-bordered">
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
<div class="tip">Concise name helps everyone understand what this space contains</div>
|
||||
{{focus-input id="folderName" type="text" value=folder.name}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'rename' }}>save</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if tabShare}}
|
||||
<div class="input-form form-borderless">
|
||||
<form>
|
||||
<div class="input-control">
|
||||
<label>Email</label>
|
||||
<div class="tip">Comma separate multiple email addresses</div>
|
||||
{{focus-input id="inviteEmail" type="text" value=inviteEmail}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Message</label>
|
||||
<div class="tip">Explain why they are being invited</div>
|
||||
{{textarea id="explainInvite" value=inviteMessage rows=3}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'share' }}>Share</div>
|
||||
</form>
|
||||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Invitations</div>
|
||||
<div class="tip">Invite people to this space</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Email</label>
|
||||
<div class="tip">Comma separate multiple email addresses</div>
|
||||
{{focus-input id="inviteEmail" type="text" value=inviteEmail}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Message</label>
|
||||
<div class="tip">Explain why they are being invited</div>
|
||||
{{textarea id="explainInvite" value=inviteMessage rows=3}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'share' }}>Share</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if tabDelete}}
|
||||
<div class="input-form form-borderless">
|
||||
<form>
|
||||
<div class="input-control">
|
||||
<label>Move then Delete</label>
|
||||
<div class="tip">Move existing documents to another space before you delete <strong>{{folder.name}}</strong></div>
|
||||
{{ui-select id="delete-target" content=folders action=(action (mut moveTarget)) prompt="Select destination"}}
|
||||
</div>
|
||||
<div class="regular-button button-red" {{ action 'remove' }}>delete</div>
|
||||
</form>
|
||||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Danger Here</div>
|
||||
<div class="tip">Before careful as there is no undo!</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Move before delete</label>
|
||||
<div class="tip">Move existing documents to another space before you delete <strong>{{folder.name}}</strong></div>
|
||||
{{ui-select id="delete-target" content=folders action=(action (mut moveTarget)) prompt="Select destination"}}
|
||||
</div>
|
||||
<div class="regular-button button-red" {{ action 'remove' }}>delete</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if tabPermissions}}
|
||||
<div class="input-form form-borderless">
|
||||
<form>
|
||||
<div class="input-control">
|
||||
<label>Permissions</label>
|
||||
<div class="tip">The message that gets sent to new invites for <strong>{{folder.name}}</strong></div>
|
||||
{{textarea id="explainRole" value=roleMessage rows=3}}
|
||||
</div>
|
||||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Permissions</div>
|
||||
<div class="tip">Decide who can see and edit within this space</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Permissions</label>
|
||||
<div class="tip">The message that gets sent to new invites for <strong>{{folder.name}}</strong></div>
|
||||
{{textarea id="explainRole" value=roleMessage rows=3}}
|
||||
</div>
|
||||
|
||||
<table class="basic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Can View</th>
|
||||
<th>Can Edit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each permissions key="@index" as |permission|}}
|
||||
<tr>
|
||||
<td>{{permission.fullname}}</td>
|
||||
<td>
|
||||
<input type="checkbox" id="canView-{{permission.userId}}" checked={{permission.canView}} />
|
||||
<label for="canView-{{permission.userId}}"> </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="canEdit-{{permission.userId}}" checked={{permission.canEdit}} />
|
||||
<label for="canEdit-{{permission.userId}}"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="regular-button button-blue" {{ action 'setPermissions' }}>Apply</div>
|
||||
</form>
|
||||
<table class="basic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Can View</th>
|
||||
<th>Can Edit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each permissions key="@index" as |permission|}}
|
||||
<tr>
|
||||
<td>{{permission.fullname}}</td>
|
||||
<td>
|
||||
<input type="checkbox" id="canView-{{permission.userId}}" checked={{permission.canView}} />
|
||||
<label for="canView-{{permission.userId}}"> </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="canEdit-{{permission.userId}}" checked={{permission.canEdit}} />
|
||||
<label for="canEdit-{{permission.userId}}"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="regular-button button-blue" {{ action 'setPermissions' }}>Apply</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<form>
|
||||
<div>
|
||||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Instance Settings</div>
|
||||
<div class="tip">Settings applicable to your Documize instance</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Title</label>
|
||||
<div class="tip">Describe the title of this Documize instance</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
<form>
|
||||
<div class="input-control">
|
||||
<label>Global Settings</label>
|
||||
<form class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Global Settings</div>
|
||||
<div class="tip">Settings applicable for all tenants</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Host</label>
|
||||
<div class="tip">e.g. my.host.com</div>
|
||||
{{focus-input id="smtp-host" type="text" value=model.global.host class=(if SMTPHostEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Port</label>
|
||||
<div class="tip">e.g. 587</div>
|
||||
{{input id="smtp-port" type="text" value=model.global.port class=(if SMTPPortEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Sender</label>
|
||||
<div class="tip">e.g. noreply@documize.com</div>
|
||||
{{input id="smtp-sender" type="text" value=model.global.sender class=(if SMTPSenderEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP User ID</label>
|
||||
<div class="tip">Your credentials</div>
|
||||
{{input id="smtp-userid" type="text" value=model.global.userid class=(if SMTPUserIdEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Password</label>
|
||||
<div class="tip">Your credentials</div>
|
||||
{{input id="smtp-password" type="text" value=model.global.password class=(if SMTPPasswordEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'save' }}>save</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Host</label>
|
||||
<div class="tip">e.g. my.host.com</div>
|
||||
{{focus-input id="smtp-host" type="text" value=model.global.host class=(if SMTPHostEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Port</label>
|
||||
<div class="tip">e.g. 587</div>
|
||||
{{input id="smtp-port" type="text" value=model.global.port class=(if SMTPPortEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Sender</label>
|
||||
<div class="tip">e.g. noreply@documize.com</div>
|
||||
{{input id="smtp-sender" type="text" value=model.global.sender class=(if SMTPSenderEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP User ID</label>
|
||||
<div class="tip">Your credentials</div>
|
||||
{{input id="smtp-userid" type="text" value=model.global.userid class=(if SMTPUserIdEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>SMTP Password</label>
|
||||
<div class="tip">Your credentials</div>
|
||||
{{input id="smtp-password" type="text" value=model.global.password class=(if SMTPPasswordEmptyError 'error')}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'save' }}>save</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<div class="user-list">
|
||||
<div class="heading">{{users.length}} users</div>
|
||||
<div class="user-list form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">User Management</div>
|
||||
<div class="tip">Set basic information, passwords and permissions for {{users.length}} users</div>
|
||||
</div>
|
||||
<table class="basic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,29 @@
|
|||
<div class="input-form form-borderless">
|
||||
<form>
|
||||
<div class="input-control">
|
||||
<label>Firstname</label>
|
||||
{{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Lastname</label>
|
||||
{{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Email</label>
|
||||
{{input id="email" type="text" value=model.email class=(if hasEmailError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Password</label>
|
||||
<div class="tip">Optional change your password</div>
|
||||
{{input id="password" type="password" value=password.password class=hasPasswordError}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Confirm Password</label>
|
||||
<div class="tip">Confirm your new password</div>
|
||||
{{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'save' }}>save</div>
|
||||
</form>
|
||||
<div class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">About You</div>
|
||||
<div class="tip">The basics...</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Firstname</label>
|
||||
{{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Lastname</label>
|
||||
{{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Email</label>
|
||||
{{input id="email" type="text" value=model.email class=(if hasEmailError 'error')}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Password</label>
|
||||
<div class="tip">Optional change your password</div>
|
||||
{{input id="password" type="password" value=password.password class=hasPasswordError}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Confirm Password</label>
|
||||
<div class="tip">Confirm your new password</div>
|
||||
{{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}}
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'save' }}>save</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<form>
|
||||
<div class="input-control">
|
||||
<label>Add User</label>
|
||||
<div class="tip">New users receive an invitation email with a random password</div>
|
||||
</div>
|
||||
<form class="form-bordered">
|
||||
<div class="form-header">
|
||||
<div class="title">Add user</div>
|
||||
<div class="tip">New users receive an invitation email with a random password</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Firstname</label>
|
||||
{{focus-input id="newUserFirstname" type="text" value=newUser.firstname class=(if hasFirstnameEmptyError 'error')}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue