From 3f9d7229b55051e3be9796598dc64abf6adc1963 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 20 Dec 2016 08:00:58 +0100 Subject: [PATCH] Design improvements --- .../pages/schemas/schemas-page.component.html | 9 ++++--- .../pages/schemas/schemas-page.component.scss | 24 +++++++++++++++---- .../pages/clients/client.component.scss | 3 ++- src/Squidex/app/shared/app-component-base.ts | 6 ++--- .../shared/components/history.component.html | 13 ++++++---- .../shared/components/history.component.scss | 19 +++++++++++++-- .../shared/components/history.component.ts | 12 +++++++++- .../shared/services/users-provider.service.ts | 4 ++-- src/Squidex/app/theme/_bootstrap.scss | 4 ++-- src/Squidex/app/theme/_vars.scss | 4 +++- 10 files changed, 72 insertions(+), 26 deletions(-) diff --git a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html index d293fbad7..f479538b3 100644 --- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html @@ -10,11 +10,10 @@
-
- -
+ +
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss index 63676d218..5bc308b1e 100644 --- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss +++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss @@ -7,19 +7,33 @@ } .panel-header { - min-height: 170px; - max-height: 170px; + min-height: 140px; + max-height: 140px; } .subheader { - margin-top: 1rem; - margin-right: -40px; + & { + @include flex-box; + @include flex-flow(row); + margin-top: 2rem; + margin-right: -40px; + } + + &-button { + height: 38px; + margin-right: .4rem; + min-width: 38px; + max-width: 38px; + padding-left: 0; + padding-right: 0; + font-size: 1.1rem; + } } .search-form { & { + @include flex-grow(1); position: relative; - margin-top: .5rem; } .form-control { diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.scss b/src/Squidex/app/features/settings/pages/clients/client.component.scss index 6ff2de87a..2ecf21d7c 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.scss +++ b/src/Squidex/app/features/settings/pages/clients/client.component.scss @@ -17,11 +17,12 @@ $color-editor: #eceeef; } &-edit { - color: darken($color-border, 20%); + color: $color-border-dark; display: none; font-size: .9rem; font-weight: normal; padding: .6rem .3rem; + border: 0; background: transparent; vertical-align: baseline; } diff --git a/src/Squidex/app/shared/app-component-base.ts b/src/Squidex/app/shared/app-component-base.ts index 6f385f990..b36490105 100644 --- a/src/Squidex/app/shared/app-component-base.ts +++ b/src/Squidex/app/shared/app-component-base.ts @@ -35,17 +35,17 @@ export abstract class AppComponentBase { return this.usersProvider.getUser(userId).map(u => u.pictureUrl); } - public userName(userId: string, isRef: boolean = false): Observable { + public userName(userId: string, isRef: boolean = false, placeholder = 'Me'): Observable { if (isRef) { const parts = userId.split(':'); if (parts[0] === 'subject') { - return this.usersProvider.getUser(parts[1]).map(u => u.displayName); + return this.usersProvider.getUser(parts[1], placeholder).map(u => u.displayName); } else { return Observable.of(parts[1]); } } else { - return this.usersProvider.getUser(userId).map(u => u.displayName); + return this.usersProvider.getUser(userId, placeholder).map(u => u.displayName); } } diff --git a/src/Squidex/app/shared/components/history.component.html b/src/Squidex/app/shared/components/history.component.html index 5ed56b698..a62889799 100644 --- a/src/Squidex/app/shared/components/history.component.html +++ b/src/Squidex/app/shared/components/history.component.html @@ -2,7 +2,7 @@
-

History

+

Activity

@@ -12,9 +12,14 @@
-
{{event.created.toLocal() | fromNow}}
-
- {{actorName(event.actor) | async}} +
+ +
+
+
+ {{actorName(event.actor) | async}} +
+
{{event.created.toLocal() | fromNow}}
diff --git a/src/Squidex/app/shared/components/history.component.scss b/src/Squidex/app/shared/components/history.component.scss index 8ef337ad2..1ef98bcc9 100644 --- a/src/Squidex/app/shared/components/history.component.scss +++ b/src/Squidex/app/shared/components/history.component.scss @@ -2,19 +2,34 @@ @import '_mixins'; .panel { - min-width: 250px; - max-width: 250px; + min-width: 270px; + max-width: 270px; } .event { & { + @include flex-box; margin-bottom: .8rem; } + &-picture { + @include circle(2.2rem); + } + &-message { font-size: .9rem; } + &-main { + @include flex-grow(1); + } + + &-left { + min-width: 2.8rem; + max-width: 2.8rem; + margin-top: .3rem; + } + &-created { font-size: .65rem; font-weight: normal; diff --git a/src/Squidex/app/shared/components/history.component.ts b/src/Squidex/app/shared/components/history.component.ts index a4bf3d315..7ba7cbdc7 100644 --- a/src/Squidex/app/shared/components/history.component.ts +++ b/src/Squidex/app/shared/components/history.component.ts @@ -47,12 +47,22 @@ export class HistoryComponent extends AppComponentBase { const parts = actor.split(':'); if (parts[0] === 'subject') { - return this.userName(parts[1]).map(n => n === 'Me' ? 'I' : n); + return this.userName(parts[1], false, 'I'); } return Observable.of(parts[1]); } + public actorProfile(actor: string): Observable { + const parts = actor.split(':'); + + if (parts[0] === 'subject') { + return this.userPicture(parts[1]); + } + + return Observable.of(null); + } + public format(message: string): Observable { let foundUserId: string; diff --git a/src/Squidex/app/shared/services/users-provider.service.ts b/src/Squidex/app/shared/services/users-provider.service.ts index 572cd137c..259ecb41b 100644 --- a/src/Squidex/app/shared/services/users-provider.service.ts +++ b/src/Squidex/app/shared/services/users-provider.service.ts @@ -22,7 +22,7 @@ export class UsersProviderService { ) { } - public getUser(id: string): Observable { + public getUser(id: string, me = 'Me'): Observable { let result = this.caches[id]; if (!result) { @@ -33,7 +33,7 @@ export class UsersProviderService { }) .map(dto => { if (this.authService.user && dto.id === this.authService.user.id) { - dto = new UserDto(dto.id, dto.email, 'Me', dto.pictureUrl); + dto = new UserDto(dto.id, dto.email, me, dto.pictureUrl); } return dto; }) diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss index 4b78a3178..35641fad9 100644 --- a/src/Squidex/app/theme/_bootstrap.scss +++ b/src/Squidex/app/theme/_bootstrap.scss @@ -181,13 +181,13 @@ @include transition(background-color .3s ease); @include placeholder-color(darken($color-accent-dark, 30%)); background: $color-dark-background-accent; - border: 0; + border: 1px solid $color-dark-background-accent; color: darken($color-accent-dark, 20%); } &:focus { background: lighten($color-dark-background-accent, 2%); - border: 0; + border-color: lighten($color-dark-background-accent, 2%); color: $color-accent-dark; } } diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss index 469098c8d..be1c2624b 100644 --- a/src/Squidex/app/theme/_vars.scss +++ b/src/Squidex/app/theme/_vars.scss @@ -1,9 +1,11 @@ $color-background: #f4f8f9; + $color-border: #dbe4eb; +$color-border-dark: darken($color-border); $color-text: #373a3c; $color-empty: #777; -$color-control: rgba(0, 0, 0, 0.15); +$color-control: rgba(0, 0, 0, .15); $color-theme-blue: #438cef; $color-theme-blue-dark: #3f83df;