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 class highlightRef extends App.ControllerContent
elements: elements:
'.article-text': 'articles' '.article-text': 'articles'
'.js-highlight-icon': 'highlightIcon'
events: events:
'click .js-highlight': 'toggleHighlight' 'click .js-highlight': 'toggleHighlight'
@ -871,7 +872,7 @@ class highlightRef extends App.ControllerContent
toggleHighlight: (e) => toggleHighlight: (e) =>
if @isActive if @isActive
$(e.currentTarget).removeClass('active') @highlightIcon.css('fill', '')
@isActive = false @isActive = false
@articles.off('mouseup', @onMouseUp) @articles.off('mouseup', @onMouseUp)
@articles.removeAttr('data-highlightcolor') @articles.removeAttr('data-highlightcolor')
@ -883,8 +884,8 @@ class highlightRef extends App.ControllerContent
if !selection.isCollapsed if !selection.isCollapsed
@toggleHighlightAtSelection $(selection.anchorNode).closest @articles.selector @toggleHighlightAtSelection $(selection.anchorNode).closest @articles.selector
else else
# toggle ui # show color
$(e.currentTarget).addClass('active') @highlightIcon.css('fill', @colors[@activeColorIndex].color)
# activate selection background # activate selection background
@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name) @articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
@ -893,9 +894,13 @@ class highlightRef extends App.ControllerContent
@articles.on('mouseup', @onMouseUp) #future: touchend @articles.on('mouseup', @onMouseUp) #future: touchend
pickColor: (e) => pickColor: (e) =>
@$('.js-highlightColor .visibility-change.active').removeClass('active') @$('.js-highlightColor .visibility-change.is-active').removeClass('is-active')
$(e.currentTarget).find('.visibility-change').addClass('active') $(e.currentTarget).find('.visibility-change').addClass('is-active')
@activeColorIndex = $(e.currentTarget).attr('data-key') @activeColorIndex = $(e.currentTarget).attr('data-key')
if @isActive
@highlightIcon.css('fill', @colors[@activeColorIndex].color)
@setColor() @setColor()
onMouseUp: (e) => 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">
<div class="ticketZoom-controls"> <div class="ticketZoom-controls">
<div class="btn btn--action btn--split--first js-highlight centered"> <div class="btn btn--action btn--split--first js-highlight">
<svg class="marker-icon"><use xlink:href="#icon-marker" /></svg> <svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg>
</div> </div>
<div class="dropdown dropdown--actions"> <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> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
@ -17,8 +17,8 @@
<span class="color-swatch icon" style="background: <%= entry.color %>"></span> <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span> </span>
<%= entry.name %> <%= entry.name %>
<span class="dropdown-activeSpacer visibility-change<%= ' active' if i is @activeColorIndex %>"> <span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
<span class="white checkmark icon" data-visible="active"></span> <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
</span> </span>
</a> </a>
<% end %> <% end %>

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

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