From 277f8ff05ef4f35e064043241cc5849ba166b545 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 27 Aug 2014 18:36:32 +0200 Subject: [PATCH] edit ticket visibility & type UI --- .../app/controllers/ticket_zoom.js.coffee | 31 ++++ .../javascripts/app/views/ticket_zoom.jst.eco | 2 +- .../views/ticket_zoom/article_view.jst.eco | 6 +- .../app/views/ticket_zoom/edit.jst.eco | 68 ++++---- app/assets/stylesheets/zzz.css.erb | 146 +++++++++++++++--- 5 files changed, 198 insertions(+), 55 deletions(-) diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index f7f2d9196..07d09a9e1 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -322,6 +322,9 @@ class Edit extends App.Controller events: 'click .submit': 'update' 'click [data-type="reset"]': 'reset' + 'click .visibility.toggle': 'toggle_visibility' + 'click .pop-selectable': 'select_type' + 'click .pop-selected': 'show_selectable_types' constructor: -> super @@ -336,8 +339,14 @@ class Edit extends App.Controller ticket = App.Ticket.fullLocal( @ticket.id ) + console.log ticket + + # gets referenced in @set_type + @type = 'email' + @html App.view('ticket_zoom/edit')( ticket: ticket + type: @type isCustomer: @isRole('Customer') formChanged: !_.isEmpty( App.TaskManager.get(@task_key).state ) ) @@ -442,6 +451,28 @@ class Edit extends App.Controller ) @subscribeIdTextModule = ticket.subscribe( callback ) + toggle_visibility: -> + if @el.hasClass('state--public') + @el.removeClass('state--public') + @el.addClass('state--internal') + else + @el.addClass('state--public') + @el.removeClass('state--internal') + + show_selectable_types: => + @el.find('.pop-selector').removeClass('hide') + + select_type: (e) => + @set_type $(e.target).data('value') + @el.find('.pop-selector').addClass('hide') + + set_type: (type) -> + typeIcon = @el.find('.pop-selected .icon') + if @type + typeIcon.removeClass @type + @type = type + typeIcon.addClass @type + autosaveStop: => @clearInterval( 'autosave' ) diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco index f50faf22f..7fcb4b260 100644 --- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco @@ -25,7 +25,7 @@ -
+
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco index a8f7d1765..31d703f0a 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco @@ -35,7 +35,7 @@
-
<%- article.html %>
+
<%- article.html %>
@@ -63,8 +63,8 @@ <% if article.actions: %>
<% for action in article.actions: %> - - <%- @T( action.name ) %> + + <%- @T( action.name ) %> <% end %>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco index ad74a8cc8..5018fde3d 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco @@ -1,31 +1,43 @@ - -
-
-
- -
-
-
-

<%- @T('Edit') %> - - <%- @T('Discard your unsaved changes.') %> - -

