Design improvements

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -10,11 +10,10 @@
             </a>
         </div>
         <div class="subheader">
-            <div class="clearfix">
-                <button class="btn btn-new" (click)="modalDialog.show()">
-                    <i class="icon-plus"></i> New Schema            
-                </button>
-            </div>
+            <button class="btn btn-success subheader-button" (click)="modalDialog.show()">
+                <i class="icon-plus"></i>          
+            </button>
+            
             <div class="search-form">
                 <input class="form-control form-control-dark" [formControl]="schemasFilter" placeholder="Search for schemas..." />
 

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 {

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;
     }

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<string> {
+    public userName(userId: string, isRef: boolean = false, placeholder = 'Me'): Observable<string> {
         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);
         }
     }
 

src/Squidex/app/shared/components/history.component.html

@@ -2,7 +2,7 @@
 
 <div class="panel panel-light">
     <div class="panel-header">
-        <h3 class="panel-title">History</h3>
+        <h3 class="panel-title">Activity</h3>
 
         <a class="panel-close" routerLink="../">
             <i class="icon-close"></i>
@@ -12,9 +12,14 @@
     <div class="panel-main">
         <div class="panel-content panel-content-blank">
             <div *ngFor="let event of events | async" class="event">
-                <div class="event-created">{{event.created.toLocal() | fromNow}}</div>
-                <div class="event-message">
-                    <span class="event-actor">{{actorName(event.actor) | async}}</span> <span [innerHTML]="format(event.message) | async"></span>
+                <div class="event-left">
+                    <img class="event-picture" [attr.src]="actorProfile(event.actor) | async" />
+                </div>
+                <div class="event-main">
+                    <div class="event-message">
+                        <span class="event-actor user-ref">{{actorName(event.actor) | async}}</span> <span [innerHTML]="format(event.message) | async"></span>
+                    </div>
+                    <div class="event-created">{{event.created.toLocal() | fromNow}}</div>
                 </div>
             </div>            
         </div>

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;

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<string> {
+        const parts = actor.split(':');
+
+        if (parts[0] === 'subject') {
+            return this.userPicture(parts[1]);
+        }
+
+        return Observable.of(null);
+    }
+
     public format(message: string): Observable<string> {
         let foundUserId: string;
 

src/Squidex/app/shared/services/users-provider.service.ts

@@ -22,7 +22,7 @@ export class UsersProviderService {
     ) {
     }
 
-    public getUser(id: string): Observable<UserDto> {
+    public getUser(id: string, me = 'Me'): Observable<UserDto> {
         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;
                     })

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;
     }
 }

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;