Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-20 05:39:42 +02:00
Code Releases Activity

revised form styling

Browse source
This commit is contained in:
Harvey Kandola 2016-11-08 18:20:34 -08:00
parent 671a76ac55
commit c09e23a0da
12 changed files with 200 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

80
app/app/pods/customize/folders/template.hbs
View file

@ -1,45 +1,43 @@
<div class="global-folder-settings"> <div class="global-folder-settings">
<div class="input-form form-borderless"> <div class="form-bordered">
<form> <div class="form-header">
<div class="heading"> <div class="title">{{folders.length}} shared {{label}}</div>
<div class="title">{{folders.length}} shared {{label}}</div> <div class="tip">View and change shared space ownership</div>
<div class="tip">View and change shared space ownership</div> </div>
</div> <div class="input-control">
<div class="input-control"> <table class="basic-table">
<table class="basic-table"> <thead>
<thead> <tr>
<tr> <th class="bordered">Space</th>
<th class="bordered">Space</th> <th class="bordered">Participants</th>
<th class="bordered">Participants</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {{#each folders as |folder|}}
{{#each folders as |folder|}} <tr>
<tr> <td class="bordered">
<td class="bordered"> {{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
{{#link-to 'folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}} </td>
</td> <td class="bordered">
<td class="bordered"> {{#each folder.sharedWith as |person|}}
{{#each folder.sharedWith as |person|}} {{#if person.isEveryone}}
{{#if person.isEveryone}} Everyone
Everyone {{else}}
{{else}}
{{#if person.isOwner}} {{#if person.isOwner}}
<span class="bold">{{person.firstname}} {{person.lastname}} (owner)</span> <span class="bold">{{person.firstname}} {{person.lastname}} (owner)</span>
{{else}} {{else}}
{{person.firstname}} {{person.lastname}} {{person.firstname}} {{person.lastname}}
<a class="action-link" {{action "changeOwner" folder.id person.userId}}>make owner</a> <a class="action-link" {{action "changeOwner" folder.id person.userId}}>make owner</a>
{{/if}} {{/if}}
{{/if}} {{/if}}
<br/> <br/>
{{/each}} {{/each}}
</td> </td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
</div> </div>
</form>
</div> </div>
</div> </div>

4
app/app/pods/customize/general/template.hbs
View file

@ -1,3 +1 @@
<div class="input-form form-borderless"> {{general-settings model=model save=(action 'save')}}
{{general-settings model=model save=(action 'save')}}
</div>

4
app/app/pods/customize/global/template.hbs
View file

@ -1,3 +1 @@
<div class="input-form form-borderless"> {{global-settings model=model save=(action 'save')}}
{{global-settings model=model save=(action 'save')}}
</div>

4
app/app/pods/customize/users/template.hbs
View file

@ -1,6 +1,4 @@
<div class="input-form form-borderless"> {{user-settings add=(action 'add')}}
{{user-settings add=(action 'add')}}
</div>
<div class="clearfix" /> <div class="clearfix" />

38
app/app/styles/widget/widget-input.scss
View file

@ -4,7 +4,7 @@
.input-control { .input-control {
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 50px;
> label { > label {
color: $color-input; color: $color-input;
@ -51,8 +51,8 @@
overflow-y: hidden; overflow-y: hidden;
} }
> select, > div select,
> div select { > select {
background-color: $color-white; background-color: $color-white;
padding: 5px; padding: 5px;
border: 1px solid $color-input; border: 1px solid $color-input;
@ -163,42 +163,32 @@
} }
} }
.input-form { .form-bordered {
border: 1px solid $color-border; padding: 30px 40px;
display: block; border: 10px solid $color-border;
border-radius: 3px; @include border-radius(15px);
background-color: $color-white;
padding: 30px 50px;
> .heading, > .form-header {
> form .heading {
> .title { > .title {
font-size: 1.1rem; font-size: 1.4rem;
font-weight: normal;
font-family: $font-semibold;
pointer-events: none;
font-weight: bold; font-weight: bold;
color: $color-off-black; color: $color-off-black;
} }
> .tip { > .tip {
color: $color-input; color: $color-input;
font-size: 0.9em; font-size: 1.2rem;
margin: 5px 0 30px; margin: 5px 0 30px;
padding: 0; padding: 0;
font-family: $font-light;
text-align: left; 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 { .form-divider {
margin-top: 30px; margin-top: 30px;
} }

4
app/app/templates/components/document/document-meta.hbs
View file

@ -1,4 +1,8 @@
<div class="form-bordered"> <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"> <div class="input-control">
<label>Owner</label> <label>Owner</label>
<div class="tip">Set the document owner</div> <div class="tip">Set the document owner</div>

134
app/app/templates/components/folder/folder-settings.hbs
View file

@ -1,83 +1,87 @@
<div class="folder-settings"> <div class="folder-settings">
{{#if tabGeneral}} {{#if tabGeneral}}
<div class="input-form form-borderless"> <div class="form-bordered">
<form> <div class="input-control">
<div class="input-control"> <label>Name</label>
<label>Name</label> <div class="tip">Concise name helps everyone understand what this space contains</div>
<div class="tip">Concise name helps everyone understand what this space contains</div> {{focus-input id="folderName" type="text" value=folder.name}}
{{focus-input id="folderName" type="text" value=folder.name}} </div>
</div> <div class="regular-button button-blue" {{ action 'rename' }}>save</div>
<div class="regular-button button-blue" {{ action 'rename' }}>save</div>
</form>
</div> </div>
{{/if}} {{/if}}
{{#if tabShare}} {{#if tabShare}}
<div class="input-form form-borderless"> <div class="form-bordered">
<form> <div class="form-header">
<div class="input-control"> <div class="title">Invitations</div>
<label>Email</label> <div class="tip">Invite people to this space</div>
<div class="tip">Comma separate multiple email addresses</div> </div>
{{focus-input id="inviteEmail" type="text" value=inviteEmail}} <div class="input-control">
</div> <label>Email</label>
<div class="input-control"> <div class="tip">Comma separate multiple email addresses</div>
<label>Message</label> {{focus-input id="inviteEmail" type="text" value=inviteEmail}}
<div class="tip">Explain why they are being invited</div> </div>
{{textarea id="explainInvite" value=inviteMessage rows=3}} <div class="input-control">
</div> <label>Message</label>
<div class="regular-button button-blue" {{ action 'share' }}>Share</div> <div class="tip">Explain why they are being invited</div>
</form> {{textarea id="explainInvite" value=inviteMessage rows=3}}
</div>
<div class="regular-button button-blue" {{ action 'share' }}>Share</div>
</div> </div>
{{/if}} {{/if}}
{{#if tabDelete}} {{#if tabDelete}}
<div class="input-form form-borderless"> <div class="form-bordered">
<form> <div class="form-header">
<div class="input-control"> <div class="title">Danger Here</div>
<label>Move then Delete</label> <div class="tip">Before careful as there is no undo!</div>
<div class="tip">Move existing documents to another space before you delete <strong>{{folder.name}}</strong></div> </div>
{{ui-select id="delete-target" content=folders action=(action (mut moveTarget)) prompt="Select destination"}} <div class="input-control">
</div> <label>Move before delete</label>
<div class="regular-button button-red" {{ action 'remove' }}>delete</div> <div class="tip">Move existing documents to another space before you delete <strong>{{folder.name}}</strong></div>
</form> {{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> </div>
{{/if}} {{/if}}
{{#if tabPermissions}} {{#if tabPermissions}}
<div class="input-form form-borderless"> <div class="form-bordered">
<form> <div class="form-header">
<div class="input-control"> <div class="title">Permissions</div>
<label>Permissions</label> <div class="tip">Decide who can see and edit within this space</div>
<div class="tip">The message that gets sent to new invites for <strong>{{folder.name}}</strong></div> </div>
{{textarea id="explainRole" value=roleMessage rows=3}} <div class="input-control">
</div> <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"> <table class="basic-table">
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th>Can View</th> <th>Can View</th>
<th>Can Edit</th> <th>Can Edit</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{#each permissions key="@index" as |permission|}} {{#each permissions key="@index" as |permission|}}
<tr> <tr>
<td>{{permission.fullname}}</td> <td>{{permission.fullname}}</td>
<td> <td>
<input type="checkbox" id="canView-{{permission.userId}}" checked={{permission.canView}} /> <input type="checkbox" id="canView-{{permission.userId}}" checked={{permission.canView}} />
<label for="canView-{{permission.userId}}">&nbsp;</label> <label for="canView-{{permission.userId}}">&nbsp;</label>
</td> </td>
<td> <td>
<input type="checkbox" id="canEdit-{{permission.userId}}" checked={{permission.canEdit}} /> <input type="checkbox" id="canEdit-{{permission.userId}}" checked={{permission.canEdit}} />
<label for="canEdit-{{permission.userId}}">&nbsp;</label> <label for="canEdit-{{permission.userId}}">&nbsp;</label>
</td> </td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
<div class="regular-button button-blue" {{ action 'setPermissions' }}>Apply</div> <div class="regular-button button-blue" {{ action 'setPermissions' }}>Apply</div>
</form>
</div> </div>
{{/if}} {{/if}}
</div> </div>

6
app/app/templates/components/general-settings.hbs
View file

@ -1,5 +1,9 @@
<form> <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"> <div class="input-control">
<label>Title</label> <label>Title</label>
<div class="tip">Describe the title of this Documize instance</div> <div class="tip">Describe the title of this Documize instance</div>

58
app/app/templates/components/global-settings.hbs
View file

@ -1,34 +1,32 @@
<form> <form class="form-bordered">
<div class="input-control"> <div class="form-header">
<label>Global Settings</label> <div class="title">Global Settings</div>
<div class="tip">Settings applicable for all tenants</div> <div class="tip">Settings applicable for all tenants</div>
</div> </div>
<div> <div class="input-control">
<div class="input-control"> <label>SMTP Host</label>
<label>SMTP Host</label> <div class="tip">e.g. my.host.com</div>
<div class="tip">e.g. my.host.com</div> {{focus-input id="smtp-host" type="text" value=model.global.host class=(if SMTPHostEmptyError 'error')}}
{{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> </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> </form>

7
app/app/templates/components/settings/user-list.hbs
View file

@ -1,5 +1,8 @@
<div class="user-list"> <div class="user-list form-bordered">
<div class="heading">{{users.length}} users</div> <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"> <table class="basic-table">
<thead> <thead>
<tr> <tr>

54
app/app/templates/components/user-profile.hbs
View file

@ -1,27 +1,29 @@
<div class="input-form form-borderless"> <div class="form-bordered">
<form> <div class="form-header">
<div class="input-control"> <div class="title">About You</div>
<label>Firstname</label> <div class="tip">The basics...</div>
{{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'error')}} </div>
</div> <div class="input-control">
<div class="input-control"> <label>Firstname</label>
<label>Lastname</label> {{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'error')}}
{{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'error')}} </div>
</div> <div class="input-control">
<div class="input-control"> <label>Lastname</label>
<label>Email</label> {{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'error')}}
{{input id="email" type="text" value=model.email class=(if hasEmailError 'error')}} </div>
</div> <div class="input-control">
<div class="input-control"> <label>Email</label>
<label>Password</label> {{input id="email" type="text" value=model.email class=(if hasEmailError 'error')}}
<div class="tip">Optional change your password</div> </div>
{{input id="password" type="password" value=password.password class=hasPasswordError}} <div class="input-control">
</div> <label>Password</label>
<div class="input-control"> <div class="tip">Optional change your password</div>
<label>Confirm Password</label> {{input id="password" type="password" value=password.password class=hasPasswordError}}
<div class="tip">Confirm your new password</div> </div>
{{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}} <div class="input-control">
</div> <label>Confirm Password</label>
<div class="regular-button button-blue" {{ action 'save' }}>save</div> <div class="tip">Confirm your new password</div>
</form> {{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}}
</div>
<div class="regular-button button-blue" {{ action 'save' }}>save</div>
</div> </div>

10
app/app/templates/components/user-settings.hbs
View file

@ -1,8 +1,8 @@
<form> <form class="form-bordered">
<div class="input-control"> <div class="form-header">
<label>Add User</label> <div class="title">Add user</div>
<div class="tip">New users receive an invitation email with a random password</div> <div class="tip">New users receive an invitation email with a random password</div>
</div> </div>
<div class="input-control"> <div class="input-control">
<label>Firstname</label> <label>Firstname</label>
{{focus-input id="newUserFirstname" type="text" value=newUser.firstname class=(if hasFirstnameEmptyError 'error')}} {{focus-input id="newUserFirstname" type="text" value=newUser.firstname class=(if hasFirstnameEmptyError 'error')}}