buttonDropdown: dropdown design, hover highlight

app/assets/javascripts/app/controllers/layout_ref.coffee

@@ -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' )

app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco

@@ -641,14 +641,13 @@
   </div>
   <div class="attributeBar">
     <div class="btn js-reset hide">Discard your unsaved changes.</div>
-    <div class="buttonDropdown">
+    <div class="buttonDropdown dropdown dropup">
-      <div class="buttonDropdown-main btn btn--primary js-submit">Update</div>
+      <div class="btn btn--primary btn--split--first js-submit">Update</div>
-      <div class="buttonDropdown-toggle btn btn--primary btn--slim js-openDropdown"><%- @Icon('arrow-up') %></div>
+      <div class="btn btn--primary btn--slim btn--split--last js-openDropdown"><%- @Icon('arrow-up') %></div>
-      <div class="buttonDropdown-dropdown">
+      <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
-        <div class="btn btn--primary js-dropdownAction">Update &amp; Close</div>
+        <li class="js-dropdownAction" role="menuitem">Update &amp; Close
-        <div class="btn btn--primary js-dropdownAction">Remind me in 2 weeks</div>
+        <li class="js-dropdownAction" role="menuitem">Remind me in 2 weeks
-      </div>
+      </ul>
-    </div>
     </div>
   </div>
 </div>

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -26,50 +26,7 @@
   <div class="tabsSidebar tabsSidebar--attributeBarSpacer vertical"></div>
 
   <div class="attributeBar">
-    <form class="form-inline is-closed hide" role="form">
+    <div class="btn js-reset hide"><%- @T('Discard your unsaved changes.') %></div>
-      <div class="form-group">
+    <div class="btn btn--primary js-submit"><%- @T('Update') %></div>
-        <label for="update_ticket_1_state_id123" class="input-group-addon u-clickable">State</label>
-        <select id="update_ticket_1_state_id123" class="form-control level-1" name="state_id">
-          <option value="4">closed</option>
-          <option value="1" selected="">new</option>
-          <option value="2">open</option>
-          <option value="3">pending</option>
-        </select>
-        <%- @Icon('arrow-down', 'dropdown-arrow') %>
-      </div>
-      <div class="form-group is-changed">
-        <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
-        <select id="update_ticket_1_priority_id123" class="form-control" name="priority_id">
-          <option value="1">1 low</option>
-          <option value="2" selected="">2 normal</option>
-          <option value="3">3 high</option>
-        </select>
-        <%- @Icon('arrow-down', 'dropdown-arrow') %>
-      </div>
-      <div class="form-group">
-        <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
-        <select id="update_ticket_1_group_id123" class="form-control" name="group_id">
-          <option value="4">FillGroup::450863</option>
-          <option value="3">FillGroup::918672</option>
-          <option value="2">Twitter</option>
-          <option value="1" selected="">Users</option>
-        </select>
-        <%- @Icon('arrow-down', 'dropdown-arrow') %>
-      </div>
-      <div class="form-group">
-        <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
-        <select id="update_ticket_1_owner_id123" class="form-control" name="owner_id">
-          <option value="">-</option>
-          <option value="3">Felix Niklas</option>
-        </select>
-        <%- @Icon('arrow-down', 'dropdown-arrow') %>
-      </div>
-    </form>
-    <form class="form-inline">
-    <div class="form-group">
-      <button type="submit" class="btn btn--primary js-submit pull-right"><%- @T('Update') %></button>
-      <button type="submit" class="btn js-reset pull-right hide"><%- @T('Discard your unsaved changes.') %></button>
-    </div>
-    </form>
   </div>
 </div>

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 {
+  .dropdown-menu {
-    margin: 0;
+    margin-bottom: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    
-    &:not(:active) {
-      border-right: none;
-    }
-
-    &:active + .btn {
-      border-left: none;
-    }
   }
   
-  .btn.buttonDropdown-toggle {
+  &.is-open .dropdown-menu {
-    margin: 0;
+    display: block;
-    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;
   }
 }
 
@@ -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;