Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

rework nav-tab design

Browse source
This commit is contained in:
Felix Niklas 2015-11-17 17:01:52 +01:00
parent a1f3f08ff0
commit c294fba2e3
5 changed files with 205 additions and 282 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/app/controllers/_application_controller_generic.coffee
View file

@ -363,6 +363,7 @@ class App.ControllerTabs extends App.Controller
super super
render: -> render: ->
@el.addClass 'main--tabs'
@html App.view('generic/tabs')( @html App.view('generic/tabs')(
header: @header header: @header

330
app/assets/javascripts/app/views/channel/chat.jst.eco
View file

@ -1,196 +1,188 @@
<div class="page-header"> <p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
<div class="page-header-title">
<h1><%- @T('Chat Widget') %></h1> <% 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>
<div class="form-group">
<label class="formGroup-label"><%- @T('Preview Width') %></label>
<div class="control">
<div class="select-tabs js-selectBrowserWidth">
<div class="tab" data-value="375">iPhone 6</div>
<div class="tab is-selected" data-value="fit"><%- @T('Fit Width') %></div>
<div class="tab" data-value="1280">MacBook</div>
</div>
</div> </div>
</div> </div>
<div class="page-content">
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
<% if _.isEmpty(@chats): %> <div class="browser chat-demo js-browser">
<p><%- @T('You have no configured chat\'s right now.') %></p> <div class="browser-head">
<% else: %> <form class="browser-input js-testurl" novalidate>
<input type="url" class="js-testurl-input" placeholder="zammad.org">
</form>
</div>
<div class="browser-body js-demo">
<iframe class="js-iframe"></iframe>
<style>@import "/assets/chat/chat.css";</style>
<div class="chat-demo-animationHolder">
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
<div class="zammad-chat-header js-chat-open js-backgroundColor">
<div class="zammad-chat-header-controls">
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
<span class="zammad-chat-header-icon">
<svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
<svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
</span>
</div>
<div class="zammad-chat-agent">
<img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png">
<span class="zammad-chat-agent-sentence">
<span class="zammad-chat-agent-name"><%- @T('John Smith') %></span>
</span>
</div>
<div class="zammad-chat-welcome zammad-chat-is-hidden">
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
</div>
</div>
<div class="zammad-chat-body">
<div class="zammad-chat-timestamp"><strong><%- @T('Today') %></strong> 14:45</div>
<div class="zammad-chat-message zammad-chat-message--customer">
<span class="zammad-chat-message-body js-backgroundColor"><%- @T('Hello! I need help with your product.') %></span>
</div>
<div class="zammad-chat-message zammad-chat-message--agent">
<span class="zammad-chat-message-body"><%- @T('Hi! Which one of our products?') %></span>
</div>
</div>
<form class="zammad-chat-controls">
<textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
<button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor"><%- @T('Send') %></button>
</form>
</div>
</div>
</div>
</div>
<form class="js-params">
<fieldset>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-title"><%- @T('Chat Title') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
</div>
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
</div>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-background"><%- @T('Background color') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-background" name="background" value="">
</div>
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
</div>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-fontsize"><%- @T('Font size') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
</div>
<span class="help-block"><%- @T('The default font size is 12px.') %></span>
</div>
</fieldset>
<br>
<table class="settings-list"> <table class="settings-list">
<thead> <thead>
<tr> <tr>
<th style="white-space: nowrap;"><%- @T('Name') %></th> <th style="white-space: nowrap;"><%- @T('Option') %></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> </tr>
</thead> </thead>
<tbody> <tbody>
<% for chat in @chats: %> <tr>
<tr data-id="<%= chat.id %>">
<td> <td>
<label class="inline-label"> <label class="inline-label">
<a class="js-edit is-clickable"><%= chat.name %></a> <span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="debug" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Enable debugging for implementation.') %>
</label> </label>
<tr>
<td> <td>
<label class="inline-label"> <label class="inline-label">
<%= chat.note %> <span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="flat" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Flat design.') %>
</label> </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> </tbody>
</table> </table>
<% end %>
<h2><%- @T('Designer') %></h2> <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
<div class="form-group"> <pre>
<label class="formGroup-label"><%- @T('Preview Width') %></label>
<div class="control">
<div class="select-tabs js-selectBrowserWidth">
<div class="tab" data-value="375">iPhone 6</div>
<div class="tab is-selected" data-value="fit"><%- @T('Fit Width') %></div>
<div class="tab" data-value="1280">MacBook</div>
</div>
</div>
</div>
<div class="browser chat-demo js-browser">
<div class="browser-head">
<form class="browser-input js-testurl" novalidate>
<input type="url" class="js-testurl-input" placeholder="zammad.org">
</form>
</div>
<div class="browser-body js-demo">
<iframe class="js-iframe"></iframe>
<style>@import "/assets/chat/chat.css";</style>
<div class="chat-demo-animationHolder">
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
<div class="zammad-chat-header js-chat-open js-backgroundColor">
<div class="zammad-chat-header-controls">
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
<span class="zammad-chat-header-icon">
<svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
<svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
</span>
</div>
<div class="zammad-chat-agent">
<img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png">
<span class="zammad-chat-agent-sentence">
<span class="zammad-chat-agent-name"><%- @T('John Smith') %></span>
</span>
</div>
<div class="zammad-chat-welcome zammad-chat-is-hidden">
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
</div>
</div>
<div class="zammad-chat-body">
<div class="zammad-chat-timestamp"><strong><%- @T('Today') %></strong> 14:45</div>
<div class="zammad-chat-message zammad-chat-message--customer">
<span class="zammad-chat-message-body js-backgroundColor"><%- @T('Hello! I need help with your product.') %></span>
</div>
<div class="zammad-chat-message zammad-chat-message--agent">
<span class="zammad-chat-message-body"><%- @T('Hi! Which one of our products?') %></span>
</div>
</div>
<form class="zammad-chat-controls">
<textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
<button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor"><%- @T('Send') %></button>
</form>
</div>
</div>
</div>
</div>
<form class="js-params">
<fieldset>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-title"><%- @T('Chat Title') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
</div>
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
</div>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-background"><%- @T('Background color') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-background" name="background" value="">
</div>
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
</div>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-chat-fontsize"><%- @T('Font size') %></label>
</div>
<div class="controls">
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
</div>
<span class="help-block"><%- @T('The default font size is 12px.') %></span>
</div>
</fieldset>
<br>
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Option') %></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="inline-label">
<span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="debug" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Enable debugging for implementation.') %>
</label>
<tr>
<td>
<label class="inline-label">
<span class="checkbox-replacement checkbox-replacement--inline">
<input type="checkbox" name="flat" value="true">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
<%- @T('Flat design.') %>
</label>
</tbody>
</table>
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
<pre>
&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt; &lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt; &lt;script&gt;
$(function() { $(function() {
new ZammadChat({ new ZammadChat({
<span class="js-modal-params"></span> <span class="js-modal-params"></span>
}); });
}); });
&lt;/script&gt;</pre> &lt;/script&gt;</pre>
</form> </form>
<div class="js-settings"></div> <div class="js-settings"></div>
</div>

12
app/assets/javascripts/app/views/generic/tabs.jst.eco
View file

@ -2,6 +2,13 @@
<div class="page-header-title"> <div class="page-header-title">
<h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1> <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
</div> </div>
<% if @addTab: %>
<div class="page-header-meta">
<div class="btn btn--success btn--quad">
<%- @Icon('plus') %>
</div>
</div>
<% end %>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="page-tabs"> <div class="page-tabs">
@ -10,11 +17,6 @@
<li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li> <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
<% end %> <% end %>
</ul> </ul>
<% if @addTab: %>
<div class="btn btn--success btn--quad">
<%- @Icon('plus') %>
</div>
<% end %>
</div> </div>
<div class="tab-content"></div> <div class="tab-content"></div>
</div> </div>

71
app/assets/stylesheets/bootstrap.css vendored
View file

@ -2491,7 +2491,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a:hover, .nav > li > a:hover,
.nav > li > a:focus { .nav > li > a:focus {
text-decoration: none; text-decoration: none;
background-color: #eee;
} }
.nav > li.disabled > a { .nav > li.disabled > a {
color: #777; color: #777;
@ -2518,75 +2517,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a > img { .nav > li > a > img {
max-width: none; max-width: none;
} }
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #fff;
}
}
.nav-pills > li { .nav-pills > li {
float: left; float: left;
} }

73
app/assets/stylesheets/zammad.scss
View file

@ -1831,9 +1831,30 @@ kbd {
color: initial; color: initial;
} }
.main--tabs .page-header {
background: hsl(200,12%,90%);
padding: 20px;
overflow: hidden;
margin: 0;
}
.main--tabs .page-content {
padding: 20px;
}
.page-tabs { .page-tabs {
display: flex; display: flex;
margin: 28px 0 50px; margin: -20px -20px 50px;
padding: 0 20px;
background: hsl(200,12%,90%);
border-bottom: 1px solid hsl(200,12%,87%);
.nav-tabs li.active {
background: hsl(210,17%,98%);
border-bottom-color: hsl(210,17%,98%);
margin-bottom: -1px;
padding-bottom: 1px;
}
.btn { .btn {
margin-left: auto; margin-left: auto;
@ -3351,9 +3372,10 @@ footer {
position: relative; position: relative;
} }
.main.no-padding { .main--tabs,
padding: 0; .main.no-padding {
} padding: 0;
}
.tooltip { .tooltip {
font-family: inherit; font-family: inherit;
@ -5629,46 +5651,21 @@ footer {
} }
.nav-tabs { .nav-tabs {
border-bottom: none; display: flex;
margin-left: 1px;
} }
.nav-tabs li { .nav-tabs li {
margin: 0; margin: 0;
border-radius: 3px 3px 0 0;
border: 1px solid hsl(200,12%,87%);
border-bottom-color: transparent;
background: hsl(197,14%,93%);
margin-left: -1px;
} }
.nav-tabs > li > a, .nav-tabs li.active {
.nav-tabs > li > a:hover, position: relative;
.nav-tabs > li > a:focus {
background: white;
border-radius: 0;
border: 1px solid hsl(0,0%,90%);
color: hsl(0,0%,70%);
height: 40px;
margin: 0;
}
.nav-tabs > li:not(:last-child):not(:only-child) > a {
border-right: none;
}
.nav-tabs > li:first-child > a {
border-radius: 5px 0 0 5px;
}
.nav-tabs > li:last-child > a {
border-radius: 0 5px 5px 0;
}
.nav-tabs > li:only-child > a {
border-radius: 5px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: hsl(206,7%,28%);
color: white;
border-color: hsl(0,0%,90%);
} }
.tab-content { .tab-content {