Mock up Settings page

This commit is contained in:
kiswa 2016-05-13 20:04:24 +00:00
parent 5e18051188
commit eff5e62121
11 changed files with 471 additions and 17 deletions

View File

@ -1,10 +1,11 @@
import { Component } from '@angular/core';
import { TopNav } from './top-nav/top-nav.component';
import { Settings } from './settings/settings.component';
@Component({
selector: 'app-component',
directives: [ TopNav ],
directives: [ TopNav, Settings ],
templateUrl: 'app/app.template.html'
})
export class AppComponent {

View File

@ -1,2 +1,4 @@
<tb-top-nav></tb-top-nav>
<tb-settings></tb-settings>

View File

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'tb-settings',
templateUrl: 'app/settings/settings.template.html'
})
export class Settings {
public user = {
isAdmin: true
};
}

View File

@ -0,0 +1,296 @@
<div class="settings">
<div class="activity-log row" *ngIf="user.isAdmin">
<button class="accent">Activity Log</button>
</div>
<div class="half-page">
<section>
<h2>User Settings</h2>
<div class="half">
<h3>Change Password</h3>
<label for="currentPassword" class="hidden">Current Password</label>
<input type="password" id="currentPassword" placeholder="Current Password">
<label for="newPassword" class="hidden">Current Password</label>
<input type="password" id="newPassword" placeholder="New Password">
<label for="verifyPassword" class="hidden">Current Password</label>
<input type="password" id="verifyPassword" placeholder="Verify New Password">
<button>Change Password</button>
<button class="flat">Reset</button>
<h3 class="tall">Select Default Board</h3>
<select>
<option>None</option>
</select>
<h3>All Boards Options</h3>
<label>
New tasks appear at column
<select class="autosize">
<option>bottom</option>
<option>top</option>
</select>
</label>
<label>
Display two cards per column?
<input type="checkbox">
</label>
</div>
<div class="half">
<h3>Change Username</h3>
<label for="username" class="hidden">New Username</label>
<input type="text" id="username" placeholder="New Username">
<button>Change Username</button>
<button class="flat">Reset</button>
<h3 class="tall">Change Email</h3>
<label for="email" class="hidden">New Email</label>
<input type="text" id="email" placeholder="New Email">
<button>Change Email</button>
<button class="flat">Reset</button>
<div class="hold-bottom">
<label>
Show animations?
<input type="checkbox" checked>
</label>
<label>
Show Assignee on task cards?
<input type="checkbox" checked>
</label>
</div>
</div>
</section>
<section>
<h2>User Administration</h2>
<div class="row">
<table class="alternating">
<thead>
<tr>
<th>User</th>
<th>Email</th>
<th>Security Level</th>
<th>Default Board</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin</td>
<td>None</td>
<td>Administrator</td>
<td>None</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>None</td>
<td>User</td>
<td>None</td>
<td>
<a href="">Edit</a>
<a href="">Remove</a>
</td>
</tr>
<tr>
<td>other_guy</td>
<td>None</td>
<td>Board Administrator</td>
<td>None</td>
<td>
<a href="">Edit</a>
<a href="">Remove</a>
</td>
</tr>
</tbody>
</table>
<button>Add User</button>
</div>
</section>
</div>
<div class="half-page">
<section>
<h2>Board Administration</h2>
<div class="row">
<h3>Current Boards</h3>
<label class="inline">
Sort By:
<select class="autosize">
<option>Board Name</option>
<option>Creation Date</option>
</select>
</label>
<label class="inline">
Filter By:
<select class="autosize">
<option>All Boards</option>
<option>Active</option>
<option>Inactive</option>
</select>
</label>
<label class="inline">
Show By User:
<select class="autosize">
<option>Any User</option>
<option>admin</option>
</select>
</label>
<table class="alternating">
<thead>
<tr>
<th>Name</th>
<th>Columns</th>
<th>Categories</th>
<th>Users</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="boards/1">Example Board</a></td>
<td>
<ul>
<li>Col1<span class="badge" title="Item Count">3</span></li>
<li>Col2<span class="badge" title="Item Count">0</span></li>
<li>Col3<span class="badge" title="Item Count">5</span></li>
</ul>
</td>
<td>
<ul>
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</td>
<td>
<ul>
<li>admin</li>
</ul>
</td>
<td>
<a href="">Edit</a>
<a href="">Remove</a>
<label><input type="checkbox" checked> Active</label>
</td>
</tr>
<tr>
<td><a href="boards/2">Other Board</a></td>
<td></td>
<td></td>
<td>
<ul>
<li>admin</li>
</ul>
</td>
<td>
<a href="">Edit</a>
<a href="">Remove</a>
<label><input type="checkbox" checked> Active</label>
</td>
</tr>
</tbody>
</table>
<button>Add Board</button>
</div>
</section>
<section>
<h2>Automatic Actions</h2>
<div class="row">
<h3>Current Actions</h3>
<table class="alternating no-bottom-margin">
<thead>
<tr>
<th>Board</th>
<th>Trigger</th>
<th>Actions</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example Board</td>
<td>Item assigned to user: admin</td>
<td>Set item color: #debee8</td>
<td><a href="#">Remove</a></td>
</tr>
<tr>
<td>Example Board</td>
<td>Item moved to column: Col3</td>
<td>Set item color: #debee8</td>
<td><a href="#">Remove</a></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<h3>Add Action</h3>
<table>
<thead>
<tr class="borderless">
<th>Select Board:</th>
<th>Select Trigger:</th>
<th>Select Action:</th>
</tr>
</thead>
<tbody>
<tr class="borderless">
<td>
<select>
<option>Select Board...</option>
</select>
</td>
<td>
<select>
<option>Item moves to column</option>
</select>
</td>
<td>
<select>
<option>Set item color</option>
</select>
</td>
</tr>
<tr class="borderless">
<td></td>
<td>
<select>
<option>Select Column</option>
</select>
</td>
<td>
<select>
<option>Select Color</option>
</select>
</td>
</tr>
</tbody>
</table>
<button class="right">Add Action</button>
</div>
</section>
</div>
</div>

