add new icon technique

cloucs · May 19, 2015 · 16eaa0a · 16eaa0a
1 parent 283e4de
commit 16eaa0a
Show file tree

Hide file tree

Showing 33 changed files with 330 additions and 267 deletions.
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,4 @@ db/schema.rb
 
 # Ignore Rubymine config
 /.idea
+node_modules
diff --git a/Guardfile b/Guardfile
@@ -4,7 +4,7 @@
 guard 'livereload', port: '35738' do
   watch(%r{app/views/.+\.(erb|haml|slim)$})
   watch(%r{app/helpers/.+\.rb})
-  watch(%r{public/.+\.(css|js|html)})
+  watch(%r{public/.+\.(css|js|html|svg)})
   watch(%r{config/locales/.+\.yml})
   # Rails Assets Pipeline
   watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg|svg))).*}) { |m| "/assets/#{m[3]}" }

diff --git a/app/assets/javascripts/app/views/generic/actions.jst.eco b/app/assets/javascripts/app/views/generic/actions.jst.eco
@@ -1,7 +1,7 @@
 <div class="dropdown dropdown--actions">
   <div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
     <% if @type isnt 'small': %>
-      <div class="light cog icon"></div>
+      <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
       <label><%- @T('Action') %></label>
     <% end %>
     <span class="select-arrow icon"></span>

diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
@@ -4,7 +4,7 @@
     <h2 class="u-textTruncate"><%- @T( item.head ) %></h2>
     <div class="js-actions flex"></div>
     <div class="tabsSidebar-close centered u-clickable">
-      <div class="arrow-right icon"></div>
+      <svg class="icon"><use xlink:href="#icon-arrow-right" /></svg>
     </div>
   </div>
   <hr>
@@ -16,7 +16,7 @@
 <div class="tabsSidebar-tabs vertical justified">
 <% for item in @items: %>
   <div class="tabsSidebar-tab centered" data-tab="<%= item.name %>">
-    <div class="dark icon <%= item.icon %>"></div>
+    <svg class="icon"><use xlink:href="#icon-<%= item.icon %>" /></svg>
   </div>
 <% end %>
 </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
@@ -302,7 +302,7 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
-          <div class="light cog icon"></div>
+          <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
         </div>

diff --git a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
@@ -4,7 +4,7 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle horizontal center" id="organizationProfile" data-toggle="dropdown">
-          <div class="light cog icon"></div>
+          <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
         </div>

diff --git a/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
@@ -4,7 +4,7 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
-          <div class="light cog icon"></div>
+          <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
           <label>Aktion</label>
           <span class="select-arrow icon"></span>
         </div>

diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco
@@ -1,11 +1,12 @@
 <form class="search horizontal">
   <div class="search-holder flex">
     <input id="global-search" type="search" autocomplete="off">
-    <div class="empty-search horizontal centered">
-      <div class="white close icon"></div>
+    <svg class="magnifier icon"><use xlink:href="#icon-magnifier" /></svg>
+    <div class="empty-search">
+      <svg class="close icon"><use xlink:href="#icon-close" /></svg>
     </div>
   </div>
-  <div class="logo js-toggleNavigation"></div>
+  <svg class="logo js-toggleNavigation"><use xlink:href="#icon-logo" /></svg>
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 

diff --git a/app/assets/javascripts/app/views/navigation/menu.jst.eco b/app/assets/javascripts/app/views/navigation/menu.jst.eco
@@ -3,7 +3,7 @@
   <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">
-          <span class="<%= item.class %> icon"></span>
+          <svg class="icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
         </span>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>
@@ -26,7 +26,7 @@
     <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
       <a class="horizontal center" href="<%= item.target %>">
         <span class="nav-item-icon">
-          <span class="<%= item.class %> icon"></span>
+          <svg class="icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
         </span>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>

diff --git a/app/assets/javascripts/app/views/navigation/personal.jst.eco b/app/assets/javascripts/app/views/navigation/personal.jst.eco
@@ -1,13 +1,12 @@
 <% for item in @items: %>
   <% if item.child: %>
     <li class="<% if item.class: %><%- item.class %><% end %> dropup <% if @open_tab[item.target] : %>open<% end %>">
-      <a class="list-button horizontal centered dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
+      <a class="list-button dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
         <span class="dropdown-nose"></span>
         <% if item.class is 'user': %>
           <span class="js-avatar"></span>
         <% else: %>
