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

View file

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

View file

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

View file

@ -27,11 +27,9 @@
<label class="inline-label"> <label class="inline-label">
<%= chat.max_queue %> <%= chat.max_queue %>
</label> </label>
<td> <td class="settings-list-row-control">
<div class="settings-list-rowControls"> <div class="btn btn--text js-remove">
<div class="btn btn--text js-remove"> <%- @Icon('trash') %> <%- @T('Remove') %>
<%- @Icon('trash') %> <%- @T('Remove') %>
</div>
</div> </div>
<% end %> <% end %>
<tr> <tr>

View file

@ -3,30 +3,32 @@
<h3><%- @T('Search Terms') %></h3> <h3><%- @T('Search Terms') %></h3>
<p class="description"><%- @T('Tweets containing search terms are automatically turned into tickets.') %></p> <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"> <table class="settings-list">
<h3><%- @T('Mentions Group') %></h3> <thead>
<p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p> <tr>
<div class="js-groups"></div> <th><%- @T('Search Term') %>
</div> <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('Mentions Group') %></h3>
<h3><%- @T('Direct Messages Group') %></h3> <p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
<p class="description"><%- @T('Choose which group %s will get added to.', 'direct messages') %></p> <div class="js-mentionsGroup"></div>
<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> </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 { .icon {
vertical-align: middle; 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 { &.btn--icon--last .icon {
@ -424,6 +424,7 @@ pre code.hljs {
} }
&.btn--positive, &.btn--positive,
&.btn--create,
&.btn--success { &.btn--success {
color: white; color: white;
background: hsl(145,51%,45%); background: hsl(145,51%,45%);
@ -441,6 +442,10 @@ pre code.hljs {
} }
} }
&.btn--text {
color: $supergood-color;
}
.icon { .icon {
fill: white; fill: white;
} }
@ -521,6 +526,10 @@ pre code.hljs {
&.btn--quad { &.btn--quad {
padding: 10px 12px 9px; padding: 10px 12px 9px;
.icon {
margin-top: -1px;
}
} }
&.btn--split--first { &.btn--split--first {
@ -6808,20 +6817,13 @@ output {
margin: 0; margin: 0;
} }
.btn.btn--text:not(.btn--secondary) {
color: hsl(60,1%,61%);
}
.btn .icon {
fill: hsl(60,1%,61%);
}
th:not(:last-child), th:not(:last-child),
td:not(:last-child) { td:not(:last-child) {
border-right: none; border-right: none;
} }
tr:not(:last-child) td { tr:not(:last-child) td,
& > tbody:not(:last-child) tr td {
border-bottom: none; border-bottom: none;
} }
@ -6838,11 +6840,13 @@ output {
border-top-right-radius: 4px; 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; 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; border-bottom-right-radius: 4px;
} }
@ -6870,9 +6874,11 @@ output {
} }
} }
.settings-list-controlRow { .settings-list-control-cell {
td { padding: 5px;
padding: 5px;
& ~ .settings-list-row-control {
padding-bottom: 7px;
} }
} }
} }