diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee index 8379b7c3d..c34a6dfe4 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.coffee @@ -795,10 +795,19 @@ class TicketZoomRef extends App.ControllerContent '.article-text': 'articles' '.js-highlight-icon': 'highlightIcon' + '.buttonDropdown': 'buttonDropdown' + events: 'click .js-highlight': 'toggleHighlight' 'click .js-highlightColor': 'pickColor' + 'mousedown .js-openDropdown': 'toggleDropdown' + 'click .js-openDropdown': 'stopPropagation' + 'mouseup .js-dropdownAction': 'performTicketMacro' + + stopPropagation: (event) -> + event.stopPropagation() + colors: [ { name: 'Yellow' @@ -956,6 +965,22 @@ class TicketZoomRef extends App.ControllerContent @storeHighlights() + toggleDropdown: => + if @buttonDropdown.hasClass 'is-open' + @closeDropdown() + else + @buttonDropdown.addClass 'is-open' + $(document).bind 'click.buttonDropdown', @closeDropdown + + closeDropdown: => + @buttonDropdown.removeClass 'is-open' + $(document).unbind 'click.buttonDropdown' + + performTicketMacro: (event) => + console.log "perform action", $(event.currentTarget).text() + @closeDropdown() + + App.Config.set( 'layout_ref/ticket_zoom', TicketZoomRef, 'Routes' ) diff --git a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco index 76611b2e7..1ffc4f677 100644 --- a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco @@ -640,50 +640,15 @@
-
-
- - - <%- @Icon('arrow-down', 'dropdown-arrow') %> +
Discard your unsaved changes.
+
+
Update
+
<%- @Icon('arrow-up') %>
+
+
Update & Close
+
Remind me in 2 weeks
-
- - - -
-
- - - -
-
- - - -
- -
-
- -
-
+
\ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index e03fcf54e..f7232f2c3 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -571,6 +571,67 @@ span[data-tooltip]:hover:before { } } +.buttonDropdown { + position: relative; + display: flex; + + .btn.buttonDropdown-main { + margin: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:not(:active) { + border-right: none; + } + + &:active + .btn { + border-left: none; + } + } + + .btn.buttonDropdown-toggle { + margin: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + .icon { + fill: white; + opacity: 1; + } + } + + .buttonDropdown-dropdown { + position: absolute; + bottom: 40px; + right: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + perspective: 200px; + + .btn { + margin: 0; + transform: rotateX(90deg); + transform-origin: right bottom; + opacity: 0; + pointer-events: none; + // transition: 400ms; + + &:first-child { + transform-origin: right 82px; + } + } + } + + &.is-open .buttonDropdown-dropdown .btn { + transform: none; + opacity: 1; + pointer-events: auto; + } +} + + table { table-layout: fixed; } @@ -3316,10 +3377,6 @@ footer { flex: 1 1 auto; } - .attributeBar.form-inline .form-group:last-child { - flex: 0 1 auto; - } - .form-group.is-changed { position: relative; } @@ -4367,6 +4424,9 @@ footer { background: white; transition: margin 250ms; flex-shrink: 0; + padding: 10px; + display: flex; + justify-content: flex-end; &.is-closed { margin-bottom: -60px;