1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-09 07:25:23 +02:00

global settings UX

This commit is contained in:
Harvey Kandola 2016-06-30 16:02:45 -07:00
parent e34ea468b2
commit e173bccf52
11 changed files with 109 additions and 79 deletions

View file

@ -1,43 +1,45 @@
<div class="input-form"> <div class="global-folder-settings">
<form> <div class="input-form form-borderless">
<div class="heading"> <form>
<div class="title">{{folders.length}} shared {{label}}</div> <div class="heading">
<div class="tip">View and change shared space ownership</div> <div class="title">{{folders.length}} shared {{label}}</div>
</div> <div class="tip">View and change shared space ownership</div>
<div class="input-control"> </div>
<table class="basic-table"> <div class="input-control">
<thead> <table class="basic-table">
<tr> <thead>
<th class="bordered">Space</th> <tr>
<th class="bordered">Participants</th> <th class="bordered">Space</th>
</tr> <th class="bordered">Participants</th>
</thead> </tr>
<tbody> </thead>
{{#each folders as |folder|}} <tbody>
<tr> {{#each folders as |folder|}}
<td class="bordered"> <tr>
{{#link-to 'folders.folder' folder.id folder.slug}}{{folder.name}}{{/link-to}} <td class="bordered">
</td> {{#link-to 'folders.folder' folder.id folder.slug class="alt"}}{{folder.name}}{{/link-to}}
<td class="bordered"> </td>
{{#each folder.sharedWith as |person|}} <td class="bordered">
{{#if person.isEveryone}} {{#each folder.sharedWith as |person|}}
Everyone {{#if person.isEveryone}}
{{else}} Everyone
{{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> </form>
</div>
</div> </div>

View file

@ -1,4 +1,4 @@
<div class="input-form"> <div class="input-form form-borderless">
<form> <form>
<div class="heading"> <div class="heading">
<div class="title">General Settings</div> <div class="title">General Settings</div>

View file

@ -1,18 +1,30 @@
{{#header/page-navigation settingsMode=true}} {{#layout/zone-container}}
{{header/message-box message="Manage this Documize instance"}}
{{/header/page-navigation}}
{{#layout/page-container}} {{layout/zone-navigation}}
{{#layout/page-sidebar}}
<div class="sidebar-menu"> {{#layout/zone-header title="Documize Settings" message="General options, space management, user management"}}
<ul class="options"> <div class="pull-right">
{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}} {{#link-to 'folders.folder' folder.id folder.slug}}
{{#link-to 'customize.folders' activeClass='selected' class="option" tagName="li"}}Spaces{{/link-to}} <div class="regular-button button-white">
{{#link-to 'customize.users' activeClass='selected' class="option" tagName="li"}}Users{{/link-to}} <i class="material-icons">arrow_back</i>
</ul> <div class="name">space</div>
</div> </div>
{{/layout/page-sidebar}} {{/link-to}}
{{#layout/page-content}} </div>
{{outlet}} {{/layout/zone-header}}
{{/layout/page-content}}
{{/layout/page-container}} {{#layout/zone-sidebar}}
<div class="sidebar-menu">
<ul class="options">
{{#link-to 'customize.general' activeClass='selected' class="option" tagName="li"}}General{{/link-to}}
{{#link-to 'customize.folders' activeClass='selected' class="option" tagName="li"}}Spaces{{/link-to}}
{{#link-to 'customize.users' activeClass='selected' class="option" tagName="li"}}Users{{/link-to}}
</ul>
</div>
{{/layout/zone-sidebar}}
{{#layout/zone-content}}
{{outlet}}
{{/layout/zone-content}}
{{/layout/zone-container}}

View file

@ -1,4 +1,4 @@
<div class="input-form"> <div class="input-form form-borderless">
<form> <form>
<div class="heading"> <div class="heading">
<div class="title">Add User</div> <div class="title">Add User</div>

View file

@ -52,6 +52,17 @@ a {
} }
} }
a.alt {
color: $color-blue;
text-decoration: none;
cursor: pointer;
a:hover, a:focus {
text-decoration: underline;
}
}
$i: 150; $i: 150;
@while $i > 0 { @while $i > 0 {
.margin-#{$i} { margin: #{$i}px; } .margin-#{$i} { margin: #{$i}px; }

View file

@ -28,6 +28,7 @@ $color-stroke: #e1e1e1;
$color-tooltip: #a1a1a1; $color-tooltip: #a1a1a1;
$color-toast: #4c4c4c; $color-toast: #4c4c4c;
$color-checkbox: #115a97;
$color-chip: #98A2AB; $color-chip: #98A2AB;
$color-chip: #dff0f9; $color-chip: #dff0f9;

View file

@ -1,17 +1,7 @@
.page-container { .zone-container {
min-height: 500px; //ensure dropdowns render in viewport min-height: 500px; //ensure dropdowns render in viewport
} }
.copyright {
margin-top: 50px;
text-align: center;
> a {
font-size: 0.8rem;
color: $color-gray;
}
}
.zone-navigation { .zone-navigation {
background-color: $color-primary; background-color: $color-primary;
color: $color-white; color: $color-white;
@ -144,3 +134,13 @@
padding: 30px 40px 30px 40px; padding: 30px 40px 30px 40px;
float: left; float: left;
} }
.copyright {
margin-top: 50px;
text-align: center;
> a {
font-size: 0.8rem;
color: $color-gray;
}
}

View file

@ -85,7 +85,7 @@
width: 10px; width: 10px;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $color-blue; color: $color-checkbox;
} }
} }

View file

@ -1,3 +1,7 @@
.global-folder-settings {
}
.user-list { .user-list {
margin: 30px 0; margin: 30px 0;
@ -21,7 +25,7 @@
} }
.checkbox { .checkbox {
color: $color-link; color: $color-checkbox;
cursor: pointer; cursor: pointer;
} }
} }

View file

@ -1,4 +1,4 @@
<div class="page-container"> <div class="zone-container">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
{{yield}} {{yield}}

View file

@ -1,6 +1,6 @@
<div class="user-list"> <div class="user-list">
<div class="heading">{{users.length}} users</div> <div class="heading">{{users.length}} users</div>
<table class="basic-table no-table-border"> <table class="basic-table">
<thead> <thead>
<tr> <tr>
<th class="border-bottom border-top">Firstname</th> <th class="border-bottom border-top">Firstname</th>