UBER-340,-341,-346, TSK-1545: ui fixes (#3328)

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

models/tracker/src/index.ts

@@ -680,7 +680,7 @@ export function createModel (builder: Builder): void {
           key: '',
           label: tracker.string.DueDate,
           presenter: tracker.component.DueDatePresenter,
-          props: { kind: 'list' }
+          props: { kind: 'list', size: 'small' }
         },
         {
           key: '',

packages/theme/styles/_colors.scss

@@ -60,6 +60,7 @@
   --primary-button-pressed: #284B86;
   --primary-button-focused: #144CA8;
   --primary-button-disabled: #484662;
+  --primary-button-disabled-color: rgba(255, 255, 255, .5);
   --primary-button-focused-border: #6E9FED;
   --primary-button-border: rgba(255, 255, 255, .09);
   --primary-button-outline: rgba(87, 132, 255, .3); // OLD
@@ -69,6 +70,7 @@
   --theme-button-pressed: rgba(255, 255, 255, .08);
   --theme-button-focused: rgba(255, 255, 255, .04);
   --theme-button-disabled: rgba(255, 255, 255, .02);
+  --theme-button-disabled-color: rgba(255, 255, 255, .5);
   --theme-button-border: rgba(255, 255, 255, .09);
 
   --theme-refinput-color: rgba(255, 255, 255, .03);
@@ -241,6 +243,7 @@
   --primary-button-pressed: #284B86;
   --primary-button-focused: #144CA8;
   --primary-button-disabled: #EBEBEB;
+  --primary-button-disabled-color: rgba(0, 0, 0, .5);
   --primary-button-focused-border: #6E9FED; // DARK
   --primary-button-border: rgba(255, 255, 255, .09);
   --primary-button-outline: rgba(87, 132, 255, .3); // OLD
@@ -250,6 +253,7 @@
   --theme-button-pressed: rgba(0, 0, 0, .08);
   --theme-button-focused: rgba(0, 0, 0, .04);
   --theme-button-disabled: rgba(0, 0, 0, .02);
+  --theme-button-disabled-color: rgba(0, 0, 0, .5);
   --theme-button-border: rgba(0, 0, 0, .09);
 
   --theme-refinput-color: rgba(0, 0, 0, .03);

packages/theme/styles/button.scss

@@ -174,6 +174,7 @@
       background-color: var(--theme-button-focused);
     }
     &:disabled {
+      color: var(--theme-button-disabled-color);
       background-color: var(--theme-button-disabled);
     }
 
@@ -267,7 +268,6 @@
   }
   &.list {
     padding: 0 0.625em;
-    min-height: 1.75rem;
     color: var(--theme-content-color);
     background-color: var(--theme-button-enabled);
     border: 1px solid var(--theme-button-border);
@@ -275,17 +275,14 @@
     // transition-property: border, color, background-color;
     // transition-duration: 0.15s;
 
-    .btn-icon {
+    &:not(.inline, .x-small) { min-height: 1.75rem; }
-      color: var(--theme-dark-color);
+    .btn-icon { color: var(--theme-dark-color); }
-    }
     &:hover {
       color: var(--theme-caption-color);
       background-color: var(--theme-button-hovered);
       border-color: var(--theme-button-border);
     }
-    &:not(.no-focus):focus {
+    &:not(.no-focus):focus { box-shadow: none; }
-      box-shadow: none;
-    }
   }
   &.primary {
     padding: 0 0.75rem;
@@ -307,6 +304,7 @@
       background-color: var(--primary-button-focused);
     }
     &:disabled {
+      color: var(--primary-button-disabled-color);
       background-color: var(--primary-button-disabled);
     }
   }

packages/theme/styles/popups.scss

@@ -310,12 +310,6 @@
         font-size: 0.6875rem;
         color: var(--theme-halfcontent-color);
       }
-      .check {
-        flex-shrink: 0;
-        margin-left: .5rem;
-        width: 1rem;
-        color: var(--theme-dark-color);
-      }
     }
 
     // &:hover { background-color: var(--popup-bg-hover); }
@@ -340,9 +334,11 @@
     }
   }
   .ap-check {
+    flex-shrink: 0;
     margin-left: 1rem;
     width: 1rem;
     height: 1rem;
+    color: var(--theme-dark-color);
   }
   .ap-menuHeader {
     display: flex;

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -244,14 +244,14 @@
         padding: 0 0.25rem;
       }
 
