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

fix arrows and add delete button to avatar picker

Browse source
This commit is contained in:
Felix Niklas 2015-05-26 18:29:04 +02:00
parent 648f46e398
commit c1b73de746
13 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/app/views/dashboard/ticket.jst.eco
View file

@ -12,22 +12,22 @@
<li> <li>
<% if @items_from != 1: %> <% if @items_from != 1: %>
<a class="btn btn--action" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page"> <a class="btn btn--action" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
<svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg> <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
</a> </a>
<% else: %> <% else: %>
<a class="btn btn--action is-disabled" href="#" data-from="" data-type="page"> <a class="btn btn--action is-disabled" href="#" data-from="" data-type="page">
<svg class="icon arrow arrow--left arrow--disabled"><use xlink:href="#icon-arrow-left" /></svg> <svg class="icon-arrow-left arrow--disabled"><use xlink:href="#icon-arrow-left" /></svg>
</a> </a>
<% end %> <% end %>
</li> </li>
<li> <li>
<% if @items_till != @items_total: %> <% if @items_till != @items_total: %>
<a class="btn btn--action" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page"> <a class="btn btn--action" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
<svg class="icon arrow arrow--right"><use xlink:href="#icon-arrow-right" /></svg> <svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
</a> </a>
<% else: %> <% else: %>
<a class="btn btn--action is-disabled" href="#" data-from="" data-type="page"> <a class="btn btn--action is-disabled" href="#" data-from="" data-type="page">
<svg class="icon arrow arrow--right arrow--disabled"><use xlink:href="#icon-arrow-right" /></svg> <svg class="icon-arrow-right arrow--disabled"><use xlink:href="#icon-arrow-right" /></svg>
</a> </a>
</li> </li>
<% end %> <% end %>

2
app/assets/javascripts/app/views/generic/actions.jst.eco
View file

@ -4,7 +4,7 @@
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label><%- @T('Action') %></label> <label><%- @T('Action') %></label>
<% end %> <% end %>
<svg class="arrow 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" aria-labelledby="userAction"> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
<% for item in @items: %> <% for item in @items: %>

2
app/assets/javascripts/app/views/generic/select.jst.eco
View file

@ -6,5 +6,5 @@
<% end %> <% end %>
<% end %> <% end %>
</select> </select>
<svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>

2
app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
View file

@ -4,7 +4,7 @@
<h2 class="u-textTruncate"><%- @T( item.head ) %></h2> <h2 class="u-textTruncate"><%- @T( item.head ) %></h2>
<div class="js-actions flex"></div> <div class="js-actions flex"></div>
<div class="tabsSidebar-close"> <div class="tabsSidebar-close">
<svg class="icon"><use xlink:href="#icon-long-arrow-right" /></svg> <svg class="icon icon-long-arrow-right"><use xlink:href="#icon-long-arrow-right" /></svg>
</div> </div>
</div> </div>
<hr> <hr>

2
app/assets/javascripts/app/views/generic/user_search/input.jst.eco
View file

@ -1,7 +1,7 @@
<div class="u-positionOrigin"> <div class="u-positionOrigin">
<input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>"> <input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
<input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> <input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="dropdown-menu" aria-labelledby="customer_id"> <div class="dropdown-menu" aria-labelledby="customer_id">

2
app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
View file

@ -6,5 +6,5 @@
<%= @organization.displayName() %> <%= @organization.displayName() %>
<span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span> <span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span>
</div> </div>
<svg class="recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg> <svg class="recipientList-arrow icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
</li> </li>

2
app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
View file

@ -1,7 +1,7 @@
<ul class="recipientList-organizationMembers hide" id="<%- @organization.id %>"> <ul class="recipientList-organizationMembers hide" id="<%- @organization.id %>">
<li class="recipientList-controls js-back"> <li class="recipientList-controls js-back">
<div class="btn btn--action btn--onDark"> <div class="btn btn--action btn--onDark">
<svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg> <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
<span class="btn-label"><%- @T('Back') %></span> <span class="btn-label"><%- @T('Back') %></span>
</div> </div>
</ul> </ul>

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

@ -7,7 +7,7 @@
</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 centered" id="highlight" data-toggle="dropdown" aria-expanded="true">
<svg class="arrow 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">
<% for entry, i in @colors: %> <% for entry, i in @colors: %>
@ -30,11 +30,11 @@
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a class="btn btn--action btn--split--first" data-from="0" data-type="page"> <a class="btn btn--action btn--split--first" data-from="0" data-type="page">
<svg class="arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg> <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
</a> </a>
<li> <li>
<a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page"> <a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page">
<svg class="arrow arrow--right"><use xlink:href="#icon-arrow-right" /></svg> <svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
</a> </a>
</ul> </ul>
</li> </li>
@ -55,11 +55,11 @@
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page"> <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
<svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg> <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
</a> </a>
<li> <li>
<a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page"> <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
<svg class="icon arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg> <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
</a> </a>
</ul> </ul>
</div> </div>

4
app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
View file

@ -1,4 +1,6 @@
<div class="avatar-holder"> <div class="avatar-holder">
<span class="avatar size-50" data-avatar-id="<%- @avatar.id %>" style="background-image: url(<%- @src %>)"></span> <span class="avatar size-50" data-avatar-id="<%- @avatar.id %>" style="background-image: url(<%- @src %>)"></span>
<div class="avatar-delete"><div class="delete icon"></div></div> <div class="avatar-delete">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
</div>
</div> </div>

