fix arrows and add delete button to avatar picker
This commit is contained in:
parent
648f46e398
commit
c1b73de746
13 changed files with 61 additions and 61 deletions
|
@ -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 %>
|
||||||
|
|
|
@ -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: %>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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,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>
|
|
@ -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;
|
||||||
@extend .u-clickable;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 0 1px 5px rgba(0,0,0,.05);
|
||||||
|
|
||||||
&:hover {
|
@extend .u-clickable;
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
svg {
|
||||||
position: absolute;
|
opacity: 0.5;
|
||||||
left: 8px;
|
fill: hsl(234,10%,19%);
|
||||||
bottom: 8px;
|
}
|
||||||
|
|
||||||
|
&:hover svg {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue