Improved text module.

This commit is contained in:
Martin Edenhofer 2012-10-22 22:30:31 +02:00
parent 0df3a4da8c
commit fd92085ed5
6 changed files with 81 additions and 10 deletions

View file

@ -5,6 +5,7 @@ class App.TextModuleUI extends App.Controller
'click [data-type=save]': 'create', 'click [data-type=save]': 'create',
'click [data-type=text_module_delete]': 'delete', 'click [data-type=text_module_delete]': 'delete',
'click [data-type=edit]': 'select', 'click [data-type=edit]': 'select',
'click .close': 'close',
'dblclick [data-type=edit]': 'paste', 'dblclick [data-type=edit]': 'paste',
constructor: -> constructor: ->
@ -36,17 +37,36 @@ class App.TextModuleUI extends App.Controller
inputElement = $('textarea') inputElement = $('textarea')
# set first text element to active # set first text element to active
ui.area = $(inputElement[0]) ui.area = $( inputElement[0] )
# remember active text element # remember active text element
inputElement.bind('focusin', -> inputElement.bind('focusin', ->
@uiWidget = ui
ui.area = $(@) ui.area = $(@)
update = =>
left = @uiWidget.area.offset().left
top = @uiWidget.area.offset().top
width = @uiWidget.area.width()
console.log 'TEXTAREA', left, top, width
@uiWidget.el.offset( left: left + width + 20, top: top )
@uiWidget.el.find('.well').removeClass('hide')
topWindow = $(window).scrollTop() + 50
if top < topWindow
@uiWidget.el.offset( top: topWindow )
ui.interval( update, 150, 'text_module_box' )
)
inputElement.bind('focusout', ->
ui.clearInterval( 'text_module_box' )
) )
inputElement.bind('keydown', (e) -> inputElement.bind('keydown', (e) ->
# lisen if crtl is pressed # lisen if crtl is pressed
if ui.Capture if ui.Capture
# lookup key
key = App.ClipBoard.keycode( e.keyCode ) key = App.ClipBoard.keycode( e.keyCode )
# remove one char # remove one char
@ -64,9 +84,15 @@ class App.TextModuleUI extends App.Controller
ui.renderTable() ui.renderTable()
# add char to search selection # add char to search selection
else if key is 'space' || key.length is 1
if key is 'space'
ui.CaptureList = ui.CaptureList + ' '
else else
ui.CaptureList = ui.CaptureList + key ui.CaptureList = ui.CaptureList + key
# prevent default key action
e.preventDefault()
console.log 'CTRL+', ui.CaptureList console.log 'CTRL+', ui.CaptureList
ui.el.find('#text-module-search').val( ui.CaptureList ) ui.el.find('#text-module-search').val( ui.CaptureList )
ui.renderTable( ui.CaptureList ) ui.renderTable( ui.CaptureList )
@ -115,13 +141,32 @@ class App.TextModuleUI extends App.Controller
@el.find('#form-text-module').html('') @el.find('#form-text-module').html('')
new App.ControllerTable( new App.ControllerTable(
el: @el.find('#form-text-module'), el: @el.find('#form-text-module'),
# header: ['Name'], header: [],
overview: ['name'], overview: ['name'],
model: App.TextModule, model: App.TextModule,
objects: objects, objects: objects,
# radio: true, # radio: true,
) )
# remove old popovers
# @el.find('.popover-inner').parent().remove()
$('.popover').remove()
# show user popup
@el.find('#form-text-module').find('.item').popover(
delay: { show: 500, hide: 1200 },
# placement: 'top',
placement: 'right',
title: ->
id = $(@).data('id')
text_module = App.Collection.find( 'TextModule', id )
text_module.name
content: ->
id = $(@).data('id')
text_module = App.Collection.find( 'TextModule', id )
text_module.content
)
paste: (e) => paste: (e) =>
e.preventDefault() e.preventDefault()
id = $(e.target).parents('tr').data('id') id = $(e.target).parents('tr').data('id')
@ -181,6 +226,11 @@ class App.TextModuleUI extends App.Controller
ui.log 'save failed!' ui.log 'save failed!'
) )
close: (e) =>
e.preventDefault()
@el.find('.well').addClass('hide')
@clearInterval( 'text_module_box' )
_insert: (contentNew, ui) -> _insert: (contentNew, ui) ->
position = ui.area.prop('selectionStart') position = ui.area.prop('selectionStart')
content = ui.area.val() content = ui.area.val()

