Fixes #4953 - The in drop-down menu shown group name is truncated aft…

…er a certain number of characters.
zammad · Dec 5, 2023 · 630c50e · 630c50e
1 parent f0852b9
commit 630c50e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 29 deletions.
diff --git a/app/assets/javascripts/app/lib/app_post/searchable_select.coffee b/app/assets/javascripts/app/lib/app_post/searchable_select.coffee
@@ -398,10 +398,10 @@ class App.SearchableSelect extends Spine.Controller
       @toggleClear()
 
   markSelected: (value) ->
-    @el.find('.searchableSelect-option-checkmark')
-      .addClass('hide')
-    @el.find("li[data-value='#{jQuery.escapeSelector(value)}'] .searchableSelect-option-checkmark")
-      .removeClass('hide')
+    @el.find('li')
+      .removeClass('is-selected')
+    @el.find("li[data-value='#{jQuery.escapeSelector(value)}']")
+      .addClass('is-selected')
 
   navigateIn: (event) ->
     event.stopPropagation()

diff --git a/app/assets/javascripts/app/views/generic/searchable_select_option.jst.eco b/app/assets/javascripts/app/views/generic/searchable_select_option.jst.eco
@@ -1,11 +1,8 @@
-<li role="presentation" class="<%= @class %><% if @option.inactive is true: %> has-inactive<% end %>" data-value="<%= @option.value %>" data-display-name="<%= @option.displayName or @option.name %>">
+<li role="presentation" class="<%= @class %> <% if @isSelected: %>is-selected<% end %> <% if @option.inactive is true: %>has-inactive<% end %>" data-value="<%= @option.value %>" data-display-name="<%= @option.displayName or @option.name %>" title="<%= @option.name %><% if @detail: %> <%= @detail %><% end %>">
   <% if @option.category: %><small><%= @option.category %></small><br><% end %>
-  <span role="option" class="searchableSelect-option-text<% if @option.inactive is true: %> is-inactive<% end %>" title="<%= @option.name %><% if @detail: %><%= @detail %><% end %>">
+  <span role="option" class="searchableSelect-option-text <% if @option.inactive is true: %>is-inactive<% end %>" title="<%= @option.name %><% if @detail: %> <%= @detail %><% end %>">
     <%= @option.name %><% if @detail: %><span class="dropdown-detail"><%= @detail %></span><% end %>
   </span>
-  <span class="searchableSelect-option-checkmark <% if !@isSelected: %>hide<% end %>" aria-hidden="true">
-    <%- @Icon('checkmark') %>
-  </span>
   <% if @option.children: %>
   <span role="button" class="searchableSelect-option-arrow" title="<%= @T('Navigate to %s', @option.name) %>">
     <%- @Icon('arrow-right', 'recipientList-arrow') %>

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
@@ -2,6 +2,7 @@ $high-priority-color: hsl(360, 71%, 60%);
 $low-priority-color: hsl(200, 68%, 73%);
 $minWidth: 1024px;
 $sidebarWidth: 280px;
+$desktopSidebarWidth: 360px;
 $navigationWidth: 260px;
 $mobileNavigationWidth: 50px;
 $mobileNavigationWidthOpen: 220px;
@@ -4270,6 +4271,17 @@ footer {
     min-width: $minWidth - $sidebarWidth;
   }
 
+  @include desktop {
+    @include bidi-style(
+      left,
+      $desktopSidebarWidth + $navigationWidth,
+      right,
+      0
+    );
+
+    min-width: $minWidth - $desktopSidebarWidth;
+  }
+
   &.no-sidebar {
     @include bidi-style(left, $navigationWidth, right, 0);
 
@@ -7867,6 +7879,10 @@ a.list-group-item.active > .badge,
   transition: margin-right 500ms;
 
   @include rtl(transition, margin-left 500ms);
+
+  @include desktop {
+    @include bidi-style(margin-right, $desktopSidebarWidth, margin-left, 0);
+  }
 }
 
 .tabsSidebar-sidebarSpacer.is-closed {
@@ -7888,6 +7904,10 @@ a.list-group-item.active > .badge,
   border-left: 1px solid var(--border);
   padding: 0;
   margin-bottom: 1px;
+
+  @include desktop {
+    width: $desktopSidebarWidth;
+  }
 }
 
 .tabsSidebar .sidebar > hr {
@@ -7984,6 +8004,12 @@ a.list-group-item.active > .badge,
   transform: translateX($sidebarWidth);
 
   @include rtl(transform, translateX(-$sidebarWidth));
+
+  @include desktop {
+    transform: translateX($desktopSidebarWidth);
+
+    @include rtl(transform, translateX(-$desktopSidebarWidth));
+  }
 }
 
 .tabsSidebar-tabs {
@@ -11535,6 +11561,15 @@ output {
       cursor: unset;
     }
 
+    &.is-selected {
+      @include bidi-style(
+        border-left,
+        5px solid var(--highlight),
+        border-right,
+        5px solid var(--highlight)
+      );
+    }
+
     &.js-enter:hover,
     &.js-enter.is-active {
       background: none;
@@ -11568,15 +11603,7 @@ output {
       padding: 0;
 
       span.searchableSelect-option-text {
-        @include ltr(padding, 11px 45px 11px 15px);
-        @include rtl(padding, 11px 15px 11px 45px);
-      }
-
-      span.searchableSelect-option-checkmark {
-        @include ltr(margin-left, -31px);
-        @include ltr(padding-right, 15px);
-        @include rtl(margin-right, -31px);
-        @include rtl(padding-left, 15px);
+        padding: 11px 15px;
       }
 
       span.searchableSelect-option-arrow {
@@ -11594,22 +11621,12 @@ output {
     }
 
     span.searchableSelect-option-text {
-      @include ltr(padding-right, 45px);
-      @include rtl(padding-left, 45px);
+      letter-spacing: -0.02rem;
 
       &:hover {
         background: var(--highlight);
       }
     }
-
-    span.searchableSelect-option-checkmark {
-      @include ltr(margin-left, -16px);
-      @include rtl(margin-right, 16px);
-
-      .icon-checkmark {
-        fill: var(--text-inverted);
-      }
-    }
   }
 
   li:not(.is-active):hover + li {