+
<%- @T('Zammad looks like this for "%s"', @S('firstname') + ' ' + @S('lastname') ) %>
<%- @T('Back to my view') %>
-
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index ea8fc2c67..03b7dad02 100644
--- 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;
}
@@ -2173,7 +2171,7 @@ footer {
}
.main-navigation > li.active > a .icon {
- opacity: 1;
+ fill: currentColor;
}
.main-navigation li.active > a {
@@ -2182,8 +2180,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 {
@@ -2384,6 +2384,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 {
@@ -2395,8 +2403,8 @@ 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;
@@ -2404,6 +2412,17 @@ footer {
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;
}
@@ -2416,7 +2435,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;
@@ -2509,6 +2527,7 @@ footer {
height: 60px;
position: relative;
text-decoration: none;
+ @extend .centered;
@extend .u-clickable;
}
@@ -2530,20 +2549,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) {
@@ -4072,11 +4097,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 {
@@ -4326,13 +4353,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;
@@ -4341,6 +4376,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
index 264e6b405..95c5f2c00 100644
--- 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
index 05dd535f1..aa003bb16 100644
--- a/app/views/init/index.html.erb
+++ b/app/views/init/index.html.erb
@@ -1,3 +1,6 @@
+
+ <%= inline_svg('icons.svg') %>
+
booting...
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 000000000..344215783
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,28 @@
+var gulp = require('gulp');
+var rename = require('gulp-rename');
+var svgstore = require('gulp-svgstore');
+var svgmin = require('gulp-svgmin');
+var cheerio = require('gulp-cheerio');
+var iconsource = 'public/assets/images/icons/*.svg'
+
+gulp.task('svgstore', function () {
+ return gulp
+ .src(iconsource)
+ .pipe(rename({prefix: 'icon-'}))
+ .pipe(svgmin())
+ .pipe(cheerio({
+ run: function ($) {
+ // remove green-screen color
+ $('[fill="#50E3C2"]').removeAttr('fill');
+ },
+ parserOptions: { xmlMode: true }
+ }))
+ .pipe(svgstore())
+ .pipe(gulp.dest('public/assets/images'));
+});
+
+gulp.task('watch', function () {
+ gulp.watch(iconsource, ['svgstore']);
+});
+
+gulp.task('default', ['svgstore', 'watch']);
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..be36f6630
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "Zammad",
+ "version": "1.0.0",
+ "devDependencies": {
+ "gulp": "^3.8.11",
+ "gulp-cheerio": "^0.6.2",
+ "gulp-rename": "^1.2.2",
+ "gulp-svgmin": "^1.1.2",
+ "gulp-svgstore": "^5.0.1",
+ "gulp-watch": "^4.2.4"
+ }
+}
diff --git a/public/assets/images/glyphicons-halflings.png b/public/assets/images/glyphicons-halflings.png
deleted file mode 100644
index 4f326e049..000000000
Binary files a/public/assets/images/glyphicons-halflings.png and /dev/null differ
diff --git a/public/assets/images/icons.svg b/public/assets/images/icons.svg
new file mode 100644
index 000000000..deea208b8
--- /dev/null
+++ b/public/assets/images/icons.svg
@@ -0,0 +1 @@
+
close cog dashboard group logo magnifier message overviews person plus signout switchView templates tools
\ No newline at end of file
diff --git a/public/assets/images/icons/close.svg b/public/assets/images/icons/close.svg
new file mode 100644
index 000000000..e857e6f77
--- /dev/null
+++ b/public/assets/images/icons/close.svg
@@ -0,0 +1,12 @@
+
+
+
+ close
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/cog.svg b/public/assets/images/icons/cog.svg
new file mode 100644
index 000000000..5aec1411e
--- /dev/null
+++ b/public/assets/images/icons/cog.svg
@@ -0,0 +1,12 @@
+
+
+
+ cog
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/dashboard.svg b/public/assets/images/icons/dashboard.svg
new file mode 100644
index 000000000..9251e3ab1
--- /dev/null
+++ b/public/assets/images/icons/dashboard.svg
@@ -0,0 +1,12 @@
+
+
+
+ dashboard
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/group.svg b/public/assets/images/icons/group.svg
new file mode 100644
index 000000000..e73f8c943
--- /dev/null
+++ b/public/assets/images/icons/group.svg
@@ -0,0 +1,12 @@
+
+
+
+ group
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/logo.svg b/public/assets/images/icons/logo.svg
new file mode 100644
index 000000000..0c72eac1d
--- /dev/null
+++ b/public/assets/images/icons/logo.svg
@@ -0,0 +1,32 @@
+
+
+
+ logo
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/magnifier.svg b/public/assets/images/icons/magnifier.svg
new file mode 100644
index 000000000..7039dc46f
--- /dev/null
+++ b/public/assets/images/icons/magnifier.svg
@@ -0,0 +1,12 @@
+
+
+
+ magnifier
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/message.svg b/public/assets/images/icons/message.svg
new file mode 100644
index 000000000..a9768167c
--- /dev/null
+++ b/public/assets/images/icons/message.svg
@@ -0,0 +1,12 @@
+
+
+
+ message
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/overviews.svg b/public/assets/images/icons/overviews.svg
new file mode 100644
index 000000000..b2c22ed5d
--- /dev/null
+++ b/public/assets/images/icons/overviews.svg
@@ -0,0 +1,12 @@
+
+
+
+ overviews
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/person.svg b/public/assets/images/icons/person.svg
new file mode 100644
index 000000000..debcc5f2b
--- /dev/null
+++ b/public/assets/images/icons/person.svg
@@ -0,0 +1,12 @@
+
+
+
+ person
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/plus.svg b/public/assets/images/icons/plus.svg
new file mode 100644
index 000000000..a3f431669
--- /dev/null
+++ b/public/assets/images/icons/plus.svg
@@ -0,0 +1,12 @@
+
+
+
+ plus
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/signout.svg b/public/assets/images/icons/signout.svg
new file mode 100644
index 000000000..7c9dda301
--- /dev/null
+++ b/public/assets/images/icons/signout.svg
@@ -0,0 +1,12 @@
+
+
+
+ signout
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/switchView.svg b/public/assets/images/icons/switchView.svg
new file mode 100644
index 000000000..430ae8002
--- /dev/null
+++ b/public/assets/images/icons/switchView.svg
@@ -0,0 +1,12 @@
+
+
+
+ switchView
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/templates.svg b/public/assets/images/icons/templates.svg
new file mode 100644
index 000000000..831f63066
--- /dev/null
+++ b/public/assets/images/icons/templates.svg
@@ -0,0 +1,12 @@
+
+
+
+ templates
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/tools.svg b/public/assets/images/icons/tools.svg
new file mode 100644
index 000000000..0cbd81ead
--- /dev/null
+++ b/public/assets/images/icons/tools.svg
@@ -0,0 +1,12 @@
+
+
+
+ tools
+ Created with Sketch.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/sprite.svg b/public/assets/images/sprite.svg
deleted file mode 100644
index 2c432e869..000000000
--- a/public/assets/images/sprite.svg
+++ /dev/null
@@ -1,216 +0,0 @@
-
-
-
- sprite.svg
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file