Small ui improvements.

2015-11-25 23:24:08 +01:00 · 2015-11-25 23:24:08 +01:00 · 6ce3116c33
commit 6ce3116c33
parent 069063b2c7
6 changed files with 152 additions and 113 deletions
--- a/app/assets/javascripts/app/controllers/_channel/chat.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee
@ -1,9 +1,5 @@
 class App.ChannelChat extends App.Controller
  events:
-    'click .js-add': 'new'
-    'click .js-edit': 'edit'
-    'click .js-remove': 'remove'
-    'click .js-widget': 'widget'
    'change .js-params': 'updateParams'
    'input .js-params': 'updateParams'
    'submit .js-demo-head': 'onUrlSubmit'
@ -11,6 +7,7 @@ class App.ChannelChat extends App.Controller
    'click .js-selectBrowserWidth': 'selectBrowserWidth'
    'click .js-swatch': 'usePaletteColor'
    'click .js-toggle-chat': 'toggleChat'
+    'click .js-chatSetting': 'toggleChatSetting'

  elements:
    '.js-browser': 'browser'
@ -27,12 +24,13 @@ class App.ChannelChat extends App.Controller
    '.js-code': 'code'
    '.js-palette': 'palette'
    '.js-color': 'colorField'
+    '.js-chatSetting': 'chatSetting'

  apiOptions: [
    {
      name: 'chatId'
      default: '1'
-      type: 'Integer'
+      type: 'Number'
      description: 'Identifier of the chat-topic.'
    }
    {
@ -75,7 +73,7 @@ class App.ChannelChat extends App.Controller
    {
      name: 'flat'
      default: 'false'
-      type: 'boolean'
+      type: 'Boolean'
      description: 'Removes the shadows for a flat look.'
    }
    {
@ -93,7 +91,7 @@ class App.ChannelChat extends App.Controller
    {
      name: 'cssAutoload'
      default: 'true'
-      type: 'boolean'
+      type: 'Boolean'
      description: 'Automatically loads the chat.css file. If you want to use your own css, just set it to false.'
    }
    {
@ -110,7 +108,7 @@ class App.ChannelChat extends App.Controller

  constructor: ->
    super
-
+    @title 'Chat'
    if @Session.get('email')
      @previewUrl = "www.#{@Session.get('email').replace(/^.+?\@/, '')}"

@ -135,16 +133,15 @@ class App.ChannelChat extends App.Controller
    )

  render: (data = {}) =>
-
-    chats = []
-    for chat_id in data.chat_ids
-      chats.push App.Chat.find(chat_id)
-
    @html App.view('channel/chat')(
      baseurl: window.location.origin
-      chats: chats
      apiOptions: @apiOptions
      previewUrl: @previewUrl
+      chatSetting: @Config.get('chat')
+    )
+
+    new Topics(
+      el: @$('.js-topics')
    )

    @code.each (i, block) ->
@ -276,47 +273,12 @@ class App.ChannelChat extends App.Controller
    @isOpen = @chat.hasClass('is-open')
    @updatePreview()

-  new: (e) =>
-    new App.ControllerGenericNew(
-      pageData:
-        title: 'Chats'
-        object: 'Chat'
-        objects: 'Chats'
-      genericObject: 'Chat'
-      callback:   @load
-      container:  @el.closest('.content')
-      large:      true
-    )
-
-  edit: (e) =>
-    e.preventDefault()
-    id = $(e.target).closest('tr').data('id')
-    new App.ControllerGenericEdit(
-      id:        id
-      genericObject: 'Chat'
-      pageData:
-        object: 'Chat'
-      container: @el.closest('.content')
-      callback:  @load
-    )
-
-  remove: (e) =>
-    e.preventDefault()
-    id   = $(e.target).closest('tr').data('id')
-    item = App.Chat.find(id)
-    new App.ControllerGenericDestroyConfirm(
-      item:      item
-      container: @el.closest('.content')
-      callback:  @load
-    )
-
-  widget: (e) ->
-    e.preventDefault()
-    id = $(e.target).closest('.action').data('id')
-    new Widget(
-      permanent:
-        id: id
-    )
+  toggleChatSetting: =>
+    value = @chatSetting.prop('checked')
+    setting = App.Setting.findByAttribute('name', 'chat')
+    setting.state_current = { value: value }
+    setting.save()
+    @Config.set('chat', value)

  updateParams: =>
    quote = (value) ->
@ -360,3 +322,52 @@ class App.ChannelChat extends App.Controller
      hljs.highlightBlock block

 App.Config.set( 'Chat', { prio: 4000, name: 'Chat', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )
+
+class Topics extends App.Controller
+  events:
+    'click .js-add': 'new'
+    'click .js-edit': 'edit'
+    'click .js-remove': 'remove'
+
+  constructor: ->
+    super
+    @render()
+
+  render: =>
+    @html App.view('channel/topics')(
+      chats: App.Chat.all()
+    )
+
+  new: (e) =>
+    new App.ControllerGenericNew(
+      pageData:
+        title: 'Chats'
+        object: 'Chat'
+        objects: 'Chats'
+      genericObject: 'Chat'
+      callback:   @render
+      container:  @el.closest('.content')
+      large:      true
+    )
+
+  edit: (e) =>
+    e.preventDefault()
+    id = $(e.target).closest('tr').data('id')
+    new App.ControllerGenericEdit(
+      id:        id
+      genericObject: 'Chat'
+      pageData:
+        object: 'Chat'
+      container: @el.closest('.content')
+      callback:  @render
+    )
+
+  remove: (e) =>
+    e.preventDefault()
+    id   = $(e.target).closest('tr').data('id')
+    item = App.Chat.find(id)
+    new App.ControllerGenericDestroyConfirm(
+      item:      item
+      container: @el.closest('.content')
+      callback:  @render
+    )
--- a/app/assets/javascripts/app/controllers/_channel/form.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/form.coffee
@ -3,22 +3,30 @@ class App.ChannelForm extends App.Controller
  events:
    'change form.js-params': 'updateParams'
    'keyup form.js-params': 'updateParams'
+    'click .js-formSetting': 'toggleFormSetting'
+
+  elements:
+    '.js-paramsBlock': 'paramsBlock'
+    '.js-formSetting': 'formSetting'

  constructor: ->
    super
    @title 'Form'
-    @render()
-    @updateParams()
-    new App.SettingsArea(
-      el:   @$('.js-settings')
-      area: 'Form::Base'
-    )
+    @subscribeId = App.Setting.subscribe(@render, initFetch: true)

-  render: ->
+  render: =>
+    App.Setting.unsubscribe(@subscribeId)
+    setting = App.Setting.findByAttribute('name', 'form_ticket_create')
    @html App.view('channel/form')(
      baseurl: window.location.origin
+      formSetting: setting.state_current.value
    )

+    @paramsBlock.each (i, block) ->
+      hljs.highlightBlock block
+
+    @updateParams()
+
  updateParams: ->
    quote = (string) ->
      string = string.replace('\'', '\\\'')
@ -36,4 +44,10 @@ class App.ChannelForm extends App.Controller
          paramString += "    #{key}: '#{quote(value)}'"
    @$('.js-modal-params').html(paramString)

+  toggleFormSetting: =>
+    value = @formSetting.prop('checked')
+    setting = App.Setting.findByAttribute('name', 'form_ticket_create')
+    setting.state_current = { value: value }
+    setting.save()
+
 App.Config.set( 'Form', { prio: 2000, name: 'Form', parent: '#channels', target: '#channels/form', controller: App.ChannelForm, role: ['Admin'] }, 'NavBarAdmin' )
--- a/app/assets/javascripts/app/views/channel/chat.jst.eco
+++ b/app/assets/javascripts/app/views/channel/chat.jst.eco
@ -6,49 +6,17 @@
 <div class="page-content">
  <p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>

+  <h2><%- @T('Enable') %>/<%- @T('Disable') %></h2>
+  <form>
+    <div class="zammad-switch">
+       <input name="chat" type="checkbox" id="setting-chat" class="js-chatSetting" <% if @chatSetting: %>checked<% end %>>
+       <label for="setting-chat"></label>
+    </div>
+  </form>
+
  <h2><%- @T('Topics') %></h2>
  <p><%- @T('You can create multiple chat topics.') %></p>
-  <table class="settings-list">
-    <thead>
-      <tr>
-        <th style="white-space: nowrap;"><%- @T('chatId') %></th>
-        <th style="white-space: nowrap;"><%- @T('Name') %></th>
-        <th style="white-space: nowrap;"><%- @T('Note') %></th>
-        <th style="white-space: nowrap;"><%- @T('Max. clients in waitlist') %></th>
-        <th style="white-space: nowrap;"><%- @T('Delete') %></th>
-      </tr>
-    </thead>
-    <tbody>
-  <% for chat in @chats: %>
-      <tr data-id="<%= chat.id %>">
-        <td>
-          <label class="inline-label">
-            <%= chat.id %>
-          </label>
-        <td>
-          <label class="inline-label">
-            <a class="js-edit is-clickable"><%= chat.name %></a>
-          </label>
-        <td>
-          <label class="inline-label">
-            <%= chat.note %>
-          </label>
-        <td>
-          <label class="inline-label">
-            <%= chat.max_queue %>
-          </label>
-        <td>
-          <div class="settings-list-rowControls">
-            <div class="btn btn--text js-remove">
-              <%- @Icon('trash') %> <%- @T('Remove') %>
-            </div>
-          </div>
-  <% end %>
-      <tr>
-        <td colspan="5" class="settings-list-action-cell js-add">
-          <%- @Icon('plus-small') %> <%- @T('Add') %>
-    </tbody>
-  </table>
+  <div class="js-topics"></div>

  <h2><%- @T('Designer') %></h2>

@ -124,7 +92,7 @@
          <label for="form-chat-title"><%- @T('Chat Title') %></label>
        </div>
        <div class="controls">
-          <input class="js-chatTitle" type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
+          <input class="js-chatTitle" type="text" id="form-chat-title" name="title" placeholder="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
        </div>
        <span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
      </div>
--- a/app/assets/javascripts/app/views/channel/form.jst.eco
+++ b/app/assets/javascripts/app/views/channel/form.jst.eco
@ -6,15 +6,19 @@
 <div class="page-content">
  <p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>

-  <div class="js-settings"></div>
+  <h2><%- @T('Enable') %>/<%- @T('Disable') %></h2>
+  <form>
+    <div class="zammad-switch">
+       <input name="form_ticket_create" type="checkbox" id="setting-form" class="js-formSetting" <% if @formSetting: %>checked<% end %>>
+       <label for="setting-form"></label>
+    </div>
+  </form>

-  <hr>
-
-  <h2><%- @T('Widget Designer') %></h2>
+  <h2><%- @T('Designer') %></h2>
  <form class="js-params">

    <fieldset>
-      <div class="input form-group">
+      <div class="input form-group formGroup--halfSize">
        <div class="formGroup-label">
          <label for="form-message-title"><%- @T('Title of the form') %></label>
        </div>
@ -22,7 +26,7 @@
          <input type="text" id="form-message-title" name="messageTitle" value="<%- @Ti('Feedback Form') %>">
        </div>
      </div>
-      <div class="input form-group">
+      <div class="input form-group formGroup--halfSize">
        <div class="formGroup-label">
          <label for="form-message-submit"><%- @T('Name of form submit button') %></label>
        </div>
@ -95,8 +99,7 @@

  <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:

-  <pre>
-&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;
+  <pre><code class="language-html js-paramsBlock">&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;

 &lt;script id="zammad_form_script" src="<%= @baseurl %>/assets/form/form.js"&gt;&lt;/script&gt;

@ -106,5 +109,5 @@ $(function() {
 <span class="js-modal-params"></span>
  });
 });
-&lt;/script&gt;</pre>
+&lt;/script&gt;</code></pre>
 </div>
--- a/app/assets/javascripts/app/views/channel/topics.jst.eco
+++ b/app/assets/javascripts/app/views/channel/topics.jst.eco
@ -0,0 +1,41 @@
+<table class="settings-list">
+  <thead>
+    <tr>
+      <th style="white-space: nowrap;"><%- @T('chatId') %></th>
+      <th style="white-space: nowrap;"><%- @T('Name') %></th>
+      <th style="white-space: nowrap;"><%- @T('Note') %></th>
+      <th style="white-space: nowrap;"><%- @T('Max. clients in waitlist') %></th>
+      <th style="white-space: nowrap;"><%- @T('Delete') %></th>
+    </tr>
+  </thead>
+  <tbody>
+<% for chat in @chats: %>
+    <tr data-id="<%= chat.id %>">
+      <td>
+        <label class="inline-label">
+          <%= chat.id %>
+        </label>
+      <td>
+        <label class="inline-label">
+          <a class="js-edit is-clickable"><%= chat.name %></a>
+        </label>
+      <td>
+        <label class="inline-label">
+          <%= chat.note %>
+        </label>
+      <td>
+        <label class="inline-label">
+          <%= chat.max_queue %>
+        </label>
+      <td>
+        <div class="settings-list-rowControls">
+          <div class="btn btn--text js-remove">
+            <%- @Icon('trash') %> <%- @T('Remove') %>
+          </div>
+        </div>
+<% end %>
+    <tr>
+      <td colspan="5" class="settings-list-action-cell js-add">
+        <%- @Icon('plus-small') %> <%- @T('Add') %>
+  </tbody>
+</table>
--- a/app/controllers/chats_controller.rb
+++ b/app/controllers/chats_controller.rb
@ -11,6 +11,8 @@ class ChatsController < ApplicationController
      chat_ids.push chat.id
      assets = chat.assets(assets)
    }
+    setting = Setting.find_by(name: 'chat')
+    assets = setting.assets(assets)
    render json: {
      chat_ids: chat_ids,
      assets: assets,