feat: options as clickable and buttons as buttons (#202)

watson-developer-cloud · Sep 24, 2018 · 918a1d5 · 918a1d5
1 parent 88678d9
commit 918a1d5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -444,7 +444,20 @@ html{
   font-style: normal;
 }
 
-.button-options {
+.options-list {
   color: #8d25e8;
   cursor: pointer;
 }
+
+.options-button {
+  color: white;
+  background-color: #8d25e8;
+  border-radius: 6px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin: 3px;
+  cursor: pointer;
+  display: inline-block;
+}
diff --git a/public/js/conversation.js b/public/js/conversation.js
@@ -206,20 +206,20 @@ var ConversationPanel = (function () {
         list = '<ul>';
         for (i = 0; i < optionsList.length; i++) {
           if (optionsList[i].value) {
-            list += '<li>' + optionsList[i].label + '</li>';
+            list += '<li><div class="options-list" onclick="ConversationPanel.sendMessage(\'' +
+            optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div></li>';
           }
         }
         list += '</ul>';
       } else if (preference === 'button') {
-        list = '<ul>';
+        list = '<br>';
         for (i = 0; i < optionsList.length; i++) {
           if (optionsList[i].value) {
-            var item = '<li><div class="button-options" onclick="ConversationPanel.sendMessage(\'' +
-              optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div></li>';
+            var item = '<div class="options-button" onclick="ConversationPanel.sendMessage(\'' +
+              optionsList[i].value.input.text + '\');" >' + optionsList[i].label + '</div>';
             list += item;
           }
         }
-        list += '</ul>';
       }
     }
     return list;