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

adjust search icons, generalise nav tasks to tabs

Browse source
This commit is contained in:
Felix Niklas 2015-05-08 18:11:33 +02:00
parent 24c2bca708
commit e8a5d5326f
11 changed files with 61 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/navigation.js.coffee
View file

@ -167,9 +167,9 @@ class App.Navigation extends App.Controller
data = data =
display: "##{ticket.number} - #{ticket.title}" display: "##{ticket.number} - #{ticket.title}"
id: ticket.id id: ticket.id
class: "task level-1 ticket-popover" class: "level-1 ticket-popover"
url: ticket.uiUrl() url: ticket.uiUrl()
iconClass: "priority " + ticket.icon() iconClass: ticket.icon()
area.result.push data area.result.push data
else if area.name is 'User' else if area.name is 'User'
area.result = [] area.result = []

2
app/assets/javascripts/app/models/organization.js.coffee
View file

@ -18,7 +18,7 @@ class App.Organization extends App.Model
'#organization/profile/' + @id '#organization/profile/' + @id
icon: (user) -> icon: (user) ->
"organization icon" "organization"
@_fillUp: (data) -> @_fillUp: (data) ->

2
app/assets/javascripts/app/models/ticket.js.coffee
View file

@ -39,7 +39,7 @@ class App.Ticket extends App.Model
level level
icon: (user) -> icon: (user) ->
"priority icon level-#{ @level() }" "priority"
iconTitle: (user) -> iconTitle: (user) ->
App.TicketState.find( @state_id ).displayName() App.TicketState.find( @state_id ).displayName()

2
app/assets/javascripts/app/models/user.js.coffee
View file

@ -34,7 +34,7 @@ class App.User extends App.Model
'#user/profile/' + @id '#user/profile/' + @id
icon: (user) -> icon: (user) ->
"user icon" "user"
initials: -> initials: ->
if @firstname && @lastname && @firstname[0] && @lastname[0] if @firstname && @lastname && @firstname[0] && @lastname[0]

8
app/assets/javascripts/app/views/navigation/menu.jst.eco
View file

@ -2,9 +2,7 @@
<% if item.child: %> <% if item.child: %>
<li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>"> <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
<a href="<%= item.target %>" class="dropdown-toggle horizontal center" data-toggle="dropdown"> <a href="<%= item.target %>" class="dropdown-toggle horizontal center" data-toggle="dropdown">
<span class="nav-item-icon"> <svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
<svg class="icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
</span>
<span class="nav-item-name flex"> <span class="nav-item-name flex">
<%- @T( item.name ) %> <%- @T( item.name ) %>
</span> </span>
@ -25,9 +23,7 @@
<% else: %> <% else: %>
<li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>"> <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
<a class="horizontal center" href="<%= item.target %>"> <a class="horizontal center" href="<%= item.target %>">
<span class="nav-item-icon"> <svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
<svg class="icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
</span>
<span class="nav-item-name flex"> <span class="nav-item-name flex">
<%- @T( item.name ) %> <%- @T( item.name ) %>
</span> </span>

6
app/assets/javascripts/app/views/navigation/result.jst.eco
View file

@ -2,9 +2,9 @@
<% if i > 0: %> <li class="divider"></li> <% end %> <% if i > 0: %> <li class="divider"></li> <% end %>
<% for item in area.result: %> <% for item in area.result: %>
<li> <li>
<a href="<%- item.url %>" class="<%= item.class %> horizontal center icon-switch" data-id="<%= item.id %>"> <a href="<%- item.url %>" class="tab tab--search <%= item.class %>" data-id="<%= item.id %>">
<div class="<%= item.iconClass %> icon"></div> <svg class="tab-icon tab-icon--search"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
<div class="flex u-textTruncate"><%= item.display %></div> <span class="tab-name flex u-textTruncate"><%= item.display %></span>
</a> </a>
</li> </li>
<% end %> <% end %>

26
app/assets/javascripts/app/views/task_widget_tasks.jst.eco
View file

