From e8a5d5326fe97d7df67abe598365f96694e7b198 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 8 May 2015 18:11:33 +0200 Subject: [PATCH] adjust search icons, generalise nav tasks to tabs --- .../app/controllers/navigation.js.coffee | 4 +- .../app/models/organization.js.coffee | 2 +- .../javascripts/app/models/ticket.js.coffee | 2 +- .../javascripts/app/models/user.js.coffee | 2 +- .../app/views/navigation/menu.jst.eco | 8 +- .../app/views/navigation/result.jst.eco | 6 +- .../app/views/task_widget_tasks.jst.eco | 26 ++-- app/assets/stylesheets/zammad.css.scss | 117 ++++++------------ gulpfile.js | 4 +- public/assets/images/icons.svg | 2 +- public/assets/images/icons/stopwatch.svg | 2 +- 11 files changed, 61 insertions(+), 114 deletions(-) diff --git a/app/assets/javascripts/app/controllers/navigation.js.coffee b/app/assets/javascripts/app/controllers/navigation.js.coffee index 5d77290a2..eb093e450 100644 --- a/app/assets/javascripts/app/controllers/navigation.js.coffee +++ b/app/assets/javascripts/app/controllers/navigation.js.coffee @@ -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 = [] diff --git a/app/assets/javascripts/app/models/organization.js.coffee b/app/assets/javascripts/app/models/organization.js.coffee index 14c7b3a2b..ac3f4141e 100644 --- a/app/assets/javascripts/app/models/organization.js.coffee +++ b/app/assets/javascripts/app/models/organization.js.coffee @@ -18,7 +18,7 @@ class App.Organization extends App.Model '#organization/profile/' + @id icon: (user) -> - "organization icon" + "organization" @_fillUp: (data) -> diff --git a/app/assets/javascripts/app/models/ticket.js.coffee b/app/assets/javascripts/app/models/ticket.js.coffee index 8b28ee53c..b2c38fcac 100644 --- a/app/assets/javascripts/app/models/ticket.js.coffee +++ b/app/assets/javascripts/app/models/ticket.js.coffee @@ -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() diff --git a/app/assets/javascripts/app/models/user.js.coffee b/app/assets/javascripts/app/models/user.js.coffee index 16b0fa3a0..cde4b5096 100644 --- a/app/assets/javascripts/app/models/user.js.coffee +++ b/app/assets/javascripts/app/models/user.js.coffee @@ -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] diff --git a/app/assets/javascripts/app/views/navigation/menu.jst.eco b/app/assets/javascripts/app/views/navigation/menu.jst.eco index 1a752a829..2c8f74bdf 100644 --- a/app/assets/javascripts/app/views/navigation/menu.jst.eco +++ b/app/assets/javascripts/app/views/navigation/menu.jst.eco @@ -2,9 +2,7 @@ <% if item.child: %>
  • - - - + <%- @T( item.name ) %> @@ -25,9 +23,7 @@ <% else: %>
  • - - - + <%- @T( item.name ) %> diff --git a/app/assets/javascripts/app/views/navigation/result.jst.eco b/app/assets/javascripts/app/views/navigation/result.jst.eco index 891c707ad..85a339c33 100644 --- a/app/assets/javascripts/app/views/navigation/result.jst.eco +++ b/app/assets/javascripts/app/views/navigation/result.jst.eco @@ -2,9 +2,9 @@ <% if i > 0: %>
  • <% end %> <% for item in area.result: %>
  • - -
    -
    <%= item.display %>
    +     + + <%= item.display %>
    • <% end %> diff --git a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco index 93359cb54..0d311e962 100644 --- a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco +++ b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco @@ -1,18 +1,16 @@ <% for item in @item_list: %> - -
    - - <% if item.task.notify && item.data.iconClass is 'priority': %> - - - <% else: %> - - <% end %> - -
    -
    <%= item.data.head %>
    -
    -
    + + + <% if item.task.notify && item.data.iconClass is 'priority': %> + + + <% else: %> + + <% end %> + +
    <%= item.data.head %>
    +
    +
    diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index ebac51be5..52b8c8bfe 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -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; diff --git a/gulpfile.js b/gulpfile.js index 7b6542f38..a45b65e3b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,9 +13,7 @@ gulp.task('svgstore', function () { .pipe(cheerio({ run: function ($) { // remove green-screen color - $('[fill="#50E3C2"]').removeAttr('fill'); - // remove fill=none ('s have it) - $('[fill="none"]').removeAttr('fill'); + $('[fill="#50E3C2"]').removeAttr('fill').parents('[fill="none"]').removeAttr('fill'); }, parserOptions: { xmlMode: true } })) diff --git a/public/assets/images/icons.svg b/public/assets/images/icons.svg index 497354aa2..1f1e30dd3 100644 --- a/public/assets/images/icons.svg +++ b/public/assets/images/icons.svg @@ -1 +1 @@ -arrow-rightclockclosecloudcogdashboardfacebookgroupimportantin-processlistmagnifiermailmessagemood-badmood-happymood-okmood-super-badmood-super-happynoteone-ticketorganizationoutbound-callsoverviewspackagepenpersonphonepluspriority-modified-inner-circlepriority-modified-outer-circlepriorityreceived-callsreopeningsignoutstopwatchswitchViewteamtemplatestoolstotal-ticketstwitteruser \ No newline at end of file +arrow-rightclockclosecloudcogdashboardfacebookgroupimportantin-processlistmagnifiermailmessagemood-badmood-happymood-okmood-super-badmood-super-happynoteone-ticketorganizationoutbound-callsoverviewspackagepenpersonphonepluspriority-modified-inner-circlepriority-modified-outer-circlepriorityreceived-callsreopeningsignoutstopwatchswitchViewteamtemplatestoolstotal-ticketstwitteruser \ No newline at end of file diff --git a/public/assets/images/icons/stopwatch.svg b/public/assets/images/icons/stopwatch.svg index dfb889e9f..af0ee264d 100644 --- a/public/assets/images/icons/stopwatch.svg +++ b/public/assets/images/icons/stopwatch.svg @@ -6,7 +6,7 @@ - +