+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
-
- -
-
- - -
+
+
+
+
+
+
+
+
+
+
+ + Antwort eingeben oder Dateien wählen +
+
+
-
\ No newline at end of file + \ No newline at end of file diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index 41614b6f0..4f5618bc1 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -1102,7 +1102,6 @@ ol.tabs li { background-position: -170px -141px; } - .white.phone.channel.icon, .white.received-calls.channel.icon { background-position: -187px -141px; } @@ -1123,6 +1122,14 @@ ol.tabs li { background-position: -255px -141px; } + .white.phone.channel.icon { + background-position: -272px -141px; + } + + .gray.phone.channel.icon { + background-position: -289px -141px; + } + .mood.icon { width: 60px; height: 59px; @@ -1290,24 +1297,36 @@ ol.tabs li { background-position: -42px -311px; } - .split.icon { + .split.action.icon { width: 24px; height: 20px; background-position: 0 -336px; } - .reply.icon { + .reply.action.icon { width: 19px; height: 20px; background-position: -24px -336px; } - .internal.icon { + .internal.action.icon { width: 16px; height: 20px; background-position: -44px -336px; } + .public.visibility.icon { + width: 14px; + height: 19px; + background-position: 0 -356px; + } + + .internal.visibility.icon { + width: 14px; + height: 19px; + background-position: -14px -356px; + } + /* * removed margin of forms to not break the layout with submit buttons within
area e. g. for modal dialogs @@ -1415,6 +1434,8 @@ footer { .clickable { cursor: pointer; + -webkit-user-select: none; + user-select: none; } .customer_info { @@ -1556,12 +1577,6 @@ footer { margin-left: 80px; } -.form-changed { - border: 1px solid #fbeed5; - border-radius: 4px; - background-color: #fcf8e3; -} - #splash { background-color: #eee; position: absolute; @@ -1995,6 +2010,7 @@ footer { height: 40px; background-size: cover; background-position: center; + background-color: rgba(0,0,0,.05); border-radius: 100%; display: inline-block; vertical-align: bottom; @@ -2406,12 +2422,15 @@ footer { max-width: 800px; margin: 0 auto; padding: 0 21px; - overflow: hidden; } - .bubble-grid .avatar { + .bubble-gap { + margin-left: 15px; + } + + .customer.ticket-article-item .bubble-gap { + margin-left: 0; margin-right: 15px; - background: rgba(0,0,0,.05); } .ticket-article-item { @@ -2419,11 +2438,6 @@ footer { position: relative; } - .customer.ticket-article-item .avatar { - margin-right: 0; - margin-left: 15px; - } - /* clip the article-meta to not stand out on the other side of the text-bubble if the text bubble is small @@ -2522,14 +2536,14 @@ footer { border-color: hsl(300,43%,84%); } - .new-article .text-bubble { + .ticket-edit .text-bubble { padding: 0; border-color: #b3b3b3; white-space: normal; border-radius: 5px; } - .new-article textarea { + .ticket-edit textarea { width: 100%; height: 38px; padding: 10px 20px; @@ -2540,15 +2554,15 @@ footer { transition: 500ms; } - .new-article textarea:focus { + .ticket-edit textarea:focus { height: 105px; } - .new-article textarea:focus + .bubble-placeholder { + .ticket-edit textarea:focus + .bubble-placeholder { display: none; } - .new-article .bubble-arrow:after { + .ticket-edit .bubble-arrow:after { border-color: #b3b3b3; box-shadow: none; } @@ -2638,6 +2652,92 @@ footer { background: white; } + .ticket-edit .internal-border { + padding: 5px; + border-radius: 8px; + margin: -5px -5px 0; + } + + .ticket-edit.state--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; + } + + .ticket-edit .avatar { + margin-bottom: 3px; + } + + .ticket-edit .pop-selectable .icon { + opacity: 0.3; + pointer-events: none; + } + + .ticket-edit .pop-selectable:hover .icon { + opacity: 1; + } + + .ticket-edit button[type=submit] { + margin-top: 5px; + float: right; + } + + .ticket-edit hr { + border-color: #e6e6e6; + width: 38px; + margin: 0; + } + + .visibility.toggle { + width: 38px; + height: 34px; + opacity: 0.2; + } + + .state--public .internal.icon { + display: none; + } + + .state--internal .visibility.toggle { + opacity: 1; + } + + .state--internal .public.icon { + display: none; + } + +.pop-select { + position: relative; + z-index: 2; +} + + .pop-selector { + position: absolute; + top: 0; + left: 0; + } + + .pop-selected, + .pop-selectable { + width: 36px; + height: 36px; + } + + .pop-selectable { + background: hsl(234,10%,19%); + } + + .pop-selectable:hover { + background: hsl(234,10%,29%); + } + + .pop-selectable:first-child { + border-radius: 4px 0 0 4px; + } + + .pop-selectable:last-child { + border-radius: 0 4px 4px 0; + } + .ticket-zoom .sidebar { width: 280px; border-left: 1px solid #e6e6e6;