From eff5e62121c7f57751994e06610121a4e9b87868 Mon Sep 17 00:00:00 2001 From: kiswa Date: Fri, 13 May 2016 20:04:24 +0000 Subject: [PATCH] Mock up Settings page --- src/app/app.component.ts | 3 +- src/app/app.template.html | 2 + src/app/settings/settings.component.ts | 12 + src/app/settings/settings.template.html | 296 ++++++++++++++++++++++++ src/app/top-nav/top-nav.template.html | 5 +- src/index.html | 9 +- src/scss/_core.scss | 14 +- src/scss/_nav-top.scss | 5 +- src/scss/_scss-base-settings.scss | 7 +- src/scss/_settings.scss | 134 +++++++++++ src/scss/main.scss | 1 + 11 files changed, 471 insertions(+), 17 deletions(-) create mode 100644 src/app/settings/settings.component.ts create mode 100644 src/app/settings/settings.template.html create mode 100644 src/scss/_settings.scss diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 816a775..8ae1665 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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 { diff --git a/src/app/app.template.html b/src/app/app.template.html index 0212b37..b2e5241 100644 --- a/src/app/app.template.html +++ b/src/app/app.template.html @@ -1,2 +1,4 @@ + + diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts new file mode 100644 index 0000000..3cad783 --- /dev/null +++ b/src/app/settings/settings.component.ts @@ -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 + }; +} + diff --git a/src/app/settings/settings.template.html b/src/app/settings/settings.template.html new file mode 100644 index 0000000..66e29f0 --- /dev/null +++ b/src/app/settings/settings.template.html @@ -0,0 +1,296 @@ +
+
+ +
+ +
+
+

User Settings

+ +
+

Change Password

+ + + + + + + + + + + + + +

Select Default Board

+ + +

All Boards Options

+ + +
+ +
+

Change Username

+ + + + + + + +

Change Email

+ + + + + + + +
+ + +
+
+
+ +
+

User Administration

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UserEmailSecurity LevelDefault BoardActions
adminNoneAdministratorNone
demoNoneUserNone + Edit + Remove +
other_guyNoneBoard AdministratorNone + Edit + Remove +
+ + +
+
+
+ +
+
+

Board Administration

+ +
+

Current Boards

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameColumnsCategoriesUsersActions
Example Board +
    +
  • Col13
    • +
  • Col20
    • +
  • Col35
    • +
+ 		+
    +
  • Cat1
    • +
  • Cat2
    • +
  • Cat3
    • +
+ 		+
    +
  • admin
    • +
+ 		+ Edit + Remove + +
Other Board +
    +
  • admin
    • +
+ 		+ Edit + Remove + +
+ + +
+
+ +
+

Automatic Actions

+ +
+

Current Actions

+ + + + + + + + + + + + + + + + + + + + + + + + +
BoardTriggerActionsRemove
Example BoardItem assigned to user: adminSet item color: #debee8Remove
Example BoardItem moved to column: Col3Set item color: #debee8Remove
+
+ +
+

Add Action

+ + + + + + + + + + + + + + + + + + + + + +
Select Board:Select Trigger:Select Action:
+ + + + + +
+ + + +
+ + +
+
+
+
+ diff --git a/src/app/top-nav/top-nav.template.html b/src/app/top-nav/top-nav.template.html index a79a49f..479c0ed 100644 --- a/src/app/top-nav/top-nav.template.html +++ b/src/app/top-nav/top-nav.template.html @@ -10,8 +10,9 @@
- - + + +
diff --git a/src/index.html b/src/index.html index 670cd64..540d48d 100644 --- a/src/index.html +++ b/src/index.html @@ -15,11 +15,10 @@ -
- -
TaskBoard is Loading...
- -
+ +
TaskBoard is Loading...
+ + diff --git a/src/scss/_core.scss b/src/scss/_core.scss index dbba1c2..c04f153 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -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; +} + diff --git a/src/scss/_nav-top.scss b/src/scss/_nav-top.scss index 114e3c5..d083cb4 100644 --- a/src/scss/_nav-top.scss +++ b/src/scss/_nav-top.scss @@ -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; diff --git a/src/scss/_scss-base-settings.scss b/src/scss/_scss-base-settings.scss index 3f2c6b8..ec9ef0c 100644 --- a/src/scss/_scss-base-settings.scss +++ b/src/scss/_scss-base-settings.scss @@ -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'; diff --git a/src/scss/_settings.scss b/src/scss/_settings.scss new file mode 100644 index 0000000..a08bf35 --- /dev/null +++ b/src/scss/_settings.scss @@ -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; + } + } +} + diff --git a/src/scss/main.scss b/src/scss/main.scss index 6310a38..b3b9fd5 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -10,4 +10,5 @@ // Local styles @import 'core'; @import 'nav-top'; +@import 'settings';