From 3e4ad0e8d45ed100aec840669ae2316b5e99e5e0 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 5 Oct 2015 10:13:30 +0200 Subject: [PATCH] buttonDropdown: dropdown design, hover highlight --- .../app/controllers/layout_ref.coffee | 12 ++- .../app/views/layout_ref/ticket_zoom.jst.eco | 15 ++-- .../javascripts/app/views/ticket_zoom.jst.eco | 47 +---------- app/assets/stylesheets/zammad.scss | 79 ++++--------------- 4 files changed, 36 insertions(+), 117 deletions(-) diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee index c34a6dfe4..777175dfb 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.coffee @@ -795,7 +795,7 @@ class TicketZoomRef extends App.ControllerContent '.article-text': 'articles' '.js-highlight-icon': 'highlightIcon' - '.buttonDropdown': 'buttonDropdown' + '.buttonDropdown': 'buttonDropdown' events: 'click .js-highlight': 'toggleHighlight' @@ -804,6 +804,8 @@ class TicketZoomRef extends App.ControllerContent 'mousedown .js-openDropdown': 'toggleDropdown' 'click .js-openDropdown': 'stopPropagation' 'mouseup .js-dropdownAction': 'performTicketMacro' + 'mouseenter .js-dropdownAction': 'onActionMouseEnter' + 'mouseleave .js-dropdownAction': 'onActionMouseLeave' stopPropagation: (event) -> event.stopPropagation() @@ -977,9 +979,15 @@ class TicketZoomRef extends App.ControllerContent $(document).unbind 'click.buttonDropdown' performTicketMacro: (event) => - console.log "perform action", $(event.currentTarget).text() + console.log "perform action", @$(event.currentTarget).text() @closeDropdown() + onActionMouseEnter: (event) => + @$(event.currentTarget).addClass('is-active') + + onActionMouseLeave: (event) => + @$(event.currentTarget).removeClass('is-active') + 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 1ffc4f677..34fba0aba 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 @@ -641,14 +641,13 @@
Discard your unsaved changes.
-
-
Update
-
<%- @Icon('arrow-up') %>
-
-
Update & Close
-
Remind me in 2 weeks
-
-
+
+
Update
+
<%- @Icon('arrow-up') %>
+
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco index c13a11aef..67c2faa52 100644 --- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco @@ -26,50 +26,7 @@
-
-
- - - <%- @Icon('arrow-down', 'dropdown-arrow') %> -
-
- - - <%- @Icon('arrow-down', 'dropdown-arrow') %> -
-
- - - <%- @Icon('arrow-down', 'dropdown-arrow') %> -
-
- - - <%- @Icon('arrow-down', 'dropdown-arrow') %> -
-
-
-
- - -
-
+
<%- @T('Discard your unsaved changes.') %>
+
<%- @T('Update') %>
\ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index f7232f2c3..71174fda7 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -392,6 +392,10 @@ span[data-tooltip]:hover:before { &:active { background: hsl(203,65%,45%); } + .icon { + fill: white; + opacity: 1; + } } &.btn--positive, @@ -572,62 +576,16 @@ span[data-tooltip]:hover:before { } .buttonDropdown { - position: relative; display: flex; + position: relative; + user-select: none; - .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; - } + .dropdown-menu { + margin-bottom: 0; } - - .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; + + &.is-open .dropdown-menu { + display: block; } } @@ -1156,7 +1114,7 @@ fieldset > .form-group { margin: 0 4px; .formGroup-bundle-label { - margin: 0 5px 27px 11px; + margin: 0 10px 27px 10px; } } @@ -4824,7 +4782,7 @@ footer { margin: 0; padding: 0; min-width: 100%; - color: hsl(198,19%,72%); + color: white; text-transform: initial; letter-spacing: 0; background: hsl(234,10%,19%); @@ -4848,6 +4806,7 @@ footer { .dropdown-menu.dropdown-menu--light { background: white; + color: hsl(198,19%,72%); } .dropdown-menu.dropdown-menu--light > li > a { @@ -4891,14 +4850,14 @@ footer { } .dropdown-menu > li > a { - color: white; + color: inherit; padding: 0 15px; margin: 0 -15px; line-height: inherit; } .dropdown-menu > li > a:hover { - color: white; + color: inherit; background: hsl(205,90%,60%); } @@ -4907,14 +4866,10 @@ footer { } .dropdown.dropdown--actions { - .dropdown-menu { - color: white; - } - li { line-height: initial; height: auto; - padding: 9px 15px; + padding: 11px 15px; display: flex; align-items: center; word-break: break-all;