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

make color-swatch click area bigger

Browse source
This commit is contained in:
Felix Niklas 2015-11-25 15:08:11 +01:00
parent a2f9861fca
commit 3000d06a2b
5 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/channel/color_swatch.jst.eco
View file

@ -1 +1 @@
<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div> <div class="color-swatch js-swatch" style="color: <%= @color %>" data-color="<%= @color %>"></div>

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

@ -15,7 +15,7 @@
<li role="presentation"> <li role="presentation">
<a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>"> <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
<span class="dropdown-iconSpacer"> <span class="dropdown-iconSpacer">
<span class="color-swatch icon" style="background: <%= entry.color %>"></span> <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
</span> </span>
<%- @Ti(entry.name) %> <%- @Ti(entry.name) %>
<span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>"> <span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">

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

@ -11,19 +11,19 @@
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a> <a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
</li> </li>
</ul> </ul>
</div> </div>

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

@ -10,7 +10,7 @@
<li role="presentation"> <li role="presentation">
<a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>"> <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
<span class="dropdown-iconSpacer"> <span class="dropdown-iconSpacer">
<span class="color-swatch icon" style="background: <%= entry.color %>"></span> <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
</span> </span>
<%- @Ti(entry.name) %> <%- @Ti(entry.name) %>
<span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>"> <span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">

21
app/assets/stylesheets/zammad.scss
View file

@ -2332,13 +2332,18 @@ ol.tabs li {
} }
.color-swatch { .color-swatch {
border-radius: 100%; padding: 2px;
width: 11px; margin: -2px 0;
height: 11px;
cursor: pointer; cursor: pointer;
& + .color-swatch { /* :after technique for bigger click area */
margin-left: 4px; &:after {
content: "";
display: inline-block;
height: 11px;
width: 11px;
border-radius: 100%;
background: currentColor;
} }
} }
@ -7440,7 +7445,7 @@ output {
position: relative; position: relative;
height: 100%; height: 100%;
transform-origin: left top; transform-origin: left top;
overflow: auto; overflow: hidden;
&[data-mode=screenshot] iframe, &[data-mode=screenshot] iframe,
&[data-mode=iframe] img { &[data-mode=iframe] img {
@ -7466,13 +7471,13 @@ output {
.browser-head { .browser-head {
display: flex; display: flex;
align-items: center;
padding: 10px; padding: 10px;
border-bottom: 1px solid hsl(0,0%,90%); border-bottom: 1px solid hsl(0,0%,90%);
.browser-input { .browser-input {
flex: 1;
position: relative; position: relative;
flex: 1;
margin-right: 10px;
input { input {
min-width: 0; min-width: 0;