add setup wizard layout reference
This commit is contained in:
Felix Niklas
parent
b101c03eb6
commit
2c395afcb6
6 changed files with 768 additions and 134 deletions
|
|
@ -512,11 +512,44 @@ class ContentSidebarLeft extends App.ControllerContent
|
|||
App.Config.set( 'layout_ref/content_sidebar_left', ContentSidebarLeft, 'Routes' )
|
||||
|
||||
|
||||
class ImportWizard extends App.ControllerContent
|
||||
class App.ControllerWizard extends App.ControllerContent
|
||||
elements:
|
||||
'[data-target]': 'links'
|
||||
'[data-slide]': 'slides'
|
||||
'[data-action]': 'actions'
|
||||
|
||||
events:
|
||||
'click [data-target]': 'navigate'
|
||||
'click [data-action]': 'action'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
action: (e) =>
|
||||
button = $(e.currentTarget)
|
||||
|
||||
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.currentTarget).attr('data-target')
|
||||
targetSlide = @$("[data-slide=#{ target }]")
|
||||
console.log(e, target, targetSlide)
|
||||
|
||||
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()
|
||||
|
||||
|
||||
class ImportWizard extends App.ControllerWizard
|
||||
elements:
|
||||
'#otrs-link': 'otrsLink'
|
||||
'.input-feedback':'inputFeedback'
|
||||
|
||||
|
|
@ -524,9 +557,6 @@ class ImportWizard extends App.ControllerContent
|
|||
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)
|
||||
|
||||
|
|
@ -550,30 +580,6 @@ class ImportWizard extends App.ControllerContent
|
|||
|
||||
@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')()
|
||||
|
||||
|
|
@ -601,4 +607,47 @@ class ReferenceOrganizationProfile extends App.ControllerContent
|
|||
|
||||
App.Config.set( 'layout_ref/organization_profile', ReferenceOrganizationProfile, 'Routes' )
|
||||
|
||||
class ReferenceSetupWizard extends App.ControllerWizard
|
||||
elements:
|
||||
'.fileUpload-preview': 'logoPreview'
|
||||
'#agent_email': 'agentEmail'
|
||||
'#agent_first_name': 'agentFirstName'
|
||||
'#agent_last_name': 'agentLastName'
|
||||
|
||||
events:
|
||||
'change .js-upload': 'onLogoPick'
|
||||
'click .js-inviteAgent': 'inviteAgent'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@render()
|
||||
|
||||
render: ->
|
||||
@html App.view('layout_ref/setup')()
|
||||
|
||||
onLogoPick: (event) =>
|
||||
reader = new FileReader()
|
||||
|
||||
reader.onload = (e) =>
|
||||
@logoPreview.attr('src', e.target.result)
|
||||
|
||||
reader.readAsDataURL(event.target.files[0])
|
||||
|
||||
inviteAgent: =>
|
||||
firstname = @agentFirstName.val()
|
||||
lastname = @agentLastName.val()
|
||||
|
||||
App.Event.trigger 'notify', {
|
||||
type: 'success'
|
||||
msg: App.i18n.translateContent( "Invitation sent to #{ firstname } #{ lastname }" )
|
||||
timeout: 3500
|
||||
}
|
||||
|
||||
@agentEmail.add(@agentFirstName).add(@agentLastName).val('')
|
||||
@agentFirstName.focus()
|
||||
|
||||
|
||||
|
||||
App.Config.set( 'layout_ref/setup', ReferenceSetupWizard, 'Routes' )
|
||||
|
||||
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<div class="main flex centered darkBackground">
|
||||
<div class="import wizard hero-unit">
|
||||
<div class="wizard-slide vertical" data-slide="home">
|
||||
<div class="import wizard">
|
||||
<div class="wizard-slide" data-slide="home">
|
||||
<h2>Import Tickets</h2>
|
||||
<div class="wizard-body flex vertical justified">
|
||||
<div class="wizard-body 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">
|
||||
<img class="logo" src="<%= @C('image_path') + '/' + 'otrs-logo.png' %>" alt="OTRS" height="37">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide vertical hide" data-slide="otrs-prepare-plugin" data-hide="2330">
|
||||
<div class="wizard-slide hide" data-slide="otrs-prepare-plugin" data-hide="2330">
|
||||
<h2>Create OTRS Migration Plugin</h2>
|
||||
<div class="wizard-body flex vertical justified">
|
||||
<div class="wizard-body vertical justified">
|
||||
<p class="wizard-loadingText">
|
||||
<span class="loading icon"></span> Personalise Migration Plugin ..
|
||||
</p>
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
<a class="subtle-link" data-target="home">Go Back</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide vertical hide" data-slide="otrs-plugin">
|
||||
<div class="wizard-slide hide" data-slide="otrs-plugin">
|
||||
<h2>Download OTRS Migration Plugin</h2>
|
||||
<div class="wizard-body flex vertical justified">
|
||||
<div class="wizard-body vertical justified">
|
||||
<p>
|
||||
Download and install this personalised OTRS Migration Plugin on your OTRS System:
|
||||
</p>
|
||||
|
|
@ -32,13 +32,13 @@
|
|||
<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">
|
||||
<div class="wizard-slide hide" data-slide="otrs-link">
|
||||
<h2>Link OTRS</h2>
|
||||
<div class="wizard-body flex vertical justified">
|
||||
<div class="wizard-body 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">
|
||||
<div class="form-group fromGroup--standalone">
|
||||
<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">
|
||||
|
|
@ -55,9 +55,9 @@
|
|||
<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">
|
||||
<div class="wizard-slide hide" data-slide="otrs-export">
|
||||
<h2>OTRS Migration</h2>
|
||||
<div class="wizard-body flex vertical justified">
|
||||
<div class="wizard-body vertical justified">
|
||||
<table class="progressTable">
|
||||
<tr class="is-done">
|
||||
<td><span class="js-count">42</span>/<span class="js-max">42</span>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
<li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
|
||||
<li><a href="#layout_ref/user_profile">User Profile</a></li>
|
||||
<li><a href="#layout_ref/organization_profile">Organization Profile</a></li>
|
||||
<li><a href="#layout_ref/setup">Setup Wizard</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
337
app/assets/javascripts/app/views/layout_ref/setup.jst.eco
Normal file
337
app/assets/javascripts/app/views/layout_ref/setup.jst.eco
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
<div class="main flex vertical centered darkBackground">
|
||||
<aside class="director">
|
||||
<div data-slide="admin">
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<img class="zammad full logo" src="<%= @C('image_path') + '/' + 'full logo on dark.svg' %>" alt="Zammad">
|
||||
<div class="setup wizard">
|
||||
<div class="wizard-slide" data-slide="home">
|
||||
<div class="wizard-body vertical centered">
|
||||
<a class="btn btn--primary" data-target="admin"><%- @T('Setup new System') %></a>
|
||||
</div>
|
||||
<div class="wizard-aside">
|
||||
Or <span class="u-clickable u-highlight" data-target="migrate"><%- @T('migrate from another system') %></a>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="admin">
|
||||
<h2>Administrator Account</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<fieldset>
|
||||
<div class="form-group formGroup--halfSize">
|
||||
<label for="first_name">Firstname</label>
|
||||
<input id="first_name" class="form-control" value="Hans">
|
||||
</div>
|
||||
<div class="form-group formGroup--halfSize">
|
||||
<label for="last_name">Lastname</label>
|
||||
<input id="last_name" class="form-control" value="Huber">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" class="form-control" value="hanshuber@web.de">
|
||||
</div>
|
||||
<div class="form-group formGroup--halfSize">
|
||||
<label for="email">Password</label>
|
||||
<input type="password" id="email" class="form-control" value="123456">
|
||||
</div>
|
||||
<div class="form-group formGroup--halfSize">
|
||||
<label for="email">Password (Confirm)</label>
|
||||
<input type="password" id="email" class="form-control" value="123456">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<a class="subtle-link" data-target="home">Go Back</a>
|
||||
<div class="btn btn--success align-right" data-target="company">Create</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="company">
|
||||
<h2>Company</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Company Name</label>
|
||||
<input class="form-control" value="Company LLT">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Logo</label>
|
||||
<div class="horizontal center">
|
||||
<img class="fileUpload-preview" src="">
|
||||
<div class="btn btn--success fileUpload">Upload<input type="file" class="js-upload" accept="image/*"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>System Url</label>
|
||||
<input type="url" class="form-control" placeholder="support.company.com">
|
||||
<p class="help-block">The url to this installation of Zammad.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<a class="subtle-link" data-target="home">Go Back</a>
|
||||
<div class="btn btn--primary align-right" data-target="channels">Next</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="channels">
|
||||
<h2>Connect Channels</h2>
|
||||
<div class="wizard-body vertical center">
|
||||
<p class="help-block help-block--center">Setup the communication channels you want to sync with your Zammad inbox</p>
|
||||
<div class="wizard-buttonList vertical">
|
||||
<div class="btn auth_provider auth_provider--wide email" data-target="emailStart">
|
||||
<div class="email provider_icon"></div>
|
||||
<div class="provider_name">Email</div>
|
||||
</div>
|
||||
<div class="btn auth_provider auth_provider--wide twitter" data-target="twitter">
|
||||
<div class="twitter provider_icon"></div>
|
||||
<div class="provider_name">Twitter</div>
|
||||
</div>
|
||||
<div class="btn auth_provider auth_provider--wide facebook" data-target="facebook">
|
||||
<div class="facebook provider_icon"></div>
|
||||
<div class="provider_name">Facebook</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<a class="subtle-link" data-target="company">Go Back</a>
|
||||
<div class="btn align-right" data-target="agent">Skip</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="emailStart">
|
||||
<h2>Email</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Full Name</label>
|
||||
<input class="form-control" value="Company Support">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control" value="support@company.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" value="123456">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn" data-target="channels">Cancel</div>
|
||||
<a class="subtle-link align-right" data-target="channels">Go Back</a>
|
||||
<div class="btn btn--primary" data-target="emailCheck">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="emailCheck" data-hide="1000">
|
||||
<h2>Email</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<p class="wizard-loadingText">
|
||||
<span class="loading icon"></span> Testing support@company.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn js-cancelEmailCheck" data-target="emailStart">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="inboundEmail">
|
||||
<h2>Incoming Email Server</h2>
|
||||
<div class="alert alert--info" role="alert">Account must be manually configured</div>
|
||||
<div class="wizard-body vertical justified">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Account Type</label>
|
||||
<div class="u-positionOrigin">
|
||||
<select class="form-control">
|
||||
<option selected>IMAP</option>
|
||||
<option>POP3</option>
|
||||
</select>
|
||||
<div class="select-arrow icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Mail Server</label>
|
||||
<input type="url" class="form-control" value="imap.company.com" placeholder="imap.example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>User Name</label><!-- (prefilled - taken from the email) -->
|
||||
<input class="form-control" value="support">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password (prefilled)</label>
|
||||
<input type="password" class="form-control" value="123456">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn js-cancelChannelSetup" data-target="channels">Cancel</div>
|
||||
<a class="subtle-link align-right" data-target="emailStart">Go Back</a>
|
||||
<div class="btn btn--primary" data-target="inboundCheck">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="inboundCheck" data-hide="2000">
|
||||
<h2>Incoming Email Server</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<p class="wizard-loadingText">
|
||||
<span class="loading icon"></span> Connection to imap.company.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn js-cancelInboundCheck" data-target="inboundEmail">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="outboundEmail">
|
||||
<h2>Outgoing Email Server</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>SMTP Server</label>
|
||||
<input type="url" class="form-control" value="smtp.company.com" placeholder="smtp.company.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>User Name</label>
|
||||
<input class="form-control" placeholder="Optional">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" placeholder="Optional">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn btn--subtle js-cancelChannelSetup" data-target="channels">Cancel</div>
|
||||
<div class="btn btn--subtle align-right" data-target="emailStart">Go Back</div>
|
||||
<div class="btn btn--primary" data-target="outboundCheck">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="outboundCheck" data-hide="2330">
|
||||
<h2>Outgoing Email Server</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<p class="wizard-loadingText">
|
||||
<span class="loading icon"></span> Connecting to smtp.company.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn js-cancelOutboundCheck" data-target="outboundEmail">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="moreChannels">
|
||||
<h2>Connect Channels</h2>
|
||||
<div class="wizard-body vertical center">
|
||||
<label>Connected Channels</label>
|
||||
<div class="channelList">
|
||||
<div class="channelList-entry center">
|
||||
<div class="email channel icon"></div>
|
||||
<div class="channelList-label">
|
||||
<div class="channelList-name">support@company.com</div>
|
||||
<div class="channelList-status">Email</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label>Connect Another</label>
|
||||
<div class="wizard-buttonList vertical">
|
||||
<div class="btn auth_provider auth_provider--wide email" data-target="emailStart">
|
||||
<div class="email provider_icon"></div>
|
||||
<div class="provider_name">Email</div>
|
||||
</div>
|
||||
<div class="btn auth_provider auth_provider--wide twitter" data-target="twitter">
|
||||
<div class="twitter provider_icon"></div>
|
||||
<div class="provider_name">Twitter</div>
|
||||
</div>
|
||||
<div class="btn auth_provider auth_provider--wide facebook" data-target="facebook">
|
||||
<div class="facebook provider_icon"></div>
|
||||
<div class="provider_name">Facebook</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn btn--primary align-right" data-target="agents">Continue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="agents">
|
||||
<h2>Invite Colleagues</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<fieldset>
|
||||
<div class="form-group formGroup--halfSize">
|
||||
<label for="agent_first_name">Firstname</label>
|
||||
<input id="agent_first_name" class="form-control" value="Eric">
|
||||
</div>
|
||||
<div class="form-group formGroup--halfSize">
|
||||
<label for="agent_last_name">Lastname</label>
|
||||
<input id="agent_last_name" class="form-control" value="Dassner">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="agent_email">Email</label>
|
||||
<input type="email" id="agent_email" class="form-control" value="ericdassner@web.de">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<a class="subtle-link" data-target="moreChannels">Go Back</a>
|
||||
<div class="btn btn--primary align-right" data-target="setupFinished">Continue</div>
|
||||
<div class="btn btn--success js-inviteAgent">Invite</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-slide hide" data-slide="setupFinished" data-hide="2330">
|
||||
<h2>Setup Finished</h2>
|
||||
<div class="wizard-body vertical justified">
|
||||
<p class="wizard-loadingText">
|
||||
<span class="loading icon"></span> Starting Zammad
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="wizard-slide" data-slide="channels">
|
||||
<h2>Channel List</h2>
|
||||
<div class="wizard-body vertical">
|
||||
<div class="channelList">
|
||||
<!--<div class="channelList-entry center">
|
||||
<div class="email channel icon"></div>
|
||||
<div class="channelList-label">
|
||||
<div class="channelList-name">support@company.com</div>
|
||||
<div class="channelList-status">Email</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="channelList-entry center">
|
||||
<div class="email channel icon"></div>
|
||||
<div class="channelList-label">
|
||||
<div class="channelList-name">contact@company.com</div>
|
||||
<div class="channelList-status">Email</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="channelList-entry center">
|
||||
<div class="twitter channel icon"></div>
|
||||
<div class="channelList-label">
|
||||
<div class="channelList-name">@company</div>
|
||||
<div class="channelList-status">Twitter</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="channelList-placeholder">
|
||||
No Channels Configured
|
||||
</div>
|
||||
<div class="channelList-controls">
|
||||
<div class="channelList-controlEntry dropup dropdown--actions" title="Add Channel">
|
||||
<div class="flex centered" data-toggle="dropdown" id="channelActions" aria-expanded="true">
|
||||
<div class="add icon"></div>
|
||||
</div>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="channelActions">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Änderungsprotokoll</a>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1">Benutzer zusammenführen</a>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1">Benutzer löschen</a>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="channelList-controlEntry js-remove" title="Remove Channel">
|
||||
<div class="flex centered">
|
||||
<div class="remove icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-controls center">
|
||||
<div class="btn btn--primary align-right" data-target="agent">Next</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,11 +29,10 @@
|
|||
|
||||
<div class="auth_providers horizontal stretch">
|
||||
<% for auth_provider in @auth_providers: %>
|
||||
<a class="auth_provider <%= auth_provider.class %> horizontal" href="<%= auth_provider.url %>">
|
||||
<span class="provider_icon"></span>
|
||||
<a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
|
||||
<span class="<%= auth_provider.class %> provider_icon"></span>
|
||||
<span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
|
||||
</a>
|
||||
<li><a href="<%= auth_provider.url %>"></a></li>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -116,6 +116,20 @@ small {
|
|||
background: hsla(50,100%,50%,.13);
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
.clearfix { display: inline-block; }
|
||||
/* start commented backslash hack \*/
|
||||
* html .clearfix { height: 1%; }
|
||||
.clearfix { display: block; }
|
||||
/* close commented backslash hack */
|
||||
|
||||
[contenteditable] {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -230,6 +244,81 @@ span[data-tooltip]:hover:before {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
font-size: 14px;
|
||||
padding: 10px 24px 9px;
|
||||
color: hsl(202,68%,54%);
|
||||
background: white;
|
||||
border-color: rgba(0,0,0,.1);
|
||||
outline: none;
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: .33;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn--primary {
|
||||
color: white;
|
||||
background: #419ed7;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
||||
&.btn--success {
|
||||
color: white;
|
||||
background: hsl(145,51%,45%);
|
||||
}
|
||||
|
||||
&.btn--danger {
|
||||
color: white;
|
||||
background: hsl(0,65%,55%);
|
||||
}
|
||||
|
||||
&.btn--subtle {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
color: rgba(0,0,0,.32);
|
||||
text-decoration: underline;
|
||||
background: none;
|
||||
@extend .u-clickable;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
+ .btn:not(.align-right) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn + .btn.align-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.vertical > .btn + .btn {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn--download .download.icon {
|
||||
margin-right: 6px;
|
||||
margin-top: 3px;
|
||||
margin-left: -10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
|
@ -433,7 +522,7 @@ h5 {
|
|||
label,
|
||||
.checkbox.form-group label {
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
color: rgba(0,0,0,.5);
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
|
|
@ -443,10 +532,15 @@ label,
|
|||
|
||||
fieldset {
|
||||
margin: 0 -4px;
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
fieldset .form-group {
|
||||
padding: 0 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset > *:not(.form-group) .form-control {
|
||||
|
|
@ -477,6 +571,10 @@ fieldset > *:not(.form-group) .form-control {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.fromGroup--standalone .form-control {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
|
|
@ -497,10 +595,10 @@ textarea,
|
|||
line-height: 22px;
|
||||
color: #555;
|
||||
background: white;
|
||||
border: 1px solid hsl(0, 0%, 90%);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -625,14 +723,15 @@ textarea,
|
|||
|
||||
.help-block {
|
||||
margin: 0;
|
||||
color: #bcbcbc;
|
||||
|
||||
&.help-block--center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.help-block:not(:empty) {
|
||||
margin: 5px 0 10px;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
color: #bcbcbc;
|
||||
margin: 8px 2px 10px;
|
||||
}
|
||||
|
||||
/* replace music icon with attachment */
|
||||
|
|
@ -662,6 +761,12 @@ textarea,
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.zammad.full.logo {
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.login,
|
||||
.getstarted,
|
||||
.reset_password,
|
||||
|
|
@ -807,15 +912,21 @@ ol.tabs li {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.auth_provider {
|
||||
padding: 9px 7px 8px;
|
||||
.auth_provider,
|
||||
.auth_provider:hover {
|
||||
padding: 9px 10px 9px 7px;
|
||||
color: white;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
@extend .horizontal;
|
||||
|
||||
&.auth_provider--wide {
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth_provider:not(:last-child) {
|
||||
.auth_providers .auth_provider:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -825,16 +936,28 @@ ol.tabs li {
|
|||
@extend .u-clickable;
|
||||
}
|
||||
|
||||
.auth_provider.facebook {
|
||||
background-color: #4f699c;
|
||||
.auth_provider.facebook,
|
||||
.btn.facebook:hover {
|
||||
background: #4f699c;
|
||||
}
|
||||
|
||||
.auth_provider.google {
|
||||
background-color: #d8543c;
|
||||
.auth_provider.google,
|
||||
.btn.google:hover {
|
||||
background: #d8543c;
|
||||
}
|
||||
|
||||
.auth_provider.twitter {
|
||||
background-color: #2eaee1;
|
||||
.auth_provider.twitter,
|
||||
.btn.twitter:hover {
|
||||
background: hsl(197, 75%, 53%);
|
||||
}
|
||||
|
||||
.auth_provider.email,
|
||||
.btn.email:hover {
|
||||
background: hsl(47, 100%, 59%);
|
||||
}
|
||||
|
||||
.provider_name {
|
||||
@extend .flex;
|
||||
}
|
||||
|
||||
.provider_icon {
|
||||
|
|
@ -868,6 +991,49 @@ ol.tabs li {
|
|||
background-position: 20px 20px; /* make icon empty */
|
||||
}
|
||||
|
||||
.add.icon,
|
||||
.remove.icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
line-height: 20px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.add.icon:after,
|
||||
.remove.icon:after {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.add.icon:after {
|
||||
content: "+";
|
||||
font-size: 34px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.remove.icon:after {
|
||||
content: "-";
|
||||
font-size: 36px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.status.icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.active.status.icon {
|
||||
background: hsl(145,51%,45%);
|
||||
border-color: hsl(145,51%,39%);
|
||||
}
|
||||
|
||||
.inactive.status.icon {
|
||||
background: hsl(4,82%,44%);
|
||||
border-color: hsl(4,82%,38%);
|
||||
}
|
||||
|
||||
.dashboard.icon,
|
||||
.overviews.icon,
|
||||
.customers.icon,
|
||||
|
|
@ -1589,65 +1755,6 @@ footer {
|
|||
width: 100px;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
font-size: 14px;
|
||||
padding: 10px 24px 9px;
|
||||
color: hsl(202,68%,54%);
|
||||
background: white;
|
||||
border-color: rgba(0,0,0,.1);
|
||||
outline: none;
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: .33;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.vertical > .btn + .btn {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn--primary,
|
||||
.btn--primary:hover,
|
||||
.btn--primary:focus {
|
||||
color: white;
|
||||
background: #419ed7;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
||||
.btn--success,
|
||||
.btn--success:hover,
|
||||
.btn--success:focus {
|
||||
color: white;
|
||||
background: hsl(145,51%,45%);
|
||||
}
|
||||
|
||||
.btn--danger,
|
||||
.btn--danger:hover,
|
||||
.btn--danger:focus {
|
||||
color: white;
|
||||
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;
|
||||
|
|
@ -3361,7 +3468,7 @@ footer {
|
|||
}
|
||||
|
||||
.tags {
|
||||
margin-bottom: 20px;
|
||||
margin: 15px 0 20px;
|
||||
}
|
||||
|
||||
.tagList {
|
||||
|
|
@ -3398,6 +3505,9 @@ footer {
|
|||
.newTicket .subtle-link {
|
||||
color: hsl(0,0%,89%);
|
||||
}
|
||||
.newTicket .article-form-top {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
|
|
@ -3429,8 +3539,8 @@ footer {
|
|||
}
|
||||
|
||||
.formset-inset {
|
||||
margin: 18px -24px 24px;
|
||||
padding: 19px 24px 4px;
|
||||
margin: 34px -24px 24px;
|
||||
padding: 19px 24px 24px;
|
||||
background: hsl(197,20%,93%);
|
||||
border-top: 1px solid hsl(0,0%,90%);
|
||||
border-bottom: 1px solid hsl(0,0%,90%);
|
||||
|
|
@ -3463,6 +3573,7 @@ footer {
|
|||
.tokenfield .token-input {
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0 5px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.tokenfield .token .token-label {
|
||||
|
|
@ -3647,7 +3758,7 @@ footer {
|
|||
padding: 0;
|
||||
min-width: 100%;
|
||||
color: white;
|
||||
background: none;
|
||||
background: hsl(234,10%,19%);
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -3660,7 +3771,6 @@ footer {
|
|||
|
||||
.dropdown ul {
|
||||
margin: 0;
|
||||
background: hsl(234,10%,19%);
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
|
|
@ -3969,8 +4079,11 @@ footer {
|
|||
@extend .u-textTruncate;
|
||||
}
|
||||
|
||||
.wizard {
|
||||
.wizard-slide {
|
||||
@extend .vertical;
|
||||
@extend .hero-unit;
|
||||
width: 400px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.wizard h2 {
|
||||
|
|
@ -3978,21 +4091,33 @@ footer {
|
|||
border-bottom: 1px solid rgba(0,0,0,.13);
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wizard .form-group {
|
||||
margin: 0;
|
||||
& + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-body {
|
||||
@extend .flex;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.wizard-controls {
|
||||
padding-top: 15px;
|
||||
@extend .horizontal;
|
||||
margin-top: 15px;
|
||||
height: 39px;
|
||||
}
|
||||
|
||||
.wizard-buttonList {
|
||||
margin-top: 15px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
p + .wizard-buttonList,
|
||||
label + .wizard-buttonList {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.wizard-loadingText {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
|
@ -4003,6 +4128,52 @@ footer {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wizard-aside {
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(0,0,0,.13);
|
||||
}
|
||||
|
||||
.setup.wizard .wizard-body {
|
||||
min-height: 140px;
|
||||
|
||||
& > p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.setup.wizard .wizard-slide {
|
||||
h2 .provider_icon {
|
||||
margin-right: 8px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&[data-slide=twitter],
|
||||
&[data-slide=email] {
|
||||
h2 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-slide=twitter] {
|
||||
background: hsl(197, 75%, 53%);
|
||||
border-color: hsl(197, 75%, 48%);
|
||||
}
|
||||
|
||||
&[data-slide=email] {
|
||||
background: hsl(47, 100%, 59%);
|
||||
border-color: hsl(47, 100%, 54%);
|
||||
}
|
||||
}
|
||||
|
||||
.setup.wizard .fileUpload-preview {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.setup.wizard .fileUpload-preview:not([src=""]) + .fileUpload {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.import.wizard .wizard-slide {
|
||||
height: 300px;
|
||||
}
|
||||
|
|
@ -4070,6 +4241,77 @@ footer {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.channelList {
|
||||
@extend .flex;
|
||||
@extend .vertical;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
margin: 5px 0 20px;
|
||||
}
|
||||
|
||||
.channelList,
|
||||
.channelList-controls,
|
||||
.channelList-controlEntry {
|
||||
border: 1px solid hsl(251,6%,90%);
|
||||
}
|
||||
|
||||
.channelList-entry {
|
||||
@extend .horizontal;
|
||||
cursor: default;
|
||||
padding: 5px 8px;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid hsl(251,6%,90%);
|
||||
}
|
||||
}
|
||||
|
||||
.channelList-label {
|
||||
margin: 0 10px;
|
||||
@extend .flex;
|
||||
& > * {
|
||||
@extend .u-textTruncate;
|
||||
}
|
||||
}
|
||||
|
||||
.channelList-status {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.channelList-placeholder {
|
||||
@extend .flex;
|
||||
@extend .centered;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.channelList-controls {
|
||||
margin-top: auto;
|
||||
@extend .horizontal;
|
||||
background: hsl(251,6%,92%);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.channelList-controlEntry {
|
||||
@extend .horizontal;
|
||||
@extend .justified;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
|
||||
[data-toggle=dropdown] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-holder {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -4553,6 +4795,12 @@ body.fit {
|
|||
|
||||
.align-right {
|
||||
margin-left: auto;
|
||||
|
||||
// give following elements a margin left
|
||||
// used in setup wizard
|
||||
& ~ * {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.align-center {
|
||||
|
|
|
|||
Loading…
Reference in a new issue