Merge branch 'interface' of github.com:martini/zammad into interface
This commit is contained in:
commit
d9b5e428e7
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
|
class App.Sidebar extends App.Controller
|
||||||
events:
|
events:
|
||||||
'click .sidebar-tabs': 'toggleTab'
|
'click .tabsSidebar-tab': 'toggleTab'
|
||||||
'click .close-sidebar': 'toggleSidebar'
|
'click .tabsSidebar-close': 'toggleSidebar'
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
# get first tab
|
# get first tab
|
||||||
name = @el.find('.sidebar-tab').first().data('content')
|
name = @el.find('.tabsSidebar-tab').first().data('content')
|
||||||
|
|
||||||
# activate first tab
|
# activate first tab
|
||||||
@toggleTabAction(name)
|
@toggleTabAction(name)
|
||||||
|
@ -439,17 +439,17 @@ class App.Sidebar extends App.Controller
|
||||||
item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
|
item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
|
||||||
|
|
||||||
toggleSidebar: ->
|
toggleSidebar: ->
|
||||||
$('.content.active > div').toggleClass('state--sidebar-hidden')
|
$('.content.active .tabsSidebarSpace').toggleClass('is-closed')
|
||||||
|
$('.content.active .tabsSidebar').toggleClass('is-closed')
|
||||||
|
|
||||||
showSidebar: ->
|
showSidebar: ->
|
||||||
# show sidebar if not shown
|
$('.content.active .tabsSidebarSpace').removeClass('is-closed')
|
||||||
if $('.content.active > div').hasClass('state--sidebar-hidden')
|
$('.content.active .tabsSidebar').removeClass('is-closed')
|
||||||
$('.content.active > div').removeClass('state--sidebar-hidden')
|
|
||||||
|
|
||||||
toggleTab: (e) ->
|
toggleTab: (e) ->
|
||||||
|
|
||||||
# get selected tab
|
# get selected tab
|
||||||
name = $(e.target).closest('.sidebar-tab').data('content')
|
name = $(e.target).closest('.tabsSidebar-tab').data('content')
|
||||||
|
|
||||||
if name
|
if name
|
||||||
|
|
||||||
|
@ -466,10 +466,10 @@ class App.Sidebar extends App.Controller
|
||||||
return if !name
|
return if !name
|
||||||
|
|
||||||
# remove active state
|
# remove active state
|
||||||
@el.find('.sidebar-tab').removeClass('active')
|
@el.find('.tabsSidebar-tab').removeClass('active')
|
||||||
|
|
||||||
# add active state
|
# 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
|
# hide all content tabs
|
||||||
@el.find('.sidebar-content').addClass('hide')
|
@el.find('.sidebar-content').addClass('hide')
|
||||||
|
@ -483,7 +483,7 @@ class App.Sidebar extends App.Controller
|
||||||
@el.find('.sidebar h2').html(title)
|
@el.find('.sidebar h2').html(title)
|
||||||
|
|
||||||
# set tab actions
|
# set tab actions
|
||||||
@el.find('.sidebar-tab-actions').html('')
|
@el.find('.tabsSidebar-tabActions').html('')
|
||||||
|
|
||||||
# add item acctions
|
# add item acctions
|
||||||
for item in @items
|
for item in @items
|
||||||
|
@ -491,7 +491,7 @@ class App.Sidebar extends App.Controller
|
||||||
if item.actions
|
if item.actions
|
||||||
for action in item.actions
|
for action in item.actions
|
||||||
do (action) =>
|
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'
|
'click'
|
||||||
(e) =>
|
(e) =>
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
|
|
|
@ -469,7 +469,7 @@ class Sidebar extends App.Controller
|
||||||
}
|
}
|
||||||
|
|
||||||
new App.Sidebar(
|
new App.Sidebar(
|
||||||
el: @el.find('.sidebar-holder')
|
el: @el.find('.tabsSidebar')
|
||||||
items: items
|
items: items
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -43,10 +43,32 @@ App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSide
|
||||||
|
|
||||||
|
|
||||||
class ContentSidebarTabsRight extends App.ControllerContent
|
class ContentSidebarTabsRight extends App.ControllerContent
|
||||||
|
elements:
|
||||||
|
'.tabsSidebar' : 'sidebar'
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
@render()
|
@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: ->
|
render: ->
|
||||||
@html App.view('layout_ref/content_sidebar_tabs_right')()
|
@html App.view('layout_ref/content_sidebar_tabs_right')()
|
||||||
|
|
||||||
|
|
|
@ -235,7 +235,7 @@ class App.TicketZoom extends App.Controller
|
||||||
}
|
}
|
||||||
|
|
||||||
new App.Sidebar(
|
new App.Sidebar(
|
||||||
el: @el.find('.sidebar-holder')
|
el: @el.find('.tabsSidebar')
|
||||||
items: items
|
items: items
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -1,174 +1,168 @@
|
||||||
<div class="fit ticket-zoom vertical">
|
<div class="main no-padding fit tabsSidebarSpace">
|
||||||
<div class="flex u-positionOrigin">
|
<div class="newTicket">
|
||||||
<div class="main no-padding">
|
<div class="box">
|
||||||
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
|
<div class="page-header">
|
||||||
|
<h1><%- @T( @head ) %></h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="box">
|
<ul class="horizontal tabs type-tabs">
|
||||||
<div class="page-header">
|
|
||||||
<h1><%- @T( @head ) %></h1>
|
<li class="tab u-textTruncate" data-type="phone-in">
|
||||||
|
<div class="gray received-calls channel icon"></div>
|
||||||
|
<%- @T( 'Received Call' ) %>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="tab u-textTruncate" data-type="phone-out">
|
||||||
|
<div class="gray outbound-calls channel icon"></div>
|
||||||
|
<%- @T( 'Outbound Call' ) %>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="tab u-textTruncate" data-type="email-out">
|
||||||
|
<div class="gray email channel icon"></div>
|
||||||
|
<%- @T( 'Send E-Mail' ) %>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<form role="form" class="form-large ticket-create">
|
||||||
|
<input type="hidden" name="formSenderType"/>
|
||||||
|
<div class="ticket-form-top"></div>
|
||||||
|
<div class="article-form-top"></div>
|
||||||
|
|
||||||
|
<div class="formset-inset">
|
||||||
|
<div class="ticket-form-middle horizontal two-columns"></div>
|
||||||
|
<div class="ticket-form-bottom"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-actions horizontal">
|
||||||
|
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||||
|
<button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create' ) %></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabsSidebar vertical"></div>
|
||||||
|
<!--
|
||||||
|
<div class="sidebar">
|
||||||
|
<div class="widgets">
|
||||||
|
<div class="customer_info">
|
||||||
|
<div class="drox"><!-- Customer Info -/->
|
||||||
|
<div class="drox-header">
|
||||||
|
<h2>Customer Info</h2>
|
||||||
|
</div>
|
||||||
|
<div class="drox-body">
|
||||||
|
<p>
|
||||||
|
<span class="customer-name">Benjamin Wahlers</span>
|
||||||
|
<span class="customer-email u-highlight">benjamin@wahlers.de</span>
|
||||||
|
</p>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="customer-info-note"><%- @T('Note') %></label>
|
||||||
|
<textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
<label><%- @T('Tickets') %></label>
|
||||||
<ul class="horizontal tabs type-tabs">
|
<ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
|
||||||
|
<li class="task level-1 horizontal">
|
||||||
<li class="tab u-textTruncate" data-type="phone-in">
|
<div class="icon-holder">
|
||||||
<div class="gray received-calls channel icon"></div>
|
<div class="priority icon"></div>
|
||||||
<%- @T( 'Received Call' ) %>
|
</div>
|
||||||
</li>
|
<div class="flex">
|
||||||
|
<div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
|
||||||
<li class="tab u-textTruncate" data-type="phone-out">
|
<div class="time">23 minutes ago</div>
|
||||||
<div class="gray outbound-calls channel icon"></div>
|
</div>
|
||||||
<%- @T( 'Outbound Call' ) %>
|
<li class="task level-3 horizontal">
|
||||||
</li>
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
<li class="tab u-textTruncate" data-type="email-out">
|
</div>
|
||||||
<div class="gray email channel icon"></div>
|
<div class="flex">
|
||||||
<%- @T( 'Send E-Mail' ) %>
|
<div class="u-highlight name u-textTruncate">Superb Service!</div>
|
||||||
</li>
|
<div class="time">43 minutes ago</div>
|
||||||
</ul>
|
</div>
|
||||||
|
<li class="task level-2 horizontal">
|
||||||
<form role="form" class="form-large ticket-create">
|
<div class="icon-holder">
|
||||||
<input type="hidden" name="formSenderType"/>
|
<div class="priority icon"></div>
|
||||||
<div class="ticket-form-top"></div>
|
</div>
|
||||||
<div class="article-form-top"></div>
|
<div class="flex">
|
||||||
|
<div class="u-highlight name u-textTruncate">Print sheets strip off</div>
|
||||||
<div class="formset-inset">
|
<div class="time">1 hour ago</div>
|
||||||
<div class="ticket-form-middle horizontal two-columns"></div>
|
</div>
|
||||||
<div class="ticket-form-bottom"></div>
|
<li class="task level-3 horizontal">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="u-highlight name u-textTruncate">Block not properly wrought</div>
|
||||||
|
<div class="time">2 hour ago</div>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ticket_template">
|
||||||
|
<div class="drox hide"><!-- Template Wizard Step One -/->
|
||||||
|
<div class="drox-header">
|
||||||
|
<h2>Choose Template:</h2>
|
||||||
|
</div>
|
||||||
|
<div class="drox-body">
|
||||||
|
<p>No template created yet.</p>
|
||||||
|
<p>With templates you can pre-fill ticket attributes.</p>
|
||||||
|
<p>Choose attributes and then save them as a new template.</p>
|
||||||
|
<p><a class="create u-clickable">Save new template</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="drox hide"><!-- Template Wizard Step Two -/->
|
||||||
|
<div class="drox-header">
|
||||||
|
<h2>Create Template:</h2>
|
||||||
|
</div>
|
||||||
|
<div class="drox-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="template-title"><%- @T('Template Title') %>:</label>
|
||||||
|
<input class="form-control" id="template-title" placeholder="<%- @T('Enter Template Name') %>">
|
||||||
</div>
|
</div>
|
||||||
|
<p>This template saves the following attributes:</p>
|
||||||
|
<ul class="template-attributes">
|
||||||
<div class="form-actions horizontal">
|
<li class="template-attribute horizontal">
|
||||||
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
<div class="key">Owner</div> | <div class="value flex u-textTruncate">Web-Dev</div>
|
||||||
<button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create' ) %></button>
|
<div class="delete u-clickable">×</div>
|
||||||
|
<li class="template-attribute horizontal">
|
||||||
|
<div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
|
||||||
|
<div class="delete u-clickable">×</div>
|
||||||
|
<li class="template-attribute horizontal">
|
||||||
|
<div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
|
||||||
|
<div class="delete u-clickable">×</div>
|
||||||
|
<li class="template-attribute horizontal">
|
||||||
|
<div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
|
||||||
|
<div class="delete u-clickable">×</div>
|
||||||
|
<li class="template-attribute horizontal">
|
||||||
|
<div class="key">Tag</div> | <div class="value flex u-textTruncate">New Website</div>
|
||||||
|
<div class="delete u-clickable">×</div>
|
||||||
|
<li class="template-attribute horizontal">
|
||||||
|
<div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
|
||||||
|
<div class="delete u-clickable">×</div>
|
||||||
|
</ul>
|
||||||
|
<div class="horizontal">
|
||||||
|
<button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
|
||||||
|
<a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="drox hide"><!-- Template Chooser, shown instead of Template Wizard Step One when there are templates there -/->
|
||||||
</div>
|
<div class="drox-header">
|
||||||
</div>
|
<h2>Choose Template:</h2>
|
||||||
|
</div>
|
||||||
<div class="sidebar-holder vertical"></div>
|
<div class="drox-body">
|
||||||
<!--
|
<ul class="templates">
|
||||||
<div class="sidebar">
|
<li class="u-clickable u-highlight">Feedback New Website
|
||||||
<div class="widgets">
|
</ul>
|
||||||
<div class="customer_info">
|
<p>Choose attributes and then save them as a new template.</p>
|
||||||
<div class="drox"><!-- Customer Info -/->
|
<p><a class="create u-clickable">Save new template</a></p>
|
||||||
<div class="drox-header">
|
|
||||||
<h2>Customer Info</h2>
|
|
||||||
</div>
|
|
||||||
<div class="drox-body">
|
|
||||||
<p>
|
|
||||||
<span class="customer-name">Benjamin Wahlers</span>
|
|
||||||
<span class="customer-email u-highlight">benjamin@wahlers.de</span>
|
|
||||||
</p>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="customer-info-note"><%- @T('Note') %></label>
|
|
||||||
<textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
|
|
||||||
</div>
|
|
||||||
<label><%- @T('Tickets') %></label>
|
|
||||||
<ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
|
|
||||||
<li class="task level-1 horizontal">
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="priority icon"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
|
|
||||||
<div class="time">23 minutes ago</div>
|
|
||||||
</div>
|
|
||||||
<li class="task level-3 horizontal">
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="priority icon"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="u-highlight name u-textTruncate">Superb Service!</div>
|
|
||||||
<div class="time">43 minutes ago</div>
|
|
||||||
</div>
|
|
||||||
<li class="task level-2 horizontal">
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="priority icon"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="u-highlight name u-textTruncate">Print sheets strip off</div>
|
|
||||||
<div class="time">1 hour ago</div>
|
|
||||||
</div>
|
|
||||||
<li class="task level-3 horizontal">
|
|
||||||
<div class="icon-holder">
|
|
||||||
<div class="priority icon"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="u-highlight name u-textTruncate">Block not properly wrought</div>
|
|
||||||
<div class="time">2 hour ago</div>
|
|
||||||
</div>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ticket_template">
|
|
||||||
<div class="drox hide"><!-- Template Wizard Step One -/->
|
|
||||||
<div class="drox-header">
|
|
||||||
<h2>Choose Template:</h2>
|
|
||||||
</div>
|
|
||||||
<div class="drox-body">
|
|
||||||
<p>No template created yet.</p>
|
|
||||||
<p>With templates you can pre-fill ticket attributes.</p>
|
|
||||||
<p>Choose attributes and then save them as a new template.</p>
|
|
||||||
<p><a class="create u-clickable">Save new template</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="drox hide"><!-- Template Wizard Step Two -/->
|
|
||||||
<div class="drox-header">
|
|
||||||
<h2>Create Template:</h2>
|
|
||||||
</div>
|
|
||||||
<div class="drox-body">
|
|
||||||
<form>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="template-title"><%- @T('Template Title') %>:</label>
|
|
||||||
<input class="form-control" id="template-title" placeholder="<%- @T('Enter Template Name') %>">
|
|
||||||
</div>
|
|
||||||
<p>This template saves the following attributes:</p>
|
|
||||||
<ul class="template-attributes">
|
|
||||||
<li class="template-attribute horizontal">
|
|
||||||
<div class="key">Owner</div> | <div class="value flex u-textTruncate">Web-Dev</div>
|
|
||||||
<div class="delete u-clickable">×</div>
|
|
||||||
<li class="template-attribute horizontal">
|
|
||||||
<div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
|
|
||||||
<div class="delete u-clickable">×</div>
|
|
||||||
<li class="template-attribute horizontal">
|
|
||||||
<div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
|
|
||||||
<div class="delete u-clickable">×</div>
|
|
||||||
<li class="template-attribute horizontal">
|
|
||||||
<div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
|
|
||||||
<div class="delete u-clickable">×</div>
|
|
||||||
<li class="template-attribute horizontal">
|
|
||||||
<div class="key">Tag</div> | <div class="value flex u-textTruncate">New Website</div>
|
|
||||||
<div class="delete u-clickable">×</div>
|
|
||||||
<li class="template-attribute horizontal">
|
|
||||||
<div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
|
|
||||||
<div class="delete u-clickable">×</div>
|
|
||||||
</ul>
|
|
||||||
<div class="horizontal">
|
|
||||||
<button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
|
|
||||||
<a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="drox hide"><!-- Template Chooser, shown instead of Template Wizard Step One when there are templates there -/->
|
|
||||||
<div class="drox-header">
|
|
||||||
<h2>Choose Template:</h2>
|
|
||||||
</div>
|
|
||||||
<div class="drox-body">
|
|
||||||
<ul class="templates">
|
|
||||||
<li class="u-clickable u-highlight">Feedback New Website
|
|
||||||
</ul>
|
|
||||||
<p>Choose attributes and then save them as a new template.</p>
|
|
||||||
<p><a class="create u-clickable">Save new template</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text_module"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text_module"></div>
|
||||||
</div>
|
</div>
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
|
@ -1,8 +1,8 @@
|
||||||
<div class="sidebar bottom-form-shadow flex">
|
<div class="sidebar bottom-form-shadow flex">
|
||||||
<div class="horizontal center">
|
<div class="horizontal center">
|
||||||
<h2 class="flex u-textTruncate"></h2>
|
<h2 class="flex u-textTruncate"></h2>
|
||||||
<div class="close-sidebar centered u-clickable">
|
<div class="tabsSidebar-close centered u-clickable">
|
||||||
<div class="sidebar-tab-actions"></div>
|
<div class="tabsSidebar-tabActions"></div>
|
||||||
<div class="arrow-right icon"></div>
|
<div class="arrow-right icon"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -13,9 +13,9 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-tabs vertical justified">
|
<div class="tabsSidebar-tabs vertical justified">
|
||||||
<% for item in @items: %>
|
<% 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 class="dark icon <%= item.icon %>"></div>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="main fit">
|
<div class="main fit tabsSidebarSpace">
|
||||||
|
|
||||||
<h1>content</h1>
|
<h1>content</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
@ -13,10 +12,9 @@ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
||||||
<p>
|
<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.
|
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>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sidebar-holder">
|
<div class="tabsSidebar vertical">
|
||||||
|
|
||||||
<!-- ticket information content -->
|
<!-- ticket information content -->
|
||||||
<div class="sidebar flex" data-tab="ticket">
|
<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>
|
||||||
|
|
||||||
<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 class="dark icon message"></div>
|
||||||
</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 class="dark icon person"></div>
|
||||||
</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 class="dark icon group"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="fit ticket-zoom vertical">
|
<div class="flex vertical">
|
||||||
<div class="flex u-positionOrigin">
|
<div class="flex u-positionOrigin">
|
||||||
<div class="main no-padding">
|
<div class="main no-padding fit tabsSidebarSpace">
|
||||||
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
|
<div class="ticketZoom">
|
||||||
<div class="page-header horizontal">
|
<div class="page-header horizontal">
|
||||||
<div class="flex vertical center">
|
<div class="flex vertical center">
|
||||||
<div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
|
<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 class="ticket-edit is-public"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sidebar-holder vertical">
|
<div class="tabsSidebar vertical">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,9 +10,11 @@
|
||||||
*= require ./bootstrap-tokenfield.css
|
*= require ./bootstrap-tokenfield.css
|
||||||
*= require ./noty_theme_twitter.css
|
*= require ./noty_theme_twitter.css
|
||||||
*= require ./sew.css
|
*= require ./sew.css
|
||||||
*= require ./layout.css
|
|
||||||
*= require ./zzz.css
|
*= require ./zzz.css
|
||||||
*= require ./fonts/fira-sans.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/
|
*= require_tree ./custom/
|
||||||
*
|
*
|
||||||
|
|
|
@ -59,8 +59,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
bottom: 0;
|
||||||
width: 100%;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.fit {
|
body.fit {
|
||||||
|
|
|
@ -2322,31 +2322,11 @@ footer {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-zoom {
|
.ticketZoom {
|
||||||
overflow: hidden;
|
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-zoom .main {
|
.ticketZoom .page-header {
|
||||||
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 {
|
|
||||||
margin-top: 62px;
|
margin-top: 62px;
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
@ -2811,16 +2791,26 @@ footer {
|
||||||
border-radius: 0 4px 4px 0;
|
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;
|
width: 280px;
|
||||||
border-left: 1px solid #e6e6e6;
|
border-left: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-zoom .sidebar h2 {
|
.tabsSidebar .sidebar h2 {
|
||||||
margin: 5px 0 0;
|
margin: 5px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-sidebar {
|
.tabsSidebar-close {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin: -15px;
|
margin: -15px;
|
||||||
}
|
}
|
||||||
|
@ -2833,7 +2823,7 @@ footer {
|
||||||
0 -4px rgba(0,0,0,.005) inset;
|
0 -4px rgba(0,0,0,.005) inset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-holder {
|
.tabsSidebar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -2841,28 +2831,24 @@ footer {
|
||||||
transition: 500ms;
|
transition: 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-zoom.state--sidebar-hidden .sidebar-holder {
|
.tabsSidebar.is-closed {
|
||||||
-webkit-transform: translateX(280px);
|
-webkit-transform: translateX(280px);
|
||||||
transform: translateX(280px);
|
transform: translateX(280px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tabs {
|
.tabsSidebar-tabs {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -55px;
|
left: -55px;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tabs--spacing {
|
|
||||||
padding-right: 62px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test {
|
.test {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tab {
|
.tabsSidebar-tab {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background: hsl(197,20%,93%);
|
background: hsl(197,20%,93%);
|
||||||
|
@ -2871,7 +2857,7 @@ footer {
|
||||||
border-top: 1px solid hsl(202,12%,87%);
|
border-top: 1px solid hsl(202,12%,87%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tab.is-changed:before {
|
.tabsSidebar-tab.is-changed:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '';
|
content: '';
|
||||||
left: -3px;
|
left: -3px;
|
||||||
|
@ -2884,20 +2870,20 @@ footer {
|
||||||
box-shadow: 0 0 0 2px hsl(210,17%,98%);
|
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-left-radius: 8px;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tab:last-child {
|
.tabsSidebar-tab:last-child {
|
||||||
border-bottom-left-radius: 8px;
|
border-bottom-left-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tab .icon {
|
.tabsSidebar-tab .icon {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-tab.active .icon {
|
.tabsSidebar-tab.active .icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2937,17 +2923,17 @@ footer {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-new .main {
|
.newTicket {
|
||||||
padding: 34px;
|
padding: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-new .sidebar {
|
.newTicket .sidebar {
|
||||||
width: 290px;
|
width: 290px;
|
||||||
}
|
}
|
||||||
.create-new .form-control:not(:focus):not(.focus) {
|
.newTicket .form-control:not(:focus):not(.focus) {
|
||||||
border-color: hsl(0,0%,90%);
|
border-color: hsl(0,0%,90%);
|
||||||
}
|
}
|
||||||
.create-new .subtle-link {
|
.newTicket .subtle-link {
|
||||||
color: hsl(0,0%,89%);
|
color: hsl(0,0%,89%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3065,7 +3051,7 @@ footer {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-new .templates {
|
.newTicket .templates {
|
||||||
border-bottom: 1px solid hsl(240,4%,95%);
|
border-bottom: 1px solid hsl(240,4%,95%);
|
||||||
padding-bottom: 14px;
|
padding-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue