diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index aef80a862..55616d440 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1533,5 +1533,53 @@ class ButtonsRef extends App.ControllerContent
App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' )
+class mergeCustomerRef extends App.ControllerContent
+
+ mergeTarget:
+ firstname: 'Nicole',
+ lastname: 'Braun',
+ email: [
+ {
+ address: 'nicole.braun@zammad.com'
+ main: true
+ }
+ ]
+
+ mergeSource:
+ firstname: 'Nicole',
+ lastname: 'Müller',
+ email: [
+ {
+ address: 'nicole.mueller@zammad.com'
+ main: true
+ },
+ {
+ address: 'nicole@mueller.de'
+ }
+ ]
+
+ events:
+ 'change .merge-control select': 'onChange'
+
+ constructor: ->
+ super
+ @render()
+
+ render: ->
+ @html App.view('layout_ref/merge_customer_view')
+
+ new App.ControllerModal
+ head: "Merge #{@mergeSource.firstname} #{@mergeSource.lastname}"
+ content: App.view('layout_ref/merge_customer')()
+ button: 'Merge'
+ shown: true
+ cancel: true
+ container: @el
+
+ onChange: ->
+
+
+App.Config.set( 'layout_ref/merge_customer', mergeCustomerRef, 'Routes' )
+
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/index.jst.eco b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
index 9de1dfa60..16801a592 100644
--- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco
@@ -4,6 +4,7 @@
+ Merge Customer
✏ Inputs
👇 All the Buttons
Calendar Subscriptions
diff --git a/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco b/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
new file mode 100644
index 000000000..fd2c080b9
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ replace
+ ignore
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Email
+
nicole.mueller@zammad.org
+
nicole@mueller.de
+
+
+
+
+
+
+
+
+
+ replace
+ add
+ ignore
+
+
+
+
+
+
+
+
+
+
+
+
+
+ replace
+ add
+ ignore
+
+
+
+
+
+
+
+
+
+
+
Email
+
+
+ nicole.braun@zammad.org
+ main
+
+
+
+
+ nicole.mueller@zammad.org
+ main
+
+
+
+
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco b/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
new file mode 100644
index 000000000..f2e8d300e
--- /dev/null
+++ b/app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
@@ -0,0 +1,1001 @@
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
index ac17073f2..3021f9243 100644
--- a/app/assets/stylesheets/svg-dimensions.css
+++ b/app/assets/stylesheets/svg-dimensions.css
@@ -22,6 +22,8 @@
.icon-help { width: 16px; height: 16px; }
.icon-important { width: 16px; height: 16px; }
.icon-in-process { width: 64px; height: 64px; }
+.icon-line-left-arrow { width: 34px; height: 7px; }
+.icon-line-right-arrow { width: 34px; height: 7px; }
.icon-linkedin-button { width: 29px; height: 22px; }
.icon-list { width: 16px; height: 16px; }
.icon-loading { width: 16px; height: 16px; }
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 69fe22fea..99662b88c 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -8,6 +8,8 @@ $minWidth: 1024px;
$sidebarWidth: 280px;
$navigationWidth: 260px;
+$highlight-color: #3FA9F5;
+
html {
height: 100%;
}
@@ -782,6 +784,11 @@ label,
fieldset {
margin: 0 -4px;
@extend .clearfix;
+
+ h2 {
+ margin-left: 4px;
+ margin-right: 4px;
+ }
}
fieldset .form-group {
@@ -799,12 +806,124 @@ fieldset > *:not(.form-group) .form-control {
.form-group {
margin-bottom: 16px;
+
+ &.form-group--inactive {
+ opacity: 0.5;
+ }
}
.form-group + .form-group {
margin-top: 0;
}
+.merge-group {
+ display: flex;
+ align-items: stretch;
+
+ &.merge-group--inactive {
+ }
+
+ &.merge-group--header {
+ h2 {
+ margin-bottom: 0;
+ }
+
+ label {
+ display: inline;
+ }
+
+ .merge-source,
+ .merge-target {
+ border-bottom: 1px solid #eee;
+ }
+ }
+
+ .merge-target,
+ .merge-source {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ }
+
+ .merge-source,
+ .merge-target {
+ padding-bottom: 3px;
+ border-left: 1px solid #eee;
+ border-right: 1px solid #eee;
+ padding: 7px 13px;
+ }
+
+ &:first-of-type {
+ margin-top: 6px;
+
+ .merge-source,
+ .merge-target {
+ border-top: 1px solid #eee;
+ border-radius: 3px 3px 0 0;
+ }
+ }
+
+ &:last-of-type {
+ margin-bottom: 6px;
+
+ .merge-source,
+ .merge-target {
+ border-bottom: 1px solid #eee;
+ border-radius: 0 0 3px 3px;
+ }
+ }
+
+ .merge-value {
+ margin-bottom: 3px;
+ }
+
+ .form-group {
+ padding: 0;
+ }
+
+ .form-control {
+ margin: 0 !important;
+ }
+
+ &.merge-group--multi {
+ .merge-value + .merge-value {
+ margin-top: 12px;
+ }
+ }
+}
+
+.merge-controls {
+ flex: 1;
+ align-self: flex-end;
+}
+
+.merge-control {
+ margin-bottom: 5px;
+ height: 31px;
+ text-align: center;
+ display: flex;
+ flex: 1;
+ justify-content: space-between;
+ align-items: center;
+ align-self: flex-end;
+}
+
+.merge-control-input {
+ flex: 1;
+}
+
+.merge-arrow {
+ margin: 0 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .line-arrow {
+ fill: #e6e6e6;
+ }
+}
+
.formGroup-label {
padding: 0 2px;
margin-bottom: 6px;
@@ -889,6 +1008,12 @@ textarea,
box-shadow: none;
outline: none;
appearance: none;
+
+ &.form-control--small {
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 31px;
+ }
}
input[type=time] {
@@ -933,6 +1058,7 @@ input.time.time--12 {
select.form-control {
padding-left: 10px;
padding-right: 34px;
+ word-wrap: normal;
}
.form-control.is-hidden {
@@ -1009,6 +1135,41 @@ input.time.time--12 {
font-size: 13px;
}
+ /* use on input[type=radio] */
+ .primary-email-switch {
+ display: none;
+
+ & + label {
+ font-size: 11px;
+ color: #DBDBDB;
+ cursor: pointer;
+ margin: 0;
+ }
+
+ &:checked + label {
+ color: $highlight-color;
+ }
+ }
+
+ .primary-email-switch-holder {
+ position: relative;
+ display: flex;
+
+ .primary-email-switch-label {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .primary-email-switch + label {
+ align-self: stretch;
+ padding: 0 5px;
+ display: flex;
+ align-items: center;
+ }
+
+ }
+
.searchfield {
position: relative;
margin-bottom: 20px;
diff --git a/contrib/icon-sprite.sketch b/contrib/icon-sprite.sketch
index 2fdfc162a..e356fa40f 100644
Binary files a/contrib/icon-sprite.sketch and b/contrib/icon-sprite.sketch differ
diff --git a/public/assets/images/icons.svg b/public/assets/images/icons.svg
index bd758ac23..e1503db39 100644
--- a/public/assets/images/icons.svg
+++ b/public/assets/images/icons.svg
@@ -1 +1 @@
-arrow-down arrow-left arrow-right arrow-up checkbox-checked checkbox checkmark clipboard clock cloud cog dashboard diagonal-cross download email-button email facebook-button facebook full-logo google-button group help important in-process linkedin-button list loading lock-open lock logo logotype long-arrow-right magnifier marker message minus mood-bad mood-good mood-ok mood-super-bad mood-supergood note one-ticket organization outbound-calls overviews package paperclip pen person phone plus priority-modified-inner-circle priority-modified-outer-circle priority radio-checked radio received-calls reload reopening reply-all reply signout split stopwatch switchView team templates tools total-tickets trash user
\ No newline at end of file
+arrow-down arrow-left arrow-right arrow-up checkbox-checked checkbox checkmark clipboard clock cloud cog dashboard diagonal-cross download email-button email facebook-button facebook full-logo google-button group help important in-process line-left-arrow line-right-arrow linkedin-button list loading lock-open lock logo logotype long-arrow-right magnifier marker message minus mood-bad mood-good mood-ok mood-super-bad mood-supergood note one-ticket organization outbound-calls overviews package paperclip pen person phone plus priority-modified-inner-circle priority-modified-outer-circle priority radio-checked radio received-calls reload reopening reply-all reply signout split stopwatch switchView team templates tools total-tickets trash user
\ No newline at end of file
diff --git a/public/assets/images/icons/line-left-arrow.svg b/public/assets/images/icons/line-left-arrow.svg
new file mode 100644
index 000000000..e46413041
--- /dev/null
+++ b/public/assets/images/icons/line-left-arrow.svg
@@ -0,0 +1,13 @@
+
+
+
+ line-left-arrow
+ Created with Sketch.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/images/icons/line-right-arrow.svg b/public/assets/images/icons/line-right-arrow.svg
new file mode 100644
index 000000000..60629df69
--- /dev/null
+++ b/public/assets/images/icons/line-right-arrow.svg
@@ -0,0 +1,13 @@
+
+
+
+ line-right-arrow
+ Created with Sketch.
+
+
+
+
+
+
+
+
\ No newline at end of file