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

app/assets/javascripts/app/controllers/_channel/twitter.coffee

@@ -3,6 +3,7 @@ class Index extends App.ControllerContent
     'click .js-new':         'new'
     'click .js-edit':        'edit'
     'click .js-delete':      'delete'
+    'click .js-create-app':  'createApp'
 
   constructor: ->
     super
@@ -46,6 +47,18 @@ class Index extends App.ControllerContent
       # showDescription: showDescription
       # description:     description
 
+  createApp: ->
+    modal = new App.ControllerModalNice
+      head: 'Connect Twitter App'
+      container: @el.parents('.content')
+      content: App.view('twitter/app_create')
+      shown: true
+      button: 'Connect'
+      cancel: true
+      onSubmit: () =>
+        @html App.view('twitter/list')()
+        modal.close()
+
   new: (e) ->
   #   e.preventDefault()
   #   new App.ControllerGenericNew(

app/assets/javascripts/app/views/twitter/app_create.jst.eco

@@ -0,0 +1,32 @@
+<h2>Create Twitter App</h2>
+<p>
+  The tutorial on how to create a Twitter App is hosted on <a href="http://zammad.org/twitter-app-tutorial" target="_blank">zammad.org/twitter-app-tutorial</a>
+</p>
+<fieldset>
+  <div class="input form-group">
+    <div class="formGroup-label">
+      <label for="CallbackURL">Callback URL</label>
+    </div>
+    <div class="controls">
+      <input id="CallbackURL" type="text" name="name" class="form-control" value="http://example.com/twitter-app" readonly>
+      <span class="help-block">You need this callback URL for the Twitter App setup.</span>
+    </div>
+  </div>
+  <h2>Enter your Twitter App Keys</h2>
+  <div class="input form-group">
+    <div class="formGroup-label">
+      <label for="TwitterApiKey">Twitter API Key <span>*</span></label>
+    </div>
+    <div class="controls">
+      <input id="TwitterApiKey" type="text" name="name" class="form-control">
+    </div>
+  </div>
+  <div class="input form-group">
+    <div class="formGroup-label">
+      <label for="TwitterApiKeySecret">Twitter API Secret <span>*</span></label>
+    </div>
+    <div class="controls">
+      <input id="TwitterApiKeySecret" type="text" name="name" class="form-control">
+    </div>
+  </div>
+</fieldset>

app/assets/javascripts/app/views/twitter/index.jst.eco

@@ -2,11 +2,6 @@
   <div class="page-header-title">
     <h1><%- @T('Twitter') %> <small><%- @T('Accounts') %></small></h1>
   </div>
-
-  <div class="page-header-meta">
-    <!--<a class="btn js-config"><%- @T('Configure App') %></a>
-    <a class="btn btn--success js-new"><%- @T('Add Account') %></a>-->
-  </div>
 </div>
 
 <div class="page-content">
@@ -16,46 +11,4 @@
     </p>
     <div class="btn btn--success js-create-app"><%- @T('Connect Twitter App') %></div>
   </div>
-  <!--<div class="action">
-    <div class="action-block action-row">
-      <h2>Zammad Community <span class="text-muted">@zammad_community</span></h2>
-    </div>
-    <div class="action-flow action-flow--row">
-      <div class="action-block">
-        <h3><%- @T('Search Terms') %></h3>
-        zammad
-      </div>
-      <%- @Icon('arrow-right', 'action-flow-icon') %>
-      <div class="action-block">
-        <h3><%- @T('Group') %></h3>
-        social network
-      </div>
-    </div>
-    <div class="action-flow action-flow--row">
-      <div class="action-block">
-        <h3><%- @T('Mentions') %></h3>
-        @zammad_community
-      </div>
-      <%- @Icon('arrow-right', 'action-flow-icon') %>
-      <div class="action-block">
-        <h3><%- @T('Group') %></h3>
-        social network
-      </div>
-    </div>
-    <div class="action-flow action-flow--row">
-      <div class="action-block">
-        <h3><%- @T('Direct Messages') %></h3>
-        @zammad_community
-      </div>
-      <%- @Icon('arrow-right', 'action-flow-icon') %>
-      <div class="action-block">
-        <h3><%- @T('Group') %></h3>
-        social network
-      </div>
-    </div>
-    <div class="action-controls">
-      <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
-      <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
-    </div>
-  </div>-->
 </div>

