From 70d1cdab587d2d12016704bf5dfd80fb1e621280 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Thu, 28 Aug 2014 16:59:52 +0200 Subject: [PATCH] add recipient list --- app/assets/images/sprite.svg | 1 + .../app/controllers/ticket_zoom.js.coffee | 43 +++++- .../app/views/ticket_zoom/edit.jst.eco | 57 ++++++- app/assets/stylesheets/layout.css | 4 + app/assets/stylesheets/zzz.css.erb | 144 +++++++++++++++++- 5 files changed, 237 insertions(+), 12 deletions(-) diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg index 04b34f866..f2ce616d6 100644 --- a/app/assets/images/sprite.svg +++ b/app/assets/images/sprite.svg @@ -188,5 +188,6 @@ + \ No newline at end of file diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index 4b2687d2b..781318d3a 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -325,11 +325,18 @@ class Edit extends App.Controller 'click .pop-selected': 'show_selectable_types' 'focus textarea': 'show_controls' 'blur textarea': 'hide_controls' + 'click .recipient-picker': 'toggle_recipients' + 'click .recipient-list': 'stopPropagation' + 'click .list-entry-type div': 'change_recipient_type' + 'submit .recipient-list form': 'add_recipient' constructor: -> super @render() + stopPropagation: (e) -> + e.stopPropagation() + release: => @autosaveStop() if @subscribeIdTextModule @@ -339,8 +346,6 @@ class Edit extends App.Controller ticket = App.Ticket.fullLocal( @ticket.id ) - console.log ticket - # gets referenced in @set_type @type = 'email' @@ -451,6 +456,40 @@ 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') + else + toggle.addClass('state--open') + + toggleDimensions = toggle.get(0).getBoundingClientRect() + listDimensions = list.get(0).getBoundingClientRect() + availableHeight = toggle.scrollParent().outerHeight() + + top = toggleDimensions.height/2 - listDimensions.height/2 + bottomDistance = availableHeight - padding - (toggleDimensions.top + top + listDimensions.height) + + if bottomDistance < 0 + top += bottomDistance + + arrow.css('top', -top + toggleDimensions.height/2) + list.css('top', top) + + change_recipient_type: (e) -> + $(e.target).addClass('active').siblings('.active').removeClass('active') + # store $(this).data('value') + + add_recipient: (e) -> + e.stopPropagation() + e.preventDefault() + console.log "add recipient", e + # store recipient + toggle_visibility: -> if @el.hasClass('state--public') @el.removeClass('state--public') 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 1cd3fb312..e9486649e 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco @@ -25,9 +25,44 @@
-
-
-
+
+
+
3
+
+
+
+ <%- @T('Recipients') %> +
<%- @T('type') %>
+
+
+
+
Hans Peter Baxxter
+
+
To
+
Cc
+
+
+ +
+ + +
+
@@ -39,7 +74,21 @@ Antwort eingeben oder Dateien wählen - +
+
+
+
+
+
internal
+
+
+
+
public
+
+
+ +
+
\ No newline at end of file diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index a710111bd..4edcf2028 100755 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -205,3 +205,7 @@ body.fit { .three-columns > .column { width: 33.33%; } + +.align-right { + margin-left: auto; +} diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index 031355769..c2f8f25ed 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -1371,6 +1371,12 @@ ol.tabs li { background-position: -14px -356px; } + .recipients.icon { + width: 17px; + height: 17px; + background-position: -28px -358px; + } + /* * removed margin of forms to not break the layout with submit buttons within
area e. g. for modal dialogs @@ -2654,7 +2660,7 @@ footer { } .ticket-edit.mode--edit { - margin-bottom: 12px; + margin-bottom: 8px; } .bottom-form { @@ -2694,7 +2700,7 @@ footer { } .ticket-edit button[type=submit] { - margin-top: 5px; + margin: 5px 0; float: right; } @@ -2705,12 +2711,23 @@ footer { } .visibility.toggle { - width: 38px; - height: 34px; + margin-right: 10px; + } + + .visibility.toggle, + .recipient-picker { opacity: 0.2; } - .state--public .internal.icon { + .visibility-label { + margin-left: 5px; + min-width: 53px; + line-height: 19px; + display: inline-block; + vertical-align: text-top; + } + + .state--public .internal-visibility { display: none; } @@ -2718,10 +2735,125 @@ footer { opacity: 1; } - .state--internal .public.icon { + .state--internal .public-visibility { display: none; } + .ticket-edit .recipient-picker { + height: 38px; + position: relative; + z-index: 3; + } + + .ticket-edit .recipient-picker.state--open { + opacity: 1; + } + + .recipient-picker .icon { + margin-top: -8px; + } + + .recipient-count { + margin-left: 3px; + margin-top: 2px; + line-height: 1; + } + + .recipient-list { + position: absolute; + background: hsl(234,10%,19%); + left: 48px; + color: white; + display: none; + } + + .recipient-picker.state--open .recipient-list { + display: block; + } + + .list-arrow { + position: absolute; + top: 210px; + left: -6px; + margin-top: -6px; + border-right: 6px solid #2c2d36; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + } + + .list-head { + height: 38px; + line-height: 38px; + padding: 1px 19px 0; + text-transform: uppercase; + } + + .list-head div { + position: relative; + left: -20px; + } + + .list-entry { + width: 340px; + height: 60px; + padding: 0 16px; + border-top: 1px solid hsl(240,6%,27%); + } + + .list-entry-name { + margin-left: 18px; + } + + .list-entry-type { + font-size: 12px; + } + + .list-entry-type div { + padding: 3px 7px; + border: 1px solid hsl(234,10%,10%); + color: hsl(0,0%,40%); + background: hsl(234,10%,14%); + } + + .list-entry-type .active { + color: white; + background: inherit; + box-shadow: 0 1px rgba(255,255,255,.03) inset; + } + + .list-entry-type div:not(:last-child) { + border-right: none; + } + + .list-entry-type div:first-child { + border-radius: 3px 0 0 3px; + } + + .list-entry-type div:last-child { + border-left: none; + border-radius: 0 3px 3px 0; + } + + .recipient-list input { + padding-top: 2px; + background: hsl(232,10%,16%); + color: white; + border: none; + outline: none; + } + + .recipient-list input[type=submit] { + height: 0; + width: 0; + padding: 0; + position: absolute; + visibility: hidden; + } + + .recipient-list input::-webkit-input-placeholder { color: #666; } + .recipient-list input::-moz-placeholder { opacity: 1; color: #666; } + .recipient-list input:-ms-input-placeholder { color: #666; } + .ticket-edit .text-bubble { padding: 0; border-color: #b3b3b3;