Set style for responseMode switch

appbaseio · Mar 17, 2017 · 049fe25 · 049fe25
1 parent 579f782
commit 049fe25
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 33 deletions.
diff --git a/app/jsonEditor/jsonEditor.component.ts b/app/jsonEditor/jsonEditor.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from "@angular/core";
 import { AppbaseService } from "../shared/appbase.service";
 declare var $;
 
@@ -9,13 +9,13 @@ declare var $;
  providers: [AppbaseService]
 })
 
-export class JsonEditorComponent implements OnInit {
+export class JsonEditorComponent implements OnInit, OnChanges {
  public config;
  public editorHookHelp;
  public responseHookHelp;
  public streamPopoverInfo: any = {
- trigger: 'click hover',
- placement: 'left',
+ trigger: 'hover',
+ placement: 'right',
  content: 'Stream is waiting for data updates.'
  };
  @Input() finalUrl;

diff --git a/app/queryBlocks/queryBlocks.component.html b/app/queryBlocks/queryBlocks.component.html
@@ -18,8 +18,8 @@
  Sorting
  </a>
  <span class="toggle clearfix responseMode" *ngIf="isAppbaseApp">
+ <a class="historic" [ngClass]="{'selected': responseMode === 'historic'}" (click)="changeMode('historic', i)">Hist.</a>
  <a class="stream" [ngClass]="{'selected': responseMode === 'stream'}" (click)="changeMode('stream', i)">Stream</a>
- <a class="historic" [ngClass]="{'selected': responseMode === 'historic'}" (click)="changeMode('historic', i)">Historic</a>
  </span>
  </div>
  </div>

diff --git a/app/queryBlocks/queryBlocks.component.ts b/app/queryBlocks/queryBlocks.component.ts
@@ -38,14 +38,14 @@ export class QueryBlocksComponent implements OnInit, OnChanges {
  public joiningQueryParam: any = 0;
  public popoverInfo: any = {
  stream: {
- trigger: 'click hover',
- placement: 'right',
+ trigger: 'hover',
+ placement: 'top',
  content: 'Set streaming mode.',
  container: 'body'
  },
  historic: {
- trigger: 'click hover',
- placement: 'right',
+ trigger: 'hover',
+ placement: 'top',
  content: 'Set historic mode.',
  container: 'body'
  }

diff --git a/assets/css/query.css b/assets/css/query.css
@@ -187,7 +187,36 @@
  height: auto;
  overflow: auto; }
  .toggle.responseMode, .tabs.responseMode {
- height: auto; }
+ height: auto;
+ padding-top: 5px;
+ margin-left: 20px; }
+ .toggle.responseMode a, .tabs.responseMode a {
+ font-size: 10px;
+ padding: 5px 6px;
+ height: auto;
+ border: 0;
+ background: #f7f7f7;
+ color: #828282 !important;
+ border: 0;
+ border-radius: 3px; }
+ .toggle.responseMode a:first-child, .tabs.responseMode a:first-child {
+ border-left: 0;
+ border-right: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0; }
+ .toggle.responseMode a:last-child, .tabs.responseMode a:last-child {
+ border-left: 0;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0; }
+ .toggle.responseMode a.selected, .tabs.responseMode a.selected {
+ background: #FCC829;
+ color: #fff !important; }
+ .toggle.responseMode a.selected:hover, .tabs.responseMode a.selected:hover {
+ background: #FCC829;
+ color: #fff !important; }
+ .toggle.responseMode a:hover, .tabs.responseMode a:hover {
+ background: #f7f7f7;
+ color: #828282 !important; }
  .toggle a, .tabs a {
  width: 55px;
  display: inline-block;

diff --git a/assets/css/result.css b/assets/css/result.css
@@ -38,8 +38,8 @@
 .stream-signal {
  width: 2rem;
  height: 2rem;
- float: right;
- margin-right: 15px;
+ float: left;
+ margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid #888;

diff --git a/assets/styles/query.scss b/assets/styles/query.scss
@@ -116,30 +116,30 @@
  label {
  position: relative;
  display: inline-block;
-  vertical-align: middle;
-  margin: 5px;
+  vertical-align: middle;
+  margin: 5px;
 
-  &:before {
-   content: '';
-  background: #fff;
-  border: 2px solid #ddd;
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  margin-right: 10px;
-  text-align: center;
-  }
+  &:before {
+   content: '';
+  background: #fff;
+  border: 2px solid #ddd;
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  margin-right: 10px;
+  text-align: center;
+  }
  }
 
  input {
  opacity: 0;
-  position: absolute;
+  position: absolute;
 
-  &:checked + label:before {
+  &:checked + label:before {
  background: #FCC829;
-  box-shadow: inset 0px 0px 0px 3px #fff;
+  box-shadow: inset 0px 0px 0px 3px #fff;
  }
  }
  }
@@ -150,8 +150,8 @@
  }
 
  input + label:before {
-   border-radius: 50%;
-   }
+ border-radius: 50%;
+ }
  }
  &.bool_query {
  background: $grey-bg;
@@ -251,6 +251,41 @@
 
  &.responseMode {
  height: auto;
+ padding-top: 5px;
+ margin-left: 20px;
+ a {
+ font-size: 10px;
+ padding: 5px 6px;
+ height: auto;
+ border: 0;
+ background: $grey-bg;
+ color: $grey-font !important;
+ border: 0;
+ border-radius: 3px;
+ &:first-child {
+ border-left: 0;
+ border-right: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ &:last-child {
+ border-left: 0;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ &.selected {
+ background: $primary-color;
+ color: #fff !important;
+ &:hover {
+ background: $primary-color;
+ color: #fff !important;
+ }
+ }
+ &:hover {
+ background: $grey-bg;
+ color: $grey-font !important;
+ }
+ }
  }
 
 

diff --git a/assets/styles/result.scss b/assets/styles/result.scss
@@ -46,8 +46,8 @@
 .stream-signal {
  width: 2rem;
  height: 2rem;
- float: right;
- margin-right: 15px;
+ float: left;
+ margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid #888;