Merge branch 'interface' of github.com:martini/zammad into interface

This commit is contained in:
Martin Edenhofer 2014-10-07 13:56:43 +02:00
commit 14ad61c21c
12 changed files with 364 additions and 13 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -141,6 +141,7 @@
<path d="M21.5,97.6 C23.1,96.8 24.9,96.6 26.8,97 L27.1,96 C22.2,94.8 17.9,97.4 16.4,101.7 C15.6,104 15.6,106.3 16.6,108.4 L17.1,109.2 L15,109.8 L19.5,113 L19.9,108.1 L19.9,108 L19.9,107.5 L18,108.9 L17.7,108.1 C16.8,106.2 16.7,104.1 17.4,102.1 C18.1,100.1 19.6,98.5 21.5,97.6 L21.5,97.6 Z M32.4,100 L34.5,99.5 L30,96.3 L29.6,101.8 L31.6,100.3 L32.1,101.2 C33.1,103.1 33.3,105.3 32.6,107.3 C31.9,109.3 30.6,111 28.7,111.9 C27.1,112.7 24.8,112.7 23.8,112.6 L23.5,113.6 C27.4,114.4 32.2,112 33.7,107.7 C34.5,105.4 34.2,103 33.1,100.8 L32.4,100 L32.4,100 Z" id="change" fill-opacity="0.7" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M76.4767712,343.142686 L81.2904338,338.295361 C81.679595,337.903479 82.3127561,337.901273 82.7046388,338.290434 C83.0965214,338.679595 83.0987275,339.312756 82.7095663,339.704639 L77.8909934,344.556908 L82.7039017,349.369816 C83.094426,349.760341 83.094426,350.393506 82.7039017,350.78403 C82.3133774,351.174554 81.6802124,351.174554 81.2896881,350.78403 L76.4817074,345.976049 L71.7095663,350.781562 C71.3204051,351.173444 70.6872439,351.175651 70.2953613,350.786489 C69.9034787,350.397328 69.9012726,349.764167 70.2904338,349.372284 L75.0674852,344.561827 L70.2127651,339.707107 C69.8222408,339.316583 69.8222408,338.683418 70.2127651,338.292893 C70.6032893,337.902369 71.2364543,337.902369 71.6269786,338.292893 L76.4767712,343.142686 L76.4767712,343.142686 Z" id="white-close" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M94.2904338,338.295361 C94.679595,337.903479 95.3127561,337.901273 95.7046388,338.290434 C96.0965214,338.679595 96.0987275,339.312756 95.7095663,339.704639 L90.8909934,344.556908 L95.7039017,349.369816 C96.094426,349.760341 96.094426,350.393506 95.7039017,350.78403 C95.3133774,351.174554 94.6802124,351.174554 94.2896881,350.78403 L89.4817074,345.976049 L84.7095663,350.781562 C84.3204051,351.173444 83.6872439,351.175651 83.2953613,350.786489 C82.9034787,350.397328 82.9012726,349.764167 83.2904338,349.372284 L88.0674852,344.561827 L83.2127651,339.707107 C82.8222408,339.316583 82.8222408,338.683418 83.2127651,338.292893 C83.6032893,337.902369 84.2364543,337.902369 84.6269786,338.292893 L89.4767712,343.142686 L94.2904338,338.295361 Z" id="dark-close" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M154.370562,339.195361 C154.759723,338.803479 155.392884,338.801273 155.784767,339.190434 C156.17665,339.579595 156.178856,340.212756 155.789694,340.604639 L150.971122,345.456908 L155.78403,350.269816 C156.174554,350.660341 156.174554,351.293506 155.78403,351.68403 C155.393506,352.074554 154.760341,352.074554 154.369816,351.68403 L149.561836,346.876049 L144.789694,351.681562 C144.400533,352.073444 143.767372,352.075651 143.375489,351.686489 C142.983607,351.297328 142.981401,350.664167 143.370562,350.272284 L148.147613,345.461827 L143.292893,340.607107 C142.902369,340.216583 142.902369,339.583418 143.292893,339.192893 C143.683417,338.802369 144.316582,338.802369 144.707107,339.192893 L149.556899,344.042686 L154.370562,339.195361 Z" id="dark-close" fill="#F35910" sketch:type="MSShapeGroup"></path>
<path d="M2.70710678,304.292893 L2.71421284,305.699929 L7.61421284,300.699929 L6.18578716,299.300071 L1.28578716,304.300071 L0.592892858,305.007106 L1.29289322,305.707107 L6.19289322,310.607107 L7.60710678,309.192893 L2.70710678,304.292893 L2.70710678,304.292893 Z" id="left-arrow" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M13.1928932,305.607107 L13.1857872,304.200071 L8.28578716,309.200071 L9.71421284,310.599929 L14.6142128,305.599929 L15.3071071,304.892894 L14.6071068,304.192893 L9.70710678,299.292893 L8.29289322,300.707107 L13.1928932,305.607107 L13.1928932,305.607107 Z" id="right-arrow" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M112,343 C112,338.581722 108.418278,335 104,335 C99.5817218,335 96,338.581722 96,343 C96,347.418278 99.5817218,351 104,351 C108.418278,351 112,347.418278 112,343 Z M111,343 C111,339.134007 107.865993,336 104,336 C100.134007,336 97,339.134007 97,343 C97,346.865993 100.134007,350 104,350 C107.865993,350 111,346.865993 111,343 Z M104.860632,344.013214 C104.860632,342.717029 106.871954,342.839943 106.871954,341.029753 C106.871954,340.035266 106.067426,339.152519 104.368976,339.152519 C103.262748,339.152519 102.435872,339.610653 101.787779,340.359312 L102.927528,341.242059 C103.329793,340.783924 103.776753,340.560444 104.223714,340.560444 C104.71537,340.560444 105.005894,340.783924 105.005894,341.186189 C105.005894,342.102458 103.2404,342.035414 103.2404,343.957344 L103.2404,344.236694 L104.860632,344.236694 L104.860632,344.013214 Z M104.067277,347.119508 C104.637152,347.119508 105.084112,346.661374 105.084112,346.102673 C105.084112,345.543973 104.637152,345.085838 104.067277,345.085838 C103.497403,345.085838 103.050442,345.543973 103.050442,346.102673 C103.050442,346.661374 103.497403,347.119508 104.067277,347.119508 Z" id="help" fill="#000000" sketch:type="MSShapeGroup"></path>
@ -158,5 +159,7 @@
<path d="M73,96 C113.316789,96 146,63.3167887 146,23 C146,-17.3167887 113.316789,-50 73,-50 C32.6832113,-50 0,-17.3167887 0,23 C0,63.3167887 32.6832113,96 73,96 Z" id="Oval-1-copy-2" stroke="#EEEEEE" opacity="0.21" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
</g>
<path d="M171.06066,275.954195 L171.202702,275.812154 L171.302365,275.637743 C171.414487,275.441529 171.551135,275.139765 171.678636,274.741324 C172.498746,272.17848 171.915105,269.18732 169.06066,266.332875 C166.243699,263.515914 163.118112,263.085348 160.328491,264.097711 C159.823841,264.280849 159.443803,264.472287 159.205002,264.621537 L159.050513,264.718093 L158.923629,264.848822 L142.423629,281.848822 L142.347668,281.933258 C142.158935,282.159738 141.914201,282.515622 141.675224,282.984613 C140.849092,284.605898 140.703461,286.396954 141.752299,288.09123 C142.076339,288.614679 142.505633,289.100791 143.039723,289.545867 C145.292783,291.423417 147.404521,291.890769 149.098516,291.442358 C149.341124,291.378139 149.532621,291.304275 149.67082,291.235176 L149.888539,291.126317 L150.06066,290.954195 L164.06066,276.954195 L164.5,276.514855 L164.5,275.893535 C164.5,275.259579 164.359026,274.413735 163.919766,273.535214 C163.698156,273.091994 163.414366,272.686581 163.06066,272.332875 C162.478935,271.75115 161.737193,271.469799 160.928583,271.427241 C160.327068,271.395582 159.731987,271.494762 159.15132,271.674969 C158.852797,271.767614 158.615784,271.863127 158.45787,271.937928 L158.229833,272.045946 L158.049687,272.222628 L147.649687,282.422628 L149.750313,284.564442 L160.150313,274.364442 L159.74213,274.649142 C159.780517,274.630958 159.889613,274.586994 160.040517,274.540162 C160.310615,274.456338 160.572677,274.412661 160.770907,274.423094 C160.889274,274.429324 160.929866,274.444721 160.93934,274.454195 C161.054384,274.569239 161.256262,274.58804 161.33934,274.754195 C161.532892,275.141299 161.499999,274.983741 161.499999,275.193535 L161.499999,275.393535 L147.93934,288.832875 L148.32918,288.551894 C148.086278,288.606979 147.74747,288.618798 147.311607,288.522337 C146.619626,288.369193 145.834748,287.96993 144.960277,287.241203 C144.667836,286.997503 144.452815,286.754023 144.303094,286.512166 C143.893415,285.850376 143.952546,285.123142 144.348213,284.346646 C144.475447,284.096949 144.596925,283.9203 144.652332,283.853812 L144.576371,283.938248 L161.076371,266.938248 L160.794998,267.165532 C160.864839,267.121882 161.059218,267.023967 161.351894,266.917754 C163.122972,266.275024 165.021733,266.536588 166.93934,268.454195 C168.959895,270.47475 169.313754,272.288278 168.821364,273.826996 C168.761365,274.014492 168.710513,274.12679 168.697635,274.149327 L168.93934,273.832875 L153.93934,288.832875 L156.06066,290.954195 L171.06066,275.954195 Z" id="paper-clip" fill="#D9D9D9" sketch:type="MSShapeGroup"></path>
<path d="M116,339 L116,345 L122,345 L122,339 L116,339 Z M126.071068,345 L111.928932,345 L119,352.071068 L126.071068,345 Z" id="download-white" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M133.2,347.3 L129.996546,344.378886 L128.875432,343.38234 L126.88234,345.624568 L128.003454,346.621114 L132.503454,350.621114 L133.762683,351.740429 L134.728848,350.360194 L141.728848,340.360194 L142.589041,339.131346 L140.131346,337.410959 L139.271152,338.639806 L133.2,347.3 Z" id="Line-copy" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 107 KiB

