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

update highlight layoutref

Browse source
This commit is contained in:
Felix Niklas 2015-06-02 18:21:14 +02:00
parent 70a912abbd
commit f3db99d62c
3 changed files with 24 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -793,6 +793,7 @@ App.Config.set( 'layout_ref/error', errorRef, 'Routes' )
class highlightRef extends App.ControllerContent
elements:
'.article-text': 'articles'
'.js-highlight-icon': 'highlightIcon'
events:
'click .js-highlight': 'toggleHighlight'
@ -871,7 +872,7 @@ class highlightRef extends App.ControllerContent
toggleHighlight: (e) =>
if @isActive
$(e.currentTarget).removeClass('active')
@highlightIcon.css('fill', '')
@isActive = false
@articles.off('mouseup', @onMouseUp)
@articles.removeAttr('data-highlightcolor')
@ -883,8 +884,8 @@ class highlightRef extends App.ControllerContent
if !selection.isCollapsed
@toggleHighlightAtSelection $(selection.anchorNode).closest @articles.selector
else
# toggle ui
$(e.currentTarget).addClass('active')
# show color
@highlightIcon.css('fill', @colors[@activeColorIndex].color)
# activate selection background
@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
@ -893,9 +894,13 @@ class highlightRef extends App.ControllerContent
@articles.on('mouseup', @onMouseUp) #future: touchend
pickColor: (e) =>
@$('.js-highlightColor .visibility-change.active').removeClass('active')
$(e.currentTarget).find('.visibility-change').addClass('active')
@$('.js-highlightColor .visibility-change.is-active').removeClass('is-active')
$(e.currentTarget).find('.visibility-change').addClass('is-active')
@activeColorIndex = $(e.currentTarget).attr('data-key')
if @isActive
@highlightIcon.css('fill', @colors[@activeColorIndex].color)
@setColor()
onMouseUp: (e) =>

10
app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
View file

@ -2,11 +2,11 @@
<div class="ticketZoom">
<div class="ticketZoom-controls">
<div class="btn btn--action btn--split--first js-highlight centered">
<svg class="marker-icon"><use xlink:href="#icon-marker" /></svg>
<div class="btn btn--action btn--split--first js-highlight">
<svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg>
</div>
<div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" id="highlight" data-toggle="dropdown" aria-expanded="true">
<div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
@ -17,8 +17,8 @@
<span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span>
<%= entry.name %>
<span class="dropdown-activeSpacer visibility-change<%= ' active' if i is @activeColorIndex %>">
<span class="white checkmark icon" data-visible="active"></span>
<span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
<svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
</span>
</a>
<% end %>

15
app/assets/stylesheets/zammad.css.scss
View file

@ -415,8 +415,7 @@ span[data-tooltip]:hover:before {
Interactive Visibility Change Classes:
<div class="visibility-change">
<div class="icon marker active" data-visible="active"></div>
<div class="icon marker" data-visible="hover"></div>
<svg class="icon-marker" data-visible="active"><use xlink:href="#icon-marker" /></svg>
</div>
Important: HTML Order active > hover > normal
@ -428,7 +427,7 @@ span[data-tooltip]:hover:before {
display: none;
}
&.active [data-visible=active] {
&.is-active [data-visible=active] {
display: block;
& ~ [data-visible=normal] {
@ -2743,9 +2742,8 @@ footer {
align-items: center;
}
.marker-icon {
fill: black;
opacity: .39;
.icon-marker {
fill: hsl(0,0%,61%);
width: 17px;
height: 19px;
}
@ -4925,23 +4923,18 @@ label + .wizard-buttonList {
}
[data-highlightcolor=Yellow]::selection { background: #f7e7b2; }
[data-highlightcolor=Yellow]::-moz-selection { background: #f7e7b2; }
.highlight-Yellow { background: #f7e7b2; }
[data-highlightcolor=Green]::selection { background: #bce7b6; }
[data-highlightcolor=Green]::-moz-selection { background: #bce7b6; }
.highlight-Green { background: #bce7b6; }
[data-highlightcolor=Blue]::selection { background: #b3ddf9; }
[data-highlightcolor=Blue]::-moz-selection { background: #b3ddf9; }
.highlight-Blue { background: #b3ddf9; }
[data-highlightcolor=Pink]::selection { background: #fea9c5; }
[data-highlightcolor=Pink]::-moz-selection { background: #fea9c5; }
.highlight-Pink { background: #fea9c5; }
[data-highlightcolor=Purple]::selection { background: #eac5ee; }
[data-highlightcolor=Purple]::-moz-selection { background: #eac5ee; }
.highlight-Purple { background: #eac5ee; }