Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

user merge layout ref alpha

Browse source 
has:
  - multiple email support (on both sides)
  - merge controls

misses:
  - user select
This commit is contained in:
Felix Niklas 2015-08-06 18:19:31 +02:00
parent e7f4f189e0
commit b8b2a6b762
10 changed files with 1358 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -1533,5 +1533,53 @@ class ButtonsRef extends App.ControllerContent
App.Config.set( 'layout_ref/buttons', ButtonsRef, 'Routes' ) 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' ) App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

1
app/assets/javascripts/app/views/layout_ref/index.jst.eco
View file

@ -4,6 +4,7 @@
<ul> <ul>
<li><a href="#layout_ref/merge_customer">Merge Customer</a></li>
<li><a href="#layout_ref/inputs">✏ Inputs</a></li> <li><a href="#layout_ref/inputs">✏ Inputs</a></li>
<li><a href="#layout_ref/buttons">👇 All the Buttons</a></li> <li><a href="#layout_ref/buttons">👇 All the Buttons</a></li>
<li><a href="#layout_ref/calendar_subscriptions">Calendar Subscriptions</a></li> <li><a href="#layout_ref/calendar_subscriptions">Calendar Subscriptions</a></li>

118
app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco Normal file
View file

@ -0,0 +1,118 @@
<div class="merge-group merge-group--header">
<div class="merge-source">
<h2>Nicole Müller</h2>
</div>
<div class="merge-control"></div>
<div class="merge-target">
<h2>Nicole Braun</h2>
</div>
</div>
<div class="merge-group merge-group--inactive">
<div class="merge-source">
<label>Firstname</label>
<div class="merge-value">Nicole</div>
</div>
<div class="merge-control">
<div class="merge-arrow">
<svg class="line-arrow icon-line-left-arrow"><use xlink:href="#icon-line-left-arrow" /></svg>
</div>
<div class="merge-control-input">is equal</div>
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
</div>
<div class="merge-target">
<label>Firstname</label>
<div class="merge-value">Nicole</div>
</div>
</div>
<div class="merge-group">
<div class="merge-source">
<label>Lastname</label>
<div class="merge-value">Müller</div>
</div>
<div class="merge-control">
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
<div class="merge-control-input u-positionOrigin">
<select id="a" class="form-control form-control--small">
<option>replace</option>
<option>ignore</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div>
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
</div>
<div class="merge-target">
<label>Lastname</label>
<div class="merge-value">Müller</div>
</div>
</div>
<div class="merge-group merge-group--multi">
<div class="merge-source">
<label>Email</label>
<div class="merge-value">nicole.mueller@zammad.org</div>
<div class="merge-value">nicole@mueller.de</div>
</div>
<div class="merge-controls">
<div class="merge-control">
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
<div class="merge-control-input u-positionOrigin">
<select id="a" class="form-control form-control--small">
<option>replace</option>
<option selected>add</option>
<option>ignore</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div>
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
</div>
<div class="merge-control">
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
<div class="merge-control-input u-positionOrigin">
<select id="a" class="form-control form-control--small">
<option>replace</option>
<option selected>add</option>
<option>ignore</option>
</select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
</div>
<div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
</div>
</div>
</div>
<div class="merge-target">
<label>Email</label>
<div class="merge-value">
<div class="primary-email-switch-holder">
<span class="primary-email-switch-label">nicole.braun@zammad.org</span>
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-1" checked><label for="input-1">main</label>
</div>
</div>
<div class="merge-value">
<div class="primary-email-switch-holder">
<span class="primary-email-switch-label">nicole.mueller@zammad.org</span>
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-2"><label for="input-2">main</label>
</div>
</div>
</div>
</div>

1001
app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco Normal file
View file

File diff suppressed because it is too large Load diff

2
app/assets/stylesheets/svg-dimensions.css
View file

@ -22,6 +22,8 @@
.icon-help { width: 16px; height: 16px; } .icon-help { width: 16px; height: 16px; }
.icon-important { width: 16px; height: 16px; } .icon-important { width: 16px; height: 16px; }
.icon-in-process { width: 64px; height: 64px; } .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-linkedin-button { width: 29px; height: 22px; }
.icon-list { width: 16px; height: 16px; } .icon-list { width: 16px; height: 16px; }
.icon-loading { width: 16px; height: 16px; } .icon-loading { width: 16px; height: 16px; }

161
app/assets/stylesheets/zammad.css.scss
View file

@ -8,6 +8,8 @@ $minWidth: 1024px;
$sidebarWidth: 280px; $sidebarWidth: 280px;
$navigationWidth: 260px; $navigationWidth: 260px;
$highlight-color: #3FA9F5;
html { html {
height: 100%; height: 100%;
} }
@ -782,6 +784,11 @@ label,
fieldset { fieldset {
margin: 0 -4px; margin: 0 -4px;
@extend .clearfix; @extend .clearfix;
h2 {
margin-left: 4px;
margin-right: 4px;
}
} }
fieldset .form-group { fieldset .form-group {
@ -799,12 +806,124 @@ fieldset > *:not(.form-group) .form-control {
.form-group { .form-group {
margin-bottom: 16px; margin-bottom: 16px;
&.form-group--inactive {
opacity: 0.5;
}
} }
.form-group + .form-group { .form-group + .form-group {
margin-top: 0; 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 { .formGroup-label {
padding: 0 2px; padding: 0 2px;
margin-bottom: 6px; margin-bottom: 6px;
@ -889,6 +1008,12 @@ textarea,
box-shadow: none; box-shadow: none;
outline: none; outline: none;
appearance: none; appearance: none;
&.form-control--small {
padding-top: 0;
padding-bottom: 0;
height: 31px;
}
} }
input[type=time] { input[type=time] {
@ -933,6 +1058,7 @@ input.time.time--12 {
select.form-control { select.form-control {
padding-left: 10px; padding-left: 10px;
padding-right: 34px; padding-right: 34px;
word-wrap: normal;
} }
.form-control.is-hidden { .form-control.is-hidden {
@ -1009,6 +1135,41 @@ input.time.time--12 {
font-size: 13px; 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 { .searchfield {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

13
public/assets/images/icons/line-left-arrow.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="34px" height="7px" viewBox="0 0 34 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>line-left-arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="line-left-arrow" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M34,2.99999999 L3,2.99999999 L3,3.99999999 L34,3.99999999 L34,2.99999999 L34,2.99999999 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M7,0 L7,7 L0,3.5 L7,0 Z" id="Triangle-1-Copy" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 898 B

13
public/assets/images/icons/line-right-arrow.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="34px" height="7px" viewBox="0 0 34 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>line-right-arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="line-right-arrow" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M0,3.99999999 L31,3.99999999 L31,2.99999999 L0,2.99999999 L0,3.99999999 L0,3.99999999 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M27,7 L27,8.8817842e-16 L34,3.5 L27,7 Z" id="Triangle-1-Copy" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 914 B