adjust search icons, generalise nav tasks to tabs

This commit is contained in:
Felix Niklas 2015-05-08 18:11:33 +02:00
parent 6448b428ef
commit 37b7b27525
11 changed files with 61 additions and 114 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,7 +1,6 @@
<% 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 %>">
<div class="icon-holder">
<svg class="task-icon">
<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 %>">
<svg class="tab-icon">
<% if item.task.notify && item.data.iconClass is 'priority': %>
<use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
@ -9,10 +8,9 @@
<use xlink:href="#icon-<%= item.data.iconClass %>" />
<% end %>
</svg>
</div>
<div class="task-name u-textTruncate flex"><%= item.data.head %></div>
<div class="closeTask js-close" title="<%- @Ti('close') %>">
<div class="closeTask-inner">
<div class="tab-name u-textTruncate flex"><%= item.data.head %></div>
<div class="closeTab js-close" title="<%- @Ti('close') %>">
<div class="closeTab-inner">
<svg class="icon"><use xlink:href="#icon-close" /></svg>
</div>
</div>

View file

@ -2073,7 +2073,7 @@ footer {
color: white;
}
.main-navigation > li.active > a .icon {
.main-navigation > li.active .nav-icon {
fill: currentColor;
}
@ -2081,7 +2081,7 @@ footer {
background: #389ed9;
}
.navigation .nav-item-icon .icon {
.nav-icon {
margin-right: 15px;
vertical-align: bottom;
width: 24px;
@ -2109,56 +2109,31 @@ footer {
@extend .u-highlight, .u-textTruncate;
}
.tasks--standalone .icon-holder {
width: 20px;
}
.tasks--standalone .icon-holder .icon {
margin-top: 4px;
}
.tasks--standalone .time {
color: hsl(198,19%,72%);
}
.tasks--standalone .task .priority.icon:after {
background: white;
}
.task {
.tab {
padding: 10px 15px 7px 0;
position: relative;
color: #808080;
@extend .u-clickable, .horizontal, .center;
}
.task-icon {
width: 16px;
height: 16px;
fill: #808080;
}
.tasks-navigation .task {
.tasks-navigation .tab {
height: 38px;
border-bottom: 1px solid #33363e;
}
.tasks-navigation .task:not(.is-active):hover {
.tasks-navigation .tab:not(.is-active):hover {
background: #26272e;
}
.tasks-navigation .task-name {
color: #808080;
.navigation .tab-name {
text-align: left;
}
.tasks-navigation .icon-holder {
width: 30px;
position: relative;
@extend .centered;
}
.tasks-navigation .task-icon {
margin-right: 3px;
margin-top: -3px;
.tasks-navigation .tab-icon {
&.loading {
width: 10px;
@ -2170,48 +2145,56 @@ footer {
}
}
.task:hover {
.tab:hover {
color: #808080;
text-decoration: none;
}
.task.is-active {
.tab.is-active,
.tab.tab--search:hover {
background: #389ed9;
color: white;
.task-icon {
.tab-icon {
fill: white;
}
.task-name {
color: white;
}
}
.task.active .priority.icon:after {
background-color: #389ed9;
.tab.tab--search {
height: 30px;
}
.tab-icon {
width: 16px;
height: 16px;
fill: #808080;
margin-right: 7px;
margin-left: 7px;
margin-top: -3px;
}
.level-1.is-active {
background-color: #38ae6a;
}
.level-1 .task-icon {
.level-1 .tab-icon {
fill: #38ae6a;
}
.level-2.is-active {
background-color: #f35910;
}
.level-2 .task-icon {
.level-2 .tab-icon {
fill: #f35910;
}
.level-3.is-active {
background-color: #faab00;
}
.level-3 .task-icon {
.level-3 .tab-icon {
fill: #faab00;
}
.task-icon .inner-circle {
.tab-icon .inner-circle {
will-change: opacity;
animation: fade 3s ease-in-out infinite;
}
@ -2222,7 +2205,7 @@ footer {
to { opacity: 1 }
}
.task .closeTask {
.tab .closeTab {
position: absolute;
right: 0;
top: 0;
@ -2232,11 +2215,11 @@ footer {
@extend .u-clickable, .centered;
}
.task:hover .closeTask {
.tab:hover .closeTab {
visibility: visible;
}
.closeTask-inner {
.closeTab-inner {
width: 21px;
height: 21px;
background-color: #2c2d36;
@ -2244,11 +2227,11 @@ footer {
@extend .centered;
}
.closeTask:hover .closeTask-inner {
.closeTab:hover .closeTab-inner {
background-color: #972e29;
}
.closeTask .icon {
.closeTab .icon {
width: 13px;
height: 13px;
fill: white;
@ -2257,7 +2240,7 @@ footer {
transform: scale(0.7);
}
.closeTask:hover .icon {
.closeTab:hover .icon {
opacity: 1;
}
@ -2378,34 +2361,6 @@ footer {
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 {
padding: 0;
margin: 0;

View file

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

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<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>
</g>
</g>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB