Merge branch 'interface' of github.com:martini/zammad into interface
Conflicts: app/assets/javascripts/app/views/navigation/result.jst.eco
This commit is contained in:
Martin Edenhofer
commit
e1a7b0f3fb
25 changed files with 1640 additions and 387 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="306px" height="375px" viewBox="0 0 306 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<svg width="306px" height="371px" viewBox="0 0 306 371" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<title> 1</title>
|
||||
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
|
||||
<defs></defs>
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
<path d="M34.0951807,347.311111 L34.0951807,344.466667 C37.3686747,344.466667 40.0240964,347.044444 40.0240964,350.222222 C40.0240964,353.422222 37.3686747,356 34.0951807,356 C38.9939759,356 42.9542169,352.155556 42.9542169,347.377778 C42.9542169,342.622222 38.9939759,338.777778 34.0951807,338.777778 L34.0951807,336 L29.0361446,338.822222 L24,341.666667 L29.0361446,344.488889 L34.0951807,347.311111 Z" id="reply" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M58.6084051,344.2388 L58.5990886,344.2 L57.164557,344.2 L57.164557,340.08 C57.164557,339.922 57.3810633,336 53.0956962,336 L51.0033418,336 C46.7127089,336 46.8629873,340 46.8702785,340.2 L46.835443,340.2 L46.835443,344.2 L45.4926582,344.2 C44.7333671,344.2 44,344.8696 44,345.6196 L44,354.5798 L44,354.6154 C44,355.365 44.7331646,356.0002 45.4926582,356.0002 L58.5990886,356.0002 L58.6306835,356.0002 C59.3899747,356 60,355.3652 60,354.6152 L60,354.5796 L60,345.6196 C60,344.8694 59.3678987,344.2388 58.6084051,344.2388 L58.6084051,344.2388 Z M54.3291139,344.2 L49.6708861,344.2 L49.6708861,340.086 C49.6708861,339.4706 50.1689114,338.8 51.0033418,338.8 L53.1088608,338.8 C53.9430886,338.8 54.3291139,339.4524 54.3291139,340.08 L54.3291139,344.2 L54.3291139,344.2 Z" id="lock" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M3,351 C3.00000025,347.658831 4.05916618,345.96066 6.66411898,343.827098 C6.61537225,343.867024 7.151972,343.429157 7.29335721,343.312088 C9.6234159,341.382774 10.5000001,339.771038 10.5,336 L10.5,336 L13.5,336 L13.5,336 C13.5000001,339.771037 14.3765843,341.382774 16.7066428,343.312088 C16.8480281,343.429157 17.3846279,343.867023 17.3358812,343.827098 C19.9408339,345.96066 20.9999998,347.658831 21,351 L21.0000001,351 L15,351 L19.5,356 L24,351 L21,351 L18,351 C17.9999999,348.710889 17.4108706,347.766332 15.4349741,346.147992 C15.4916405,346.194405 14.9444912,345.747929 14.7933572,345.622789 C13.4178353,344.483842 12.3966281,343.353786 11.6960735,342 L12.3039268,342 L12.3039268,342 C11.6033722,343.353786 10.5821649,344.483842 9.20664279,345.622789 C9.05550884,345.74793 8.50835957,346.194405 8.56502604,346.147993 C6.58912946,347.766332 6.00000015,348.710889 6,351 L3,351 L9,351 L4.5,356 L0,351 L2.99999991,351 Z" id="split" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M15.0068455,365 C14.4507801,365 14,365.455664 14,365.995398 L14,374.004602 C14,374.554345 14.4499488,375 15.0068455,375 L26.9931545,375 C27.5492199,375 28,374.544336 28,374.004602 L28,365.995398 C28,365.445655 27.5500512,365 26.9931545,365 L15.0068455,365 Z M18.0001535,363 L17.9923928,362.875658 C17.9933444,362.88493 17.9912732,362.863896 17.989468,362.83771 C17.9599587,362.409647 18.0185461,361.880411 18.2283326,361.40063 C18.6141117,360.518353 19.4239828,360 20.9994467,360 C22.5749814,360 23.3851297,360.518439 23.7712104,361.400844 C23.9812111,361.88081 24.0399125,362.410193 24.0104777,362.838202 C24.008685,362.864271 24.0066273,362.885215 24.0075787,362.875929 L23.9998521,363 L23.9998521,365 L25.9998521,365 L25.9998521,363 L25.9921254,363.124071 C25.9972115,363.081717 26.0013558,363.039534 26.0057649,362.975421 C26.055384,362.253913 25.9630045,361.420813 25.6035034,360.599156 C24.8957536,358.981562 23.3618963,358 20.9994469,358 C18.6369264,358 17.1032087,358.981647 16.3958525,360.59937 C16.0366701,361.42082 15.9444643,362.253739 15.9942034,362.975257 C15.9986365,363.039564 16.0028037,363.081883 16.0079141,363.124342 L16.0001535,363 L16.0001535,365 L18.0001535,365 L18.0001535,363 Z" id="internal" fill="#F58957" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M4.00015347,365 L12.9931545,365 C13.5500512,365 14,365.445655 14,365.995398 L14,374.004602 C14,374.544336 13.5492199,375 12.9931545,375 L1.00684547,375 C0.449948758,375 0,374.554345 0,374.004602 L0,365.995398 C0,365.455664 0.450780073,365 1.00684547,365 L2.00015347,365 L2.00015346,361 L2.0079141,361.124342 C2.00280368,361.081883 1.99863651,361.039564 1.99420336,360.975257 C1.94446429,360.253739 2.03667013,359.42082 2.39585248,358.59937 C3.10320874,356.981647 4.63692643,356 6.99944694,356 C9.36189629,356 10.8957536,356.981562 11.6035034,358.599156 C11.9630045,359.420813 12.055384,360.253913 12.0057649,360.975421 C12.0013558,361.039534 11.9972115,361.081717 11.9921254,361.124071 L11.9998521,361 L11.9998521,363 L9.99985208,363 L9.99985208,361 L10.0075787,360.875929 C10.0066273,360.885215 10.008685,360.864271 10.0104777,360.838202 C10.0399125,360.410193 9.98121107,359.88081 9.77121041,359.400844 C9.38512974,358.518439 8.57498138,358 6.99944672,358 C5.42398278,358 4.61411166,358.518353 4.2283326,359.40063 C4.01854612,359.880411 3.95995868,360.409647 3.98946796,360.83771 C3.99127317,360.863896 3.99334435,360.88493 3.99239283,360.875658 L4.00015346,361 L4.00015347,365 Z" id="public" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M37.0409639,368 L37.0409639,365 C40.031302,365.196667 42.4129445,367.387778 42.0409639,370 C42.4129445,372.808889 40.031302,375 37.0409639,375 C41.4890315,375 45.0409639,371.732222 45.0409639,368 C45.0409639,363.628889 41.4890315,360.361111 37.0409639,360 L37.0409639,358 L33.0409639,360 L28.0409639,363 L33.0409639,365 L37.0409639,368 Z" id="recipients" fill="#000000" sketch:type="MSShapeGroup" transform="translate(36.500000, 366.500000) rotate(-180.000000) translate(-36.500000, -366.500000) "></path>
|
||||
<path d="M11.9955775,363 C11.4457352,363 11,363.453036 11,363.99703 L11,370.00297 C11,370.553614 11.444837,371 11.9955775,371 L21.0044225,371 C21.5542648,371 22,370.546964 22,370.00297 L22,363.99703 C22,363.446386 21.555163,363 21.0044225,363 L11.9955775,363 Z M14.4077632,361.571429 L14.4023505,361.482613 C14.4030141,361.489235 14.4015696,361.474212 14.4003105,361.455507 C14.379729,361.149748 14.4205913,360.771722 14.5669088,360.429021 C14.8359739,359.798824 15.4008258,359.428571 16.4996473,359.428571 C17.5985181,359.428572 18.1635634,359.798885 18.4328388,360.429174 C18.5793057,360.772007 18.6202475,361.150138 18.599718,361.455859 C18.5984676,361.474479 18.5970325,361.489439 18.5976961,361.482806 L18.592307,361.571429 L18.592307,363 L19.987225,363 L19.987225,361.571429 L19.981836,361.660051 C19.9853834,361.629798 19.9882738,361.599667 19.991349,361.553872 C20.0259563,361.038509 19.9615254,360.443438 19.7107881,359.85654 C19.2171616,358.701116 18.147359,358 16.4996474,358 C14.8518862,358 13.782181,358.701176 13.288829,359.856693 C13.0383141,360.443443 12.9740043,361.038385 13.0086952,361.553755 C13.0117872,361.599689 13.0146936,361.629916 13.0182579,361.660245 L13.0128452,361.571429 L13.0128452,363 L14.4077632,363 L14.4077632,361.571429 Z" id="internal" fill="#F58957" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M3.4077632,363 L10.0044225,363 C10.555163,363 11,363.446386 11,363.99703 L11,370.00297 C11,370.546964 10.5542648,371 10.0044225,371 L0.995577499,371 C0.444836974,371 0,370.553614 0,370.00297 L0,363.99703 C0,363.453036 0.445735229,363 0.995577499,363 L2.01284519,363 L2.01284519,360.210526 L2.01825791,360.315236 C2.0146936,360.27948 2.01178717,360.243843 2.00869523,360.18969 C1.97400427,359.582096 2.03831406,358.880691 2.28882902,358.188943 C2.78218102,356.82665 3.85188624,356 5.49964745,356 C7.14735902,356 8.21716163,356.826578 8.71078808,358.188763 C8.96152537,358.880684 9.02595628,359.582243 8.99134902,360.189828 C8.98827381,360.243818 8.98538336,360.279341 8.98183602,360.315007 L8.98722504,360.210526 L8.98722504,361.894737 L7.59230703,361.894737 L7.59230703,360.210526 L7.59769605,360.106046 C7.59703245,360.113866 7.5984676,360.096228 7.59971799,360.074275 C7.62024752,359.713847 7.57930569,359.26805 7.43283884,358.863868 C7.1635634,358.12079 6.59851813,357.684211 5.49964729,357.684211 C4.40082578,357.68421 3.83597387,358.120718 3.56690879,358.863688 C3.42059132,359.267715 3.37972899,359.713387 3.4003105,360.073861 C3.40156956,360.095913 3.40301412,360.113625 3.40235047,360.105817 L3.4077632,360.210526 L3.4077632,363 Z" id="public" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M29.9409639,369 L29.9409639,366.9 C29.9409639,366.9 29.9409637,367 33.5,367 C37.0590363,367 38,371 38,371 C38,371 39.0012466,366.376064 37.5,363.5 C36.4923852,361.569628 34.7285772,361 33.5,361 C29.9409637,361 30.0409639,361 30.0409639,361 L29.9409639,359 L27.0409639,361 L23,364 L27.0409639,367 L29.9409639,369 Z" id="recipients" fill="#000000" sketch:type="MSShapeGroup" transform="translate(30.500000, 365.000000) rotate(-180.000000) translate(-30.500000, -365.000000) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
class App.clickCatcher extends Spine.Controller
|
||||
# clickCatcher has no template because it's a plain <div>
|
||||
className: 'clickCatcher'
|
||||
|
||||
constructor: (holder, callback, zIndexScale) ->
|
||||
super
|
||||
@render() if @callback and @holder
|
||||
|
||||
triggerCallback: (event) =>
|
||||
event.stopPropagation()
|
||||
@callback()
|
||||
@remove()
|
||||
|
||||
render: ->
|
||||
@el.addClass("zIndex-#{ @zIndexScale }") if @zIndexScale
|
||||
@el.on('click', @triggerCallback)
|
||||
@el.appendTo(@holder)
|
||||
|
||||
remove: ->
|
||||
@el.remove()
|
||||
|
|
@ -185,10 +185,10 @@ class App.TicketCreate extends App.Controller
|
|||
)
|
||||
|
||||
# show template UI
|
||||
new App.WidgetTemplate(
|
||||
el: @el.find('.ticket_template')
|
||||
template_id: template['id']
|
||||
)
|
||||
# new App.WidgetTemplate(
|
||||
# el: @el.find('.ticket_template')
|
||||
# template_id: template['id']
|
||||
# )
|
||||
|
||||
@formDefault = @formParam( @el.find('.ticket-create') )
|
||||
|
||||
|
|
@ -197,6 +197,8 @@ class App.TicketCreate extends App.Controller
|
|||
el: @el.find('.ticket-create').find('textarea')
|
||||
)
|
||||
|
||||
$('#tags').tokenfield()
|
||||
|
||||
# start auto save
|
||||
@autosave()
|
||||
|
||||
|
|
|
|||
|
|
@ -317,21 +317,37 @@ class Sidebar extends App.Controller
|
|||
|
||||
|
||||
class Edit extends App.Controller
|
||||
elements:
|
||||
'textarea' : 'textarea'
|
||||
'.edit-control-item' : 'editControlItem'
|
||||
'.edit-controls': 'editControls'
|
||||
'.recipient-picker': 'recipientPicker'
|
||||
'.recipient-list': 'recipientList'
|
||||
'.recipient-list .list-arrow': 'recipientListArrow'
|
||||
'.js-attachment': 'attachmentHolder'
|
||||
'.js-attachment-text': 'attachmentText'
|
||||
'.bubble-placeholder-hint': 'bubblePlaceholderHint'
|
||||
|
||||
events:
|
||||
'click .submit': 'update'
|
||||
'click [data-type="reset"]': 'reset'
|
||||
'click .visibility.toggle': 'toggle_visibility'
|
||||
'click .visibility-toggle': 'toggle_visibility'
|
||||
'click .pop-selectable': 'select_type'
|
||||
'click .pop-selected': 'show_selectable_types'
|
||||
'focus textarea': 'show_controls'
|
||||
'blur textarea': 'hide_controls'
|
||||
'focus textarea': 'open_textarea'
|
||||
'input textarea': 'detect_empty_textarea'
|
||||
'click .recipient-picker': 'toggle_recipients'
|
||||
'click .recipient-list': 'stopPropagation'
|
||||
'click .list-entry-type div': 'change_recipient_type'
|
||||
'click .list-entry-type div': 'change_type'
|
||||
'submit .recipient-list form': 'add_recipient'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@textareaHeight =
|
||||
open: 148
|
||||
closed: 38
|
||||
|
||||
@render()
|
||||
|
||||
stopPropagation: (e) ->
|
||||
|
|
@ -446,7 +462,7 @@ class Edit extends App.Controller
|
|||
# show text module UI
|
||||
if !@isRole('Customer')
|
||||
textModule = new App.WidgetTextModule(
|
||||
el: @el.find('textarea')
|
||||
el: @textarea
|
||||
data:
|
||||
ticket: ticket
|
||||
)
|
||||
|
|
@ -457,51 +473,63 @@ class Edit extends App.Controller
|
|||
@subscribeIdTextModule = ticket.subscribe( callback )
|
||||
|
||||
toggle_recipients: =>
|
||||
padding = 15
|
||||
toggle = @el.find('.recipient-picker')
|
||||
list = @el.find('.recipient-list')
|
||||
arrow = list.find('.list-arrow')
|
||||
|
||||
if toggle.hasClass('state--open')
|
||||
toggle.removeClass('state--open')
|
||||
list.velocity
|
||||
properties:
|
||||
scale: [ 0, 1 ]
|
||||
opacity: [ 0, 1 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 500, 20 ]
|
||||
complete: -> list.addClass('hide')
|
||||
if !@pickRecipientsCatcher
|
||||
@show_recipients()
|
||||
else
|
||||
toggle.addClass('state--open')
|
||||
list.removeClass('hide')
|
||||
@hide_recipients()
|
||||
|
||||
toggleDimensions = toggle.get(0).getBoundingClientRect()
|
||||
availableHeight = toggle.scrollParent().outerHeight()
|
||||
show_recipients: ->
|
||||
padding = 15
|
||||
|
||||
top = toggleDimensions.height/2 - list.height()/2
|
||||
bottomDistance = availableHeight - padding - (toggleDimensions.top + top + list.height())
|
||||
@recipientPicker.addClass('is-open')
|
||||
@recipientList.removeClass('hide')
|
||||
|
||||
if bottomDistance < 0
|
||||
top += bottomDistance
|
||||
pickerDimensions = @recipientPicker.get(0).getBoundingClientRect()
|
||||
availableHeight = @recipientPicker.scrollParent().outerHeight()
|
||||
|
||||
arrowCenter = -top + toggleDimensions.height/2
|
||||
top = pickerDimensions.height/2 - @recipientList.height()/2
|
||||
bottomDistance = availableHeight - padding - (pickerDimensions.top + top + @recipientList.height())
|
||||
|
||||
arrow.css('top', arrowCenter)
|
||||
list.css('top', top)
|
||||
if bottomDistance < 0
|
||||
top += bottomDistance
|
||||
|
||||
$.Velocity.hook(list, 'transformOriginX', "0")
|
||||
$.Velocity.hook(list, 'transformOriginY', "#{ arrowCenter }px")
|
||||
arrowCenter = -top + pickerDimensions.height/2
|
||||
|
||||
list.velocity
|
||||
properties:
|
||||
scale: [ 1, 0 ]
|
||||
opacity: [ 1, 0 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 0.34, 1.61, 0.7, 1 ]
|
||||
@recipientListArrow.css('top', arrowCenter)
|
||||
@recipientList.css('top', top)
|
||||
|
||||
change_recipient_type: (e) ->
|
||||
$.Velocity.hook(@recipientList, 'transformOriginX', "0")
|
||||
$.Velocity.hook(@recipientList, 'transformOriginY', "#{ arrowCenter }px")
|
||||
|
||||
@recipientList.velocity
|
||||
properties:
|
||||
scale: [ 1, 0 ]
|
||||
opacity: [ 1, 0 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 0.34, 1.61, 0.7, 1 ]
|
||||
|
||||
@pickRecipientsCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_recipients
|
||||
zIndexScale: 6
|
||||
|
||||
hide_recipients: =>
|
||||
@pickRecipientsCatcher.remove()
|
||||
@pickRecipientsCatcher = null
|
||||
|
||||
@recipientPicker.removeClass('is-open')
|
||||
|
||||
@recipientList.velocity
|
||||
properties:
|
||||
scale: [ 0, 1 ]
|
||||
opacity: [ 0, 1 ]
|
||||
options:
|
||||
speed: 300
|
||||
easing: [ 500, 20 ]
|
||||
complete: -> @recipientList.addClass('hide')
|
||||
|
||||
change_type: (e) ->
|
||||
$(e.target).addClass('active').siblings('.active').removeClass('active')
|
||||
# store $(this).data('value')
|
||||
|
||||
|
|
@ -512,18 +540,28 @@ class Edit extends App.Controller
|
|||
# store recipient
|
||||
|
||||
toggle_visibility: ->
|
||||
if @el.hasClass('state--public')
|
||||
@el.removeClass('state--public')
|
||||
@el.addClass('state--internal')
|
||||
if @el.hasClass('is-public')
|
||||
@el.removeClass('is-public')
|
||||
@el.addClass('is-internal')
|
||||
else
|
||||
@el.addClass('state--public')
|
||||
@el.removeClass('state--internal')
|
||||
@el.addClass('is-public')
|
||||
@el.removeClass('is-internal')
|
||||
|
||||
show_selectable_types: =>
|
||||
@el.find('.pop-selector').removeClass('hide')
|
||||
|
||||
@selectTypeCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_type
|
||||
zIndexScale: 6
|
||||
|
||||
select_type: (e) =>
|
||||
@set_type $(e.target).data('value')
|
||||
@hide_type()
|
||||
@selectTypeCatcher.remove()
|
||||
@selectTypeCatcher = null
|
||||
|
||||
hide_type: =>
|
||||
@el.find('.pop-selector').addClass('hide')
|
||||
|
||||
set_type: (type) ->
|
||||
|
|
@ -533,14 +571,92 @@ class Edit extends App.Controller
|
|||
@type = type
|
||||
typeIcon.addClass @type
|
||||
|
||||
show_controls: =>
|
||||
@el.addClass('mode--edit')
|
||||
# scroll to bottom
|
||||
@el.scrollParent().scrollTop(99999)
|
||||
detect_empty_textarea: =>
|
||||
if !@textarea.val()
|
||||
@add_textarea_catcher()
|
||||
else
|
||||
@remove_textarea_catcher()
|
||||
|
||||
hide_controls: =>
|
||||
if !@el.find('textarea').val()
|
||||
@el.removeClass('mode--edit')
|
||||
open_textarea: =>
|
||||
if !@textareaCatcher and !@textarea.val()
|
||||
@el.addClass('is-open')
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.open - 38 }px"
|
||||
marginBottom: 38
|
||||
options:
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
# scroll to bottom
|
||||
@textarea.velocity "scroll",
|
||||
container: @textarea.scrollParent()
|
||||
offset: 99999
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
queue: false
|
||||
|
||||
@editControlItem.velocity "transition.slideRightIn",
|
||||
duration: 300
|
||||
stagger: 50
|
||||
drag: true
|
||||
|
||||
# move attachment text to the left bottom (bottom happens automatically)
|
||||
|
||||
@attachmentHolder.velocity
|
||||
properties:
|
||||
translateX: -@attachmentText.position().left + "px"
|
||||
options:
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
@bubblePlaceholderHint.velocity
|
||||
properties:
|
||||
opacity: 0
|
||||
options:
|
||||
duration: 300
|
||||
|
||||
@add_textarea_catcher()
|
||||
|
||||
add_textarea_catcher: ->
|
||||
@textareaCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @close_textarea
|
||||
zIndexScale: 4
|
||||
|
||||
remove_textarea_catcher: ->
|
||||
return if !@textareaCatcher
|
||||
@textareaCatcher.remove()
|
||||
@textareaCatcher = null
|
||||
|
||||
close_textarea: =>
|
||||
@remove_textarea_catcher()
|
||||
if !@textarea.val()
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.closed }px"
|
||||
marginBottom: 0
|
||||
options:
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
complete: => @el.removeClass('is-open')
|
||||
|
||||
@attachmentHolder.velocity
|
||||
properties:
|
||||
translateX: 0
|
||||
options:
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
@bubblePlaceholderHint.velocity
|
||||
properties:
|
||||
opacity: 1
|
||||
options:
|
||||
duration: 300
|
||||
|
||||
@editControlItem.css('display', 'none')
|
||||
|
||||
autosaveStop: =>
|
||||
@clearInterval( 'autosave' )
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class App.WidgetTemplate extends App.ControllerDrox
|
|||
# insert data
|
||||
@html @template(
|
||||
file: 'widget/template'
|
||||
header: 'Templates'
|
||||
header: 'Select Template:'
|
||||
params:
|
||||
template: template
|
||||
)
|
||||
|
|
|
|||
4
app/assets/javascripts/app/lib/animations/velocity.min.js
vendored
Normal file
4
app/assets/javascripts/app/lib/animations/velocity.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
672
app/assets/javascripts/app/lib/animations/velocity.ui.js
Normal file
672
app/assets/javascripts/app/lib/animations/velocity.ui.js
Normal file
|
|
@ -0,0 +1,672 @@
|
|||
/**********************
|
||||
Velocity UI Pack
|
||||
**********************/
|
||||
|
||||
/* VelocityJS.org UI Pack (4.1.4). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
|
||||
|
||||
;(function (factory) {
|
||||
/* CommonJS module. */
|
||||
if (typeof module === "object" && typeof module.exports === "object") {
|
||||
module.exports = factory();
|
||||
/* AMD module. */
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define([ "velocity" ], factory);
|
||||
/* Browser globals. */
|
||||
} else {
|
||||
factory();
|
||||
}
|
||||
}(function() {
|
||||
return function (global, window, document, undefined) {
|
||||
|
||||
/**************
|
||||
Checks
|
||||
**************/
|
||||
|
||||
if (!global.Velocity || !global.Velocity.Utilities) {
|
||||
window.console && console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.");
|
||||
return;
|
||||
} else if (!global.Velocity.version || (global.Velocity.version.major <= 0 && global.Velocity.version.minor <= 11 && global.Velocity.version.patch < 8)) {
|
||||
var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";
|
||||
|
||||
alert(abortError);
|
||||
throw new Error(abortError);
|
||||
}
|
||||
|
||||
/******************
|
||||
Register UI
|
||||
******************/
|
||||
|
||||
global.Velocity.RegisterUI = function (effectName, properties) {
|
||||
/* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */
|
||||
function animateParentHeight (elements, direction, totalDuration, stagger) {
|
||||
var totalHeightDelta = 0,
|
||||
parentNode;
|
||||
|
||||
/* Sum the total height (including padding and margin) of all targeted elements. */
|
||||
global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
if (stagger) {
|
||||
/* Increase the totalDuration by the successive delay amounts produced by the stagger option. */
|
||||
totalDuration += i * stagger;
|
||||
}
|
||||
|
||||
parentNode = element.parentNode;
|
||||
|
||||
global.Velocity.Utilities.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) {
|
||||
totalHeightDelta += parseFloat(global.Velocity.CSS.getPropertyValue(element, property));
|
||||
});
|
||||
});
|
||||
|
||||
/* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */
|
||||
global.Velocity.animate(
|
||||
parentNode,
|
||||
{ height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta },
|
||||
{ queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1) }
|
||||
);
|
||||
}
|
||||
|
||||
/* Register a custom sequence for each effect. */
|
||||
global.Velocity.Sequences[effectName] = function (element, sequenceOptions, elementsIndex, elementsSize, elements, promiseData) {
|
||||
var finalElement = (elementsIndex === elementsSize - 1);
|
||||
|
||||
/* Iterate through each effect's call array. */
|
||||
for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) {
|
||||
var call = properties.calls[callIndex],
|
||||
propertyMap = call[0],
|
||||
sequenceDuration = (sequenceOptions.duration || properties.defaultDuration || 1000),
|
||||
durationPercentage = call[1],
|
||||
callOptions = call[2] || {},
|
||||
opts = {};
|
||||
|
||||
/* Assign the whitelisted per-call options. */
|
||||
opts.duration = sequenceDuration * (durationPercentage || 1);
|
||||
opts.queue = sequenceOptions.queue || "";
|
||||
opts.easing = callOptions.easing || "ease";
|
||||
opts.delay = callOptions.delay || 0;
|
||||
opts._cacheValues = callOptions._cacheValues || true;
|
||||
|
||||
/* Special processing for the first effect call. */
|
||||
if (callIndex === 0) {
|
||||
/* If a delay was passed into the sequence, combine it with the first call's delay. */
|
||||
opts.delay += (sequenceOptions.delay || 0);
|
||||
|
||||
if (elementsIndex === 0) {
|
||||
opts.begin = function() {
|
||||
/* Only trigger a begin callback on the first effect call with the first element in the set. */
|
||||
sequenceOptions.begin && sequenceOptions.begin.call(elements, elements);
|
||||
|
||||
/* Only trigger animateParentHeight() if we're using an In/Out transition. */
|
||||
var direction = effectName.match(/(In|Out)$/);
|
||||
if (sequenceOptions.animateParentHeight && direction) {
|
||||
animateParentHeight(elements, direction[0], sequenceDuration + opts.delay, sequenceOptions.stagger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */
|
||||
if (sequenceOptions.display !== null) {
|
||||
if (sequenceOptions.display !== undefined && sequenceOptions.display !== "none") {
|
||||
opts.display = sequenceOptions.display;
|
||||
} else if (/In$/.test(effectName)) {
|
||||
/* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */
|
||||
var defaultDisplay = global.Velocity.CSS.Values.getDisplayType(element);
|
||||
opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay;
|
||||
}
|
||||
}
|
||||
|
||||
if (sequenceOptions.visibility && sequenceOptions.visibility !== "hidden") {
|
||||
opts.visibility = sequenceOptions.visibility;
|
||||
}
|
||||
}
|
||||
|
||||
/* Special processing for the last effect call. */
|
||||
if (callIndex === properties.calls.length - 1) {
|
||||
/* Append promise resolving onto the user's sequence callback. */
|
||||
function injectFinalCallbacks () {
|
||||
if ((sequenceOptions.display === undefined || sequenceOptions.display === "none") && /Out$/.test(effectName)) {
|
||||
global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
global.Velocity.CSS.setPropertyValue(element, "display", "none");
|
||||
});
|
||||
}
|
||||
|
||||
sequenceOptions.complete && sequenceOptions.complete.call(elements, elements);
|
||||
|
||||
if (promiseData) {
|
||||
promiseData.resolver(elements || element);
|
||||
}
|
||||
}
|
||||
|
||||
opts.complete = function() {
|
||||
if (properties.reset) {
|
||||
for (var resetProperty in properties.reset) {
|
||||
var resetValue = properties.reset[resetProperty];
|
||||
|
||||
/* Format each non-array value in the reset property map to [ value, value ] so that changes apply
|
||||
immediately and DOM querying is avoided (via forcefeeding). */
|
||||
if (typeof resetValue === "string" || typeof resetValue === "number") {
|
||||
properties.reset[resetProperty] = [ properties.reset[resetProperty], properties.reset[resetProperty] ];
|
||||
}
|
||||
}
|
||||
|
||||
/* So that the reset values are applied instantly upon the next rAF tick, use a zero duration and parallel queueing. */
|
||||
var resetOptions = { duration: 0, queue: false };
|
||||
|
||||
/* Since the reset option uses up the complete callback, we trigger the user's complete callback at the end of ours. */
|
||||
if (finalElement) {
|
||||
resetOptions.complete = injectFinalCallbacks;
|
||||
}
|
||||
|
||||
global.Velocity.animate(element, properties.reset, resetOptions);
|
||||
/* Only trigger the user's complete callback on the last effect call with the last element in the set. */
|
||||
} else if (finalElement) {
|
||||
injectFinalCallbacks();
|
||||
}
|
||||
};
|
||||
|
||||
if (sequenceOptions.visibility === "hidden") {
|
||||
opts.visibility = sequenceOptions.visibility;
|
||||
}
|
||||
}
|
||||
|
||||
global.Velocity.animate(element, propertyMap, opts);
|
||||
}
|
||||
};
|
||||
|
||||
/* Return the Velocity object so that RegisterUI calls can be chained. */
|
||||
return global.Velocity;
|
||||
};
|
||||
|
||||
/*********************
|
||||
Packaged Effects
|
||||
*********************/
|
||||
|
||||
/* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */
|
||||
/* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */
|
||||
global.Velocity.RegisterUI.packagedEffects =
|
||||
{
|
||||
/* Animate.css */
|
||||
"callout.bounce": {
|
||||
defaultDuration: 550,
|
||||
calls: [
|
||||
[ { translateY: -30 }, 0.25 ],
|
||||
[ { translateY: 0 }, 0.125 ],
|
||||
[ { translateY: -15 }, 0.125 ],
|
||||
[ { translateY: 0 }, 0.25 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"callout.shake": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { translateX: -11 }, 0.125 ],
|
||||
[ { translateX: 11 }, 0.125 ],
|
||||
[ { translateX: -11 }, 0.125 ],
|
||||
[ { translateX: 11 }, 0.125 ],
|
||||
[ { translateX: -11 }, 0.125 ],
|
||||
[ { translateX: 11 }, 0.125 ],
|
||||
[ { translateX: -11 }, 0.125 ],
|
||||
[ { translateX: 0 }, 0.125 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"callout.flash": {
|
||||
defaultDuration: 1100,
|
||||
calls: [
|
||||
[ { opacity: [ 0, "easeInOutQuad", 1 ] }, 0.25 ],
|
||||
[ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ],
|
||||
[ { opacity: [ 0, "easeInOutQuad" ] }, 0.25 ],
|
||||
[ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"callout.pulse": {
|
||||
defaultDuration: 825,
|
||||
calls: [
|
||||
[ { scaleX: 1.1, scaleY: 1.1 }, 0.50 ],
|
||||
[ { scaleX: 1, scaleY: 1 }, 0.50 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"callout.swing": {
|
||||
defaultDuration: 950,
|
||||
calls: [
|
||||
[ { rotateZ: 15 }, 0.20 ],
|
||||
[ { rotateZ: -10 }, 0.20 ],
|
||||
[ { rotateZ: 5 }, 0.20 ],
|
||||
[ { rotateZ: -5 }, 0.20 ],
|
||||
[ { rotateZ: 0 }, 0.20 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"callout.tada": {
|
||||
defaultDuration: 1000,
|
||||
calls: [
|
||||
[ { scaleX: 0.9, scaleY: 0.9, rotateZ: -3 }, 0.10 ],
|
||||
[ { scaleX: 1.1, scaleY: 1.1, rotateZ: 3 }, 0.10 ],
|
||||
[ { scaleX: 1.1, scaleY: 1.1, rotateZ: -3 }, 0.10 ],
|
||||
[ "reverse", 0.125 ],
|
||||
[ "reverse", 0.125 ],
|
||||
[ "reverse", 0.125 ],
|
||||
[ "reverse", 0.125 ],
|
||||
[ "reverse", 0.125 ],
|
||||
[ { scaleX: 1, scaleY: 1, rotateZ: 0 }, 0.20 ]
|
||||
]
|
||||
},
|
||||
"transition.fadeIn": {
|
||||
defaultDuration: 500,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ] } ]
|
||||
]
|
||||
},
|
||||
"transition.fadeOut": {
|
||||
defaultDuration: 500,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ] } ]
|
||||
]
|
||||
},
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipXIn": {
|
||||
defaultDuration: 700,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateY: [ 0, -55 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0 }
|
||||
},
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipXOut": {
|
||||
defaultDuration: 700,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateY: 55 } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, rotateY: 0 }
|
||||
},
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipYIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateX: [ 0, -45 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0 }
|
||||
},
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipYOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateX: 25 } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, rotateX: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipBounceXIn": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateY: [ -10, 90 ] }, 0.50 ],
|
||||
[ { opacity: 0.80, rotateY: 10 }, 0.25 ],
|
||||
[ { opacity: 1, rotateY: 0 }, 0.25 ]
|
||||
],
|
||||
reset: { transformPerspective: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipBounceXOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateY: -10 }, 0.50 ],
|
||||
[ { opacity: 0, rotateY: 90 }, 0.50 ]
|
||||
],
|
||||
reset: { transformPerspective: 0, rotateY: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipBounceYIn": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateX: [ -10, 90 ] }, 0.50 ],
|
||||
[ { opacity: 0.80, rotateX: 10 }, 0.25 ],
|
||||
[ { opacity: 1, rotateX: 0 }, 0.25 ]
|
||||
],
|
||||
reset: { transformPerspective: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.flipBounceYOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateX: -15 }, 0.50 ],
|
||||
[ { opacity: 0, rotateX: 90 }, 0.50 ]
|
||||
],
|
||||
reset: { transformPerspective: 0, rotateX: 0 }
|
||||
},
|
||||
/* Magic.css */
|
||||
"transition.swoopIn": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "100%", "50%" ], transformOriginY: [ "100%", "100%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], translateX: [ 0, -700 ], translateZ: 0 } ]
|
||||
],
|
||||
reset: { transformOriginX: "50%", transformOriginY: "50%" }
|
||||
},
|
||||
/* Magic.css */
|
||||
"transition.swoopOut": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "100%" ], transformOriginY: [ "100%", "100%" ], scaleX: 0, scaleY: 0, translateX: -700, translateZ: 0 } ]
|
||||
],
|
||||
reset: { transformOriginX: "50%", transformOriginY: "50%", scaleX: 1, scaleY: 1, translateX: 0 }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
|
||||
"transition.whirlIn": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] } ]
|
||||
]
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
|
||||
"transition.whirlOut": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 } ]
|
||||
],
|
||||
reset: { scaleX: 1, scaleY: 1, rotateY: 0 }
|
||||
},
|
||||
"transition.shrinkIn": {
|
||||
defaultDuration: 700,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 1.5 ], scaleY: [ 1, 1.5 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.shrinkOut": {
|
||||
defaultDuration: 650,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 1.3, scaleY: 1.3, translateZ: 0 } ]
|
||||
],
|
||||
reset: { scaleX: 1, scaleY: 1 }
|
||||
},
|
||||
"transition.expandIn": {
|
||||
defaultDuration: 700,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0.625 ], scaleY: [ 1, 0.625 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.expandOut": {
|
||||
defaultDuration: 700,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0.5, scaleY: 0.5, translateZ: 0 } ]
|
||||
],
|
||||
reset: { scaleX: 1, scaleY: 1 }
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], scaleX: [ 1.05, 0.3 ], scaleY: [ 1.05, 0.3 ] }, 0.40 ],
|
||||
[ { scaleX: 0.9, scaleY: 0.9, translateZ: 0 }, 0.20 ],
|
||||
[ { scaleX: 1, scaleY: 1 }, 0.50 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { scaleX: 0.95, scaleY: 0.95 }, 0.40 ],
|
||||
[ { scaleX: 1.1, scaleY: 1.1, translateZ: 0 }, 0.40 ],
|
||||
[ { opacity: [ 0, 1 ], scaleX: 0.3, scaleY: 0.3 }, 0.20 ]
|
||||
],
|
||||
reset: { scaleX: 1, scaleY: 1 }
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceUpIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateY: [ -30, 1000 ] }, 0.60, { easing: "easeOutCirc" } ],
|
||||
[ { translateY: 10 }, 0.20 ],
|
||||
[ { translateY: 0 }, 0.20 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceUpOut": {
|
||||
defaultDuration: 1000,
|
||||
calls: [
|
||||
[ { translateY: 20 }, 0.20 ],
|
||||
[ { opacity: [ 0, "easeInCirc", 1 ], translateY: -1000 }, 0.80 ]
|
||||
],
|
||||
reset: { translateY: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceDownIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateY: [ 30, -1000 ] }, 0.60, { easing: "easeOutCirc" } ],
|
||||
[ { translateY: -10 }, 0.20 ],
|
||||
[ { translateY: 0 }, 0.20 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceDownOut": {
|
||||
defaultDuration: 1000,
|
||||
calls: [
|
||||
[ { translateY: -20 }, 0.20 ],
|
||||
[ { opacity: [ 0, "easeInCirc", 1 ], translateY: 1000 }, 0.80 ]
|
||||
],
|
||||
reset: { translateY: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceLeftIn": {
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateX: [ 30, -1250 ] }, 0.60, { easing: "easeOutCirc" } ],
|
||||
[ { translateX: -10 }, 0.20 ],
|
||||
[ { translateX: 0 }, 0.20 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceLeftOut": {
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { translateX: 30 }, 0.20 ],
|
||||
[ { opacity: [ 0, "easeInCirc", 1 ], translateX: -1250 }, 0.80 ]
|
||||
],
|
||||
reset: { translateX: 0 }
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceRightIn": {
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] }, 0.60, { easing: "easeOutCirc" } ],
|
||||
[ { translateX: 10 }, 0.20 ],
|
||||
[ { translateX: 0 }, 0.20 ]
|
||||
]
|
||||
},
|
||||
/* Animate.css */
|
||||
"transition.bounceRightOut": {
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { translateX: -30 }, 0.20 ],
|
||||
[ { opacity: [ 0, "easeInCirc", 1 ], translateX: 1250 }, 0.80 ]
|
||||
],
|
||||
reset: { translateX: 0 }
|
||||
},
|
||||
"transition.slideUpIn": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateY: [ 0, 20 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideUpOut": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateY: -20, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateY: 0 }
|
||||
},
|
||||
"transition.slideDownIn": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateY: [ 0, -20 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideDownOut": {
|
||||
defaultDuration: 900,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateY: 20, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateY: 0 }
|
||||
},
|
||||
"transition.slideLeftIn": {
|
||||
defaultDuration: 1000,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateX: [ 0, -20 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideLeftOut": {
|
||||
defaultDuration: 1050,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateX: -20, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateX: 0 }
|
||||
},
|
||||
"transition.slideRightIn": {
|
||||
defaultDuration: 1000,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateX: [ 0, 20 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideRightOut": {
|
||||
defaultDuration: 1050,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateX: 20, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateX: 0 }
|
||||
},
|
||||
"transition.slideUpBigIn": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateY: [ 0, 75 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideUpBigOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateY: -75, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateY: 0 }
|
||||
},
|
||||
"transition.slideDownBigIn": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateY: [ 0, -75 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideDownBigOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateY: 75, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateY: 0 }
|
||||
},
|
||||
"transition.slideLeftBigIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateX: [ 0, -75 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideLeftBigOut": {
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateX: -75, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateX: 0 }
|
||||
},
|
||||
"transition.slideRightBigIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], translateX: [ 0, 75 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.slideRightBigOut": {
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], translateX: 75, translateZ: 0 } ]
|
||||
],
|
||||
reset: { translateX: 0 }
|
||||
},
|
||||
/* Magic.css */
|
||||
"transition.perspectiveUpIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: [ 0, -180 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveUpOut": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: -180 } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveDownIn": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: [ 0, 180 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveDownOut": {
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: 180 } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveLeftIn": {
|
||||
defaultDuration: 950,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: [ 0, -180 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveLeftOut": {
|
||||
defaultDuration: 950,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: -180 } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveRightIn": {
|
||||
defaultDuration: 950,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: [ 0, 180 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
"transition.perspectiveRightOut": {
|
||||
defaultDuration: 950,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: 180 } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 }
|
||||
}
|
||||
};
|
||||
|
||||
/* Register the packaged effects. */
|
||||
for (var effectName in global.Velocity.RegisterUI.packagedEffects) {
|
||||
global.Velocity.RegisterUI(effectName, global.Velocity.RegisterUI.packagedEffects[effectName]);
|
||||
}
|
||||
}((window.jQuery || window.Zepto || window), window, document);
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +1,211 @@
|
|||
<div class="main flex">
|
||||
<div class="create-new horizontal flex">
|
||||
<div class="create-new main flex">
|
||||
<div class="box">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( 'Create New Ticket' ) %></h1>
|
||||
</div>
|
||||
|
||||
<div class="page-header">
|
||||
<h1><%- @T( 'New Ticket' ) %> <small>(<%- @T( @title ) %>)<% if @admin: %> <a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a><% end %></small></h1>
|
||||
<ul class="horizontal tabs type-tabs">
|
||||
|
||||
<li class="tab u-textTruncate active">
|
||||
<div class="white email channel icon"></div>
|
||||
<%- @T( 'E-Mail' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray received-calls channel icon"></div>
|
||||
<%- @T( 'Received Call' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray outbound-calls channel icon"></div>
|
||||
<%- @T( 'Outbound Call' ) %>
|
||||
|
||||
</ul>
|
||||
|
||||
<form role="form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer"><%- @T('Customer') %></label>
|
||||
<input class="form-control" id="customer" placeholder="<%- @T('Enter Person or Organisation/Company') %>">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject"><%- @T('Subject') %></label>
|
||||
<input class="form-control" id="subject">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="text"><%- @T('Text') %></label>
|
||||
<textarea class="form-control" id="text" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="formset-inset">
|
||||
<div class="horizontal two-columns">
|
||||
<div class="form-group column">
|
||||
<label for="owner"><%- @T('Owner') %></label>
|
||||
<select class="form-control" id="owner">
|
||||
<option>Support -> Oliver Ruhm</option>
|
||||
<option>Engineering -> Web-Dev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="type"><%- @T('Type') %></label>
|
||||
<select class="form-control" id="type">
|
||||
<option>Inquiry</option>
|
||||
<option>Support</option>
|
||||
<option selected>Question</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="status"><%- @T('Status') %></label>
|
||||
<select class="form-control" id="status">
|
||||
<option selected>open</option>
|
||||
<option>closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="proprity"><%- @T('Priority') %></label>
|
||||
<select class="form-control" id="proprity">
|
||||
<option>low</option>
|
||||
<option selected>normal</option>
|
||||
<option>high</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tags"><%- @T('Tags') %></label>
|
||||
<input class="form-control" id="tags" placeholder="<%- @T('Tag hinzufügen') %>" value="New Website, Feedback">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="hidden" value="" name="article_type"/>
|
||||
<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 Ticket' ) %></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal form-large ticket-create">
|
||||
<input type="hidden" value="" name="article_type"/>
|
||||
<div class="ticket_create"></div>
|
||||
<div class="form-actions">
|
||||
<button type="reset" class="btn cancel"><%- @T( 'Cancel' ) %></button> <button type="submit" class="btn btn-primary submit"><%- @T( 'Create' ) %></button>
|
||||
<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>
|
||||
<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 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>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="widgets">
|
||||
<div class="customer_info"></div>
|
||||
<div class="ticket_template"></div>
|
||||
<div class="text_module"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<% for item in @items: %>
|
||||
<li <% if item.active: %>class="active"<% end %>>
|
||||
<a class="horizontal center" href="<%= item.target %>">
|
||||
<span class="local contain-text"><%- @T(item.name) %></span>
|
||||
<span class="local u-textTruncate"><%- @T(item.name) %></span>
|
||||
<span class="badge"><%= item.count %></span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
<div class="stat-amount"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-label contain-text">My handling time: 25 minutes</div>
|
||||
<div class="stat-detail contain-text">Average: 13%</div>
|
||||
<div class="stat-label u-textTruncate">My handling time: 25 minutes</div>
|
||||
<div class="stat-detail u-textTruncate">Average: 13%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
<div class="stat-graphic flex horizontal centered">
|
||||
<div class="mood icon bad-state"></div>
|
||||
</div>
|
||||
<div class="stat-label contain-text">3% of my tickets escalated.</div>
|
||||
<div class="stat-detail contain-text">Average: 17%</div>
|
||||
<div class="stat-label u-textTruncate">3% of my tickets escalated.</div>
|
||||
<div class="stat-detail u-textTruncate">Average: 17%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
|
@ -90,8 +90,8 @@
|
|||
</div>
|
||||
<div class="stat-all-tickets icon"></div>
|
||||
</div>
|
||||
<div class="stat-label contain-text">Tickets of my Group: 78 of 234</div>
|
||||
<div class="stat-detail contain-text">Average: 22%</div>
|
||||
<div class="stat-label u-textTruncate">Tickets of my Group: 78 of 234</div>
|
||||
<div class="stat-detail u-textTruncate">Average: 22%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
|
@ -100,8 +100,8 @@
|
|||
<div class="stat-graphic flex horizontal centered">
|
||||
<div class="in-process icon supergood-state"></div>
|
||||
</div>
|
||||
<div class="stat-label contain-text">74% are currently in process</div>
|
||||
<div class="stat-detail contain-text">Average: 62%</div>
|
||||
<div class="stat-label u-textTruncate">74% are currently in process</div>
|
||||
<div class="stat-detail u-textTruncate">Average: 62%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
<div class="stat-graphic flex horizontal centered">
|
||||
<div class="reopening icon ok-state"></div>
|
||||
</div>
|
||||
<div class="stat-label contain-text">7% are being reopened</div>
|
||||
<div class="stat-detail contain-text">Average: 6%</div>
|
||||
<div class="stat-label u-textTruncate">7% are being reopened</div>
|
||||
<div class="stat-detail u-textTruncate">Average: 6%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="drox">
|
||||
<div class="drox-header">
|
||||
<h3>
|
||||
<h2>
|
||||
<%- @T( @header ) %>
|
||||
<% if @edit: %>
|
||||
<a href="" data-type="edit" class="pull-right glyphicon glyphicon-edit" title="<%- @Ti( 'edit' ) %>"></a>
|
||||
<% end %>
|
||||
</h3>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="drox-body">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="fullHeight vertical center justified">
|
||||
<div class="hero-unit">
|
||||
<ol class="horizontal tabs progress-tabs tabs-condensed">
|
||||
<li class="create_admin tab contain-text active"><%- @T( 'Create Admin' ) %></li>
|
||||
<li class="invite_agents tab contain-text"><%- @T( 'Invite Agents' ) %></li>
|
||||
<li class="configure_channels tab contain-text"><%- @T( 'Configure Channels' ) %></li>
|
||||
<li class="create_admin tab u-textTruncate active"><%- @T( 'Create Admin' ) %></li>
|
||||
<li class="invite_agents tab u-textTruncate"><%- @T( 'Invite Agents' ) %></li>
|
||||
<li class="configure_channels tab u-textTruncate"><%- @T( 'Configure Channels' ) %></li>
|
||||
</ol>
|
||||
<% if @master_user: %>
|
||||
<div class="master_user hero-left">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<ul class="nav navbar-nav navbar-items-menu"></ul>
|
||||
|
||||
<div class="tasks flex"></div>
|
||||
<div class="tasks tasks-navigation flex"></div>
|
||||
|
||||
<% if !_.isEmpty(@user): %>
|
||||
<!--<a href="#bell" class="glyphicon glyphicon-bell"></a>-->
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<% end %>
|
||||
<li class="<% if @active_tab[item.target] : %>active<% end %>">
|
||||
<a href="<%= item.target %>" class="horizontal">
|
||||
<span class="flex contain-text"><%- @T( item.name ) %></span>
|
||||
<span class="flex u-textTruncate"><%- @T( item.name ) %></span>
|
||||
<% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %></span><% end %>
|
||||
<% if item.iconClass: %><span class="<%= item.iconClass %> icon"></span><% end %>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<li>
|
||||
<a href="<%- item.url %>" class="<%= item.class %> horizontal center icon-switch" data-id="<%= item.id %>">
|
||||
<div class="<%= item.iconClass %> icon"></div>
|
||||
<div class="flex contain-text"><%= item.display %></div>
|
||||
<div class="flex u-textTruncate"><%= item.display %></div>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -11,25 +11,25 @@
|
|||
<%- @P( @ticket.customer ) %>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="horizontal two-columns wrap">
|
||||
<div class="horizontal two-columns">
|
||||
<div class="column">
|
||||
<h3>#</h3>
|
||||
<div class="contain-text"><%- @P( @ticket.number ) %></div>
|
||||
<div class="u-textTruncate"><%- @P( @ticket.number ) %></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3><%- @T( 'State' ) %></h3>
|
||||
<div class="contain-text"><%- @P( @ticket.state.name ) %></div>
|
||||
<div class="u-textTruncate"><%- @P( @ticket.state.name ) %></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3><%- @T( 'Priority' ) %></h3>
|
||||
<div class="contain-text"><%- @T( @ticket.priority.name ) %></div>
|
||||
<div class="u-textTruncate"><%- @T( @ticket.priority.name ) %></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3><%- @T( 'Age' ) %></h3>
|
||||
<div class="contain-text"><%- @P( @ticket.humanTime ) %></div>
|
||||
<div class="u-textTruncate"><%- @P( @ticket.humanTime ) %></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3><%- @T( 'Group' ) %></h3>
|
||||
<div class="contain-text"><%- @P( @ticket.group ) %></div>
|
||||
<div class="u-textTruncate"><%- @P( @ticket.group ) %></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="icon-holder centered">
|
||||
<div class="<%= item.data.iconClass %> icon<% if item.task.notify: %> modified<% end %>"></div>
|
||||
</div>
|
||||
<div class="name contain-text flex"><%= item.data.head %></div>
|
||||
<div class="name u-textTruncate flex"><%= item.data.head %></div>
|
||||
<div class="close-task button horizontal centered">
|
||||
<div class="close close-task icon" title="<%- @T('close') %>" data-type="close"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="fit ticket-zoom vertical">
|
||||
<div class="flex relative">
|
||||
<div class="flex u-positionOrigin">
|
||||
<div class="main no-padding">
|
||||
<div class="flex-overflow sidebar-tabs--spacing">
|
||||
<div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
|
||||
<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>
|
||||
|
|
@ -23,17 +23,17 @@
|
|||
|
||||
<div class="ticket-article"></div>
|
||||
|
||||
</div>
|
||||
<div class="ticket-edit is-public"></div>
|
||||
|
||||
<div class="ticket-edit state--public sidebar-tabs--spacing"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar-holder vertical">
|
||||
<div class="sidebar bottom-form-shadow flex">
|
||||
<div class="horizontal center">
|
||||
<h2 class="flex contain-text"></h2>
|
||||
<div class="close-sidebar centered clickable">
|
||||
<h2 class="flex u-textTruncate"></h2>
|
||||
<div class="close-sidebar centered u-clickable">
|
||||
<div class="arrow-right icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
<form class="bottom-form form-inline horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_state_id123" class="input-group-addon clickable">State</label>
|
||||
<label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
|
||||
<select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
|
||||
<option value="4">closed</option>
|
||||
<option value="1" selected="">new</option>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="form-group is-changed">
|
||||
<label for="update_ticket_1_priority_id123" class="input-group-addon clickable">Priority</label>
|
||||
<label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
|
||||
<select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
|
||||
<option value="1">1 low</option>
|
||||
<option value="2" selected="">2 normal</option>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_group_id123" class="input-group-addon clickable">Group</label>
|
||||
<label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
|
||||
<select id="update_ticket_1_group_id123" class="form-control" name="group_id">
|
||||
<option value="4">FillGroup::450863</option>
|
||||
<option value="3">FillGroup::918672</option>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_owner_id123" class="input-group-addon clickable">Owner</label>
|
||||
<label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
|
||||
<select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
|
||||
<option value="">-</option>
|
||||
<option value="3">Felix Niklas</option>
|
||||
|
|
|
|||
|
|
@ -7,33 +7,33 @@
|
|||
<div class="article-meta top">
|
||||
<% if article.from: %>
|
||||
<div class="horizontal article-meta-row" title="<%- @Ti( 'From' ) %>: <%= article.from %>">
|
||||
<div class="article-meta-key contain-text"><%- @T( 'From' ) %></div>
|
||||
<div class="article-meta-value flex contain-text"><%= article.from %></div>
|
||||
<div class="article-meta-key u-textTruncate"><%- @T( 'From' ) %></div>
|
||||
<div class="article-meta-value flex u-textTruncate"><%= article.from %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if article.to: %>
|
||||
<div class="horizontal article-meta-row" title="<%- @Ti( 'To' ) %>: <%= article.to %>">
|
||||
<div class="article-meta-key contain-text"><%- @T( 'To' ) %></div>
|
||||
<div class="article-meta-value flex contain-text"><%= article.to %></div>
|
||||
<div class="article-meta-key u-textTruncate"><%- @T( 'To' ) %></div>
|
||||
<div class="article-meta-value flex u-textTruncate"><%= article.to %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if article.cc: %>
|
||||
<div class="horizontal article-meta-row" title="<%- @Ti( 'Kopie' ) %>: <%= article.cc %>">
|
||||
<div class="article-meta-key contain-text"><%- @T( 'Kopie' ) %></div>
|
||||
<div class="article-meta-value flex contain-text"><%= article.cc %></div>
|
||||
<div class="article-meta-key u-textTruncate"><%- @T( 'Kopie' ) %></div>
|
||||
<div class="article-meta-value flex u-textTruncate"><%= article.cc %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if article.subject: %>
|
||||
<div class="horizontal article-meta-row" title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>">
|
||||
<div class="article-meta-key contain-text"><%- @T( 'Subject' ) %></div>
|
||||
<div class="article-meta-value flex contain-text"><%= article.subject %></div>
|
||||
<div class="article-meta-key u-textTruncate"><%- @T( 'Subject' ) %></div>
|
||||
<div class="article-meta-value flex u-textTruncate"><%= article.subject %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-content horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
|
||||
<div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
|
||||
<div class="avatar user-popover" data-placement="<% if article.sender.name isnt 'Agent': %>left<% else: %>right<% end %>" data-id="<%= article.created_by_id %>" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
|
||||
<div class="flex bubble-gap text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
|
||||
</div>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<% if article.actions: %>
|
||||
<div class="article-actions horizontal stretch">
|
||||
<% for action in article.actions: %>
|
||||
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action clickable<% if action.class: %> <%= action.class %><% end %>">
|
||||
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
|
||||
<span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,91 @@
|
|||
<form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="bubble-grid horizontal">
|
||||
<div class="vertical center">
|
||||
<div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="edit-controls">
|
||||
<div class="dark pop-select">
|
||||
<div class="pop-selected clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<div class="pop-selectable clickable centered" data-value="email">
|
||||
<div class="white email channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable clickable centered" data-value="facebook">
|
||||
<div class="white facebook channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable clickable centered" data-value="twitter">
|
||||
<div class="white twitter channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable clickable centered" data-value="phone">
|
||||
<div class="white phone channel icon"></div>
|
||||
</div>
|
||||
<div class="vertical center edit-controls">
|
||||
<div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="dark pop-select zIndex-7 edit-control-item">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<div class="pop-selectable u-clickable centered" data-value="email">
|
||||
<div class="white email channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="facebook">
|
||||
<div class="white facebook channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="twitter">
|
||||
<div class="white twitter channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="phone">
|
||||
<div class="white phone channel icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="recipient-picker clickable horizontal centered">
|
||||
</div>
|
||||
<div class="u-positionOrigin zIndex-7 edit-control-item">
|
||||
<div class="recipient-picker u-clickable horizontal centered">
|
||||
<div class="recipients icon"></div>
|
||||
<div class="recipient-count">3</div>
|
||||
<div class="recipient-list hide">
|
||||
<div class="list-arrow"></div>
|
||||
<div class="list-head horizontal">
|
||||
<%- @T('Recipients') %>
|
||||
<div class="align-right"><%- @T('type') %></div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
|
||||
<div class="list-entry-name flex">Hans Peter Baxxter</div>
|
||||
<div class="list-entry-type clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Julia Maier</div>
|
||||
<div class="list-entry-type clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Remo Batlogg</div>
|
||||
<div class="list-entry-type clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<form class="list-edit">
|
||||
<input type="email" class="list-entry" placeholder="<%- @T('Add recipients..') %>"></input>
|
||||
<input type="submit" tabindex="-1"></input>
|
||||
</form>
|
||||
</div>
|
||||
<div class="recipient-list hide">
|
||||
<div class="list-arrow"></div>
|
||||
<div class="list-head horizontal">
|
||||
<%- @T('Recipients') %>
|
||||
<div class="align-right"><%- @T('type') %></div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
|
||||
<div class="list-entry-name flex">Hans Peter Baxxter</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Julia Maier</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Remo Batlogg</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="list-edit">
|
||||
<input type="email" class="list-entry" placeholder="<%- @T('Add recipients..') %>"></input>
|
||||
<input type="submit" tabindex="-1"></input>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visibility-toggle zIndex-7 u-clickable edit-control-item">
|
||||
<div class="internal-visibility centered" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
<div class="public-visibility centered" title="<%- @T("set internal") %>">
|
||||
<div class="public visibility icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex article-content bubble-gap">
|
||||
<div class="flex article-content zIndex-5 bubble-gap">
|
||||
<div class="internal-border">
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<textarea></textarea>
|
||||
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-controls">
|
||||
<div class="horizontal justify-end center">
|
||||
<div class="visibility toggle clickable centered">
|
||||
<div class="internal-visibility">
|
||||
<div class="internal visibility icon"></div>
|
||||
<div class="visibility-label">internal</div>
|
||||
</div>
|
||||
<div class="public-visibility">
|
||||
<div class="public visibility icon"></div>
|
||||
<div class="visibility-label">public</div>
|
||||
</div>
|
||||
<textarea rows="1"></textarea>
|
||||
<!-- .text-bubble grows with textarea (and expanding clone) -->
|
||||
<div class="article-attachment js-attachment u-unclickable">
|
||||
<span class="bubble-placeholder-hint">Antwort eingeben oder</span>
|
||||
<span class="u-highlight u-clickable edit-upload-button js-attachment-text">
|
||||
Dateien wählen..
|
||||
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
|
||||
</span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@
|
|||
<li class="horizontal center">
|
||||
<span class="flex">Midi Notes</span>
|
||||
<span>3</span>
|
||||
<span class="tag-delete js-delete centered clickable">
|
||||
<span class="tag-delete js-delete centered u-clickable">
|
||||
<span class="delete icon"></span>
|
||||
</span>
|
||||
<li class="horizontal center">
|
||||
<span class="flex">Transitions</span>
|
||||
<span>23</span>
|
||||
<span class="tag-delete js-delete centered clickable">
|
||||
<span class="tag-delete js-delete centered u-clickable">
|
||||
<span class="delete icon"></span>
|
||||
</span>
|
||||
<li class="horizontal center">
|
||||
<span class="flex">New UI</span>
|
||||
<span>3</span>
|
||||
<span class="tag-delete js-delete centered clickable">
|
||||
<span class="tag-delete js-delete centered u-clickable">
|
||||
<span class="delete icon"></span>
|
||||
</span>
|
||||
</ul>
|
||||
<div class="text-muted js-newTag clickable">+ <%- @T('Add Tag') %></div>
|
||||
<div class="text-muted js-newTag u-clickable">+ <%- @T('Add Tag') %></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<div class="">
|
||||
<form>
|
||||
<div id="form-template"></div>
|
||||
<!--<button type="submit" class="btn btn-default" data-type="template_edit"><%- @T( 'Edit' ) %></button>-->
|
||||
<button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
|
||||
<button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
|
||||
</form>
|
||||
<br>
|
||||
<form>
|
||||
<fieldset>
|
||||
<label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
|
||||
<input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
|
||||
</fieldset>
|
||||
<button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
|
||||
</form>
|
||||
</div>
|
||||
<!--<form>
|
||||
<div id="form-template"></div>
|
||||
<button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
|
||||
<button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
|
||||
</form>
|
||||
<br>
|
||||
<form>
|
||||
<fieldset>
|
||||
<label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
|
||||
<input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
|
||||
</fieldset>
|
||||
<button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
|
||||
</form>-->
|
||||
<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>
|
||||
|
|
@ -8,7 +8,9 @@
|
|||
//= require ./app/lib/core/jquery-1.11.0.js
|
||||
//= require ./app/lib/core/jquery-ui-1.8.23.custom.min.js
|
||||
//= require ./app/lib/core/underscore-1.6.0.js
|
||||
//= require ./app/lib/core/jquery.velocity.min.js
|
||||
|
||||
//= require ./app/lib/animations/velocity.min.js
|
||||
//= require ./app/lib/animations/velocity.ui.js
|
||||
|
||||
//not_used= require_tree ./app/lib/spine
|
||||
//= require ./app/lib/spine/spine.coffee
|
||||
|
|
|
|||
|
|
@ -5,13 +5,106 @@ body {
|
|||
background: #2c2d36;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.create {
|
||||
color: hsl(145,51%,45%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #c6c6c5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: hsl(202,68%,54%);
|
||||
.u-highlight {
|
||||
color: hsl(194,90%,45%);
|
||||
}
|
||||
|
||||
.u-unclickable {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.u-clickable {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.u-textTruncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.u-positionOrigin {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zIndex-1,
|
||||
.zIndex-2,
|
||||
.zIndex-3,
|
||||
.zIndex-4,
|
||||
.zIndex-5,
|
||||
.zIndex-6,
|
||||
.zIndex-7,
|
||||
.zIndex-8,
|
||||
.zIndex-9,
|
||||
.zIndex-10 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zIndex-1 {
|
||||
z-index: 100;
|
||||
}
|
||||
.zIndex-2 {
|
||||
z-index: 200;
|
||||
}
|
||||
.zIndex-3 {
|
||||
z-index: 300;
|
||||
}
|
||||
.zIndex-4 {
|
||||
z-index: 400;
|
||||
}
|
||||
.zIndex-5 {
|
||||
z-index: 500;
|
||||
}
|
||||
.zIndex-6 {
|
||||
z-index: 600;
|
||||
}
|
||||
.zIndex-7 {
|
||||
z-index: 700;
|
||||
}
|
||||
.zIndex-8 {
|
||||
z-index: 800;
|
||||
}
|
||||
.zIndex-9 {
|
||||
z-index: 900;
|
||||
}
|
||||
.zIndex-10 {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.clickCatcher {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.debug .clickCatcher {
|
||||
background: hsla(0,100%,50%,.13);
|
||||
}
|
||||
|
||||
.debug .clickCatcher + .clickCatcher {
|
||||
background: hsla(50,100%,50%,.13);
|
||||
}
|
||||
|
||||
#app > nav {
|
||||
|
|
@ -24,7 +117,6 @@ a[data-tooltip],
|
|||
time[data-tooltip],
|
||||
span[data-tooltip] {
|
||||
position: relative;
|
||||
z-index: 99000;
|
||||
}
|
||||
a[data-tooltip]:before,
|
||||
time[data-tooltip]:before,
|
||||
|
|
@ -76,6 +168,13 @@ span[data-tooltip]:hover:before {
|
|||
transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
|
||||
}
|
||||
|
||||
.form-control::-webkit-input-placeholder,
|
||||
.token-input::-webkit-input-placeholder { color: hsl(0,0%,80%); }
|
||||
.form-control::-moz-placeholder,
|
||||
.token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); }
|
||||
.form-control:-ms-input-placeholder,
|
||||
.token-input:-ms-input-placeholder { color: hsl(0,0%,80%); }
|
||||
|
||||
.glyphicon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -534,7 +633,7 @@ label {
|
|||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0 2px;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group + .form-group {
|
||||
|
|
@ -549,13 +648,15 @@ label {
|
|||
|
||||
.form-control {
|
||||
height: 41px;
|
||||
line-height: 22px;
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
.form-control:focus,
|
||||
.tokenfield.focus {
|
||||
box-shadow: none;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
|
@ -582,25 +683,6 @@ label {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-large {
|
||||
width: 85%;
|
||||
max-width: 700px;
|
||||
}
|
||||
.form-normal {
|
||||
width: 70%;
|
||||
max-width: 400px;
|
||||
}
|
||||
.form-small {
|
||||
width: 50%;
|
||||
max-width: 250px;
|
||||
}
|
||||
.form-normal fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sidebar fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-horizontal label {
|
||||
text-align: right;
|
||||
float: left;
|
||||
|
|
@ -752,7 +834,6 @@ label {
|
|||
}
|
||||
|
||||
ol.tabs {
|
||||
padding: 0;
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
|
|
@ -817,12 +898,6 @@ ol.tabs li {
|
|||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.contain-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
|
|
@ -1384,21 +1459,21 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.public.visibility.icon {
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
background-position: 0 -356px;
|
||||
}
|
||||
|
||||
.internal.visibility.icon {
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
background-position: -14px -356px;
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
background-position: -11px -356px;
|
||||
}
|
||||
|
||||
.recipients.icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background-position: -28px -358px;
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
background-position: -22px -359px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1418,6 +1493,10 @@ form a.standalone {
|
|||
margin: 0 5px;
|
||||
}
|
||||
|
||||
form a.standalone.align-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
|
@ -1435,36 +1514,6 @@ form a.standalone {
|
|||
padding: 14px 20px 20px;
|
||||
}
|
||||
|
||||
.drox {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.drox-header {
|
||||
padding: 8px 13px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333333;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.drox-header .glyphicon {
|
||||
display: none;
|
||||
}
|
||||
.drox-header:hover .glyphicon, .drox-header:focus .glyphicon {
|
||||
display: inline-block;
|
||||
color: #005580;
|
||||
text-decoration: none;
|
||||
}
|
||||
.drox-header h3 {
|
||||
font-size: 13px;
|
||||
font-weight: 200;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.drox-body {
|
||||
padding: 8px 13px;
|
||||
}
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
padding-top: 10px;
|
||||
|
|
@ -1483,12 +1532,6 @@ footer {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.customer_info {
|
||||
}
|
||||
|
||||
|
|
@ -1647,13 +1690,18 @@ footer {
|
|||
padding: 9px 24px 8px;
|
||||
}
|
||||
|
||||
.btn.primary,
|
||||
.btn-primary {
|
||||
color: white;
|
||||
background: #419ed7;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
||||
.btn-create,
|
||||
.btn-create:hover {
|
||||
color: white;
|
||||
background: hsl(145,51%,45%);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 260px;
|
||||
background: #26272e;
|
||||
|
|
@ -1704,39 +1752,68 @@ footer {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.tasks.tasks-standalone {
|
||||
background: none;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tasks-standalone .task {
|
||||
padding: 0;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.tasks-standalone .icon-holder {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.tasks-standalone .icon-holder .icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tasks-standalone .time {
|
||||
color: hsl(198,19%,72%);
|
||||
}
|
||||
|
||||
.tasks-standalone .task .priority.icon:after {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.task {
|
||||
height: 38px;
|
||||
padding: 10px 15px 7px 0;
|
||||
border-bottom: 1px solid #33363e;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task .name {
|
||||
color: #808080;
|
||||
}
|
||||
.tasks-navigation .task {
|
||||
height: 38px;
|
||||
border-bottom: 1px solid #33363e;
|
||||
}
|
||||
|
||||
.tasks-navigation .task:hover {
|
||||
background: #26272e;
|
||||
}
|
||||
|
||||
.tasks-navigation .name {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.tasks-navigation .icon-holder {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.tasks-navigation .icon-holder .icon {
|
||||
margin-right: 3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.task:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.task .icon-holder {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.task .icon-holder .icon {
|
||||
margin-right: 3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.task .modified.priority.icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.task:hover {
|
||||
background: #26272e;
|
||||
}
|
||||
|
||||
.task.active {
|
||||
background: #389ed9;
|
||||
}
|
||||
|
|
@ -2491,6 +2568,11 @@ footer {
|
|||
transition: 500ms;
|
||||
}
|
||||
|
||||
.ticket-zoom .flex-overflow {
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ticket-zoom.state--sidebar-hidden .main {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -2548,6 +2630,7 @@ footer {
|
|||
}
|
||||
|
||||
.article-content {
|
||||
position: relative;
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
||||
|
|
@ -2561,10 +2644,6 @@ footer {
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.article-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
background: #2c2d36;
|
||||
|
|
@ -2704,13 +2783,9 @@ footer {
|
|||
|
||||
.ticket-edit {
|
||||
margin-top: auto;
|
||||
margin-bottom: 37px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bottom-form {
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -2718,10 +2793,10 @@ footer {
|
|||
.ticket-edit .internal-border {
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
margin: -5px -5px 0;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.ticket-edit.state--internal .internal-border {
|
||||
.ticket-edit.is-internal .internal-border {
|
||||
background: repeating-linear-gradient(45deg, hsl(18,79%,89%), hsl(18,79%,89%) 5px, transparent 5px, transparent 6px);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
|
@ -2730,81 +2805,83 @@ footer {
|
|||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ticket-edit .edit-controls {
|
||||
.edit-controls {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edit-control-item {
|
||||
width: 38px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit .edit-controls {
|
||||
display: block;
|
||||
.edit-control-item:nth-child(3) {
|
||||
top: 74px;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable .icon {
|
||||
.edit-control-item:nth-child(4) {
|
||||
top: 110px;
|
||||
}
|
||||
|
||||
.edit-control-item:not(:last-child) {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.pop-selectable .icon {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable:hover .icon {
|
||||
.pop-selectable:hover .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ticket-edit button[type=submit] {
|
||||
margin: 5px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ticket-edit hr {
|
||||
border-color: #e6e6e6;
|
||||
.visibility-toggle > * {
|
||||
height: 36px;
|
||||
width: 38px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.visibility.toggle {
|
||||
margin-right: 10px;
|
||||
.visibility-toggle .icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.visibility.toggle,
|
||||
.visibility-toggle .icon,
|
||||
.recipient-picker {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.visibility-label {
|
||||
margin-left: 5px;
|
||||
min-width: 53px;
|
||||
line-height: 19px;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
.ticket-edit.is-public .internal-visibility {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.state--public .internal-visibility {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.state--internal .visibility.toggle {
|
||||
.ticket-edit.is-internal .visibility-toggle .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.state--internal .public-visibility {
|
||||
display: none;
|
||||
.ticket-edit.is-internal .public-visibility {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ticket-edit .recipient-picker {
|
||||
height: 38px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
.ticket-edit .recipient-picker.state--open {
|
||||
.ticket-edit .recipient-picker.is-open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recipient-picker .icon {
|
||||
margin-top: -8px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.recipient-count {
|
||||
margin-left: 3px;
|
||||
margin-top: 2px;
|
||||
margin-top: 1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -2815,7 +2892,7 @@ footer {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.recipient-picker.state--open .recipient-list {
|
||||
.recipient-picker.is-open .recipient-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2907,24 +2984,18 @@ footer {
|
|||
border-color: #b3b3b3;
|
||||
white-space: normal;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ticket-edit textarea {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 10px 20px;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit textarea {
|
||||
height: 115px;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit .bubble-placeholder {
|
||||
display: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.ticket-edit .bubble-arrow:after {
|
||||
|
|
@ -2932,25 +3003,29 @@ footer {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bubble-placeholder {
|
||||
position: absolute;
|
||||
color: #b3b3b3;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
pointer-events: none;
|
||||
.article-attachment {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 10px 0;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.edit-upload-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.pop-select {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.pop-selector {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pop-selector {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pop-selected,
|
||||
.pop-selectable {
|
||||
width: 38px;
|
||||
|
|
@ -3099,6 +3174,183 @@ footer {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.create-new .main {
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.create-new .sidebar {
|
||||
width: 290px;
|
||||
}
|
||||
.create-new .form-control:not(:focus):not(.focus) {
|
||||
border-color: hsl(0,0%,90%);
|
||||
}
|
||||
.create-new .subtle-link {
|
||||
color: hsl(0,0%,89%);
|
||||
}
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 12px 24px 20px;
|
||||
max-width: 658px;
|
||||
}
|
||||
|
||||
.box .page-header {
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.box h1 {
|
||||
color: hsl(60,1%,34%);
|
||||
}
|
||||
|
||||
.box .two-columns {
|
||||
margin-left: -4px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
.box .two-columns .column {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.formset-inset {
|
||||
margin: 31px -24px 24px;
|
||||
padding: 19px 24px 4px;
|
||||
background: hsl(197,20%,93%);
|
||||
border-top: 1px solid hsl(0,0%,90%);
|
||||
border-bottom: 1px solid hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
.type-tabs .tab {
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.type-tabs .icon {
|
||||
vertical-align: top;
|
||||
margin-right: 9px;
|
||||
margin-top: 10px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.tokenfield .token {
|
||||
padding: 0 0 0 10px;
|
||||
margin: -1px 5px 0 0;
|
||||
height: 26px;
|
||||
line-height: 27px;
|
||||
color: white;
|
||||
background: hsl(198,19%,72%);
|
||||
border: none;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tokenfield .token-input {
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0 5px;
|
||||
}
|
||||
|
||||
.tokenfield .token .token-label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tokenfield.form-control {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.tokenfield .token .close {
|
||||
margin: 0;
|
||||
padding: 0 10px 0 5px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
opacity: .3;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tokenfield .token .close:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.drox {
|
||||
color: hsl(60,1%,74%);
|
||||
}
|
||||
|
||||
.drox .drox-header {
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid hsl(240,4%,95%);
|
||||
}
|
||||
|
||||
.drox a.create {
|
||||
margin-top: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.drox .form-group {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.drox .drox-body p:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-new .templates {
|
||||
border-bottom: 1px solid hsl(240,4%,95%);
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.template-attributes {
|
||||
margin: 17px 0 19px;
|
||||
}
|
||||
|
||||
.template-attribute {
|
||||
height: 24px;
|
||||
line-height: 25px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 2px;
|
||||
font-size: 13px;
|
||||
color: hsl(198,11%,59%);
|
||||
background: hsl(197,20%,93%);
|
||||
border: 1px solid hsl(0,0%,90%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.template-attribute .key {
|
||||
text-transform: uppercase;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.template-attribute .value {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.template-attribute .delete {
|
||||
padding: 0 7px;
|
||||
margin-top: 4px;
|
||||
line-height: 19px;
|
||||
font-size: 28px;
|
||||
font-weight: lighter;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
color: hsl(60,1%,34%);
|
||||
}
|
||||
|
||||
.customer-email {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
----------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue