create component tabsSidebar
using tabsSidebarSpace as spacer for the body
This commit is contained in:
Felix Niklas
parent
00ac0636a0
commit
a504d4535c
11 changed files with 240 additions and 239 deletions
|
|
@ -417,15 +417,15 @@ class App.GenericHistory extends App.ControllerModal
|
|||
|
||||
class App.Sidebar extends App.Controller
|
||||
events:
|
||||
'click .sidebar-tabs': 'toggleTab'
|
||||
'click .close-sidebar': 'toggleSidebar'
|
||||
'click .tabsSidebar-tab': 'toggleTab'
|
||||
'click .tabsSidebar-close': 'toggleSidebar'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@render()
|
||||
|
||||
# get first tab
|
||||
name = @el.find('.sidebar-tab').first().data('content')
|
||||
name = @el.find('.tabsSidebar-tab').first().data('content')
|
||||
|
||||
# activate first tab
|
||||
@toggleTabAction(name)
|
||||
|
|
@ -439,17 +439,17 @@ class App.Sidebar extends App.Controller
|
|||
item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
|
||||
|
||||
toggleSidebar: ->
|
||||
$('.content.active > div').toggleClass('state--sidebar-hidden')
|
||||
$('.content.active .tabsSidebarSpace').toggleClass('is-closed')
|
||||
$('.content.active .tabsSidebar').toggleClass('is-closed')
|
||||
|
||||
showSidebar: ->
|
||||
# show sidebar if not shown
|
||||
if $('.content.active > div').hasClass('state--sidebar-hidden')
|
||||
$('.content.active > div').removeClass('state--sidebar-hidden')
|
||||
$('.content.active .tabsSidebarSpace').removeClass('is-closed')
|
||||
$('.content.active .tabsSidebar').removeClass('is-closed')
|
||||
|
||||
toggleTab: (e) ->
|
||||
|
||||
# get selected tab
|
||||
name = $(e.target).closest('.sidebar-tab').data('content')
|
||||
name = $(e.target).closest('.tabsSidebar-tab').data('content')
|
||||
|
||||
if name
|
||||
|
||||
|
|
@ -466,10 +466,10 @@ class App.Sidebar extends App.Controller
|
|||
return if !name
|
||||
|
||||
# remove active state
|
||||
@el.find('.sidebar-tab').removeClass('active')
|
||||
@el.find('.tabsSidebar-tab').removeClass('active')
|
||||
|
||||
# add active state
|
||||
@el.find('.sidebar-tab[data-content=' + name + ']').addClass('active')
|
||||
@el.find('.tabsSidebar-tab[data-content=' + name + ']').addClass('active')
|
||||
|
||||
# hide all content tabs
|
||||
@el.find('.sidebar-content').addClass('hide')
|
||||
|
|
@ -483,7 +483,7 @@ class App.Sidebar extends App.Controller
|
|||
@el.find('.sidebar h2').html(title)
|
||||
|
||||
# set tab actions
|
||||
@el.find('.sidebar-tab-actions').html('')
|
||||
@el.find('.tabsSidebar-tabActions').html('')
|
||||
|
||||
# add item acctions
|
||||
for item in @items
|
||||
|
|
@ -491,7 +491,7 @@ class App.Sidebar extends App.Controller
|
|||
if item.actions
|
||||
for action in item.actions
|
||||
do (action) =>
|
||||
@el.find('.sidebar-tab-actions').append("<div class='sidebar-tab-action #{action.class}'></div>").find(".sidebar-tab-action").last().bind(
|
||||
@el.find('.tabsSidebar-tabActions').append("<div class='tabsSidebar-tabAction #{action.class}'></div>").find(".tabsSidebar-tabAction").last().bind(
|
||||
'click'
|
||||
(e) =>
|
||||
e.stopPropagation()
|
||||
|
|
|
|||
|
|
@ -469,7 +469,7 @@ class Sidebar extends App.Controller
|
|||
}
|
||||
|
||||
new App.Sidebar(
|
||||
el: @el.find('.sidebar-holder')
|
||||
el: @el.find('.tabsSidebar')
|
||||
items: items
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -43,10 +43,32 @@ App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSide
|
|||
|
||||
|
||||
class ContentSidebarTabsRight extends App.ControllerContent
|
||||
elements:
|
||||
'.tabsSidebar' : 'sidebar'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@render()
|
||||
|
||||
items = [
|
||||
head: 'Ticket Settings'
|
||||
name: 'ticket'
|
||||
icon: 'message'
|
||||
,
|
||||
head: 'Customer'
|
||||
name: 'customer'
|
||||
icon: 'person'
|
||||
,
|
||||
head: 'Organization'
|
||||
name: 'organization'
|
||||
icon: 'group'
|
||||
]
|
||||
|
||||
new App.Sidebar(
|
||||
el: sidebar
|
||||
items: items
|
||||
)
|
||||
|
||||
render: ->
|
||||
@html App.view('layout_ref/content_sidebar_tabs_right')()
|
||||
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ class App.TicketZoom extends App.Controller
|
|||
}
|
||||
|
||||
new App.Sidebar(
|
||||
el: @el.find('.sidebar-holder')
|
||||
el: @el.find('.tabsSidebar')
|
||||
items: items
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<div class="fit ticket-zoom vertical">
|
||||
<div class="flex u-positionOrigin">
|
||||
<div class="main no-padding">
|
||||
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
|
||||
|
||||
<div class="main no-padding fit tabsSidebarSpace">
|
||||
<div class="newTicket">
|
||||
<div class="box">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( @head ) %></h1>
|
||||
|
|
@ -44,11 +41,9 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-holder vertical"></div>
|
||||
<div class="tabsSidebar vertical"></div>
|
||||
<!--
|
||||
<div class="sidebar">
|
||||
<div class="widgets">
|
||||
|
|
@ -171,4 +166,3 @@
|
|||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="sidebar bottom-form-shadow flex">
|
||||
<div class="horizontal center">
|
||||
<h2 class="flex u-textTruncate"></h2>
|
||||
<div class="close-sidebar centered u-clickable">
|
||||
<div class="sidebar-tab-actions"></div>
|
||||
<div class="tabsSidebar-close centered u-clickable">
|
||||
<div class="tabsSidebar-tabActions"></div>
|
||||
<div class="arrow-right icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
<% end %>
|
||||
|
||||
</div>
|
||||
<div class="sidebar-tabs vertical justified">
|
||||
<div class="tabsSidebar-tabs vertical justified">
|
||||
<% for item in @items: %>
|
||||
<div class="sidebar-tab centered" data-content="<%= item.name %>">
|
||||
<div class="tabsSidebar-tab centered" data-content="<%= item.name %>">
|
||||
<div class="dark icon <%= item.icon %>"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<div class="main fit">
|
||||
|
||||
<div class="main fit tabsSidebarSpace">
|
||||
<h1>content</h1>
|
||||
|
||||
<p>
|
||||
|
|
@ -13,10 +12,9 @@ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
|||
<p>
|
||||
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-holder">
|
||||
<div class="tabsSidebar vertical">
|
||||
|
||||
<!-- ticket information content -->
|
||||
<div class="sidebar flex" data-tab="ticket">
|
||||
|
|
@ -72,17 +70,17 @@ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit no
|
|||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-tabs vertical justified">
|
||||
<div class="tabsSidebar-tabs vertical justified">
|
||||
|
||||
<div class="sidebar-tab centered active" data-tab="ticket">
|
||||
<div class="tabsSidebar-tab centered active" data-tab="ticket">
|
||||
<div class="dark icon message"></div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-tab centered" data-tab="customer">
|
||||
<div class="tabsSidebar-tab centered" data-tab="customer">
|
||||
<div class="dark icon person"></div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-tab centered" data-tab="organization">
|
||||
<div class="tabsSidebar-tab centered" data-tab="organization">
|
||||
<div class="dark icon group"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="fit ticket-zoom vertical">
|
||||
<div class="flex vertical">
|
||||
<div class="flex u-positionOrigin">
|
||||
<div class="main no-padding">
|
||||
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
|
||||
<div class="main no-padding fit tabsSidebarSpace">
|
||||
<div class="ticketZoom">
|
||||
<div class="page-header horizontal">
|
||||
<div class="flex vertical center">
|
||||
<div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
|
||||
|
|
@ -26,10 +26,9 @@
|
|||
<div class="ticket-edit is-public"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-holder vertical">
|
||||
<div class="tabsSidebar vertical">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,11 @@
|
|||
*= require ./bootstrap-tokenfield.css
|
||||
*= require ./noty_theme_twitter.css
|
||||
*= require ./sew.css
|
||||
*= require ./layout.css
|
||||
*= require ./zzz.css
|
||||
*= require ./fonts/fira-sans.css
|
||||
*= require ./layout.css
|
||||
*
|
||||
* layout.css after zzz.css because .fix's position absolute should overwrite others
|
||||
*
|
||||
*= require_tree ./custom/
|
||||
*
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
body.fit {
|
||||
|
|
|
|||
|
|
@ -2322,31 +2322,11 @@ footer {
|
|||
appearance: none;
|
||||
}
|
||||
|
||||
.ticket-zoom {
|
||||
overflow: hidden;
|
||||
.ticketZoom {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.ticket-zoom .main {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-right: 280px;
|
||||
position: absolute;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
.ticket-zoom .flex-overflow {
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ticket-zoom.state--sidebar-hidden .main {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ticket-zoom .page-header {
|
||||
.ticketZoom .page-header {
|
||||
margin-top: 62px;
|
||||
margin-bottom: 46px;
|
||||
border-bottom: none;
|
||||
|
|
@ -2811,16 +2791,26 @@ footer {
|
|||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.ticket-zoom .sidebar {
|
||||
.tabsSidebarSpace {
|
||||
padding-right: 62px !important;
|
||||
margin-right: 280px;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
.tabsSidebarSpace.is-closed {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tabsSidebar .sidebar {
|
||||
width: 280px;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.ticket-zoom .sidebar h2 {
|
||||
.tabsSidebar .sidebar h2 {
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
.close-sidebar {
|
||||
.tabsSidebar-close {
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
|
@ -2833,7 +2823,7 @@ footer {
|
|||
0 -4px rgba(0,0,0,.005) inset;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
.tabsSidebar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
|
@ -2841,28 +2831,24 @@ footer {
|
|||
transition: 500ms;
|
||||
}
|
||||
|
||||
.ticket-zoom.state--sidebar-hidden .sidebar-holder {
|
||||
.tabsSidebar.is-closed {
|
||||
-webkit-transform: translateX(280px);
|
||||
transform: translateX(280px);
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
.tabsSidebar-tabs {
|
||||
position: absolute;
|
||||
left: -55px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar-tabs--spacing {
|
||||
padding-right: 62px;
|
||||
}
|
||||
|
||||
.test {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-tab {
|
||||
.tabsSidebar-tab {
|
||||
width: 56px;
|
||||
height: 60px;
|
||||
background: hsl(197,20%,93%);
|
||||
|
|
@ -2871,7 +2857,7 @@ footer {
|
|||
border-top: 1px solid hsl(202,12%,87%);
|
||||
}
|
||||
|
||||
.sidebar-tab.is-changed:before {
|
||||
.tabsSidebar-tab.is-changed:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -3px;
|
||||
|
|
@ -2884,20 +2870,20 @@ footer {
|
|||
box-shadow: 0 0 0 2px hsl(210,17%,98%);
|
||||
}
|
||||
|
||||
.sidebar-tab:first-child {
|
||||
.tabsSidebar-tab:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.sidebar-tab:last-child {
|
||||
.tabsSidebar-tab:last-child {
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
|
||||
.sidebar-tab .icon {
|
||||
.tabsSidebar-tab .icon {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.sidebar-tab.active .icon {
|
||||
.tabsSidebar-tab.active .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -2937,17 +2923,17 @@ footer {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.create-new .main {
|
||||
.newTicket {
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.create-new .sidebar {
|
||||
.newTicket .sidebar {
|
||||
width: 290px;
|
||||
}
|
||||
.create-new .form-control:not(:focus):not(.focus) {
|
||||
.newTicket .form-control:not(:focus):not(.focus) {
|
||||
border-color: hsl(0,0%,90%);
|
||||
}
|
||||
.create-new .subtle-link {
|
||||
.newTicket .subtle-link {
|
||||
color: hsl(0,0%,89%);
|
||||
}
|
||||
|
||||
|
|
@ -3065,7 +3051,7 @@ footer {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-new .templates {
|
||||
.newTicket .templates {
|
||||
border-bottom: 1px solid hsl(240,4%,95%);
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue