HR: When hovering over a cell, the day is highlighted. (#2253)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/ui/src/components/icons/DetailsFilled.svelte

@@ -0,0 +1,27 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1 5.25C1 3.45508 2.45508 2 4.25 2H11.75C13.5449 2 15 3.45508 15 5.25V10.7499C15 12.5449 13.5449 13.9999 11.75 13.9999H4.25C2.45508 13.9999 1 12.5449 1 10.7499V5.25ZM4.5 12.4999C3.39543 12.4999 2.5 11.6045 2.5 10.4999V5.5C2.5 4.39543 3.39543 3.5 4.5 3.5H9V12.4999H4.5Z"
+  />
+</svg>

packages/ui/src/index.ts

@@ -129,6 +129,7 @@ export { default as IconDPCalendar } from './components/calendar/icons/DPCalenda
 export { default as IconDPCalendarOver } from './components/calendar/icons/DPCalendarOver.svelte'
 export { default as IconOptions } from './components/icons/Options.svelte'
 export { default as IconDetails } from './components/icons/Details.svelte'
+export { default as IconDetailsFilled } from './components/icons/DetailsFilled.svelte'
 export { default as IconScale } from './components/icons/Scale.svelte'
 export { default as IconScaleFull } from './components/icons/ScaleFull.svelte'
 

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -99,6 +99,7 @@
   $: values = [...Array(daysInMonth(currentDate)).keys()]
 
   let hoveredIndex: number = -1
+  let hoveredColumn: number = -1
 </script>
 
 {#if departmentStaff.length}
@@ -115,6 +116,7 @@
             <th
               class:today={areDatesEqual(todayDate, day)}
               class:weekend={isWeekend(day)}
+              class:hoveredCell={hoveredColumn === i}
               on:mousemove={() => {
                 hoveredIndex = i
               }}
@@ -153,6 +155,12 @@
                   class:lastLine={row === departmentStaff.length - 1}
                   use:tooltip={tooltipValue}
                   on:click={(e) => createRequest(e, date, employee)}
+                  on:mousemove={() => {
+                    hoveredColumn = i
+                  }}
+                  on:mouseleave={() => {
+                    hoveredColumn = -1
+                  }}
                 >
                   {#if requests.length}
                     <ScheduleRequests {requests} {date} {editable} />
@@ -218,6 +226,9 @@
       &.weekend:not(.today) {
         color: var(--warning-color);
       }
+      &.hoveredCell {
+        background-color: var(--highlight-select);
+      }
     }
     td {
       height: 3.5rem;

plugins/tracker-resources/src/components/issues/IssuesView.svelte

@@ -3,7 +3,7 @@
   import { IntlString, translate } from '@anticrm/platform'
   import { getClient } from '@anticrm/presentation'
   import { Issue } from '@anticrm/tracker'
-  import { Button, IconDetails } from '@anticrm/ui'
+  import { Button, IconDetails, IconDetailsFilled } from '@anticrm/ui'
   import view, { Viewlet } from '@anticrm/view'
   import { FilterBar, ViewOptionModel, ViewOptionsButton, getActiveViewletId } from '@anticrm/view-resources'
   import IssuesContent from './IssuesContent.svelte'
@@ -75,8 +75,9 @@
       <ViewOptionsButton viewOptionsKey={viewlet._id} config={viewOptionsConfig} />
     {/if}
     {#if asideFloat && $$slots.aside}
+      <div class="buttons-divider" />
       <Button
-        icon={IconDetails}
+        icon={asideShown ? IconDetailsFilled : IconDetails}
         kind={'transparent'}
         size={'medium'}
         selected={asideShown}