diff --git a/app/assets/images/company-logo.png b/app/assets/images/company-logo.png new file mode 100644 index 000000000..673daa7b9 Binary files /dev/null and b/app/assets/images/company-logo.png differ diff --git a/app/assets/images/otrs-logo.png b/app/assets/images/otrs-logo.png new file mode 100644 index 000000000..437fb4d14 Binary files /dev/null and b/app/assets/images/otrs-logo.png differ diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg index e9f234e9e..a51b68294 100644 --- a/app/assets/images/sprite.svg +++ b/app/assets/images/sprite.svg @@ -141,6 +141,7 @@ + @@ -158,5 +159,7 @@ + + \ No newline at end of file diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee index c262c410e..2554ac2d2 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee @@ -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' ) diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index c0dde5a8c..ec46a9fca 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -1,6 +1,6 @@ class App.TicketZoom extends App.Controller events: - 'click .submit': 'submit' + 'click .js-submit': 'submit' constructor: (params) -> super diff --git a/app/assets/javascripts/app/views/generic/attachment.jst.eco b/app/assets/javascripts/app/views/generic/attachment.jst.eco index 59bf5f7ec..4b7970b86 100644 --- a/app/assets/javascripts/app/views/generic/attachment.jst.eco +++ b/app/assets/javascripts/app/views/generic/attachment.jst.eco @@ -1,5 +1,5 @@
-
+
Dateien wählen.. diff --git a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco new file mode 100644 index 000000000..e28ced7a2 --- /dev/null +++ b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco @@ -0,0 +1,90 @@ +
+
+
+

Import Tickets

+
+
+ +
+
+
+
+

Create OTRS Migration Plugin

+
+

+ Personalise Migration Plugin .. +

+
+
+ Go Back +
+
+
+

Download OTRS Migration Plugin

+
+

+ Download and install this personalised OTRS Migration Plugin on your OTRS System: +

+ Personal Migration Plugin +
+
+ Go Back +
Next
+
+
+
+

Link OTRS

+
+

+ Enter the link provided by the plugin at the end of the installation to link the two systems: +

+
+ +
+ +
+
+
+
+
+
+
+
+
+ Go Back +
Migrate OTRS Data
+
+
+
+

OTRS Migration

+
+ + + + + + + +
42/42 + Users +
+
+
+
29999/29999 + Tickets +
+
+
+
+ Configuration +
+
+
+
+
+
+ Done +
+
+
+
\ 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 9d87a5a1f..7c81632af 100644 --- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco @@ -14,6 +14,7 @@
  • Communication Reply - no content Example
  • Communication Reply - with content Example
  • Communication Reply - with multiline content Example
    • +
  • Import Wizard
    • \ No newline at end of file diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco index 99b67a059..9ea0075f9 100644 --- a/app/assets/javascripts/app/views/login.jst.eco +++ b/app/assets/javascripts/app/views/login.jst.eco @@ -2,7 +2,7 @@

    <%- @T( 'Login with %s', @C( 'fqdn' ) ) %>

    - +
    diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco index 0832137d8..acd57ad2a 100644 --- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco @@ -88,7 +88,7 @@
    - +
    \ No newline at end of file diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index fc6e9edc4..e32940cdf 100755 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -212,3 +212,8 @@ body.fit { .align-right { margin-left: auto; } + +.align-center { + margin-left: auto; + margin-right: auto; +} diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index a59ff1031..220644930 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -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
    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; +} + /* ----------------