channels/twitter style search terms

This commit is contained in:
Felix Niklas 2016-02-04 14:28:27 +01:00
parent fb99b5cb08
commit 41c26ea736
8 changed files with 107 additions and 82 deletions

View file

@ -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'

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>
<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('Mentions Group') %></h3>
<p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
<div class="js-mentionsGroup"></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>

View file

@ -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>

View file

@ -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;
}
}
}