feat: refresh UI

trustpilot · Jul 3, 2018 · 179d5ee · 179d5ee
1 parent 078459c
commit 179d5ee
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 77 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -44,6 +44,17 @@ <h1>Skift: A/B test basic example</h1>
       document.getElementById('test-button').style.backgroundColor = '#ffcc00';
     }
   }).setup();
+
+  skift.create('another-test').setCondition(() => {
+    return true;
+  }).addVariation({
+    name: 'control' // No setup required.
+  }).addVariation({
+    name: 'bigger-button',
+    setup() {
+      document.getElementById('test-button').style.width = '300px';
+    }
+  }).setup();
 </script>
 </body>
 </html>
diff --git a/src/ui.css b/src/ui.css
@@ -1,77 +1,99 @@
-.skift .container {
+.skift {
   position: fixed;
-  bottom: 15px;
-  right: 15px;
+  bottom: 5px;
+  right: 5px;
   width: 300px;
-  height: 300px;
+  max-height: 500px;
   color: #292929;
   z-index: 999;
   background-color: #FFFFFF;
-  border: 1px solid #f2800d;
-  box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.2);
+  border: 2px solid #00b67a;
   transition: all .5s ease-out;
   opacity: 1;
+  border-radius: 3px;
 }
-.skift  .container.hideme {
-  bottom: -350px;
-  opacity: 0;
+
+.skift li.selected {
+  font-weight: bold;
 }
-.skift .test-list {
-  overflow-y: scroll;
-  height: 250px;
+
+.skift li a {
+  color: #0c59f2;
 }
-.skift .test {
-  padding: 10px;
+
+.skift .variations .legend {
+  font-size: 12px;
 }
+
 .skift .header {
-  position: relative;
   top: 0;
   left: 0;
-  padding: 10px;
-  margin-bottom: 10px;
-  background-color: #292929;
+  padding: 8px;
+  background-color: #00b67a;
   color: #FFFFFF;
   font-size: 16px;
   font-weight: bold;
 }
+
+.skift.hideme {
+  bottom: -550px;
+  opacity: 0;
+}
+
+.skift .tests {
+  overflow-y: auto;
+}
+
+.skift .variations {
+  background: #f4f7f9;
+  box-shadow: inset 0 0 1px 1px #dfe2e5;
+  padding: 8px;
+}
+
+.skift .variations ul {
+  margin: 0;
+}
+
+.skift .test {
+  padding: 8px 8px 0 8px;
+}
+
 .skift .data-label {
   display: inline-block;
   margin-bottom: 2px;
   margin-right: 5px;
   color: #292929;
 }
+
 .skift .data-label:after {
   content: ":";
 }
+
 .skift .data-value {
   color: #000;
   font-weight: bold;
-  text-transform: capitalize;
-}
-.skift .variant {
-  text-transform: uppercase;
-  color: #66ff33;
 }
+
 .skift .close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
-  top: -8px;
-  right: -8px;
-  background-color: #f2800d;
-  color: #000;
+  right: 8px;
+  background-color: #fff;
+  color: #00b67a;
   height: 20px;
   width: 20px;
-  border-radius: 5px;
+  border-radius: 50%;
   cursor: pointer;
+  text-align: center;
+  font-size: 16px;
+  line-height: 20px
 }
+
 .skift .reset {
-  display: block;
-  margin: 10px auto;
+  width: 100%;
   padding: 5px 10px;
-  background-color: #f2800d;
+  background-color: #00b67a;
   font-size: 18px;
   color: #FFFFFF;
   border: 0;
+  cursor: pointer;
 }
diff --git a/src/ui.ts b/src/ui.ts
@@ -9,7 +9,7 @@ function getVariationPercentage(variation: InternalVariation): string {
 }
 
 let isInitialized = false;
-let container: Element;
+let skift: Element;
 
 export const uiFactory = (
     tests: BehavioralSubject<SplitTest[]>,
@@ -31,38 +31,43 @@ export const uiFactory = (
                 'Mobile device': getUserAgentInfo().isMobile
             };
 
-            const variationHtml = test.variations.map(variant => {
-                return `
-                    <a
-                        href="${test.getVariationUrl(variant.name)}"
-                        title="Segment: ${getVariationPercentage(variant as InternalVariation)}"
-                    >
-                        ${variant.name}
-                    </a>
-                `;
-            });
-
             return `
                 <div class="test">
-                    <div class="header">
-                        Viewing: <span class="abtest-variant">${variation}</span>
-                    </div>
                     ${Object.keys(data).map(key => `
                         <div>
                             <span class="data-label">${key}</span>
                             <span class="data-value">${data[key]}</span>
                         </div>
                     `).join('')}
-                    ${variationHtml.join('&nbsp;&bull;&nbsp;')}
+                </div>
+                <div class="variations">
+                    <span class="legend">Variations available:</span>
+                    <ul>
+                        ${test.variations.map(variant => {
+                            if (variation === variant.name) {
+                                return `
+                                    <li class="selected">${variant.name}</li>
+                                `;
+                            }
+
+                            return `
+                                <li>
+                                    <a
+                                        href="${test.getVariationUrl(variant.name)}"
+                                        title="Segment: ${getVariationPercentage(variant as InternalVariation)}"
+                                    >
+                                        ${variant.name}
+                                    </a>
+                                </li>
+                            `;
+                        }).join('')}
+                    </ul>
                 </div>
             `;
         } else {
             const canRun = await test.shouldRun(getUserAgentInfo());
             return `
                 <div class="test">
-                    <div class="header">
-                        Viewing: <span class="abtest-variant">Not initialized</span>
-                    </div>
                     <div>Test <span class="data-value">${test.name}</span> is not initialized</div>
                     <div>
                         <span class="data-label">Can run</span>
@@ -74,31 +79,31 @@ export const uiFactory = (
     }
 
     function showSplitTestUi() {
-        const skift = document.createElement('div');
-        skift.className = 'skift';
+        const previousContainer = document.querySelector('.skift');
+
+        if (previousContainer) {
+            skift = previousContainer;
+        } else {
+            skift = document.createElement('div');
+            skift.className = 'skift';
+        }
 
         const style = document.createElement('style');
         style.innerHTML = require('./ui.css');
 
-        const testListEl = document.createElement('div');
-        testListEl.className = 'test-list';
+        const header = document.createElement('div');
+        header.className = 'header';
+        header.textContent = 'Skift';
+
+        const testList = document.createElement('div');
+        testList.className = 'tests';
 
         tests.subscribe(async list => {
-            while (testListEl.hasChildNodes()) {
-                testListEl.removeChild(testListEl.lastChild as Node);
+            while (testList.hasChildNodes()) {
+                testList.removeChild(testList.lastChild as Node);
             }
-            testListEl.innerHTML = (await Promise.all(list.map(renderTest))).join('');
+            testList.innerHTML = (await Promise.all(list.map(renderTest))).join('');
         });
-
-        const previousContainer = document.querySelector('.skift .container');
-
-        if (previousContainer) {
-            container = previousContainer;
-        } else {
-            container = document.createElement('div');
-            container.appendChild(testListEl);
-            container.className = 'container';
-        }
         const button = document.createElement('button');
 
         button.className = 'reset';
@@ -107,32 +112,33 @@ export const uiFactory = (
         button.addEventListener('click', () => {
             reset();
         });
-        container.appendChild(button);
 
-        const close = document.createElement('div');
+        const close = document.createElement('span');
         close.className = 'close';
         close.textContent = 'X';
         close.addEventListener('click', () => {
             hide();
         });
-        container.appendChild(close);
+        header.appendChild(close);
 
+        skift.appendChild(header);
         skift.appendChild(style);
-        skift.appendChild(container);
+        skift.appendChild(testList);
+        skift.appendChild(button);
         document.body.appendChild(skift);
         isInitialized = true;
     }
 
     function show() {
         if (isInitialized) {
-            container.className = 'container';
+            skift.className = 'skift';
         } else {
             showSplitTestUi();
         }
     }
 
     function hide() {
-        container.className = 'container hideme';
+        skift.className = 'skift hideme';
     }
 
     return {

diff --git a/tests/api.spec.ts b/tests/api.spec.ts
@@ -47,7 +47,7 @@ describe('Top-level api', () => {
 
         skift.ui.show();
 
-        const skiftUI = document.querySelector('.skift .container');
+        const skiftUI = document.querySelector('.skift');
         expect(skiftUI).toBeTruthy();
     });