-          <span class="green plus icon"></span>
-          <span class="white plus icon"></span>
+          <svg class="plus icon"><use xlink:href="#icon-plus" /></svg>
         <% end %>
       </a>
       <ul class="dropdown-menu" role="menu">
@@ -22,7 +21,7 @@
             <a href="<%= item.target %>" class="horizontal center">
               <span class="flex u-textTruncate"><%- @T( item.name ) %></span>
               <% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %></span><% end %>
-              <% if item.iconClass: %><span class="<%= item.iconClass %> icon"></span><% end %>
+              <% if item.iconClass: %><svg class="<%= item.iconClass %> icon"><use xlink:href="#icon-<%= item.iconClass %>" /></svg><% end %>
             </a>
           </li>
         <% end %>
@@ -31,8 +30,7 @@
   <% else: %>
     <li class="settings <% if @active_tab[item.target] : %>active<% end %>">
       <a class="list-button fit horizontal centered" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
-        <span class="light cog icon"></span>
-        <span class="dark cog icon"></span>
+        <svg class="cog icon"><use xlink:href="#icon-cog" /></svg>
       </a>
     </li>
   <% end %>

diff --git a/app/assets/javascripts/app/views/widget/switch_back_to_user.jst.eco b/app/assets/javascripts/app/views/widget/switch_back_to_user.jst.eco
@@ -1,10 +1,10 @@
-<div class="switchBackToUser fit horizontal center zIndex-7">
-  <div class="switchView icon"></div>
+<div class="switchBackToUser">
+  <svg class="switchBackToUser-icon"><use xlink:href="#icon-switchView" /></svg>
   <div class="switchBackToUser-text"><%- @T('Zammad looks like this for "%s"', @S('firstname') + ' ' + @S('lastname')  ) %></div>
   <div class="align-right horizontal center js-close u-clickable">
     <%- @T('Back to my view') %>
-    <div class="switchBackToUser-close centered">
-      <span class="white close icon"></span>
+    <div class="switchBackToUser-close">
+      <svg class="icon"><use xlink:href="#icon-close" /></svg>
     </div>
   </div>
 </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
@@ -1266,12 +1266,11 @@ ol.tabs li {
   }
 
 .icon {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  background-image: image_url("/assets/images/sprite.svg");
-  background-repeat: no-repeat;
-  background-position: 20px 20px; /* make icon empty */
+}
+
+.signout.icon {
+  width: 15px;
+  height: 19px;
 }
 
   .add.icon,
