channels/twitter style search terms

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

@@ -121,8 +121,8 @@ class Index extends App.ControllerContent
     channel = App.Channel.find(id)
     content = $( App.view('twitter/account_edit')(channel: channel) )
 
-    groupSelection = (selected_id, el, prefix) ->
-      selection = App.UiElement.select.render(
+    createGroupSelection = (selected_id, prefix) ->
+      return App.UiElement.select.render(
         name: "#{prefix}::group_id"
         multiple: false
         limit: 100
@@ -130,30 +130,46 @@ class Index extends App.ControllerContent
         relation: 'Group'
         nulloption: true
         default: selected_id
+        class: 'form-control--small'
       )
-      el.find('.js-groups').html(selection)
 
-    placeholderAdd = (value = '', group_id) ->
-      placeholder = content.find('.js-searchTermPlaceholder').clone()
-      placeholder.removeClass('hidden').removeClass('js-searchTermPlaceholder')
-      placeholder.find('input').val(value)
-      placeholder.find('input').attr('name', 'search::term')
-      groupSelection(group_id, placeholder, 'search')
-      content.find('.js-searchTermList').append(placeholder)
+    addSearchTerm = () =>
+      @searchTerms.push
+        term: ""
+        group_id: ""
+      renderSearchTerms()
+      content.find('.js-searchTermList [name="search::term"]').last().focus()
+
+    removeSearchTerm = (event) =>
+      index = $(event.currentTarget).attr('data-index')
+      @searchTerms.splice(index, 1)
+      renderSearchTerms()
+
+    renderSearchTerms = () =>
+      return if !@searchTerms
+
+      content.find('.js-searchTermList').empty()
+
+      for item, i in @searchTerms
+        content.find('.js-searchTermList').append App.view('twitter/search_term')
+          term: item.term
+          index: i
+
+        select = createGroupSelection(item.group_id, 'search')
+        content.find(".js-termGroup[data-index=\"#{i}\"]").replaceWith select
 
     if channel.options && channel.options.sync && channel.options.sync.search
-      for item in channel.options.sync.search
-        placeholderAdd(item.term, item.group_id, 'search')
+      @searchTerms = channel.options.sync.search
+    else
+      @searchTerms = []
 
-    content.find('.js-searchTermAdd').on('click', ->
-      placeholderAdd('', '')
-    )
-    content.find('.js-searchTerm').on('click', '.js-searchTermRemove',(e) ->
-      $(e.target).closest('.js-searchTermItem').remove()
-    )
+    renderSearchTerms()
 
-    groupSelection(channel.options.sync.mentions.group_id, content.find('.js-mention'), 'mentions')
-    groupSelection(channel.options.sync.direct_messages.group_id, content.find('.js-directMessage'), 'direct_messages')
+    content.find('.js-searchTermAdd').click(addSearchTerm)
+    content.find('.js-searchTermList').on('click', '.js-searchTermRemove', removeSearchTerm)
+
+    content.find('.js-mentionsGroup').replaceWith createGroupSelection(channel.options.sync.mentions.group_id, 'mentions')
+    content.find('.js-directMessagesGroup').replaceWith createGroupSelection(channel.options.sync.direct_messages.group_id, 'direct_messages')
 
     modal = new App.ControllerModal(
       head: 'Twitter Account'

app/assets/javascripts/app/views/calendar/holiday_selector.jst.eco

@@ -16,27 +16,25 @@
           <%- @Icon('checkbox-checked', 'icon-checked') %>
         </label>
       <td><%- @Tdate(day) %>
-      <td><input class="form-control form-control--small js-summary <% if !meta.active: %>is-disabled<% end %>" type="text" name="public_holidays::<%= day %>::summary" value="<%= meta.summary %>" required/>
-      <td>
-        <div class="settings-list-rowControls">
-          <% if !meta.feed: %>
-            <div class="btn btn--text js-remove">
-              <%- @Icon('trash') %> <%- @T('Remove') %>
-            </div>
-          <% end %>
-        </div>
+      <td class="settings-list-control-cell"><input class="form-control form-control--small js-summary <% if !meta.active: %>is-disabled<% end %>" type="text" name="public_holidays::<%= day %>::summary" value="<%= meta.summary %>" required/>
+      <td class="settings-list-row-control">
+        <% if !meta.feed: %>
+          <div class="btn btn--text js-remove">
+            <%- @Icon('trash') %> <%- @T('Remove') %>
+          </div>
+        <% end %>
     <% end %>
 
-    <tr class="settings-list-controlRow">
+    <tr>
       <td>
-      <td class="js-datePicker">
+      <td class="settings-list-control-cell js-datePicker">
         <!-- not supported right now by ff
         <input class="form-control form-control--small" type="date" placeholder="<%- @T('Date') %>"/>
         -->
-      <td>
+      <td class="settings-list-control-cell">
         <input class="form-control form-control--small js-summary" type="text" placeholder="<%- @T('Description') %>"/>
-      <td>
-        <div class="btn btn--text js-add">
+      <td class="settings-list-row-control">
+        <div class="btn btn--text btn--create js-add">
           <%- @Icon('plus-small') %> <%- @T('Add') %>
         </div>
   </tbody>

app/assets/javascripts/app/views/calendar/holiday_selector_placeholder.jst.eco

@@ -7,9 +7,7 @@
     </label>
   <td><%- @Tdate(@placeholderDate) %>
   <td><input class="form-control form-control--small js-summary" type="text" name="<%= @placeholderSummary %>" value="<%= @placeholderSummary %>" required/>
-  <td>
-    <div class="settings-list-rowControls">
-      <div class="btn btn--text js-remove">
-        <%- @Icon('trash') %> <%- @T('Remove') %>
-      </div>
+  <td class="settings-list-row-control">
+    <div class="btn btn--text js-remove">
+      <%- @Icon('trash') %> <%- @T('Remove') %>
     </div>

app/assets/javascripts/app/views/channel/topics.jst.eco

@@ -27,11 +27,9 @@
         <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>
+      <td class="settings-list-row-control">
+        <div class="btn btn--text js-remove">
+          <%- @Icon('trash') %> <%- @T('Remove') %>
         </div>
 <% end %>
     <tr>

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

@@ -3,30 +3,32 @@
 
   <h3><%- @T('Search Terms') %></h3>
   <p class="description"><%- @T('Tweets containing search terms are automatically turned into tickets.') %></p>
-  <div class="js-searchTerm">
-    <div class="js-searchTermItem js-searchTermPlaceholder hidden">
-      <input name="" value=""> -> <div class="js-groups"></div>
-      <div class="btn btn--text js-searchTermRemove">
-        <%- @Icon('trash') %> <%- @T('Remove') %>
-      </div>
-      <hr>
-    </div>
-    <div class="js-searchTermList"></div>
-    <div class="btn btn--text js-searchTermAdd">
-      <%- @Icon('plus-small') %> <%- @T('Add') %>
-    </div>
-  </div>
 
-  <div class="js-mention">
-    <h3><%- @T('Mentions Group') %></h3>
-    <p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
-    <div class="js-groups"></div>
-  </div>
+  <table class="settings-list">
+    <thead>
+      <tr>
+        <th><%- @T('Search Term') %>
+        <th><%- @T('Group') %>
+        <th><%- @T('Action') %>
+    </thead>
+    <tbody class="js-searchTermList">
+      <tr>
+        <td colspan="3">
+          <%- @T('Empty') %>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="3" class="settings-list-action-cell js-searchTermAdd">
+          <%- @Icon('plus-small') %>
+    </tfoot>
+  </table>
+  
+  <h3><%- @T('Mentions Group') %></h3>
+  <p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
+  <div class="js-mentionsGroup"></div>
 
-  <div class="js-directMessage">
-    <h3><%- @T('Direct Messages Group') %></h3>
-    <p class="description"><%- @T('Choose which group %s will get added to.', 'direct messages') %></p>
-    <div class="js-groups"></div>
-  </div>
+  <h3><%- @T('Direct Messages Group') %></h3>
+  <p class="description"><%- @T('Choose which group %s will get added to.', 'direct messages') %></p>
+  <div class="js-directMessagesGroup"></div>
 
 </fieldset>

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

@@ -0,0 +1,7 @@
+<tr>
+  <td class="settings-list-control-cell"><input name="search::term" value="<%= @term %>" class="form-control form-control--small">
+  <td class="settings-list-control-cell"><div class="js-termGroup" data-index="<%= @index %>"></div>
+  <td class="settings-list-row-control">
+    <div class="btn btn--text js-searchTermRemove" data-index="<%= @index %>">
+      <%- @Icon('trash') %> <%- @T('Remove') %>
+    </div>

app/assets/stylesheets/zammad.scss

@@ -317,7 +317,7 @@ pre code.hljs {
   
   .icon {
     vertical-align: middle;
-    margin-top: -1px; // more negative margin top looks bad on the btn--quad plus in overviews
+    margin-top: -3px;
   }
 
   &.btn--icon--last .icon {
@@ -424,6 +424,7 @@ pre code.hljs {
   }
 
   &.btn--positive,
+  &.btn--create,
   &.btn--success {
     color: white;
     background: hsl(145,51%,45%);
@@ -441,6 +442,10 @@ pre code.hljs {
       }
     }
 
+    &.btn--text {
+      color: $supergood-color;
+    }
+
     .icon {
       fill: white;
     }
@@ -521,6 +526,10 @@ pre code.hljs {
 
   &.btn--quad {
     padding: 10px 12px 9px;
+    
+    .icon {
+      margin-top: -1px;
+    }
   }
 
   &.btn--split--first {
@@ -6808,20 +6817,13 @@ output {
     margin: 0;
   }
 
-  .btn.btn--text:not(.btn--secondary) {
-    color: hsl(60,1%,61%);
-  }
-
-  .btn .icon {
-    fill: hsl(60,1%,61%);
-  }
-
   th:not(:last-child),
   td:not(:last-child) {
     border-right: none;
   }
 
-  tr:not(:last-child) td {
+  tr:not(:last-child) td,
+  & > tbody:not(:last-child) tr td {
     border-bottom: none;
   }
 
@@ -6838,11 +6840,13 @@ output {
     border-top-right-radius: 4px;
   }
 
-  & > tbody > tr:last-child > td:first-child {
+  & > tbody:last-child > tr:last-child > td:first-child,
+  & > tfoot:last-child > tr:last-child > td:first-child {
     border-bottom-left-radius: 4px;
   }
 
-  & > tbody > tr:last-child > td:last-child {
+  & > tbody:last-child > tr:last-child > td:last-child,
+  & > tfoot:last-child > tr:last-child > td:last-child {
     border-bottom-right-radius: 4px;
   }
 
@@ -6870,9 +6874,11 @@ output {
     }
   }
 
-  .settings-list-controlRow {
-    td {
-      padding: 5px;
+  .settings-list-control-cell {
+    padding: 5px;
+    
+    & ~ .settings-list-row-control {
+      padding-bottom: 7px;
     }
   }
 }