@ -1,18 +1,16 @@
<% for item in @item_list: %> <% for item in @item_list: %>
<a href="<%- item.data.url %>" title="<%= item.data.title %>" class="task <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>"> <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="tab <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>">
<div class="icon-holder"> <svg class="tab-icon">
<svg class="task-icon"> <% if item.task.notify && item.data.iconClass is 'priority': %>
<% if item.task.notify && item.data.iconClass is 'priority': %> <use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
<use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" /> <use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" /> <% else: %>
<% else: %> <use xlink:href="#icon-<%= item.data.iconClass %>" />
<use xlink:href="#icon-<%= item.data.iconClass %>" /> <% end %>
<% end %> </svg>
</svg> <div class="tab-name u-textTruncate flex"><%= item.data.head %></div>
</div> <div class="closeTab js-close" title="<%- @Ti('close') %>">
<div class="task-name u-textTruncate flex"><%= item.data.head %></div> <div class="closeTab-inner">
<div class="closeTask js-close" title="<%- @Ti('close') %>">
<div class="closeTask-inner">
<svg class="icon"><use xlink:href="#icon-close" /></svg> <svg class="icon"><use xlink:href="#icon-close" /></svg>
</div> </div>
</div> </div>

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

@ -2074,7 +2074,7 @@ footer {
color: white; color: white;
} }
.main-navigation > li.active > a .icon { .main-navigation > li.active .nav-icon {
fill: currentColor; fill: currentColor;
} }
@ -2082,7 +2082,7 @@ footer {
background: #389ed9; background: #389ed9;
} }
.navigation .nav-item-icon .icon { .nav-icon {
margin-right: 15px; margin-right: 15px;
vertical-align: bottom; vertical-align: bottom;
width: 24px; width: 24px;
@ -2110,56 +2110,31 @@ footer {
@extend .u-highlight, .u-textTruncate; @extend .u-highlight, .u-textTruncate;
} }
.tasks--standalone .icon-holder {
width: 20px;
}
.tasks--standalone .icon-holder .icon {
margin-top: 4px;
}
.tasks--standalone .time { .tasks--standalone .time {
color: hsl(198,19%,72%); color: hsl(198,19%,72%);
} }
.tasks--standalone .task .priority.icon:after { .tab {
background: white;
}
.task {
padding: 10px 15px 7px 0; padding: 10px 15px 7px 0;
position: relative; position: relative;
color: #808080;
@extend .u-clickable, .horizontal, .center; @extend .u-clickable, .horizontal, .center;
} }
.task-icon { .tasks-navigation .tab {
width: 16px;
height: 16px;
fill: #808080;
}
.tasks-navigation .task {
height: 38px; height: 38px;
border-bottom: 1px solid #33363e; border-bottom: 1px solid #33363e;
} }
.tasks-navigation .task:not(.is-active):hover { .tasks-navigation .tab:not(.is-active):hover {
background: #26272e; background: #26272e;
} }
.tasks-navigation .task-name { .navigation .tab-name {
color: #808080; text-align: left;
} }
.tasks-navigation .icon-holder { .tasks-navigation .tab-icon {
width: 30px;
position: relative;
@extend .centered;
}
.tasks-navigation .task-icon {
margin-right: 3px;
margin-top: -3px;
&.loading { &.loading {
width: 10px; width: 10px;
@ -2171,48 +2146,56 @@ footer {
} }
} }
.task:hover { .tab:hover {
color: #808080;
text-decoration: none; text-decoration: none;
} }
.task.is-active { .tab.is-active,
.tab.tab--search:hover {
background: #389ed9; background: #389ed9;
color: white;
.task-icon { .tab-icon {
fill: white; fill: white;
} }
.task-name {
color: white;
}
} }
.task.active .priority.icon:after { .tab.tab--search {
background-color: #389ed9; height: 30px;
}
.tab-icon {
width: 16px;
height: 16px;
fill: #808080;
margin-right: 7px;
margin-left: 7px;
margin-top: -3px;
} }
.level-1.is-active { .level-1.is-active {
background-color: #38ae6a; background-color: #38ae6a;
} }
.level-1 .task-icon { .level-1 .tab-icon {
fill: #38ae6a; fill: #38ae6a;
} }
.level-2.is-active { .level-2.is-active {
background-color: #f35910; background-color: #f35910;
} }
.level-2 .task-icon { .level-2 .tab-icon {
fill: #f35910; fill: #f35910;
} }
.level-3.is-active { .level-3.is-active {
background-color: #faab00; background-color: #faab00;
} }
.level-3 .task-icon { .level-3 .tab-icon {
fill: #faab00; fill: #faab00;
} }
.task-icon .inner-circle { .tab-icon .inner-circle {
will-change: opacity; will-change: opacity;
animation: fade 3s ease-in-out infinite; animation: fade 3s ease-in-out infinite;
} }
@ -2223,7 +2206,7 @@ footer {
to { opacity: 1 } to { opacity: 1 }
} }
.task .closeTask { .tab .closeTab {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -2233,11 +2216,11 @@ footer {
@extend .u-clickable, .centered; @extend .u-clickable, .centered;
} }
.task:hover .closeTask { .tab:hover .closeTab {
visibility: visible; visibility: visible;
} }
.closeTask-inner { .closeTab-inner {
width: 21px; width: 21px;
height: 21px; height: 21px;
background-color: #2c2d36; background-color: #2c2d36;
@ -2245,11 +2228,11 @@ footer {
@extend .centered; @extend .centered;
} }
.closeTask:hover .closeTask-inner { .closeTab:hover .closeTab-inner {
background-color: #972e29; background-color: #972e29;
} }
.closeTask .icon { .closeTab .icon {
width: 13px; width: 13px;
height: 13px; height: 13px;
fill: white; fill: white;
@ -2258,7 +2241,7 @@ footer {
transform: scale(0.7); transform: scale(0.7);
} }
.closeTask:hover .icon { .closeTab:hover .icon {
opacity: 1; opacity: 1;
} }
@ -2380,34 +2363,6 @@ footer {
margin: 14px 0 17px; margin: 14px 0 17px;
} }
.search .custom-dropdown-menu > li > a {
height: 30px;
padding: 0 15px 0 10px;
color: #808080;
border: none;
}
.search .custom-dropdown-menu > li > a .icon {
margin-right: 13px;
}
.search .custom-dropdown-menu > li:hover > a,
.search .custom-dropdown-menu > li.active > a {
background: #3fa9f5;
color: white;
text-decoration: none;
}
.search .custom-dropdown-menu > li:hover > a .priority.icon,
.search .custom-dropdown-menu > li.active > a .priority.icon {
background: white;
}
.search .custom-dropdown-menu > li:hover > a .priority.icon:after,
.search .custom-dropdown-menu > li.active > a .priority.icon:after {
background: #3fa9f5;
}
.user-menu { .user-menu {
padding: 0; padding: 0;
margin: 0; margin: 0;

4
gulpfile.js
View file

@ -13,9 +13,7 @@ gulp.task('svgstore', function () {
.pipe(cheerio({ .pipe(cheerio({
run: function ($) { run: function ($) {
// remove green-screen color // remove green-screen color
$('[fill="#50E3C2"]').removeAttr('fill'); $('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill');
// remove fill=none (<g>'s have it)
$('[fill="none"]').removeAttr('fill');
}, },
parserOptions: { xmlMode: true } parserOptions: { xmlMode: true }
})) }))

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

2
public/assets/images/icons/stopwatch.svg
View file

@ -6,7 +6,7 @@
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="stopwatch" sketch:type="MSArtboardGroup"> <g id="stopwatch" sketch:type="MSArtboardGroup">
<path d="M10.5,24.8 C9.5,23.9 8.4,22.9 7.5,22 L13.7,15.8 C14.5,16.7 15.4,17.7 16.3,18.7 C17.1,18.1 17.7,17.6 18.3,17.2 C22.2,14.3 26.5,12.3 31.2,11.2 C31.9,11 32.1,10.8 32.1,10.1 C32,8.4 32.1,6.7 32.1,4.9 L47.5,4.9 L47.5,10.9 C60.3,14.2 69.4,21.8 74,34.1 C77.6,43.7 77,53.3 72.6,62.5 C63.7,81.1 41.2,88.4 22.7,78.7 C3.7,68.8 -3.2,43.3 10.5,24.8 L10.5,24.8 L10.5,24.8 Z M40.0481625,75 C55.1817335,75 67.6921523,62.8930829 67.9948237,47.5576545 C68.2974951,31.4150983 55.282624,19.3081812 40.5526149,19.0055082 C25.3181533,18.7028353 12.2023918,30.9106434 12.0006108,46.5487447 C11.8997204,62.489519 24.3092486,75 40.0481625,75 L40.0481625,75 L40.0481625,75 Z M14.9,12.4 C14.6,12.9 14.5,13.5 14.1,13.9 C11.2,16.8 8.3,19.7 5.5,22.6 C4.8,23.3 4,23.4 3.1,23.1 C1.8,22.7 1,21.8 0.6,20.6 C0.3,19.7 0.4,18.9 1.1,18.1 L9.7,9.5 C10.3,8.9 11.1,8.7 11.9,8.9 C13.4,9.2 14.7,10.8 14.9,12.4 L14.9,12.4 L14.9,12.4 Z M33.7,3.9 C33.5,2.5 34,1.3 35.3,0.8 C38.2,-0.3 41.2,-0.3 44.2,0.8 C45.4,1.2 46,2.4 45.9,3.9 L33.7,3.9 L33.7,3.9 Z" id="Shape" fill="#A9BCC4" sketch:type="MSShapeGroup"></path> <path d="M10.5,24.8 C9.5,23.9 8.4,22.9 7.5,22 L13.7,15.8 C14.5,16.7 15.4,17.7 16.3,18.7 C17.1,18.1 17.7,17.6 18.3,17.2 C22.2,14.3 26.5,12.3 31.2,11.2 C31.9,11 32.1,10.8 32.1,10.1 C32,8.4 32.1,6.7 32.1,4.9 L47.5,4.9 L47.5,10.9 C60.3,14.2 69.4,21.8 74,34.1 C77.6,43.7 77,53.3 72.6,62.5 C63.7,81.1 41.2,88.4 22.7,78.7 C3.7,68.8 -3.2,43.3 10.5,24.8 Z M40.0481625,75 C55.1817335,75 67.6921523,62.8930829 67.9948237,47.5576545 C68.2974951,31.4150983 55.282624,19.3081812 40.5526149,19.0055082 C25.3181533,18.7028353 12.2023918,30.9106434 12.0006108,46.5487447 C11.8997204,62.489519 24.3092486,75 40.0481625,75 Z M14.9,12.4 C14.6,12.9 14.5,13.5 14.1,13.9 C11.2,16.8 8.3,19.7 5.5,22.6 C4.8,23.3 4,23.4 3.1,23.1 C1.8,22.7 1,21.8 0.6,20.6 C0.3,19.7 0.4,18.9 1.1,18.1 L9.7,9.5 C10.3,8.9 11.1,8.7 11.9,8.9 C13.4,9.2 14.7,10.8 14.9,12.4 Z M33.7,3.9 C33.5,2.5 34,1.3 35.3,0.8 C38.2,-0.3 41.2,-0.3 44.2,0.8 C45.4,1.2 46,2.4 45.9,3.9 L33.7,3.9 Z" id="Shape" fill="#A9BCC4" sketch:type="MSShapeGroup"></path>
<circle id="inlay" opacity="0.3" sketch:type="MSShapeGroup" cx="39.9019608" cy="46.9019608" r="24.9019608"></circle> <circle id="inlay" opacity="0.3" sketch:type="MSShapeGroup" cx="39.9019608" cy="46.9019608" r="24.9019608"></circle>
</g> </g>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB