From 9999caf2d903842a5770888107e4f96e190f23f9 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 1 Sep 2014 13:23:36 +0200
Subject: [PATCH] introduce .u-unclickable, refactor .u-clickable

new camelCase sole purpose utility classes
---
 .../javascripts/app/views/ticket_zoom.jst.eco | 10 ++++----
 .../views/ticket_zoom/article_view.jst.eco    |  2 +-
 .../app/views/ticket_zoom/edit.jst.eco        | 25 +++++++++++--------
 .../javascripts/app/views/widget/tag.jst.eco  |  8 +++---
 app/assets/stylesheets/zzz.css.erb            | 17 +++++++------
 5 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index 155c9159d..a667cf1d6 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -33,7 +33,7 @@
       <div class="sidebar bottom-form-shadow flex">
         <div class="horizontal center">
           <h2 class="flex contain-text"></h2>
-          <div class="close-sidebar centered clickable">
+          <div class="close-sidebar centered u-clickable">
             <div class="arrow-right icon"></div>
           </div>
         </div>
@@ -75,7 +75,7 @@
 
   <form class="bottom-form form-inline horizontal" role="form">
     <div class="form-group">
-      <label for="update_ticket_1_state_id123" class="input-group-addon clickable">State</label>
+      <label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
       <select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
         <option value="4">closed</option>
         <option value="1" selected="">new</option>
@@ -84,7 +84,7 @@
       </select>
     </div>
     <div class="form-group is-changed">
-      <label for="update_ticket_1_priority_id123" class="input-group-addon clickable">Priority</label>
+      <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
       <select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
         <option value="1">1 low</option>
         <option value="2" selected="">2 normal</option>
@@ -92,7 +92,7 @@
       </select>
     </div>
     <div class="form-group">
-      <label for="update_ticket_1_group_id123" class="input-group-addon clickable">Group</label>
+      <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
       <select id="update_ticket_1_group_id123" class="form-control" name="group_id">
         <option value="4">FillGroup::450863</option>
         <option value="3">FillGroup::918672</option>
@@ -101,7 +101,7 @@
       </select>
     </div>
     <div class="form-group">
-      <label for="update_ticket_1_owner_id123" class="input-group-addon clickable">Owner</label>
+      <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
       <select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
         <option value="">-</option>
         <option value="3">Felix Niklas</option>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index 31d703f0a..82584ad98 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -63,7 +63,7 @@
       <% if article.actions: %>
       <div class="article-actions horizontal stretch">
         <% for action in article.actions: %>
-          <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action clickable<% if action.class: %> <%= action.class %><% end %>">
+          <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
             <span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
           </a>
         <% end %>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
index 151f0ec57..5934119c6 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
@@ -4,28 +4,28 @@
       <div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
       <div class="edit-controls">
         <div class="dark pop-select">
-          <div class="pop-selected clickable centered">
+          <div class="pop-selected u-clickable centered">
             <div class="gray <%- @type %> channel icon"></div>
           </div>
           <div class="pop-selector hide">
             <div class="horizontal">
-              <div class="pop-selectable clickable centered" data-value="email">
+              <div class="pop-selectable u-clickable centered" data-value="email">
                 <div class="white email channel icon"></div>
               </div>
-              <div class="pop-selectable clickable centered" data-value="facebook">
+              <div class="pop-selectable u-clickable centered" data-value="facebook">
                 <div class="white facebook channel icon"></div>
               </div>
-              <div class="pop-selectable clickable centered" data-value="twitter">
+              <div class="pop-selectable u-clickable centered" data-value="twitter">
                 <div class="white twitter channel icon"></div>
               </div>
-              <div class="pop-selectable clickable centered" data-value="phone">
+              <div class="pop-selectable u-clickable centered" data-value="phone">
                 <div class="white phone channel icon"></div>
               </div>
             </div>
           </div>
         </div>
         <hr>
-        <div class="recipient-picker clickable horizontal centered">
+        <div class="recipient-picker u-clickable horizontal centered">
           <div class="recipients icon"></div>
           <div class="recipient-count">3</div>
           <div class="recipient-list hide">
@@ -37,7 +37,7 @@
             <div class="list-entry horizontal centered">
               <div class="avatar"  style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
               <div class="list-entry-name flex">Hans Peter Baxxter</div>
-              <div class="list-entry-type clickable horizontal">
+              <div class="list-entry-type u-clickable horizontal">
                 <div class="active" data-value="to">To</div>
                 <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
               </div>
@@ -45,7 +45,7 @@
             <!-- <div class="list-entry horizontal centered">
               <div class="avatar"  style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
               <div class="list-entry-name flex">Julia Maier</div>
-              <div class="list-entry-type clickable horizontal">
+              <div class="list-entry-type u-clickable horizontal">
                 <div class="active" data-value="to">To</div>
                 <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
               </div>
@@ -53,7 +53,7 @@
             <div class="list-entry horizontal centered">
               <div class="avatar"  style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
               <div class="list-entry-name flex">Remo Batlogg</div>
-              <div class="list-entry-type clickable horizontal">
+              <div class="list-entry-type u-clickable horizontal">
                 <div class="active" data-value="to">To</div>
                 <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
               </div>
@@ -71,12 +71,15 @@
         <div class="text-bubble">
           <div class="bubble-arrow"></div>
           <textarea></textarea>
-          <span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
+          <div class="bubble-placeholder">
+            <span class="u-unclickable">Antwort eingeben oder </span>
+            <span class="highlight u-clickable js-upload">Dateien wählen</span>
+          </div>
         </div>
       </div>
       <div class="edit-controls">
         <div class="horizontal justify-end center">
-          <div class="visibility toggle clickable centered">
+          <div class="visibility toggle u-clickable centered">
             <div class="internal-visibility">
               <div class="internal visibility icon"></div>
               <div class="visibility-label">internal</div>
diff --git a/app/assets/javascripts/app/views/widget/tag.jst.eco b/app/assets/javascripts/app/views/widget/tag.jst.eco
index 8727ae492..f9a7699ce 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -5,21 +5,21 @@
     <li class="horizontal center">
       <span class="flex">Midi Notes</span>
       <span>3</span>
-      <span class="tag-delete js-delete centered clickable">
+      <span class="tag-delete js-delete centered u-clickable">
         <span class="delete icon"></span>
       </span>
     <li class="horizontal center">
       <span class="flex">Transitions</span>
       <span>23</span>
-      <span class="tag-delete js-delete centered clickable">
+      <span class="tag-delete js-delete centered u-clickable">
         <span class="delete icon"></span>
       </span>
     <li class="horizontal center">
       <span class="flex">New UI</span>
       <span>3</span>
-      <span class="tag-delete js-delete centered clickable">
+      <span class="tag-delete js-delete centered u-clickable">
         <span class="delete icon"></span>
       </span>
   </ul>
-  <div class="text-muted js-newTag clickable">+ <%- @T('Add Tag') %></div>
+  <div class="text-muted js-newTag u-clickable">+ <%- @T('Add Tag') %></div>
 </div>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 720057ab4..36005fcb9 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -14,6 +14,16 @@ small {
   color: hsl(202,68%,54%);
 }
 
+.u-unclickable {
+  pointer-events: none;
+}
+
+.u-clickable {
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+}
+
 #app > nav {
   position: relative;
   z-index: 1;
@@ -1483,12 +1493,6 @@ footer {
     margin-bottom: 5px;
 }
 
-.clickable {
-  cursor: pointer;
-  -webkit-user-select: none;
-          user-select: none;
-}
-
 .customer_info {
 }
 
@@ -2937,7 +2941,6 @@ footer {
       color: #b3b3b3;
       left: 20px;
       top: 10px;
-      pointer-events: none;
     }
 
 .pop-select {