10
app/assets/javascripts/app/views/profile/avatar.jst.eco
View file

@ -9,7 +9,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="avatar-gallery horizontal wrap"> <div class="avatar-gallery">
<% for avatar in @avatars: %> <% for avatar in @avatars: %>
<div class="avatar-holder"> <div class="avatar-holder">
<% if avatar.initial: %> <% if avatar.initial: %>
@ -17,11 +17,13 @@
<% if avatar.default: %> <% if avatar.default: %>
<% cssClass = 'is-active' %> <% cssClass = 'is-active' %>
<% end %> <% end %>
<%- App.Session.get().avatar('50', '', cssClass, true, avatar) %> <%- App.Session.get().avatar('80', '', cssClass, true, avatar) %>
<% else: %> <% else: %>
<span class="avatar size-50 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span> <span class="avatar size-80 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span>
<% if avatar.deletable: %> <% if avatar.deletable: %>
<div class="avatar-delete"><div class="delete icon"></div></div> <div class="avatar-delete">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
</div>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>

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

@ -31,7 +31,7 @@
<option value="2">open</option> <option value="2">open</option>
<option value="3">pending</option> <option value="3">pending</option>
</select> </select>
<svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</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 u-clickable">Priority</label> <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
@ -40,7 +40,7 @@
<option value="2" selected="">2 normal</option> <option value="2" selected="">2 normal</option>
<option value="3">3 high</option> <option value="3">3 high</option>
</select> </select>
<svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label> <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
@ -50,7 +50,7 @@
<option value="2">Twitter</option> <option value="2">Twitter</option>
<option value="1" selected="">Users</option> <option value="1" selected="">Users</option>
</select> </select>
<svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label> <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
@ -58,7 +58,7 @@
<option value="">-</option> <option value="">-</option>
<option value="3">Felix Niklas</option> <option value="3">Felix Niklas</option>
</select> </select>
<svg class="arrow arrow--down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
</form> </form>
<form class="form-inline"> <form class="form-inline">

4
app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
View file

@ -4,10 +4,10 @@
<ul class="pagination"> <ul class="pagination">
<li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'previous in Overview' ) %>"> <li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'previous in Overview' ) %>">
<a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>"> <a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>">
<span class="left arrow icon"></span> <svg class="icon icon-arrow-left<% if !@previous: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-left" /></svg>
</a> </a>
<li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'next in Overview' ) %>"> <li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'next in Overview' ) %>">
<a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>"> <a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>">
<span class="right arrow icon"></span> <svg class="icon icon-arrow-right<% if !@next: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-right" /></svg>
</a> </a>
</ul> </ul>

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

@ -808,7 +808,7 @@ textarea,
padding-right: 34px; padding-right: 34px;
} }
.form-control + .arrow { .form-control + .icon-arrow-down {
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 50%; top: 50%;
@ -1305,7 +1305,10 @@ ol.tabs li {
*/ */
.arrow { .icon-arrow-down,
.icon-arrow-up,
.icon-arrow-left,
.icon-arrow-right {
fill: black; fill: black;
opacity: 0.39; opacity: 0.39;
} }
@ -1314,18 +1317,6 @@ ol.tabs li {
opacity: 0.23; opacity: 0.23;
} }
.arrow--down,
.arrow--up {
width: 13px;
height: 7px;
}
.arrow--left,
.arrow--right {
width: 7px;
height: 13px;
}
.icon-checkmark { .icon-checkmark {
fill: #38AE6A; fill: #38AE6A;
} }
@ -3453,8 +3444,6 @@ footer {
justify-content: center; justify-content: center;
.icon { .icon {
width: 13px;
height: 13px;
fill: black; fill: black;
} }
} }
@ -4061,8 +4050,6 @@ footer {
} }
.recipientList-arrow { .recipientList-arrow {
width: 7px;
height: 13px;
fill: white; fill: white;
opacity: 0.39; opacity: 0.39;
} }
@ -4506,19 +4493,23 @@ label + .wizard-buttonList {
} }
} }
.avatar-gallery {
display: flex;
flex-wrap: wrap;
}
.avatar-holder { .avatar-holder {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin: 0 15px 15px 0; margin: 0 32px 32px 0;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 0 0 4px white;
.avatar { .avatar {
@extend .u-clickable; @extend .u-clickable;
opacity: .33;
&.is-active { &.is-active {
opacity: 1; box-shadow: 0 0 0 4px hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(200,71%,59%);
} }
} }
} }
@ -4530,23 +4521,28 @@ label + .wizard-buttonList {
.avatar-holder .avatar-delete { .avatar-holder .avatar-delete {
position: absolute; position: absolute;
right: -18px; right: -15px;
top: -18px; top: -15px;
width: 30px; width: 40px;
height: 30px; height: 40px;
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
opacity: 0.5; background: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
box-shadow: 0 1px 5px rgba(0,0,0,.05);
@extend .u-clickable; @extend .u-clickable;
&:hover { svg {
opacity: 1; opacity: 0.5;
fill: hsl(234,10%,19%);
} }
.icon { &:hover svg {
position: absolute; opacity: 1;
left: 8px;
bottom: 8px;
} }
} }