View file

@ -497,4 +497,72 @@ class ContentSidebarLeft extends App.ControllerContent
App.Config.set( 'layout_ref/content_sidebar_left', ContentSidebarLeft, 'Routes' )
class ImportWizard extends App.ControllerContent
elements:
'[data-target]': 'links'
'[data-slide]': 'slides'
'[data-action]': 'actions'
'#otrs-link': 'otrsLink'
'.input-feedback':'inputFeedback'
constructor: ->
super
@render()
@links.on 'click', @navigate
@actions.on 'click', @action
# wait 500 ms after the last user input before we check the link
@otrsLink.on 'input', _.debounce(@checkOtrsLink, 600)
checkOtrsLink: (e) =>
if @otrsLink.val() is ""
@inputFeedback.attr('data-state', '')
return
@inputFeedback.attr('data-state', 'loading')
# send fake callback
if @otrsLink.val() is '1337'
state = 'success'
else
state = 'error'
setTimeout @otrsLinkCallback, 1500, state
otrsLinkCallback: (state) =>
@inputFeedback.attr('data-state', state)
@showNextButton @inputFeedback if state is 'success'
action: (e) =>
button = $(e.delegateTarget)
switch button.attr('data-action')
when "reveal" then @showNextButton button
showNextButton: (sibling) ->
sibling.parents('.wizard-slide').find('.btn.hide').removeClass('hide')
navigate: (e) =>
target = $(e.delegateTarget).attr('data-target')
targetSlide = @$("[data-slide=#{ target }]")
if targetSlide
@goToSlide targetSlide
goToSlide: (targetSlide) =>
@slides.addClass('hide')
targetSlide.removeClass('hide')
if targetSlide.attr('data-hide')
setTimeout @goToSlide, targetSlide.attr('data-hide'), targetSlide.next()
render: ->
@html App.view('layout_ref/import_wizard')()
App.Config.set( 'layout_ref/import_wizard', ImportWizard, 'Routes' )
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