View file

@ -84,6 +84,7 @@ class _Singleton
  'shift' : 16,   'shift' : 16,
  'ctrl' : 17,   'ctrl' : 17,
  'alt' : 18,   'alt' : 18,
  'space' : 32,
  'pause_break' : '19',   'pause_break' : '19',
  'caps_lock' : '20',   'caps_lock' : '20',
  'escape' : '27',   'escape' : '27',

View file

@ -1,7 +1,7 @@
<div class="page-header"> <div class="page-header">
<div class="row"> <div class="row">
<div class="span10"> <div class="span10">
<h1><span contenteditable="true" class="title_update"><%= @P( @ticket.title ) %></span> <small><%= @ticket.number %></small></h1> <h1><span contenteditable="true" class="title_update inline-edit"><%= @P( @ticket.title ) %></span> <small><%= @ticket.number %></small></h1>
</div> </div>
<div class="span2"> <div class="span2">
<% if window.Config['LastOverview'] && @nav: %> <% if window.Config['LastOverview'] && @nav: %>

View file

@ -1,6 +1,6 @@
<form class="form-horizontal"> <form class="form-horizontal">
<div class="modal-header"> <div class="modal-header">
<a href="#" class="close">&times;</a> <a href="#" class="close" title="<%- @T( 'close' ) -%>">&times;</a>
<h3><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h3> <h3><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h3>
</div> </div>
<div class="modal-body" id="object_edit"></div> <div class="modal-body" id="object_edit"></div>

View file

@ -1,20 +1,25 @@
<div class="well"> <div class="well hide">
<!--
<h3><%- @T( 'Text Modules' ) %></h3> <h3><%- @T( 'Text Modules' ) %></h3>
<%- @T( 'Search' ) %> <%- @T( 'Search' ) %>
<br> <br>
-->
<input type="text" name="" id="text-module-search" class="span2" value="<%= @search %>" autocomplete="off"/> <input type="text" name="" id="text-module-search" class="span2" value="<%= @search %>" autocomplete="off"/>
<a href="#" class="close">&times;</a>
<br> <br>
<div id="form-text-module"></div> <div id="form-text-module" class="max-size-scroll"></div>
<!--<button type="submit" class="btn" data-type="text_module_edit"><%- @T( 'Edit' ) %></button>--> <!--<button type="submit" class="btn" data-type="text_module_edit"><%- @T( 'Edit' ) %></button>-->
<!-- <!--
<button type="submit" class="btn" data-type="text_module_delete"><%- @T( 'Delete' ) %></button> <button type="submit" class="btn" data-type="text_module_delete"><%- @T( 'Delete' ) %></button>
--> -->
<!--
<%- @T( 'Preview ') %> <%- @T( 'Preview ') %>
<br> <br>
<textarea id="text-module-preview-content" class="span2"></textarea> <textarea id="text-module-preview-content" class="span2"></textarea>
-->
<hr> <hr>
<form> <form>
<label class="" for="text_module_name"><%- @T( 'Save as Text Module' ) %></label> <label class="" for="text_module_name"><%- @T( 'Save as' ) %></label>
<input type="text" name="name" id="text_module_name" class="span2" value=""/> <input type="text" name="name" id="text_module_name" class="span2" value=""/>
<button type="submit" class="btn" data-type="save"><%- @T( 'Save' ) %></button> <button type="submit" class="btn" data-type="save"><%- @T( 'Save' ) %></button>
</form> </form>

View file

@ -19,7 +19,6 @@ label, input, button, select, textarea {
table { table {
table-layout: fixed; table-layout: fixed;
} }
table th, table td { table th, table td {
overflow: hidden; overflow: hidden;
@ -27,6 +26,11 @@ table th, table td {
white-space: nowrap; white-space: nowrap;
} }
.max-size-scroll {
max-height: 240px;
overflow-y: scroll;
}
/* /*
#content > *:not(.active) { #content > *:not(.active) {
display: none !important; display: none !important;
@ -272,6 +276,17 @@ footer {
padding-right: 10px; padding-right: 10px;
} }
.inline-edit {
padding: 4px;
}
.inline-edit:hover {
padding: 3px;
border: 1px dotted #F92;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.translation { .translation {
border: 1px dotted #F92; border: 1px dotted #F92;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;