Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

introduce .u-unclickable, refactor .u-clickable

Browse source 
new camelCase sole purpose utility classes
This commit is contained in:
Felix Niklas 2014-09-01 13:23:36 +02:00
parent 091504eeb4
commit 9999caf2d9
5 changed files with 34 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/app/views/ticket_zoom.jst.eco
View file

@ -33,7 +33,7 @@
<div class="sidebar bottom-form-shadow flex"> <div class="sidebar bottom-form-shadow flex">
<div class="horizontal center"> <div class="horizontal center">
<h2 class="flex contain-text"></h2> <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 class="arrow-right icon"></div>
</div> </div>
</div> </div>
@ -75,7 +75,7 @@
<form class="bottom-form form-inline horizontal" role="form"> <form class="bottom-form form-inline horizontal" role="form">
<div class="form-group"> <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"> <select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
<option value="4">closed</option> <option value="4">closed</option>
<option value="1" selected="">new</option> <option value="1" selected="">new</option>
@ -84,7 +84,7 @@
</select> </select>
</div> </div>
<div class="form-group is-changed"> <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"> <select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
<option value="1">1 low</option> <option value="1">1 low</option>
<option value="2" selected="">2 normal</option> <option value="2" selected="">2 normal</option>
@ -92,7 +92,7 @@
</select> </select>
</div> </div>
<div class="form-group"> <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"> <select id="update_ticket_1_group_id123" class="form-control" name="group_id">
<option value="4">FillGroup::450863</option> <option value="4">FillGroup::450863</option>
<option value="3">FillGroup::918672</option> <option value="3">FillGroup::918672</option>
@ -101,7 +101,7 @@
</select> </select>
</div> </div>
<div class="form-group"> <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"> <select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
<option value="">-</option> <option value="">-</option>
<option value="3">Felix Niklas</option> <option value="3">Felix Niklas</option>

2
app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
View file

@ -63,7 +63,7 @@
<% if article.actions: %> <% if article.actions: %>
<div class="article-actions horizontal stretch"> <div class="article-actions horizontal stretch">
<% for action in article.actions: %> <% 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 ) %> <span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
</a> </a>
<% end %> <% end %>

25
app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
View file

@ -4,28 +4,28 @@
<div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div> <div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
<div class="edit-controls"> <div class="edit-controls">
<div class="dark pop-select"> <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 class="gray <%- @type %> channel icon"></div>
</div> </div>
<div class="pop-selector hide"> <div class="pop-selector hide">
<div class="horizontal"> <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 class="white email channel icon"></div>
</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 class="white facebook channel icon"></div>
</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 class="white twitter channel icon"></div>
</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 class="white phone channel icon"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="recipient-picker clickable horizontal centered"> <div class="recipient-picker u-clickable horizontal centered">
<div class="recipients icon"></div> <div class="recipients icon"></div>
<div class="recipient-count">3</div> <div class="recipient-count">3</div>
<div class="recipient-list hide"> <div class="recipient-list hide">
@ -37,7 +37,7 @@
<div class="list-entry horizontal centered"> <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="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-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 class="active" data-value="to">To</div>
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div> <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
</div> </div>
@ -45,7 +45,7 @@
<!-- <div class="list-entry horizontal centered"> <!-- <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="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-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 class="active" data-value="to">To</div>
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div> <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
</div> </div>
@ -53,7 +53,7 @@
<div class="list-entry horizontal centered"> <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="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-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 class="active" data-value="to">To</div>
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div> <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
</div> </div>
@ -71,12 +71,15 @@
<div class="text-bubble"> <div class="text-bubble">
<div class="bubble-arrow"></div> <div class="bubble-arrow"></div>
<textarea></textarea> <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> </div>
<div class="edit-controls"> <div class="edit-controls">
<div class="horizontal justify-end center"> <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">
<div class="internal visibility icon"></div> <div class="internal visibility icon"></div>
<div class="visibility-label">internal</div> <div class="visibility-label">internal</div>

8
app/assets/javascripts/app/views/widget/tag.jst.eco
View file

@ -5,21 +5,21 @@
<li class="horizontal center"> <li class="horizontal center">
<span class="flex">Midi Notes</span> <span class="flex">Midi Notes</span>
<span>3</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 class="delete icon"></span>
</span> </span>
<li class="horizontal center"> <li class="horizontal center">
<span class="flex">Transitions</span> <span class="flex">Transitions</span>
<span>23</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 class="delete icon"></span>
</span> </span>
<li class="horizontal center"> <li class="horizontal center">
<span class="flex">New UI</span> <span class="flex">New UI</span>
<span>3</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 class="delete icon"></span>
</span> </span>
</ul> </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> </div>

17
app/assets/stylesheets/zzz.css.erb
View file

@ -14,6 +14,16 @@ small {
color: hsl(202,68%,54%); color: hsl(202,68%,54%);
} }
.u-unclickable {
pointer-events: none;
}
.u-clickable {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
#app > nav { #app > nav {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -1483,12 +1493,6 @@ footer {
margin-bottom: 5px; margin-bottom: 5px;
} }
.clickable {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.customer_info { .customer_info {
} }
@ -2937,7 +2941,6 @@ footer {
color: #b3b3b3; color: #b3b3b3;
left: 20px; left: 20px;
top: 10px; top: 10px;
pointer-events: none;
} }
.pop-select { .pop-select {