openflagr · lucidrains · Oct 6, 2017 · Oct 6, 2017
diff --git a/browser/flagr-ui/config/operators.json b/browser/flagr-ui/config/operators.json
@@ -0,0 +1,20 @@
+{
+  "operators": [
+    {"value": "AND", "label": "AND"},
+    {"value": "OR", "label": "OR"},        
+    {"value": "EQ", "label": "="},         
+    {"value": "NEQ", "label": "!="},         
+    {"value": "LT", "label": "<"},        
+    {"value": "LTE", "label": "<="},         
+    {"value": "GT", "label": ">"},        
+    {"value": "GTE", "label": ">="},         
+    {"value": "NAND", "label": "NAND"},        
+    {"value": "XOR", "label": "XOR"},       
+    {"value": "EREG", "label": "=~"},        
+    {"value": "NEREG", "label": "!~"},       
+    {"value": "IN", "label": "IN"},      
+    {"value": "NOTIN", "label": "NOT IN"},
+    {"value": "CONTAINS", "label": "CONTAINS"},
+    {"value": "NOTCONTAINS", "label": "NOT CONTAINS"}
+  ]
+}
diff --git a/browser/flagr-ui/index.html b/browser/flagr-ui/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>flagr-ui</title>
+    <title>Flagr</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/browser/flagr-ui/package.json b/browser/flagr-ui/package.json
@@ -14,6 +14,8 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "element-ui": "^1.4.6",
+    "lodash.clone": "^4.5.0",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0",
     "vuex": "^2.4.1"

diff --git a/browser/flagr-ui/src/App.vue b/browser/flagr-ui/src/App.vue
@@ -1,29 +1,98 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <router-view></router-view>
+    <el-menu theme="light" mode="horizontal" class="navbar">
+      <img src="./assets/logo.png">
+    </el-menu>
+    <div class="router-view-container">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
 <script>
+import {
+  Menu,
+  MenuItem
+} from 'element-ui'
+
 export default {
-  name: 'app'
+  name: 'app',
+  components: {
+    'el-menu': Menu,
+    'el-menu-item': MenuItem
+  }
 }
 </script>
 
 <style lang="scss">
 body {
   background-color: #f7f7f7;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2 {
+  font-weight: normal;
+}
+
+ol {
+  margin: 0;
+  padding-left: 20px;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  li {
+    margin: 0;
+    padding: 0;
+  }
 }
 
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin-top: 60px;
+
+  .navbar {
+    background-color: #74E5E0;
+  }
+
+  .flex-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-right {
+      margin-left: auto;
+    }
+    &.equal-width {
+      > * {
+        flex: 1;      
+      }
+    }
+  }
+
+  .router-view-container {
+    width: 500px;
+    margin: 0 auto;
+    margin-top: 20px;
+  }
+
   img {
-    width: 400px;
+    height: 60px;
+  }
+
+  .card--empty {
+    box-sizing: border-box;
+    background-color: #eee;
+    padding: 10px;
+    text-align: center;
+    color: #777;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    width: 100%;
   }
 }
 </style>
diff --git a/browser/flagr-ui/src/assets/logo.png b/browser/flagr-ui/src/assets/logo.png