adjust search icons, generalise nav tasks to tabs
This commit is contained in:
Felix Niklas
parent
24c2bca708
commit
e8a5d5326f
11 changed files with 61 additions and 114 deletions
|
|
@ -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 = []
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ class App.Organization extends App.Model
|
|||
'#organization/profile/' + @id
|
||||
|
||||
icon: (user) ->
|
||||
"organization icon"
|
||||
"organization"
|
||||
|
||||
@_fillUp: (data) ->
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
<% 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">
|
||||
<% 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" />
|
||||
<% else: %>
|
||||
<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">
|
||||
<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" />
|
||||
<% else: %>
|
||||
<use xlink:href="#icon-<%= item.data.iconClass %>" />
|
||||
<% end %>
|
||||
</svg>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -2074,7 +2074,7 @@ footer {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.main-navigation > li.active > a .icon {
|
||||
.main-navigation > li.active .nav-icon {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -2082,7 +2082,7 @@ footer {
|
|||
background: #389ed9;
|
||||
}
|
||||
|
||||
.navigation .nav-item-icon .icon {
|
||||
.nav-icon {
|
||||
margin-right: 15px;
|
||||
vertical-align: bottom;
|
||||
width: 24px;
|
||||
|
|
@ -2110,56 +2110,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;
|
||||
|
|
@ -2171,48 +2146,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;
|
||||
}
|
||||
|
|
@ -2223,7 +2206,7 @@ footer {
|
|||
to { opacity: 1 }
|
||||
}
|
||||
|
||||
.task .closeTask {
|
||||
.tab .closeTab {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
|
@ -2233,11 +2216,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;
|
||||
|
|
@ -2245,11 +2228,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;
|
||||
|
|
@ -2258,7 +2241,7 @@ footer {
|
|||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.closeTask:hover .icon {
|
||||
.closeTab:hover .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -2380,34 +2363,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;
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
Loading…
Reference in a new issue