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

refactor close nav task

Browse source
This commit is contained in:
Felix Niklas 2014-09-16 00:09:42 +02:00
parent 228177110b
commit c96a0cc57d
3 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/controllers/taskbar_widget.js.coffee
View file

@ -1,6 +1,6 @@
class App.TaskbarWidget extends App.Controller class App.TaskbarWidget extends App.Controller
events: events:
'click [data-type="close"]': 'remove' 'click .js-close': 'remove'
constructor: -> constructor: ->
super super

6
app/assets/javascripts/app/views/task_widget_tasks.jst.eco
View file

@ -4,8 +4,10 @@
<div class="<%= item.data.iconClass %> icon<% if item.task.notify: %> modified<% end %>"></div> <div class="<%= item.data.iconClass %> icon<% if item.task.notify: %> modified<% end %>"></div>
</div> </div>
<div class="name u-textTruncate flex"><%= item.data.head %></div> <div class="name u-textTruncate flex"><%= item.data.head %></div>
<div class="close-task button horizontal centered"> <div class="closeTask js-close u-clickable horizontal centered" title="<%- @T('close') %>">
<div class="close close-task icon" title="<%- @T('close') %>" data-type="close"></div> <div class="closeTask-inner centered">
<div class="white close icon"></div>
</div>
</div> </div>
</a> </a>
<% end %> <% end %>

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

@ -865,11 +865,6 @@ ol.tabs li {
@-ms-keyframes fade { from { opacity: 0 } to { opacity: 1 } } @-ms-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.close-task.icon {
background: #2c2d36;
border-radius: 100%;
}
.organisation.icon { .organisation.icon {
height: 13px; height: 13px;
width: 14px; width: 14px;
@ -1593,27 +1588,39 @@ footer {
border-color: #faab00; border-color: #faab00;
} }
.task .close-task.button { .task .closeTask {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: 40px; width: 50px;
padding-left: 12px; padding-left: 12px;
height: 100%; height: 100%;
visibility: hidden; visibility: hidden;
} }
.task:hover .close-task.button { .task:hover .closeTask {
visibility: visible; visibility: visible;
} }
.close-task.button:hover .icon { .closeTask-inner {
background: #972e29; width: 21px;
height: 21px;
background-color: #2c2d36;
border-radius: 100%;
} }
.close-task.button:hover .icon:after, .closeTask:hover .closeTask-inner {
.close-task.button:hover .icon:before { background-color: #972e29;
background: white; }
.closeTask .icon {
opacity: 0.3;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
.closeTask:hover .icon {
opacity: 1;
} }
.search { .search {