Skip to content

Commit 50a5fe3

Browse files
zhouzhuojiezhouzhuojie
authored
Merge pull request #164 from checkr/zz/add-tables-ui
Improve homepage UI
2 parents 516dd45 + da53cf4 commit 50a5fe3

File tree

3 files changed

+160
-141
lines changed

3 files changed

+160
-141
lines changed

‎browser/flagr-ui/src/App.vue

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<el-menu mode="horizontal" class="navbar">
44
<el-row>
55
<el-col :span="6">
6-
<div class="img-frame">
7-
<router-link :to="{name: 'home'}"><img src="./assets/logo.png"></router-link>
8-
</div>
6+
<router-link :to="{name: 'home'}">
7+
<h3 class="logo">Flagr</h3>
8+
</router-link>
99
</el-col>
10-
<el-col :span="3" :offset="12">
10+
<el-col :span="2" :offset="13">
1111
<a href="https://checkr.github.io/flagr/api_docs" target="_blank"><h3>API</h3></a>
1212
</el-col>
1313
<el-col :span="2">
@@ -29,7 +29,6 @@ export default {
2929

3030
<style lang="less">
3131
body {
32-
background-color: #f7f7f7;
3332
margin: 0;
3433
padding: 0;
3534
font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -69,27 +68,9 @@ ul {
6968
7069
.navbar {
7170
background-color: #74E5E0;
72-
.img-frame {
73-
height: 80px;
74-
width: 150px;
75-
position: relative;
76-
}
77-
img {
78-
max-height: 100%;
79-
max-width: 100%;
80-
width: auto;
81-
height: auto;
82-
position: absolute;
83-
top: 0;
84-
bottom: 0;
85-
left: 0;
86-
right: 0;
87-
margin: auto;
88-
}
8971
h3 {
9072
color: white;
91-
text-align: right;
92-
margin-right: 1em;
73+
margin-left: 2em;
9374
&:hover {
9475
color: #f7f7f7;
9576
}
@@ -174,10 +155,10 @@ ul {
174155
}
175156
176157
.jsoneditor{
177-
border-color: #d8dce5;
158+
border-color: #E4E7ED;
178159
.jsoneditor-menu {
179-
background-color: #74E5E0;
180-
border-bottom-color: #74E5E0;
160+
background-color: #E4E7ED;
161+
border-bottom-color: #E4E7ED;
181162
}
182163
.jsoneditor-poweredBy {
183164
display: none;

‎browser/flagr-ui/src/components/Flag.vue

Lines changed: 84 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<el-row>
3-
<el-col :span="14" :offset="5">
3+
<el-col :span="20" :offset="2">
44
<div class="container flag-container">
55
<el-dialog
66
title="Delete feature flag"
@@ -90,7 +90,7 @@
9090
<div v-if="loaded && flag">
9191
<el-tabs>
9292
<el-tab-pane label="Config">
93-
<el-card>
93+
<el-card class="flag-config-card">
9494
<div slot="header" class="el-card-header">
9595
<div class="flex-row">
9696
<div class="flex-row-left">
@@ -110,7 +110,7 @@
110110
</div>
111111
</div>
112112
</div>
113-
<el-card>
113+
<el-card shadow="hover">
114114
<div class="flex-row id-row">
115115
<div class="flex-row-left">
116116
<el-tag type="primary" :disable-transitions="true">
@@ -127,7 +127,7 @@
127127
:inactive-value="false">
128128
</el-switch>
129129
</el-tooltip>
130-
<span size="small">Data Records</span>
130+
<span size="small" class="data-records-label">Data Records</span>
131131
<el-button size="small" @click="putFlag(flag)">
132132
Save Flag
133133
</el-button>
@@ -160,7 +160,7 @@
160160
</div>
161161
<div class="variants-container-inner" v-if="flag.variants.length">
162162
<div v-for="variant in flag.variants" :key="variant.id">
163-
<el-card>
163+
<el-card shadow="hover">
164164
<el-form label-position="left" label-width="100px">
165165
<div class="flex-row id-row">
166166
<div class="flex-row-left">
@@ -175,18 +175,24 @@
175175
</el-button>
176176
</div>
177177
</div>
178-
<el-input
179-
size="small"
180-
placeholder="Key"
181-
v-model="variant.key">
182-
<template slot="prepend">Key</template>
183-
</el-input>
184-
<el-input
185-
size="small"
186-
placeholder="{}"
187-
v-model="variant.attachmentStr">
188-
<template slot="prepend">Attachment </template>
189-
</el-input>
178+
<el-row :gutter="10">
179+
<el-col :span="12">
180+
<el-input
181+
size="small"
182+
placeholder="Key"
183+
v-model="variant.key">
184+
<template slot="prepend">Key</template>
185+
</el-input>
186+
</el-col>
187+
<el-col :span="12">
188+
<el-input
189+
size="small"
190+
placeholder="{}"
191+
v-model="variant.attachmentStr">
192+
<template slot="prepend">Attachment </template>
193+
</el-input>
194+
</el-col>
195+
</el-row>
190196
</el-form>
191197
</el-card>
192198
</div>
@@ -234,6 +240,7 @@
234240
<draggable v-model="flag.segments" @start="drag=true" @end="drag=false">
235241
<transition-group>
236242
<el-card
243+
shadow="hover"
237244
v-for="segment in flag.segments"
238245
:key="segment.id"
239246
class="segment grabbable">
@@ -243,14 +250,14 @@
243250
</div>
244251
<div class="flex-row-right">
245252
<el-button slot="append" size="small" @click="putSegment(segment)">
246-
Save Segment
253+
Save Segment Setting
247254
</el-button>
248255
<el-button @click="deleteSegment(segment)" size="small">
249256
<span class="el-icon-delete"/>
250257
</el-button>
251258
</div>
252259
</div>
253-
<el-row :gutter="20" class="id-row">
260+
<el-row :gutter="10" class="id-row">
254261
<el-col :span="15">
255262
<el-input
256263
size="small"
@@ -275,7 +282,7 @@
275282
</el-row>
276283
<el-row>
277284
<el-col :span="24">
278-
<h4>Constraints (match ALL of them)</h4>
285+
<h5>Constraints (match ALL of them)</h5>
279286
<div class="constraints">
280287
<div class="constraints-inner" v-if="segment.constraints.length">
281288
<div
@@ -309,13 +316,13 @@
309316
</el-input>
310317
</el-col>
311318
<el-col :span="2">
312-
<el-button class="width--full" @click="putConstraint(segment, constraint)" size="small">
313-
<span class="el-icon-check"/>
319+
<el-button type="success" plain class="width--full" @click="putConstraint(segment, constraint)" size="small">
320+
Save
314321
</el-button>
315322
</el-col>
316323
<el-col :span="2">
317-
<el-button class="width--full" @click="deleteConstraint(segment, constraint)" size="small">
318-
<span class="el-icon-delete"/>
324+
<el-button type="danger" plain class="width--full" @click="deleteConstraint(segment, constraint)" size="small">
325+
<i class="el-icon-delete"></i>
319326
</el-button>
320327
</el-col>
321328
</el-row>
@@ -354,6 +361,8 @@
354361
<el-button
355362
class="width--full"
356363
size="small"
364+
type="primary"
365+
plain
357366
:disabled="!segment.newConstraint.property || !segment.newConstraint.value"
358367
@click.prevent="() => createConstraint(segment)">
359368
<span class="el-icon-plus"/>
@@ -364,22 +373,33 @@
364373
</div>
365374
</el-col>
366375
<el-col :span="24" class="segment-distributions">
367-
<h4>Distribution</h4>
368-
<ul class="segment-distributions-inner" v-if="segment.distributions.length">
369-
<li v-for="distribution in segment.distributions" :key="distribution.id">
370-
<el-tag type="gray" :disable-transitions="true">{{ distribution.variantKey }}</el-tag>
371-
<span size="small">{{ distribution.percent }}%</span>
372-
</li>
373-
</ul>
376+
<h5>
377+
<span>Distribution</span>
378+
<el-button round size="mini" @click="editDistribution(segment)">
379+
<span class="el-icon-edit"></span> edit
380+
</el-button>
381+
</h5>
382+
<el-row type="flex" v-if="segment.distributions.length" :gutter="20">
383+
<el-col
384+
v-for="distribution in segment.distributions" :key="distribution.id"
385+
:span="6">
386+
<el-card shadow="never" class="distribution-card">
387+
<div>
388+
<span size="small">{{distribution.variantKey}}</span>
389+
</div>
390+
<el-progress
391+
type="circle"
392+
color="#74E5E0"
393+
width="70"
394+
:percentage="distribution.percent">
395+
</el-progress>
396+
</el-card>
397+
</el-col>
398+
</el-row>
399+
374400
<div class="card--error" v-else>
375401
No distribution yet
376402
</div>
377-
<div class="edit-distribution-button">
378-
<el-button class="width--full" @click="editDistribution(segment)">
379-
<span class="el-icon-edit"></span>
380-
Edit distribution
381-
</el-button>
382-
</div>
383403
</el-col>
384404
</el-row>
385405
</el-card>
@@ -395,7 +415,7 @@
395415
<div slot="header" class="el-card-header">
396416
<h2>Flag Settings</h2>
397417
</div>
398-
<el-button @click="dialogDeleteFlagVisible = true">
418+
<el-button @click="dialogDeleteFlagVisible = true" type="danger" plain>
399419
<span class="el-icon-delete"></span>
400420
Delete Flag
401421
</el-button>
@@ -714,9 +734,9 @@ export default {
714734
</script>
715735

716736
<style lang="less">
717-
h4 {
737+
h5 {
718738
padding: 0;
719-
margin: 10px 0;
739+
margin: 10px 0 5px;
720740
}
721741
722742
.grabbable {
@@ -739,6 +759,19 @@ h4 {
739759
background-color: #f6f6f6;
740760
border-radius: 5px;
741761
}
762+
.distribution-card {
763+
height: 110px;
764+
text-align: center;
765+
.el-card__body {
766+
padding: 3px 10px 10px 10px;
767+
}
768+
font-size: 0.9em;
769+
}
770+
.distribution-card__edit {
771+
button {
772+
boarder-size: 0;
773+
}
774+
}
742775
}
743776
744777
ol.constraints-inner {
@@ -764,7 +797,7 @@ ol.constraints-inner {
764797
margin-bottom: 1em;
765798
}
766799
.el-input-group__prepend {
767-
width: 8em;
800+
width: 2em;
768801
}
769802
}
770803
@@ -792,10 +825,16 @@ ol.constraints-inner {
792825
margin-bottom: 8px;
793826
}
794827
795-
.flag-content{
796-
margin-top: 8px;
797-
.el-input-group__prepend {
798-
width: 8em;
828+
.flag-config-card {
829+
.flag-content {
830+
margin-top: 8px;
831+
.el-input-group__prepend {
832+
width: 8em;
833+
}
834+
}
835+
.data-records-label {
836+
margin-right: 8px;
799837
}
800838
}
839+
801840
</style>

0 commit comments

Comments
 (0)