Add preview for color changes in profile edit (#4212)

forem · Oct 8, 2019 · 81e3f65 · 81e3f65
1 parent 1cf125c
commit 81e3f65
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 12 deletions.
diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss
@@ -165,6 +165,42 @@
         }
       }
     }
+    .settings-color-select-container{
+      display: flex;
+      width:100%;
+      .color-select-fields{
+        width:50%;
+        .select-field-wrapper{
+          display: flex;
+          width:100%;
+          .color-select-textbox{
+            flex:1;
+            min-width:70px;
+          }
+          input[type="color"] {
+            box-sizing:border-box;
+            border: none;
+            border-radius:0px;
+            padding:3px;
+            width:50px;
+            height:48px;
+            cursor:pointer;
+          }
+        }
+      }
+      .color-select-preview{
+        flex:1;
+        text-align:center;
+        padding:20px;
+        #color-select-preview-logo{
+          padding:25px 20px;
+          border-radius:7px;
+          margin-top:20px;
+          display:none; /* Changes to inline-block when javascript loads preview */
+        }
+      }
+
+    }
     .checkbox-field {
       display: flex;
       flex-direction: column;

diff --git a/app/javascript/packs/colorPreview.js b/app/javascript/packs/colorPreview.js
@@ -0,0 +1,62 @@
+const colorField = {
+  // input type="color"
+  bgColor: document.getElementById('bg-color-colorfield'),
+  textColor: document.getElementById('text-color-colorfield'),
+};
+
+const textField = {
+  // input type="text"
+  bgColor: document.getElementById('bg-color-textfield'),
+  textColor: document.getElementById('text-color-textfield'),
+};
+
+const preview = document.getElementById('color-select-preview-logo');
+
+// Assigns input[type='text'] values to input[type='color']
+function updateColorFields() {
+  colorField.bgColor.value = textField.bgColor.value;
+  colorField.textColor.value = textField.textColor.value;
+}
+
+// Updating text fields when color fields are changed
+function updateTextFields() {
+  textField.bgColor.value = colorField.bgColor.value;
+  textField.textColor.value = colorField.textColor.value;
+}
+
+// Updates Preview Colors
+function updatePreview() {
+  preview.style.backgroundColor = textField.bgColor.value;
+  preview.style.fill = textField.textColor.value;
+}
+
+// Event Watchers
+// When color fields change -> updateTextField values and refresh preview
+function watchColorFields() {
+  updateTextFields();
+  updatePreview();
+}
+
+// When text fields change -> updateColorField values and refresh preview
+function watchTextFields(e) {
+  if (e.target.value.match(/#[0-9a-f]{6}/gi)) {
+    updateColorFields();
+    updatePreview();
+  }
+}
+
+function initPreview() {
+  // Event Listeners
+  colorField.bgColor.addEventListener('input', watchColorFields);
+  colorField.textColor.addEventListener('input', watchColorFields);
+  textField.bgColor.addEventListener('keyup', watchTextFields);
+  textField.textColor.addEventListener('keyup', watchTextFields);
+
+  // on init
+  updateColorFields();
+  updatePreview();
+  preview.style.display = 'inline-block';
+}
+
+initPreview();
+window.InstantClick.on('change', initPreview);
diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb
@@ -1,4 +1,4 @@
-<%= javascript_pack_tag "colorPicker", defer: true %>
+<%= javascript_pack_tag "colorPreview", defer: true %>
 
 <% unless @user.identities.exists?(provider: 'github') %>
   <div class="field">
@@ -71,17 +71,29 @@
     <%= f.label :summary %>
     <%= f.text_area :summary, placeholder: "a short bio.", maxlength: 200 %>
   </div>
-  <div class="field">
-    <% @user.bg_color_hex = user_colors(@user)[:bg] if @user.bg_color_hex.blank? %>
-    <%= f.label :bg_color_hex, "background color" %>
-    <%= f.text_field :bg_color_hex, placeholder: "#000000", class: "color-picker" %>
-    <div class="color-palette"></div>
-  </div>
-  <div class="field">
-    <% @user.bg_color_hex = user_colors(@user)[:text] if @user.text_color_hex.blank? %>
-    <%= f.label :text_color_hex, "text color" %>
-    <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "color-picker" %>
-    <div class="color-palette"></div>
+  <div class="settings-color-select-container">
+    <div class="color-select-fields">
+      <div class="field">
+        <% @user.bg_color_hex = user_colors(@user)[:bg] if @user.bg_color_hex.blank? %>
+        <%= f.label :bg_color_hex, "background color" %><br>
+        <div class="select-field-wrapper">
+          <%= f.text_field :bg_color_hex, placeholder: "#000000", class: "color-select-textbox", id: "bg-color-textfield" %>
+          <input id="bg-color-colorfield" type="color">
+        </div>
+      </div>
+      <div class="field">
+        <% @user.bg_color_hex = user_colors(@user)[:text] if @user.text_color_hex.blank? %>
+        <%= f.label :text_color_hex, "text color" %><br>
+        <div class="select-field-wrapper">
+          <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "color-select-textbox", id: "text-color-textfield" %>
+          <input id="text-color-colorfield" type="color">
+        </div>
+      </div>
+    </div>
+    <div class="color-select-preview">
+      <span style="display:block;">PREVIEW</span>
+      <svg id="color-select-preview-logo" xmlns="http://www.w3.org/2000/svg" version="1" width="90px" viewBox="0 0 132.000000 65.000000" role="img" aria-labelledby="aldzs1ucwkayuyoa6rxtxo2ikd8bpr0q" class="logo"><title id="aldzs1ucwkayuyoa6rxtxo2ikd8bpr0q">App logo</title><path d="M0 33v32h11.3c12.5 0 17.7-1.6 21.5-6.5 3.8-4.8 4.4-9 4-28-.3-16.8-.5-18.2-2.7-21.8C30.3 2.5 26.1 1 12 1H0v32zm23.1-19.1c2.3 1.9 2.4 2.3 2.4 18.5 0 15.7-.1 16.7-2.2 18.8-1.7 1.6-3.5 2.2-7 2.2l-4.8.1-.3-20.8L11 12h4.9c3.3 0 5.6.6 7.2 1.9zM46.1 3.6c-2 2.6-2.1 3.9-2.1 29.6v26.9l2.5 2.4c2.3 2.4 2.9 2.5 16 2.5H76V54.1l-10.2-.3-10.3-.3v-15l6.3-.3 6.2-.3V27H55V12h21V1H62.1c-13.9 0-14 0-16 2.6zM87 15.2c2.1 7.9 5.5 20.8 7.6 28.8 3.2 12.3 4.3 15 7 17.7 1.9 2 4.2 3.3 5.7 3.3 3.1 0 7.1-3.1 8.5-6.7 1-2.6 15.2-55.6 15.2-56.8 0-.3-2.8-.5-6.2-.3l-6.3.3-5.6 21.5c-3.5 13.6-5.8 20.8-6.2 19.5C105.9 40 96 1.9 96 1.4c0-.2-2.9-.4-6.4-.4h-6.4L87 15.2z"></path></svg>
+    </div>
   </div>
   <div class="field">
     <%= f.label :location %>