From bf00f29a619792e0be113df19795ae6f279397dd Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 24 Feb 2021 07:44:58 +0000 Subject: [PATCH] Resolves #223 - Support for Tablets/Mobile (Responsive). --- .../_dashboard/first_steps_clues.coffee | 17 +- .../_rich_text_tool_button.coffee | 2 +- .../controllers/agent_ticket_create.coffee | 6 + .../app/controllers/ticket_zoom.coffee | 5 + .../ticket_zoom/article_new.coffee | 6 +- .../javascripts/app/lib/bootstrap/modal.js | 4 +- .../views/knowledge_base/navigation.jst.eco | 6 +- .../app/views/navigation/personal.jst.eco | 2 +- .../javascripts/app/views/ticket_zoom.jst.eco | 4 +- .../views/ticket_zoom/attribute_bar.jst.eco | 4 +- .../app/views/ticket_zoom/highlighter.jst.eco | 2 +- .../views/widget/button_with_dropdown.jst.eco | 2 +- app/assets/stylesheets/zammad.scss | 970 +++++++++++++++++- app/views/layouts/application.html.erb | 2 +- 14 files changed, 974 insertions(+), 58 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee b/app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee index a09f8175e..6143195eb 100644 --- a/app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee +++ b/app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee @@ -15,21 +15,22 @@ class App.FirstStepsClues extends App.Controller actions: [] } { - container: '.user-menu' + container: '.user-menu .add' headline: 'Create' text: 'Here you can create new tickets. Also if you have the permissions you can create new customers and organizations.' actions: [ - 'click .add .js-action', - 'hover .add' + 'hover .navigation', + 'hover .user-menu .add' ] } { - container: '.user-menu' + container: '.user-menu .user .dropdown-menu' headline: 'Personal Settings' text: 'Here you can sign out, change the frontend language and see your last viewed items.' actions: [ - 'click .user .js-action', - 'hover .user' + 'hover .navigation', + 'click .user-menu .user .js-action', + 'hover .user-menu .user' ] } { @@ -191,7 +192,7 @@ class App.FirstStepsClues extends App.Controller maxHeight = $(window).height() # try to place it parallel to the larger side - if target.height > target.width + if target.height > target.width && window.matchMedia('(min-width: 768px').matches # try to place it aside # prefer right if target.right + modal.width <= maxWidth @@ -317,7 +318,7 @@ class App.FirstStepsClues extends App.Controller else # 'click .target' eventName = action.substr 0, action.indexOf(' ') - target = container.find( action.substr action.indexOf(' ') + 1 ) + target = $( action.substr action.indexOf(' ') + 1 ) switch eventName when 'click' diff --git a/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/_rich_text_tool_button.coffee b/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/_rich_text_tool_button.coffee index 00672392d..1b151b40b 100644 --- a/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/_rich_text_tool_button.coffee +++ b/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/_rich_text_tool_button.coffee @@ -30,7 +30,7 @@ class App.UiElement.richtext.additions.RichTextToolButton html: true animation: false delay: 0 - placement: 'auto right' + placement: 'auto' theme: 'dark' content: content container: 'body' diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.coffee index 890282624..5786cf3a1 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create.coffee @@ -3,6 +3,7 @@ class App.TicketCreate extends App.Controller elements: '.tabsSidebar': 'sidebar' + '.tabsSidebar-sidebarSpacer': 'sidebarSpacer' events: 'click .type-tabs .tab': 'changeFormType' @@ -171,6 +172,11 @@ class App.TicketCreate extends App.Controller @autosaveStart() @controllerBind('ticket_create_rerender', (template) => @renderQueue(template)) + # initially hide sidebar on mobile + if window.matchMedia('(max-width: 767px').matches + @sidebar.addClass('is-closed') + @sidebarSpacer.addClass('is-closed') + hide: => @autosaveStop() @controllerUnbind('ticket_create_rerender', (template) => @renderQueue(template)) diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.coffee index 548961b40..a3b2797bb 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.coffee @@ -241,6 +241,11 @@ class App.TicketZoom extends App.Controller # set all notifications to seen App.OnlineNotification.seen('Ticket', @ticket_id) + # initially hide on mobile + if window.matchMedia('(max-width: 767px').matches + @el.find('.tabsSidebar').addClass('is-closed') + @el.find('.tabsSidebar-sidebarSpacer').addClass('is-closed') + # if controller is executed twice, go to latest article (e. g. click on notification) if @activeState if @ticket_article_ids diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee index ad075af47..d954d13bc 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee @@ -47,9 +47,6 @@ class App.TicketZoomArticleNew extends App.Controller @render() - if @defaults.body or @isIE10() - @openTextarea(null, true) - if _.isArray(@defaults.attachments) for attachment in @defaults.attachments @renderAttachment(attachment) @@ -101,6 +98,9 @@ class App.TicketZoomArticleNew extends App.Controller @controllerBind('ui::ticket::shown', (data) => return if data.ticket_id.toString() isnt @ticket.id.toString() @tokanice(@type) + + if @defaults.body or @isIE10() + @openTextarea(null, true) ) # rerender, e. g. on language change diff --git a/app/assets/javascripts/app/lib/bootstrap/modal.js b/app/assets/javascripts/app/lib/bootstrap/modal.js index c53273872..9359f1706 100644 --- a/app/assets/javascripts/app/lib/bootstrap/modal.js +++ b/app/assets/javascripts/app/lib/bootstrap/modal.js @@ -11,6 +11,8 @@ - add this.$body = $(options.container || document.body) modified by Felix Jul-2017 - add rtl support + modified by Felix Feb-2021 + - limit top position value to >= 0 */ @@ -255,7 +257,7 @@ var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight var css = { left: this.$body.offset().left, - top: this.$body.offset().top, + top: Math.max(0, this.$body.offset().top), width: this.$body.width(), paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing && this.scrollbarWidth > 0 ? this.scrollbarWidth : '', paddingRight: this.bodyIsOverflowing && !modalIsOverflowing && this.scrollbarWidth > 0 ? this.scrollbarWidth : '' diff --git a/app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco b/app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco index 10fe6e7ee..a86648f83 100644 --- a/app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco +++ b/app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco @@ -12,14 +12,14 @@
<%- @Icon('magnifier') %> disabled<% end %> - class="btn btn--action" + class="btn btn--action btn--only-icon" > <%- @Icon('external') %> @@ -33,7 +33,7 @@ <% end %>
<%= @kbLocales.selected?.systemLocale().locale %>
- \ No newline at end of file diff --git a/app/assets/javascripts/app/views/ticket_zoom/attribute_bar.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/attribute_bar.jst.eco index e0886d1d0..ed2bd9659 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/attribute_bar.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/attribute_bar.jst.eco @@ -1,4 +1,4 @@ -
+
<%- @T('Discard your unsaved changes.') %>
@@ -30,7 +30,7 @@ <% else: %>
- +
-
+
<%- @Icon('arrow-down') %>