View File

@ -10,8 +10,9 @@
</h1>
<div class="buttons">
<button>Boards</button>
<button class="flat">Settings</button>
<button class="flat">Dashboard</button>
<button class="flat">Boards</button>
<button>Settings</button>
<button class="flat">Logout (username)</button>
</div>
</nav>

View File

@ -15,11 +15,10 @@
<script src="js/shims.js"></script>
</head>
<body>
<div class="container">
<app-component>
<div class="loading">TaskBoard is Loading...</div>
</app-component>
</div>
<app-component>
<div class="loading">TaskBoard is Loading...</div>
</app-component>
<script src="js/bundle.js"></script>
</body>
</html>

View File

@ -1,9 +1,5 @@
html {
background-color: $color-background;
height: 100%;
}
body {
background-image: url('../images/bg.png');
height: 100%;
}
@ -22,3 +18,13 @@ h6 {
padding-top: 2em;
text-align: center;
}
table {
border-collapse: collapse;
margin-bottom: 1em;
}
button {
transition: background .3s;
}

View File

@ -1,5 +1,6 @@
.nav-top {
border-bottom: 1px solid lighten($color-border, 10%);
margin-bottom: 5px;
padding: .5em;
h1 {
@ -23,10 +24,6 @@
float: right;
margin-top: -2.2em;
button {
transition: background-color .3s;
}
.flat {
background-color: lighten($color-background, 10%);
color: $color-primary;

View File

@ -1,7 +1,12 @@
$color-background: #e6e6e6;
$color-primary: #1d7faf;
$color-primary: #2d8097;
$color-secondary: #bd5a00;
$color-tertiary: #c0d6df;
$color-text: #24343a;
$color-text-button: #fff;
$color-heading-bg: #dbe9ee;
$color-table-row: lighten($color-text, 80%);
$font-url: 'https://fonts.googleapis.com/css?family=Raleway:400,500|Fira+Mono';
$font-name: 'Raleway';

134
src/scss/_settings.scss Normal file
View File

@ -0,0 +1,134 @@
.settings {
@include clearfix();
margin: 7px 1em;
.activity-log {
margin: 7px;
margin-right: 0;
button {
float: right;
font-size: .9em;
padding: 3px 5px;
}
}
.row {
@include row();
}
.right {
float: right;
}
.half-page {
@include span-columns(9 of 18);
}
.no-bottom-margin {
margin-bottom: 0;
}
.borderless {
border: 0;
}
section {
@include clearfix();
@include shadow-low();
background-color: $white;
margin-bottom: 1em;
position: relative;
h2 {
background-color: $color-heading-bg;
padding: 7px;
}
h3 {
padding: 7px;
padding-left: 0;
}
ul {
border: 1px solid lighten($color-border, 10%);
border-radius: 4px;
list-style: none;
margin: 0;
padding: 0;
li {
@include clearfix();
border-bottom: 1px solid lighten($color-border, 10%);
line-height: 2em;
padding-left: 5px;
}
li:last-of-type {
border-bottom: 0;
}
.badge {
background-color: $color-tertiary;
border-radius: 33%;
box-shadow: inset 2px 2px rgba(0, 0, 0, .1);
float: right;
font-size: .75em;
font-weight: 700;
line-height: 2.3em;
margin: 2px;
padding: 0 7px;
}
}
label {
display: block;
line-height: 2em;
&.inline {
display: inline-block;
margin-right: 1em;
}
&.hidden {
display: none;
}
}
.hold-bottom {
bottom: 7px;
position: absolute;
}
.row {
padding: 7px;
}
.autosize {
width: auto;
}
.tall {
margin-top: 2.5em;
}
.half {
@include span-columns(4.5 of 9);
padding: 7px;
input,
button {
margin-top: 7px;
}
}
.flat {
background-color: lighten($color-background, 10%);
color: $color-primary;
}
}
}

View File

@ -10,4 +10,5 @@
// Local styles
@import 'core';
@import 'nav-top';
@import 'settings';