View file

@ -1,6 +1,6 @@
class App.TicketZoom extends App.Controller
events:
'click .submit': 'submit'
'click .js-submit': 'submit'
constructor: (params) ->
super

View file

@ -1,5 +1,5 @@
<div class="attachments"></div>
<div class="u-unclickable">
<div class="article-attachment u-unclickable">
<div class="attachmentPlaceholder">
<span class="attachmentPlaceholder-inputHolder u-highlight u-clickable">
Dateien wählen..

View file

@ -0,0 +1,90 @@
<div class="main flex centered darkBackground">
<div class="import wizard hero-unit">
<div class="wizard-slide vertical" data-slide="home">
<h2>Import Tickets</h2>
<div class="wizard-body flex vertical justified">
<div class="import-source centered" data-source="otrs" data-target="otrs-prepare-plugin">
<img class="logo" src="<%= @C('otrs-logo.png') %>" alt="OTRS" height="37">
</div>
</div>
</div>
<div class="wizard-slide vertical hide" data-slide="otrs-prepare-plugin" data-hide="2330">
<h2>Create OTRS Migration Plugin</h2>
<div class="wizard-body flex vertical justified">
<p class="wizard-loadingText">
<span class="loading icon"></span> Personalise Migration Plugin ..
</p>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a>
</div>
</div>
<div class="wizard-slide vertical hide" data-slide="otrs-plugin">
<h2>Download OTRS Migration Plugin</h2>
<div class="wizard-body flex vertical justified">
<p>
Download and install this personalised OTRS Migration Plugin on your OTRS System:
</p>
<a class="btn btn--primary btn--download" download data-action="reveal"><span class="download icon"></span> Personal Migration Plugin</a>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a>
<div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div>
</div>
</div>
<div class="wizard-slide vertical hide" data-slide="otrs-link">
<h2>Link OTRS</h2>
<div class="wizard-body flex vertical justified">
<p>
Enter the link provided by the plugin at the end of the installation to link the two systems:
</p>
<div class="form-group">
<label for="otrs-link">OTRS Link</label>
<div class="u-positionOrigin">
<input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
<div class="input-feedback centered">
<div class="small loading icon"></div>
<div class="error icon"></div>
<div class="checkmark icon"></div>
</div>
</div>
</div>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="otrs-plugin">Go Back</a>
<div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div>
</div>
</div>
<div class="wizard-slide vertical hide" data-slide="otrs-export">
<h2>OTRS Migration</h2>
<div class="wizard-body flex vertical justified">
<table class="progressTable">
<tr class="is-done">
<td><span class="js-count">42</span>/<span class="js-max">42</span>
<td>Users
<td class="progressTable-progressCell"><div class="horizontal">
<div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div>
</div>
</tr>
<tr class="is-done">
<td><span class="js-count">29999</span>/<span class="js-max">29999</span>
<td>Tickets
<td class="progressTable-progressCell"><div class="horizontal">
<div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div>
</div>
</tr>
<tr>
<td>
<td>Configuration
<td class="progressTable-progressCell"><div class="horizontal">
<div class="progress flex"><div class="bar" style="width: 33%"></div></div><div class="checkmark icon"></div>
</div>
</tr>
</table>
</div>
<div class="wizard-controls horizontal center">
<a href="#dashboard" class="btn btn--primary align-center hide js-finished">Done</a>
</div>
</div>
</div>
</div>

