Minor UI edits (#5613)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

packages/theme/styles/_layouts.scss

@@ -132,6 +132,10 @@ p:last-child { margin-block-end: 0; }
 
   &.contrast { color: var(--global-primary-TextColor); }
   &:not(.contrast) { color: var(--theme-content-color); }
+  &.overflow-label::after {
+    content: '';
+    display: block;
+  }
 }
 
 a.noUnderline {
@@ -154,6 +158,9 @@ a.noBold {
 .inline-height2 {
   line-height: 200%;
 }
+.leading-4 {
+  line-height: 1rem;
+}
 
 .float-left-box {
   box-sizing: border-box;
@@ -713,6 +720,7 @@ input.search {
 .min-w-full { min-width: 100%; }
 .min-h-0 { min-height: 0; }
 .min-h-2 { min-height: .5rem; }
+.min-h-3 { min-height: .75rem; }
 .min-h-4 { min-height: 1rem; }
 .min-h-5 { min-height: 1.25rem; }
 .min-h-6 { min-height: 1.5rem; }

packages/theme/styles/popups.scss

@@ -42,6 +42,13 @@
     min-height: 0;
     text-align: left;
     border-radius: var(--extra-small-BorderRadius);
+    border: none;
+
+    &.withKeys {
+      align-items: center;
+      padding: 0 var(--spacing-1_5);
+      min-height: var(--global-medium-Size);
+    }
 
     &__icon {
       flex-shrink: 0;
@@ -71,6 +78,26 @@
         color: var(--theme-dark-color); // var(--global-secondary-TextColor);
       }
     }
+    &__keys,
+    &__keys .key {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &__keys {
+      gap: var(--spacing-0_25);
+      margin-left: var(--spacing-1);
+
+      .key {
+        padding: var(--spacing-0_5);
+        min-width: var(--global-extra-small-Size);
+        font-size: 0.75rem;
+        color: var(--global-primary-TextColor);
+        background-color: var(--theme-tooltip-key-bg);
+        border: 1px solid var(--theme-button-border);
+        border-radius: var(--extra-small-BorderRadius);
+      }  
+    }  
 
     &:hover {
       background-color: var(--theme-popup-hover); // var(--global-popover-hover-BackgroundColor);

packages/ui/src/components/ButtonWithDropdown.svelte

@@ -54,32 +54,31 @@
 </script>
 
 <div class="w-full flex-row-center">
-  <div class="flex-grow">
-    <Button
-      {focusIndex}
-      width="100%"
-      {icon}
-      {size}
-      {kind}
-      disabled={disabled || loading}
-      shape={hasDropdown ? 'rectangle-right' : undefined}
-      {justify}
-      borderStyle="none"
-      on:click
-      showTooltip={showTooltipMain}
-      id={mainButtonId}
-    >
-      <div class="flex w-full" slot="content">
-        <div class="flex-row-center w-full flex-between relative">
-          {#if label}
-            <Label {label} params={labelParams} />
-            <slot name="content" />
-            <div class="{kind} vertical-divider max-h-5 h-5" />
-          {/if}
-        </div>
+  <Button
+    {focusIndex}
+    width="100%"
+    {icon}
+    {size}
+    {kind}
+    disabled={disabled || loading}
+    shape={hasDropdown ? 'rectangle-right' : undefined}
+    {justify}
+    shrink={1}
+    borderStyle="none"
+    on:click
+    showTooltip={showTooltipMain}
+    id={mainButtonId}
+  >
+    <svelte:fragment slot="content">
+      <div class="flex-row-center w-full flex-between relative">
+        {#if label}
+          <span class="overflow-label"><Label {label} params={labelParams} /></span>
+          <slot name="content" />
+          <div class="{kind} vertical-divider max-h-5 h-5" />
+        {/if}
       </div>
-    </Button>
-  </div>
+    </svelte:fragment>
+  </Button>
   {#if hasDropdown}
     <Button
       width="1.75rem"

packages/ui/src/components/ListViewItem.svelte

@@ -59,16 +59,12 @@
       margin: 0;
     }
 
-    &.default {
-      &:hover:not(.highlighted) {
-        background-color: var(--theme-popup-divider);
-      }
+    &.default.highlighted:hover {
+      background-color: var(--theme-popup-divider);
     }
 
-    &.lumia {
-      &:hover:not(.highlighted) {
-        background-color: var(--global-ui-highlight-BackgroundColor);
-      }
+    &.lumia.highlighted:hover {
+      background-color: var(--global-ui-highlight-BackgroundColor);
     }
 
     &.selection:not(.highlighted) {

packages/ui/src/components/ModernPopup.svelte

@@ -20,6 +20,7 @@
   import Scroller from './Scroller.svelte'
   import Icon from './Icon.svelte'
   import { resizeObserver } from '..'
+  import { capitalizeFirstLetter, formatKey } from '../utils'
 
   export let items: DropdownIntlItem[]
   export let selected: DropdownIntlItem['id'] | undefined = undefined
@@ -46,6 +47,7 @@
       <!-- svelte-ignore a11y-mouse-events-have-key-events -->
       <button
         class="hulyPopup-row"
+        class:withKeys={item.keys}
         on:mouseover={(ev) => {
           ev.currentTarget.focus()
         }}
@@ -73,9 +75,30 @@
         {:else}
           <div class="hulyPopup-row__label"><Label label={item.label} params={item.params ?? params} /></div>
         {/if}
-        <div class="hulyPopup-row__icon">
-          {#if item.id === selected}<IconCheck size={'small'} />{/if}
-        </div>
+        {#if item.keys}
+          <div class="hulyPopup-row__keys">
+            {#each item.keys as key, j}
+              {#if j !== 0}
+                <div class="mr-1 ml-1">/</div>
+              {/if}
+              {#each formatKey(key) as k, jj}
+                <div class="key">
+                  {#each k as kk, j}
+                    {#if j !== 0}
+                      +
+                    {/if}
+                    {capitalizeFirstLetter(kk.trim())}
+                  {/each}
+                </div>
+              {/each}
+            {/each}
+          </div>
+        {/if}
+        {#if item.id === selected}
+          <div class="hulyPopup-row__icon">
+            <IconCheck size={'small'} />
+          </div>
+        {/if}
       </button>
     {/each}
   </Scroller>

packages/ui/src/types.ts

@@ -316,6 +316,7 @@ export interface DropdownIntlItem {
   params?: Record<string, any>
   description?: IntlString
   paramsDescription?: Record<string, any>
+  keys?: string[]
 }
 
 export interface PopupOptions {

plugins/calendar-resources/src/components/DayCalendar.svelte

@@ -59,7 +59,7 @@
   export let displayedHours = 24
   export let startHour = 0
   export let startFromWeekStart = true
-  export let weekFormat: 'narrow' | 'short' | 'long' | undefined = displayedDaysCount > 4 ? 'short' : 'long'
+  export let weekFormat: 'narrow' | 'short' | 'long' = 'long'
   export let showHeader: boolean = true
   export let showFooter: boolean = true
   export let clearCells: boolean = false
@@ -1140,6 +1140,7 @@
     mask-image: var(--mask-image, none);
     --webkit-mask-image: var(--mask-image, none);
     border-radius: 0.25rem;
+    outline: none;
 
     &:not(.withPointer) {
       pointer-events: none;

plugins/tags-resources/src/components/TagReferencePresenter.svelte

@@ -44,7 +44,7 @@
       }}
     >
       <div class="color" style:background-color={color.color} />
-      <span class="label overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
+      <span class="label overflow-label ml-1 text-sm leading-4 caption-color max-w-40">{value.title}</span>
     </button>
   {:else if kind === 'list'}
     <div

plugins/time-resources/src/components/PlanView.svelte

@@ -103,7 +103,7 @@
     <PlanningCalendar
       {dragItem}
       bind:currentDate
-      displayedDaysCount={3}
+      displayedDaysCount={5}
       on:dragDrop={drop}
       on:change={(event) => (visibleNav = event.detail)}
     />

plugins/time-resources/src/utils.ts

@@ -24,7 +24,7 @@ export function getNearest (events: WorkSlot[]): WorkSlot | undefined {
 export const timeSeparators: DefSeparators = [
   { minSize: 18, size: 18, maxSize: 22.5, float: 'navigator' },
   null,
-  { minSize: 20, size: 41.25, maxSize: 50 }
+  { minSize: 20, size: 41.25, maxSize: 90 }
 ]
 
 /**

plugins/view-resources/src/components/ActionsPopup.svelte

@@ -438,6 +438,7 @@
             {/if}
           </svelte:fragment>
         </ListView>
+        <div class="antiVSpacer x2" />
       </div>
     </div>
     <div class="actionsHint">