style pre, start with chat widget tabs
This commit is contained in:
Felix Niklas
parent
8ef89eb6bc
commit
4fe30e4918
6 changed files with 123 additions and 92 deletions
|
|
@ -368,6 +368,7 @@ class App.ControllerTabs extends App.Controller
|
|||
header: @header
|
||||
subHeader: @subHeader
|
||||
tabs: @tabs
|
||||
addTab: @addTab
|
||||
)
|
||||
|
||||
# insert content
|
||||
|
|
@ -381,8 +382,8 @@ class App.ControllerTabs extends App.Controller
|
|||
new tab.controller( params )
|
||||
|
||||
# check if tabs need to be hidden
|
||||
if @tabs.length <= 1
|
||||
@el.find('.nav-tabs').addClass('hide')
|
||||
# if @tabs.length <= 1
|
||||
# @el.find('.page-tabs').addClass('hide')
|
||||
|
||||
# set last or first tab to active
|
||||
@lastActiveTab = @Config.get('lastTab')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,29 @@
|
|||
class App.ChannelChat extends App.Controller
|
||||
class App.ChannelChat extends App.ControllerTabs
|
||||
header: 'Chat Widget'
|
||||
addTab: true
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@title @header, true
|
||||
|
||||
@tabs = [
|
||||
{
|
||||
name: 'company.com/sales',
|
||||
target: 'company-com-sales',
|
||||
controller: App.ChannelChatDesigner,
|
||||
},
|
||||
{
|
||||
name: 'company.com',
|
||||
target: 'company-com',
|
||||
controller: App.ChannelChatDesigner,
|
||||
}
|
||||
]
|
||||
|
||||
@render()
|
||||
|
||||
|
||||
class App.ChannelChatDesigner extends App.Controller
|
||||
events:
|
||||
'click .js-add': 'new'
|
||||
'click .js-edit': 'edit'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,54 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
|
||||
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
|
||||
|
||||
<% if _.isEmpty(@chats): %>
|
||||
<p><%- @T('You have no configured chat\'s right now.') %></p>
|
||||
<% else: %>
|
||||
<table class="settings-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;"><%- @T('Name') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Note') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Max Queue') %></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">
|
||||
<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 class="settings-list-controlRow">
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<div class="btn btn--text js-add">
|
||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||
</div>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<% end %>
|
||||
|
||||
<h2><%- @T('Designer') %></h2>
|
||||
|
||||
|
|
@ -129,7 +176,6 @@
|
|||
</label>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
|
||||
|
||||
|
|
@ -147,55 +193,4 @@ $(function() {
|
|||
|
||||
<div class="js-settings"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2><%- @T('Topics') %></h2>
|
||||
|
||||
<% if _.isEmpty(@chats): %>
|
||||
<p><%- @T('You have no configured chat\'s right now.') %></p>
|
||||
<% else: %>
|
||||
<table class="settings-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;"><%- @T('Name') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Note') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Max Queue') %></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">
|
||||
<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 class="settings-list-controlRow">
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<div class="btn btn--text js-add">
|
||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||
</div>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="page-tabs">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<% for tab in @tabs: %>
|
||||
<li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% if @addTab: %>
|
||||
<div class="btn btn--success btn--quad">
|
||||
<%- @Icon('plus') %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="tab-content"></div>
|
||||
</div>
|
||||
25
app/assets/stylesheets/bootstrap.css
vendored
25
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -706,31 +706,6 @@ kbd kbd {
|
|||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.pre-scrollable {
|
||||
max-height: 340px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
|
|
|||
|
|
@ -246,6 +246,29 @@ blockquote {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background: hsl(197,20%,93%);
|
||||
border: 1px solid hsl(198,18%,86%);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.05) inset;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.textarea::placeholder,
|
||||
.form-control::placeholder,
|
||||
.token-input::placeholder {
|
||||
|
|
@ -1808,6 +1831,15 @@ kbd {
|
|||
color: initial;
|
||||
}
|
||||
|
||||
.page-tabs {
|
||||
display: flex;
|
||||
margin: 28px 0 50px;
|
||||
|
||||
.btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-body--two-column {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -5639,10 +5671,6 @@ footer {
|
|||
border-color: hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
.main .nav-tabs:first-child {
|
||||
margin: 28px 0 50px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -7438,7 +7466,7 @@ output {
|
|||
padding-top: 11px;
|
||||
|
||||
&.is-selected {
|
||||
background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));
|
||||
background: linear-gradient(hsla(202,50%,20%,0.1), hsla(202,50%,20%,.03));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue