Fix UI defered issues.

src/ui_ng/src/app/log/audit-log.component.html

@@ -14,7 +14,11 @@
           <clr-icon shape="caret down"></clr-icon>
         </button>
         <div class="dropdown-menu">
-          <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)"><clr-icon shape="check" [hidden]="!f.checked"></clr-icon> {{f.description | translate}}</a>
+          <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)">
+            <clr-icon shape="check" [hidden]="!f.checked"></clr-icon>
+            <ng-template [ngIf]="!f.checked"><span style="display: inline-block;width: 16px;"></span></ng-template>
+            {{f.description | translate}}
+          </a> 
         </div>
       </clr-dropdown>
       <div class="flex-xs-middle">

src/ui_ng/src/app/project/create-project/create-project.component.html

@@ -4,10 +4,10 @@
   <div class="modal-body" style="height: 12.8em; overflow-y: hidden;">
     <form #projectForm="ngForm">
       <section class="form-block">
-        <div class="form-group">
+        <div class="form-group" style="padding-left: 135px;">
-          <label for="create_project_name" class="col-md-4 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
+          <label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
           <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" [class.valid]="projectName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="20" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
+            <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="38" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
             <span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.required && (projectName.dirty || projectName.touched)">
               {{'PROJECT.NAME_IS_REQUIRED' | translate}}
             </span>
@@ -19,16 +19,17 @@
             </span>
           </label>
         </div>
-        <div class="form-group">
+        <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-4 form-group-label-override">{{'PROJECT.PUBLIC_OR_PRIVATE' | translate}}</label>
+          <label class="col-md-3 form-group-label-override">{{'PROJECT.PUBLIC_OR_PRIVATE' | translate}}</label>
           <div class="checkbox-inline">
             <input type="checkbox" id="create_project_public" [(ngModel)]="project.public" name="public">
             <label for="create_project_public"></label>
+            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right" style="top:-8px; left:-8px;">
+             <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
+             <span class="tooltip-content" style="margin-left: 5px;">{{'PROJECT.INLINE_HELP_PUBLIC' | translate }}</span>
+           </a>
           </div>
         </div>
-        <p class="inline-help-public">
-          {{'PROJECT.INLINE_HELP_PUBLIC' | translate }}
-        </p>
       </section>
     </form>
   </div>

src/ui_ng/src/app/project/create-project/create-project.css

@@ -1,12 +1,3 @@
-.inline-help-public {
-  color: #CCCCCC;
-  font-size: 12px;
-  line-height: 1.5em;
-  letter-spacing: 0.01em;
-  margin-top: 0;
-  padding: 0 14px;
-}
-
 .form-group-label-override {
     font-size: 14px;
     font-weight: 400;

src/ui_ng/src/app/project/member/member.component.css

@@ -6,7 +6,3 @@
   padding-right: 16px;
   margin-top: 18px;
 }
-
-.datagrid-foot {
-  margin-bottom: 0.5px;
-}

src/ui_ng/src/app/project/member/member.component.html

@@ -19,9 +19,9 @@
             <clr-dg-column>{{'MEMBER.ROLE' | translate}}</clr-dg-column>
             <clr-dg-row *clrDgItems="let m of members">
                 <clr-dg-action-overflow [hidden]="m.user_id === currentUser.user_id || !hasProjectAdminRole">
-                    <button class="action-item" (click)="changeRole(m, 1)">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
+                    <button class="action-item" [hidden]="m.role_id === 1" (click)="changeRole(m, 1)">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
-                    <button class="action-item" (click)="changeRole(m, 2)">{{'MEMBER.DEVELOPER' | translate}}</button>
+                    <button class="action-item" [hidden]="m.role_id === 2" (click)="changeRole(m, 2)">{{'MEMBER.DEVELOPER' | translate}}</button>
-                    <button class="action-item" (click)="changeRole(m, 3)">{{'MEMBER.GUEST' | translate}}</button>
+                    <button class="action-item" [hidden]="m.role_id === 3" (click)="changeRole(m, 3)">{{'MEMBER.GUEST' | translate}}</button>
                     <button class="action-item" (click)="deleteMember(m)">{{'MEMBER.DELETE' | translate}}</button>
                 </clr-dg-action-overflow>
                 <clr-dg-cell>{{m.username}}</clr-dg-cell>

src/ui_ng/src/app/project/member/member.component.ts

@@ -111,8 +111,8 @@ export class MemberComponent implements OnInit, OnDestroy {
   ngOnInit() {
     //Get projectId from route params snapshot.          
     this.projectId = +this.route.snapshot.parent.params['id'];   
-    this.currentUser = this.session.getCurrentUser();
     //Get current user from registered resolver.
+    this.currentUser = this.session.getCurrentUser();
     let resolverData = this.route.snapshot.parent.data;
     if(resolverData) {
       this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;

src/ui_ng/src/app/project/project-detail/project-detail.component.css

@@ -7,6 +7,10 @@
   background-color: #fafafa;
 }
 
+.subnav .nav {
+  padding-left: 0;
+}
+
 .role-label {
   color: #CCCCCC;
   font-size: 14px;

src/ui_ng/src/app/replication/replication-management/replication-management.component.css

@@ -6,3 +6,7 @@
 .sub-nav-bg-color {
   background-color: #fafafa;
 }
+
+.subnav .nav {
+  padding-left: 0;
+}

src/ui_ng/src/app/replication/replication.component.html

@@ -6,15 +6,11 @@
         <create-edit-policy [projectId]="projectId" (reload)="reloadPolicies($event)"></create-edit-policy>
       </div>
       <div class="flex-xs-middle option-right">
-                <clr-dropdown [clrMenuPosition]="'bottom-left'">
+        <div class="select" style="float: left;">
-                    <button class="btn btn-link" clrDropdownToggle>
+          <select (change)="doFilterPolicyStatus($event)">
-              {{currentRuleStatus.description | translate}}
+            <option *ngFor="let r of ruleStatus" value="{{r.key}}">{{r.description | translate}}</option>
-            <clr-icon shape="caret down"></clr-icon>
+          </select>
-          </button>
-                    <div class="dropdown-menu">
-                        <a href="javascript:void(0)" clrDropdownItem *ngFor="let r of ruleStatus" (click)="doFilterPolicyStatus(r.key)"> {{r.description | translate}}</a>
         </div> 
-                </clr-dropdown>
         <grid-filter filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filter)="doSearchPolicies($event)" [currentValue]="search.policyName"></grid-filter>
         <a href="javascript:void(0)" (click)="refreshPolicies()">
           <clr-icon shape="refresh"></clr-icon>
@@ -37,15 +33,11 @@
         </div>
       </div>
       <div class="row flex-items-xs-right option-right" [hidden]="currentJobSearchOption === 0">
-            <clr-dropdown [clrMenuPosition]="'bottom-left'">
+        <div class="select" style="float: left;">
-                <button class="btn btn-link" clrDropdownToggle>
+          <select (change)="doFilterJobStatus($event)">
-          {{currentJobStatus.description | translate}}
+          <option *ngFor="let j of jobStatus" value="{{j.key}}" [selected]="currentJobStatus.key === j.key">{{j.description | translate}}</option>
-          <clr-icon shape="caret down"></clr-icon>
+          </select>
-        </button>
-                <div class="dropdown-menu">
-                    <a href="javascript:void(0)" clrDropdownItem *ngFor="let j of jobStatus" (click)="doFilterJobStatus(j.key)"> {{j.description | translate}}</a>
         </div>
-            </clr-dropdown>
         <div class="flex-items-xs-middle">
           <clr-icon shape="date"></clr-icon><input type="date" #fromTime (change)="doJobSearchByStartTime(fromTime.value)">
           <clr-icon shape="date"></clr-icon><input type="date" #toTime (change)="doJobSearchByEndTime(toTime.value)">

src/ui_ng/src/app/replication/replication.component.ts

@@ -20,6 +20,7 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 
 import { ReplicationService } from './replication.service';
 
+import { SessionUser } from '../shared/session-user';
 import { Policy } from './policy';
 import { Job } from './job';
 import { Target } from './target';
@@ -27,13 +28,13 @@ import { Target } from './target';
 import { State } from 'clarity-angular';
 
 const ruleStatus = [
-  { 'key':  '', 'description': 'REPLICATION.ALL_STATUS'},
+  { 'key': 'all', 'description': 'REPLICATION.ALL_STATUS'},
   { 'key': '1', 'description': 'REPLICATION.ENABLED'},
   { 'key': '0', 'description': 'REPLICATION.DISABLED'}
 ];
 
 const jobStatus = [
-  { 'key': '', 'description': 'REPLICATION.ALL' },
+  { 'key': 'all', 'description': 'REPLICATION.ALL' },
   { 'key': 'pending',  'description': 'REPLICATION.PENDING' },
   { 'key': 'running',  'description': 'REPLICATION.RUNNING' },
   { 'key': 'error',    'description': 'REPLICATION.ERROR' },
@@ -171,9 +172,9 @@ export class ReplicationComponent implements OnInit {
      if(policy) {
       this.search.policyId = policy.id;
       this.search.repoName = '';
-      this.search.status = ''
+      this.search.status = '';
       this.currentJobSearchOption = 0;
-      this.currentJobStatus = { 'key': '', 'description': 'REPLICATION.ALL'};
+      this.currentJobStatus = { 'key': 'all', 'description': 'REPLICATION.ALL' };
       this.fetchPolicyJobs();
      }
    }
@@ -183,20 +184,29 @@ export class ReplicationComponent implements OnInit {
      this.retrievePolicies();
    }
 
-   doFilterPolicyStatus(status: string) {
+   doFilterPolicyStatus($event: any) {
+     if ($event && $event.target && $event.target["value"]) {
+       let status = $event.target["value"];
        this.currentRuleStatus = this.ruleStatus.find(r=>r.key === status);
-     if(status.trim() === '') {
+       if(this.currentRuleStatus.key === 'all') {
          this.changedPolicies = this.policies;
        } else {
          this.changedPolicies = this.policies.filter(policy=>policy.enabled === +this.currentRuleStatus.key);
        }
      }
+   }
 
-   doFilterJobStatus(status: string) {
+   doFilterJobStatus($event: any) {
+     if ($event && $event.target && $event.target["value"]) {
+       let status = $event.target["value"];
        this.currentJobStatus = this.jobStatus.find(r=>r.key === status);
+       if(this.currentJobStatus.key === 'all') {
+         status = '';
+       }
        this.search.status = status;
        this.doSearchJobs(this.search.repoName);
      }
+   }
 
    doSearchJobs(repoName: string) {
      this.search.repoName = repoName;