app/assets/javascripts/app/views/twitter/list.jst.eco

@@ -0,0 +1,55 @@
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%- @T('Twitter') %> <small><%- @T('Accounts') %></small></h1>
+  </div>
+
+  <div class="page-header-meta">
+    <a class="btn js-config"><%- @T('Configure App') %></a>
+    <a class="btn btn--success js-new"><%- @T('Add Account') %></a>
+  </div>
+</div>
+
+<div class="page-content">
+  <div class="action">
+    <div class="action-block action-row">
+      <h2><%- @Icon('status', 'supergood-color inline') %> Zammad Community <span class="text-muted">@zammad_community</span></h2>
+    </div>
+    <div class="action-flow action-flow--row">
+      <div class="action-block">
+        <h3><%- @T('Search Terms') %></h3>
+        zammad
+      </div>
+      <%- @Icon('arrow-right', 'action-flow-icon') %>
+      <div class="action-block">
+        <h3><%- @T('Group') %></h3>
+        social network
+      </div>
+    </div>
+    <div class="action-flow action-flow--row">
+      <div class="action-block">
+        <h3><%- @T('Mentions') %></h3>
+        @zammad_community
+      </div>
+      <%- @Icon('arrow-right', 'action-flow-icon') %>
+      <div class="action-block">
+        <h3><%- @T('Group') %></h3>
+        social network
+      </div>
+    </div>
+    <div class="action-flow action-flow--row">
+      <div class="action-block">
+        <h3><%- @T('Direct Messages') %></h3>
+        @zammad_community
+      </div>
+      <%- @Icon('arrow-right', 'action-flow-icon') %>
+      <div class="action-block">
+        <h3><%- @T('Group') %></h3>
+        social network
+      </div>
+    </div>
+    <div class="action-controls">
+      <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
+      <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
+    </div>
+  </div>
+</div>

app/assets/stylesheets/zammad.scss

@@ -1367,6 +1367,15 @@ textarea,
   &.form-control--multiline {
     height: auto;
   }
+
+  &[readonly] {
+    background: hsl(198,10%,95%);
+    
+    &:focus {
+      box-shadow: none;
+      border-color: hsl(0,0%,90%);
+    }
+  }
 }
 
 input[type=url] {
@@ -2665,11 +2674,17 @@ footer {
 
     &.is-active,
     &.is-hovered {
-      background: #389ed9;
+      background: hsl(202,68%,54%);
     }
 
-    &.is-active .zammad-switch label:after {
+    &.is-active .zammad-switch {
-      background: white;
+      input:not(:checked) + label { // switch background
+        background: hsl(202,68%,43%);
+      }
+      
+      label:after {
+        background: white;
+      }
     }
 
     .dropdown-icon {
@@ -6455,8 +6470,8 @@ output {
   border-radius: inherit;
   outline: none;
   cursor: pointer;
-  background: hsl(0,0%,90%);
+  background: white;
-  transition: background 400ms;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
 }
 
 .zammad-switch input {
@@ -6465,6 +6480,7 @@ output {
 
 .zammad-switch input:checked + label {
   background: $supergood-color;
+  transition: none;
 }
 
 .zammad-switch input:focus + label {
@@ -6473,26 +6489,10 @@ output {
   box-shadow: 0 0 0 3px hsl(201,62%,90%);
 }
 
-.zammad-switch label:after,
+.zammad-switch label:after {
-.zammad-switch label:before {
   content: "";
   position: absolute;
-  transition: 200ms;
+  transition: transform 200ms;
-}
-
-.zammad-switch label:before {
-  width: calc(100% - 2px);
-  height: calc(100% - 2px);
-  left: 1px;
-  top: 1px;
-  border-radius: inherit;
-  background: hsl(210,17%,99%);
-  transform-origin: right;
-}
-
-.zammad-switch input:checked + label:before {
-  transform: scaleX(0);
-  opacity: 0;
 }
 
 .zammad-switch label:after {