View file

@ -14,6 +14,7 @@
<li>Communication Reply - no content <a href="#layout_ref/communication_reply/no_content">Example</a></li>
<li>Communication Reply - with content <a href="#layout_ref/communication_reply/content">Example</a></li>
<li>Communication Reply - with multiline content <a href="#layout_ref/communication_reply/mulit_line_content">Example</a></li>
<li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
</ul>
</div>

View file

@ -2,7 +2,7 @@
<p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
<div class="hero-unit">
<img class="logo" src="http://znuny.com/assets/logo_small.png" alt="<%= @C( 'product_name' ) %>">
<img class="logo" src="<%= @C('company-logo.png') %>" alt="<%= @C( 'product_name' ) %>">
<form id="login">
<div class="form-group">
<label for="username"><%- @Ti( 'Username / email' ) %></label>

View file

@ -88,7 +88,7 @@
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn--primary submit" value="<%- @T('Update') %>">
<input type="submit" class="btn btn--primary js-submit" value="<%- @T('Update') %>">
</div>
</form>
</div>

View file

@ -212,3 +212,8 @@ body.fit {
.align-right {
margin-left: auto;
}
.align-center {
margin-left: auto;
margin-right: auto;
}

View file

@ -10,7 +10,7 @@ ul {
}
p {
color: hsl(198,19%,72%);
color: #bcbcbb;
margin-bottom: 14px;
}
@ -473,15 +473,17 @@ textarea,
outline: none;
}
.form-control:focus {
.form-control:focus,
.form-control.is-focused {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
.form-control[contenteditable] {
.richtext.form-control [contenteditable] {
height: auto;
min-height: 100px;
min-height: 82px;
border: none;
margin-bottom: 28px;
}
.tokenfield.focus {
@ -609,7 +611,11 @@ textarea,
margin-top: 0;
}
.login, .getstarted, .reset_password, .signup {
.login,
.getstarted,
.reset_password,
.signup,
.darkBackground {
padding: 10px;
height: auto;
background: hsl(234,10%,19%);
@ -1314,6 +1320,59 @@ ol.tabs li {
background-position: -96px -335px;
}
.download.icon {
width: 14px;
height: 13px;
background-position: -112px -339px;
}
.checkmark.icon {
width: 16px;
height: 15px;
background-position: -126px -337px;
}
.error.icon {
width: 13px;
height: 13px;
background-position: -143px -339px;
}
.loading.icon {
width: 30px;
height: 30px;
background: hsl(339,80%,62%);
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
.small.loading.icon {
width: 20px;
height: 20px;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background: hsl(202,68%,54%); }
50% { -webkit-transform: perspective(120px) rotateY(180deg); background: hsl(145,51%,45%); }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background: hsl(202,68%,54%); }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
background: hsl(202,68%,54%);
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
background: hsl(145,51%,45%);
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
background: hsl(202,68%,54%);
}
}
/*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@ -1462,9 +1521,13 @@ footer {
width: 100px;
}
.btn {
.btn,
.btn:hover,
.btn:focus {
font-size: 14px;
padding: 9px 24px 8px;
color: white;
background: hsl(234,10%,29%);
}
.btn:active {
@ -1493,6 +1556,13 @@ footer {
background: hsl(0,65%,55%);
}
.btn--download .download.icon {
margin-right: 6px;
margin-top: 3px;
margin-left: -10px;
vertical-align: top;
}
.navigation {
width: 260px;
background: #26272e;
@ -2000,6 +2070,10 @@ footer {
margin: 21px 0 12px;
}
.NavBarAdmin + .main p {
color: hsl(198,19%,72%);
}
.nav-stacked > li + li {
margin-top: 0;
}
@ -2431,7 +2505,8 @@ footer {
}
.ticket-title {
max-width: 596px;
max-width: 800px;
padding: 0 81px;
}
.ticket-title h1 {
@ -3170,7 +3245,7 @@ footer {
}
.formset-inset {
margin: 31px -24px 24px;
margin: 18px -24px 24px;
padding: 19px 24px 4px;
background: hsl(197,20%,93%);
border-top: 1px solid hsl(0,0%,90%);
@ -3695,6 +3770,7 @@ footer {
.scrollPageHeader .ticket-title {
max-width: initial;
padding: 0;
}
.scrollPageHeader h1 {
@ -3705,6 +3781,114 @@ footer {
white-space: nowrap;
}
.wizard {
width: 360px;
}
.wizard h2 {
text-align: center;
border-bottom: 1px solid rgba(0,0,0,.13);
padding-bottom: 8px;
margin-bottom: 16px;
}
.wizard .form-group {
margin: 0;
}
.wizard-slide {
min-height: 260px;
}
.wizard-body {
padding-bottom: 15px;
}
.wizard-controls {
padding-top: 15px;
height: 39px;
}
.wizard-loadingText {
text-align: center;
margin: 0;
}
.wizard-loadingText .loading {
vertical-align: middle;
margin-right: 10px;
}
.import-source {
cursor: pointer;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.13);
height: 50px;
margin: 5px 0;
}
.input-feedback {
position: absolute;
padding-left: 10px;
right: 1px;
top: 1px;
bottom: 1px;
width: 52px;
border-radius: 0 5px 5px 0;
background: linear-gradient(to right, transparent, white 33%);
pointer-events: none;
}
.input-feedback .icon {
display: none;
}
.input-feedback[data-state=loading] .loading.icon,
.input-feedback[data-state=error] .error.icon,
.input-feedback[data-state=success] .checkmark.icon {
display: block;
}
.progressTable {
max-width: 100%;
margin: 0 auto;
}
.progressTable td {
padding: 8px 5px;
}
.progressTable tr:not(:last-child) {
border-bottom: 1px solid #eee;
}
.progressTable td:first-child {
text-align: right;
}
.progressTable-progressCell {
width: 120px;
}
.progress {
height: 10px;
margin: 3px 0 0;
}
.progress .bar {
background: #389ed9;
height: 100%;
}
.progressTable .progress + .checkmark {
margin-left: 10px;
opacity: 0;
}
.progressTable tr.is-done .checkmark {
opacity: 1;
}
/*
----------------