From 2c93b1c57d44bba2e32db1365bbf948671c93912 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Thu, 19 Nov 2015 15:48:48 +0100 Subject: [PATCH] Some html and markup improvements for inline translation feature. --- .../javascripts/app/controllers/chat.coffee | 73 +++++----- .../javascripts/app/lib/app_post/i18n.coffee | 127 +++++++++--------- .../app/lib/app_post/pretty_date.coffee | 8 +- .../javascripts/app/lib/app_post/utils.coffee | 2 + .../views/customer_chat/chat_window.jst.eco | 2 +- .../app/views/customer_chat/index.jst.eco | 2 +- .../app/views/dashboard/stats.jst.eco | 4 +- .../app/views/task_widget_tasks.jst.eco | 2 +- .../app/views/ticket_zoom/title.jst.eco | 2 +- app/assets/stylesheets/zammad.scss | 4 + 10 files changed, 112 insertions(+), 114 deletions(-) diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index 97c2ae17b..3b129bd8f 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/app/assets/javascripts/app/controllers/chat.coffee @@ -29,36 +29,39 @@ class App.CustomerChat extends App.Controller active_agents: 0 @render() - @on 'layout-has-changed', @propagateLayoutChange # update navbar on new status - @bind( - 'chat_status_agent' - (data) => - @meta = data - @updateMeta() - if !@pushStateStarted - @pushStateStarted = true - @interval(@pushState, 30000, 'pushState') + @bind('chat_status_agent', (data) => + @meta = data + @updateMeta() + if !@pushStateStarted + @pushStateStarted = true + @interval(@pushState, 30000, 'pushState') ) # add new chat window - @bind( - 'chat_session_start' - (data) => - if data.session - @addChat(data.session) + @bind('chat_session_start', (data) => + if data.session + @addChat(data.session) ) # on new login or on - @bind( - 'ws:login chat_agent_state' - -> - App.WebSocket.send(event:'chat_status_agent') + @bind('ws:login chat_agent_state', -> + App.WebSocket.send(event:'chat_status_agent') ) App.WebSocket.send(event:'chat_status_agent') + # rerender view, e. g. on langauge change + @bind('ui:rerender', => + return if !@authenticate(true) + for session_id, chat of @chatWindows + chat.el.remove() + @chatWindows = {} + @render() + App.WebSocket.send(event:'chat_status_agent') + ) + pushState: => App.WebSocket.send( event:'chat_agent_state' @@ -212,27 +215,21 @@ class chatWindow extends App.Controller @on 'layout-change', @scrollToBottom - @bind( - 'chat_session_typing' - (data) => - return if data.session_id isnt @session.session_id - return if data.self_written - @showWritingLoader() + @bind('chat_session_typing', (data) => + return if data.session_id isnt @session.session_id + return if data.self_written + @showWritingLoader() ) - @bind( - 'chat_session_message' - (data) => - return if data.session_id isnt @session.session_id - return if data.self_written - @receiveMessage(data.message.content) + @bind('chat_session_message', (data) => + return if data.session_id isnt @session.session_id + return if data.self_written + @receiveMessage(data.message.content) ) - @bind( - 'chat_session_left chat_session_closed' - (data) => - return if data.session_id isnt @session.session_id - return if data.self_written - @addStatusMessage("#{data.realname} has left the conversation") - @goOffline() + @bind('chat_session_left chat_session_closed', (data) => + return if data.session_id isnt @session.session_id + return if data.self_written + @addStatusMessage("#{data.realname} has left the conversation") + @goOffline() ) render: -> @@ -401,7 +398,7 @@ class chatWindow extends App.Controller timestamp = Date.now() if !@lastTimestamp or timestamp - @lastTimestamp > @showTimeEveryXMinutes * 60000 - label = App.i18n.translateContent('today') + label = App.i18n.translateInline('today') time = new Date().toTimeString().substr(0,5) if @lastAddedType is 'timestamp' # update last time diff --git a/app/assets/javascripts/app/lib/app_post/i18n.coffee b/app/assets/javascripts/app/lib/app_post/i18n.coffee index 64f0a505b..f52667ca0 100644 --- a/app/assets/javascripts/app/lib/app_post/i18n.coffee +++ b/app/assets/javascripts/app/lib/app_post/i18n.coffee @@ -2,48 +2,48 @@ class App.i18n _instance = undefined - @init: ( args ) -> - _instance ?= new _i18nSingleton( args ) + @init: (args) -> + _instance ?= new _i18nSingleton(args) - @translateContent: ( string, args... ) -> + @translateContent: (string, args...) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.translateContent( string, args ) + _instance.translateContent(string, args) - @translatePlain: ( string, args... ) -> + @translatePlain: (string, args...) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.translatePlain( string, args ) + _instance.translatePlain(string, args) - @translateInline: ( string, args... ) -> + @translateInline: (string, args...) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.translateInline( string, args ) + _instance.translateInline(string, args) - @translateTimestamp: ( args, offset = 0 ) -> + @translateTimestamp: (args, offset = 0) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.timestamp( args, offset ) + _instance.timestamp(args, offset) - @translateDate: ( args, offset = 0 ) -> + @translateDate: (args, offset = 0) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.date( args, offset ) + _instance.date(args, offset) @get: -> if _instance == undefined _instance ?= new _i18nSingleton() _instance.get() - @set: ( args ) -> + @set: (args) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.set( args ) + _instance.set(args) @setMap: (source, target, format) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.setMap( source, target, format ) + _instance.setMap(source, target, format) @meta: (source, target, format) -> if _instance == undefined @@ -53,22 +53,22 @@ class App.i18n @notTranslatedFeatureEnabled: (locale) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.notTranslatedFeatureEnabled( locale ) + _instance.notTranslatedFeatureEnabled(locale) @getNotTranslated: (locale) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.getNotTranslated( locale ) + _instance.getNotTranslated(locale) @removeNotTranslated: (locale, key) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.removeNotTranslated( locale, key ) + _instance.removeNotTranslated(locale, key) @setNotTranslated: (locale, key) -> if _instance == undefined _instance ?= new _i18nSingleton() - _instance.setNotTranslated( locale, key ) + _instance.setNotTranslated(locale, key) @timeFormat: (locale, key) -> if _instance == undefined @@ -78,7 +78,7 @@ class App.i18n class _i18nSingleton extends Spine.Module @include App.LogInclude - constructor: ( locale ) -> + constructor: (locale) -> @mapTime = {} @mapString = {} @mapMeta = @@ -95,10 +95,9 @@ class _i18nSingleton extends Spine.Module $this = $(e.target) $this.data 'before', $this.html() return $this -# .delegate '.translation', 'blur keyup paste', (e) => .delegate '.translation', 'blur', (e) => $this = $(e.target) - source = $this.attr('data-text') + source = $this.attr('title') # get new translation translation_new = $this.html() @@ -114,22 +113,22 @@ class _i18nSingleton extends Spine.Module $this.data 'before', translation_new # update runtime translation mapString - @mapString[ source ] = translation_new + @mapString[source] = translation_new # replace rest in page - $(".translation[data-text='#{source}']").html( translation_new ) + $(".translation[title='#{source}']").html(translation_new) # update permanent translation mapString - translation = App.Translation.findByAttribute( 'source', source ) + translation = App.Translation.findByAttribute('source', source) if translation - translation.updateAttribute( 'target', translation_new ) + translation.updateAttribute('target', translation_new) else translation = new App.Translation translation.load( - locale: @locale, - source: source, - target: translation_new, - ) + locale: @locale + source: source + target: translation_new + ) translation.save() return $this @@ -137,7 +136,7 @@ class _i18nSingleton extends Spine.Module get: -> @locale - set: ( localeToSet ) -> + set: (localeToSet) -> # prepare locale localeToSet = localeToSet.toLowerCase() @@ -182,7 +181,7 @@ class _i18nSingleton extends Spine.Module @_notTranslatedLog = @notTranslatedFeatureEnabled(@locale) # set lang attribute of html tag - $('html').prop( 'lang', @locale.substr(0, 2) ) + $('html').prop('lang', @locale.substr(0, 2) ) @mapString = {} App.Ajax.request( @@ -215,29 +214,24 @@ class _i18nSingleton extends Spine.Module # load in collection if needed if !_.isEmpty(mapToLoad) - App.Translation.refresh( mapToLoad, {clear: true} ) + App.Translation.refresh(mapToLoad, {clear: true} ) App.Event.trigger('i18n:language:change') ) - translateInline: ( string, args ) => - App.Utils.htmlEscape( @translate( string, args ) ) + translateInline: (string, args) => + App.Utils.htmlEscape(@translate(string, args)) - translateContent: ( string, args ) => - translated = App.Utils.htmlEscape( @translate( string, args ) ) -# replace = '' + translated + '' - if App.Config.get( 'translation_inline' ) - replace = '' + translated + '' - # if !@_translated - # replace += 'XX' - replace += '' - else - translated + translateContent: (string, args) => + if App.Config.get('translation_inline') + return '' + App.Utils.htmlEscape(@translate(string)) + '' - translatePlain: ( string, args ) => - @translate( string, args ) + translated = App.Utils.htmlEscape(@translate(string, args)) - translate: ( string, args ) => + translatePlain: (string, args) => + @translate(string, args) + + translate: (string, args) => # type convertation if typeof string isnt 'string' @@ -265,18 +259,19 @@ class _i18nSingleton extends Spine.Module @_notTranslated[@locale][string] = true # search %s - for arg in args - translated = translated.replace(/%s/, arg) + if args + for arg in args + translated = translated.replace(/%s/, arg) @log 'debug', 'translate', string, args, translated # return translated string - return translated + translated meta: => @mapMeta - setMap: ( source, target, format = 'string' ) => + setMap: (source, target, format = 'string') => if format is 'time' @mapTime[source] = target else @@ -287,23 +282,23 @@ class _i18nSingleton extends Spine.Module return false true - getNotTranslated: ( locale ) => + getNotTranslated: (locale) => @_notTranslated[locale || @locale] - removeNotTranslated: ( locale, key ) => + removeNotTranslated: (locale, key) => delete @_notTranslated[locale][key] - setNotTranslated: ( locale, key ) => + setNotTranslated: (locale, key) => @_notTranslated[locale][key] = true - date: ( time, offset ) => + date: (time, offset) => @convert(time, offset, @mapTime['date'] || @dateFormat) - timestamp: ( time, offset ) => + timestamp: (time, offset) => @convert(time, offset, @mapTime['timestamp'] || @timestampFormat) - convert: ( time, offset, format ) -> - s = ( num, digits ) -> + convert: (time, offset, format) -> + s = (num, digits) -> while num.toString().length < digits num = '0' + num num @@ -312,7 +307,7 @@ class _i18nSingleton extends Spine.Module # add timezone diff, needed for unit tests if offset - timeObject = new Date( timeObject.getTime() + (timeObject.getTimezoneOffset() * 60000) ) + timeObject = new Date(timeObject.getTime() + (timeObject.getTimezoneOffset() * 60000)) d = timeObject.getDate() m = timeObject.getMonth() + 1 @@ -320,12 +315,12 @@ class _i18nSingleton extends Spine.Module S = timeObject.getSeconds() M = timeObject.getMinutes() H = timeObject.getHours() - format = format.replace /dd/, s( d, 2 ) + format = format.replace /dd/, s(d, 2) format = format.replace /d/, d - format = format.replace /mm/, s( m, 2 ) + format = format.replace /mm/, s(m, 2) format = format.replace /m/, m format = format.replace /yyyy/, y - format = format.replace /SS/, s( S, 2 ) - format = format.replace /MM/, s( M, 2 ) - format = format.replace /HH/, s( H, 2 ) - return format + format = format.replace /SS/, s(S, 2) + format = format.replace /MM/, s(M, 2) + format = format.replace /HH/, s(H, 2) + format diff --git a/app/assets/javascripts/app/lib/app_post/pretty_date.coffee b/app/assets/javascripts/app/lib/app_post/pretty_date.coffee index 69a8b05f3..99661ef11 100644 --- a/app/assets/javascripts/app/lib/app_post/pretty_date.coffee +++ b/app/assets/javascripts/app/lib/app_post/pretty_date.coffee @@ -41,9 +41,9 @@ class App.PrettyDate day = App.i18n.translateInline('d') if long if unit > 1 || unit is 0 - day = App.i18n.translateContent('days') + day = App.i18n.translateInline('days') else - day = App.i18n.translateContent('day') + day = App.i18n.translateInline('day') string = unit + ' ' + day diff = diff - ( unit * 86400 ) if unit >= 9 || diff < 3600 || count is 2 @@ -83,9 +83,9 @@ class App.PrettyDate minute = App.i18n.translateInline('m') if long if unit > 1 || unit is 0 - minute = App.i18n.translateContent('minutes') + minute = App.i18n.translateInline('minutes') else - minute = App.i18n.translateContent('minute') + minute = App.i18n.translateInline('minute') if string isnt '' string = string + ' ' string = string + unit + ' ' + minute diff --git a/app/assets/javascripts/app/lib/app_post/utils.coffee b/app/assets/javascripts/app/lib/app_post/utils.coffee index 169f62820..787cf2397 100644 --- a/app/assets/javascripts/app/lib/app_post/utils.coffee +++ b/app/assets/javascripts/app/lib/app_post/utils.coffee @@ -93,6 +93,8 @@ class App.Utils # htmlEscaped = App.Utils.htmlEscape( rawText ) @htmlEscape: ( ascii ) -> + return ascii if !ascii + return ascii if !ascii.replace ascii.replace(/&/g, '&') .replace(//g, '>') diff --git a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco index 183d31f4d..211c34fbf 100644 --- a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco +++ b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco @@ -16,5 +16,5 @@
-
<%= @T('Send') %>
+
<%- @T('Send') %>
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/customer_chat/index.jst.eco b/app/assets/javascripts/app/views/customer_chat/index.jst.eco index c13088449..894a4c92f 100644 --- a/app/assets/javascripts/app/views/customer_chat/index.jst.eco +++ b/app/assets/javascripts/app/views/customer_chat/index.jst.eco @@ -17,7 +17,7 @@
-
<%= @T('Settings') %>
+
<%- @T('Settings') %>
diff --git a/app/assets/javascripts/app/views/dashboard/stats.jst.eco b/app/assets/javascripts/app/views/dashboard/stats.jst.eco index 0f3d087dc..dd710428f 100644 --- a/app/assets/javascripts/app/views/dashboard/stats.jst.eco +++ b/app/assets/javascripts/app/views/dashboard/stats.jst.eco @@ -30,8 +30,8 @@ diff --git a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco index da3f93529..fa1456bb6 100644 --- a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco +++ b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco @@ -1,6 +1,6 @@ <% for item in @item_list: %> -
+
<% if item.data.type is 'task': %> <% if item.task.notify: %> <%- @Icon('status-modified-inner-circle', "icon-task-state #{item.data.iconClass}") %> diff --git a/app/assets/javascripts/app/views/ticket_zoom/title.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/title.jst.eco index fa5cc1df8..43cf37db2 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/title.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/title.jst.eco @@ -1 +1 @@ -
<%= @ticket.title %>
\ No newline at end of file +
<%= @ticket.title %>
\ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 98bc1e9f5..bf70a33d8 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -2564,6 +2564,10 @@ footer { .translation[contenteditable="true"] { display: inline; } +.translation[contenteditable="true"]:hover, +.translation[contenteditable="true"]:focus { + background: none; +} .translation .icon-edit { display: none; }