-      .btn-icon {
+      .btn-icon:not(.warning, .critical, .overdue) {
         color: var(--theme-darker-color);
       }
       &:hover {
         color: var(--theme-content-color);
         background-color: var(--theme-bg-color);
         border-color: var(--theme-divider-color);
-        .btn-icon {
+        .btn-icon:not(.warning, .critical, .overdue) {
           color: var(--theme-content-color);
         }
       }
@@ -271,8 +271,8 @@
         background-color: var(--theme-list-button-hover);
         border-color: var(--theme-divider-color);
       }
-      .btn-icon,
+      .btn-icon:not(.warning, .critical, .overdue),
-      &:hover .btn-icon {
+      &:hover .btn-icon:not(.warning, .critical, .overdue) {
         color: var(--theme-halfcontent-color) !important;
       }
       &.medium {
@@ -289,7 +289,7 @@
         color: var(--theme-caption-color);
         background-color: var(--theme-link-button-hover);
         border-color: var(--theme-list-divider-color);
-        .btn-icon {
+        .btn-icon:not(.warning, .critical, .overdue) {
           color: var(--theme-caption-color);
         }
       }
@@ -309,13 +309,13 @@
       &:not(.withIcon) {
         padding: 0 0.75rem;
       }
-      .btn-icon {
+      .btn-icon:not(.warning, .critical, .overdue) {
         color: var(--theme-content-color);
       }
       &:hover {
         background-color: var(--theme-button-hovered);
         border-color: var(--theme-divider-color);
-        .btn-icon {
+        .btn-icon:not(.warning, .critical, .overdue) {
           color: var(--theme-content-color);
         }
       }
@@ -339,10 +339,10 @@
       }
     }
 
-    &.noDate .btn-icon {
+    &.noDate .btn-icon:not(.warning, .critical, .overdue) {
       color: var(--theme-dark-color);
     }
-    &.noDate:hover .btn-icon {
+    &.noDate:hover .btn-icon:not(.warning, .critical, .overdue) {
       color: var(--theme-content-color);
     }
 

plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte

@@ -35,7 +35,7 @@
   export let currentProject: Project | undefined = undefined
 
   export let kind: ButtonKind = 'link-bordered'
-  export let size: ButtonSize = 'inline'
+  export let size: ButtonSize = 'small'
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = 'min-contet'
 

plugins/workbench-resources/src/components/SelectWorkspaceMenu.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import login, { loginId, Workspace } from '@hcengineering/login'
+  import login, { Workspace } from '@hcengineering/login'
   import { getResource } from '@hcengineering/platform'
   import {
     closePopup,
@@ -30,7 +30,7 @@
   import { workbenchId } from '@hcengineering/workbench'
   import { onMount } from 'svelte'
   import { workspacesStore } from '../utils'
-  import Drag from './icons/Drag.svelte'
+  // import Drag from './icons/Drag.svelte'
 
   onMount(() => {
     getResource(login.function.GetWorkspaces).then(async (f) => {
@@ -59,10 +59,6 @@
     setMetadataLocalStorage(login.metadata.LoginTokens, tokens)
   }
 
-  const loginPath: Location = {
-    path: [loginId, 'selectWorkspace']
-  }
-
   function getWorkspaceLink (ws: Workspace): string {
     const loc: Location = {
       path: [workbenchId, ws.workspace]
@@ -113,13 +109,6 @@
     }
   }
 
-  function handleOther (e: MouseEvent) {
-    if (e.metaKey || e.ctrlKey) return
-    e.preventDefault()
-    closePopup()
-    navigate({ path: [loginId, 'selectWorkspace'] })
-  }
-
   $: last = $workspacesStore.length
 </script>
 
@@ -132,19 +121,19 @@
           <a class="stealth" href={getWorkspaceLink(ws)} on:click={(e) => clickHandler(e, ws.workspace)}>
             <button
               bind:this={btns[i]}
-              class="ap-menuItem flex-row-center withDrag"
+              class="ap-menuItem flex-row-center flex-grow"
               class:hover={btns[i] === activeElement}
               on:mousemove={() => {
                 focusTarget(btns[i])
               }}
             >
-              <div class="drag"><Drag size={'small'} /></div>
+              <!-- <div class="drag"><Drag size={'small'} /></div> -->
               <!-- <div class="logo empty" /> -->
               <!-- <div class="flex-col flex-grow"> -->
               <span class="label overflow-label flex-grow">{ws.workspace}</span>
               <!-- <span class="description overflow-label">Description</span> -->
               <!-- </div> -->
-              <div class="check">
+              <div class="ap-check">
                 {#if $resolvedLocationStore.path[1] === ws.workspace}
                   <IconCheck size={'small'} />
                 {/if}
@@ -152,18 +141,6 @@
             </button>
           </a>
         {/each}
-        <a class="stealth" href={locationToUrl(loginPath)} on:click={handleOther}>
-          <button
-            bind:this={btns[last]}
-            class="ap-menuItem flex-grow"
-            class:hover={btns[last] === activeElement}
-            on:mousemove={() => {
-              focusTarget(btns[last])
-            }}
-          >
-            ...
-          </button>
-        </a>
       </div>
     </div>
     <div class="ap-space x2" />