UI WIP

akiocloud · Mar 6, 2018 · 5592f41 · 5592f41
1 parent 7c84168
commit 5592f41
Show file tree

Hide file tree

Showing 64 changed files with 760 additions and 26,494 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -9,12 +9,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico",
-        {
-          "glob": "**/*",
-          "input": "../node_modules/@angular/material/prebuilt-themes",
-          "output": "vendor/angular-material"
-        }
+        "favicon.ico"
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -23,42 +18,8 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
-      "removed-styles": [
-        "../node_modules/materialize-css/dist/css/materialize.css",
-        "../node_modules/select2/dist/css/select2.css",
-        "../node_modules/bootstrap/dist/css/bootstrap.css",
-        "mirage.assets/vendor/jquery.layout/jquery.layout.css"
-      ],
       "styles": [
-        "../node_modules/font-awesome/css/font-awesome.css",
-        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-        "styles.scss",
-        "mirage.assets/styles/app.component.scss",
-        "mirage.assets/styles/autocomplete.scss",
-        "mirage.assets/styles/docsidebar.scss",
-        "mirage.assets/styles/features.scss",
-        "mirage.assets/styles/features_sidebar.scss",
-        "mirage.assets/styles/header.scss",
-        "mirage.assets/styles/learn.scss",
-        "mirage.assets/styles/loading.scss",
-        "mirage.assets/styles/main.scss",
-        "mirage.assets/styles/modal.scss",
-        "mirage.assets/styles/query.scss",
-        "mirage.assets/styles/responsive.scss",
-        "mirage.assets/styles/result.scss",
-        "mirage.assets/styles/select2.scss",
-        "mirage.assets/styles/variables.scss"
-      ],
-      "removed-scripts": [
-        "../node_modules/select2/dist/js/select2.full.min.js",
-        "../node_modules/materialize-css/dist/js/materialize.js",
-        "mirage.assets/js/helper.js",
-        "mirage.assets/vendor/jquery.layout/jquery-ui.js",
-        "mirage.assets/vendor/jquery.layout/jquery.layout.js",
-        "mirage.assets/vendor/jquery.simulate.js",
-        "mirage.assets/vendor/urlsafe-base64.bundle.js",
-        "../node_modules/jquery/dist/jquery.js",
-        "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
+        "styles.scss"
       ],
       "scripts": [
       ],

diff --git a/package.json b/package.json
@@ -23,13 +23,8 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
-    "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
-    "font-awesome": "^4.7.0",
-    "jquery": "^3.3.1",
-    "materialize-css": "^0.100.2",
     "rxjs": "^5.5.6",
-    "select2": "^4.0.6-rc.1",
     "zone.js": "^0.8.19"
   },
   "devDependencies": {

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -2,24 +2,23 @@
   <h1>ES Query Editor</h1>
   <p>Elastic Search Query Editor</p>
 </div>
-
 <div class="flex-grid">
     <div class="flex-cell-50">
-
-        <query-blocks
-            *ngIf="mapping"
-            [types]="types"
-            [selectedTypes]="selectedTypes"
-            [config]="config"
-            [mapping]="mapping"
-            [result]="result">
-        </query-blocks>
-
+        <div class="flex-gutter">
+            <query-blocks
+                *ngIf="mapping"
+                [types]="types"
+                [selectedTypes]="selectedTypes"
+                [config]="config"
+                [mapping]="mapping"
+                [result]="result">
+            </query-blocks>
+        </div>
     </div>
     <div class="flex-cell-50">
-
-        <pre *ngIf="result.resultQuery.parsed"> {{ result.resultQuery.parsed | json }} </pre>
-
+        <div class="flex-gutter">
+            <pre *ngIf="result.resultQuery.parsed"> {{ result.resultQuery.parsed | json }} </pre>
+        </div>
     </div>
 </div>
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -40,8 +40,16 @@ import { SortBlockComponent } from "./queryBlocks/sortBlock/sortBlock.component"
 import { ElasticModule } from './elastic/elastic.module';
 import { ElasticService } from './elastic/elastic.service';
 
-import { MatSelectModule , MatButtonModule } from '@angular/material';
-
+import 
+{
+	MatSelectModule,
+	MatButtonModule,
+	MatChipsModule,
+	MatIconModule,
+	MatCardModule,
+	MatToolbarModule,
+	MatInputModule
+} from '@angular/material';
 
 @NgModule({
   declarations: [
@@ -85,7 +93,12 @@ import { MatSelectModule , MatButtonModule } from '@angular/material';
 		FormsModule,
 		ElasticModule,
 		MatSelectModule,
-		MatButtonModule
+		MatButtonModule,
+		MatChipsModule,
+		MatIconModule,
+		MatCardModule,
+		MatToolbarModule,
+		MatInputModule
   ],
   providers: [ElasticService],
   bootstrap: [AppComponent]

diff --git a/src/app/queryBlocks/compoundQuery/compoundQuery.component.css b/src/app/queryBlocks/compoundQuery/compoundQuery.component.css
@@ -0,0 +1,73 @@
+
+.compound-query
+{
+    border-radius: 2px;
+    margin : 5px 0;
+    background: rgba(128,128,128,0.1);
+}
+.compound-query:hover 
+{
+    background: rgba(128,128,128,0.2);
+}
+
+.compound-query-title
+{
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    padding : 6px;
+    background : #3f51b5;
+    color : white;font-weight:bold;
+    font-size: 14px;
+}
+
+.compound-query-title > div
+{
+    padding : 5px;
+}
+
+.compound-query-title mat-icon
+{
+    float : right;
+    cursor : pointer;
+}
+
+.compound-query-title mat-icon:hover
+{
+    background: rgba(255,255,255,0.2);
+    border-radius: 12px;
+}
+
+.compound-query-header,
+.compound-query-footer
+{
+    background : rgba(128,128,128,0.1);
+    padding : 4px 8px;
+}
+
+.compound-query-body
+{
+    padding : 4px 8px;
+    padding-left : 22px;
+}
+
+.compound-query-add-sub-query,
+.compound-query-add-condition
+{
+    margin : 4px 0;
+}
+
+div.warn
+{
+    background: #ff4081;
+    padding: 4px 6px;
+}
+div.warn *
+{
+    font-size: 15px;
+    color: white;
+}
+div.warn i
+{
+    position: relative;
+    top: 2px;
+}