@@ -1319,7 +1318,6 @@ ol.tabs li {
 
   .dashboard.icon,
   .overviews.icon,
-  .customers.icon,
   .group.icon,
   .message.icon,
   .tools.icon,
@@ -1336,8 +1334,7 @@ ol.tabs li {
     background-position: -24px 0;
   }
 
-  .group.icon,
-  .customers.icon {
+  .group.icon {
     background-position: -48px 0;
   }
 
@@ -1499,6 +1496,7 @@ ol.tabs li {
     width: 20px;
     background-position: -104px -118px;
   }
+  .icon-switch:hover .team.icon,
   .white.team.icon {
     background-position: -104px -132px;
   }
@@ -2172,7 +2170,7 @@ footer {
   }
 
   .main-navigation > li.active > a .icon {
-    opacity: 1;
+    fill: currentColor;
   }
 
   .main-navigation li.active > a {
@@ -2181,8 +2179,10 @@ footer {
 
   .navigation .nav-item-icon .icon {
     margin-right: 15px;
-    opacity: 0.25;
     vertical-align: bottom;
+    width: 24px;
+    height: 24px;
+    fill: hsl(206,7%,37%);
   }
 
 .tasks {
@@ -2382,6 +2382,14 @@ footer {
     width: 40px;
     z-index: 1;
     visibility: hidden;
+    @extend .centered;
+  }
+
+  .empty-search .close.icon {
+    fill: white;
+    opacity: 0.5;
+    width: 13px;
+    height: 13px;
   }
 
     .filled.search .empty-search {
@@ -2393,15 +2401,26 @@ footer {
     padding: 5px 10px 5px 33px;
     height: 30px;
     color: #ECECEC;
+    background: #31373b;
     line-height: 20px;
-    background: #31373b image-url("/assets/images/sprite.svg") no-repeat 10px -26px;
     outline: none;
     border: none;
     border-radius: 15px;
     position: relative;
     z-index: 1;
   }
 
+  .search .magnifier.icon {
+    position: absolute;
+    top: 8px;
+    left: 10px;
+    width: 15px;
+    height: 15px;
+    z-index: 2;
+    opacity: 0.5;
+    fill: white;
+  }
+
   .search.focused .search-holder {
     margin-right: -46px;
   }
@@ -2414,7 +2433,6 @@ footer {
   .search .logo {
     width: 67px;
     height: 36px;
-    background: image_url("/assets/images/logo.svg") no-repeat center;
     transition: 240ms;
     position: relative;
     @extend .u-clickable;
@@ -2506,6 +2524,7 @@ footer {
       height: 60px;
       position: relative;
       text-decoration: none;
+      @extend .centered;
       @extend .u-clickable;
     }
 
@@ -2527,20 +2546,26 @@ footer {
       background: #38ae6a;
     }
 
-    .user-menu .dark.cog,
-    .user-menu > li:hover .light.cog,
-    .user-menu > li.active .light.cog,
-    .user-menu .white.plus,
-    .user-menu > li:hover .green.plus,
-    .user-menu > li.active .green.plus {
-      display: none;
+    .user-menu .cog.icon {
+      width: 20px;
+      height: 20px;
+      fill: hsl(0,0%,30%);
     }
 
-    .user-menu > li.settings:hover .dark.cog,
-    .user-menu > li.settings.active .dark.cog,
-    .user-menu > li.add:hover .white.plus,
-    .user-menu > li.add.active .white.plus {
-      display: block;
+    .user-menu .plus.icon {
+      width: 17px;
+      height: 17px;
+      fill: hsl(145,51%,45%);
+    }
+
+    .user-menu > li.settings:hover .cog.icon,
+    .user-menu > li.settings.active .cog.icon {
+      fill: hsl(232,10%,16%);
+    }
+
+    .user-menu > li.add:hover .plus.icon,
+    .user-menu > li.add.active .plus.icon {
+      fill: white;
     }
 
     .user-menu > li:not(:last-child) {
@@ -4064,11 +4089,13 @@ footer {
   }
 
   .tabsSidebar-tab .icon {
-    opacity: 0.3;
+    width: 24px;
+    height: 24px;
+    fill: hsl(197,19%,78%);
   }
 
   .tabsSidebar-tab.active .icon {
-    opacity: 1;
+    fill: hsl(206,7%,37%);
   }
 
   .sidebar .text-muted {
@@ -4317,13 +4344,21 @@ footer {
   display: block;
 }
 
-.switchBackToUser.fit {
+.switchBackToUser {
+  @extend .fit;
+  @extend .horizontal;
+  @extend .center;
+  @extend .zIndex-7;
   background: hsl(200,87%,45%);
   color: #fff;
   height: 45px;
   padding: 0 17px;
-  top: -45px;
+  top: -45px !important;
   border-bottom: 5px solid hsl(205,90%,60%);
+}
+.switchBackToUser-icon {
+  width: 19px;
+  height: 18px;
 }
   .switchBackToUser-text {
     margin-left: 10px;
@@ -4332,6 +4367,13 @@ footer {
     width: 40px;
     height: 40px;
     margin-right: -10px;
+    @extend .centered;
+
+    .icon {
+      fill: white;
+      width: 13px;
+      height: 13px;
+    }
   }
 
 #app.switchBackToUserSpace {

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,4 +1,9 @@
 # Copyright (C) 2012-2014 Zammad Foundation, http://zammad-foundation.org/
 
 module ApplicationHelper
+  def inline_svg(path)
+    File.open("public/assets/images/#{path}", "rb") do |file|
+      raw file.read
+    end
+  end
 end
diff --git a/app/views/init/index.html.erb b/app/views/init/index.html.erb
@@ -1,3 +1,6 @@
+<div style="height: 0; width: 0; position: absolute; visibility: hidden">
+  <%= inline_svg('icons.svg') %>
+</div>
 <div id="app" class="fit horizontal"></div>
 <div id="splash">
   <div class="logo">booting...</div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,3 +41,4 @@ db/schema.rb

		# Ignore Rubymine config
		/.idea
		node_modules