Mock up Settings page
This commit is contained in:
parent
5e18051188
commit
eff5e62121
@ -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 {
|
||||
|
@ -1,2 +1,4 @@
|
||||
<tb-top-nav></tb-top-nav>
|
||||
|
||||
<tb-settings></tb-settings>
|
||||
|
||||
|
12
src/app/settings/settings.component.ts
Normal file
12
src/app/settings/settings.component.ts
Normal 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
|
||||
};
|
||||
}
|
||||
|
296
src/app/settings/settings.template.html
Normal file
296
src/app/settings/settings.template.html
Normal 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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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
134
src/scss/_settings.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -10,4 +10,5 @@
|
||||
// Local styles
|
||||
@import 'core';
|
||||
@import 'nav-top';
|
||||
@import 'settings';
|
||||
|
||||
|
Reference in New Issue
Block a user