Fix UI. (#986)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2025-01-08 21:27:45 +03:00 · 2022-02-09 16:20:30 +07:00 · 2022-02-09 16:20:30 +07:00 · d91b6c4473
commit d91b6c4473
parent 821e9ebece
13 changed files with 58 additions and 68 deletions
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@ -238,10 +238,10 @@
        display: flex;
        justify-content: center;
        align-items: center;
-        margin-left: 8px;
+        margin-left: .5rem;
        padding: 0;
-        width: 20px;
-        height: 20px;
+        width: 1.25rem;
+        height: 1.25rem;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: .25rem;
@ -249,41 +249,38 @@
        cursor: pointer;

        .icon {
-          width: 20px;
-          height: 20px;
-          opacity: 0.3;
+          width: 1.25rem;
+          height: 1.25rem;
+          color: var(--theme-content-dark-color);
          cursor: pointer;
-          &:hover {
-            opacity: 1;
-          }
+
+          &:hover { color: var(--theme-caption-color); }
        }
        &:focus {
          border: 1px solid var(--primary-button-focused-border);
          box-shadow: 0 0 0 3px var(--primary-button-outline);
-          & > .icon {
-            opacity: 1;
-          }
+          
+          & > .icon { color: var(--theme-caption-color); }
        }
      }
    }
    .buttons {
-      margin: 10px 0 0 8px;
      display: flex;
+      margin: .625rem 0 0 .5rem;

      .tool {
        display: flex;
        justify-content: center;
        align-items: center;
-        width: 20px;
-        height: 20px;
-        opacity: 0.3;
+        width: 1.25rem;
+        height: 1.25rem;
+        color: var(--theme-content-dark-color);
        cursor: pointer;
-        &:hover {
-          opacity: 1;
-        }
+
+        &:hover { color: var(--theme-caption-color); }
      }
      .tool + .tool {
-        margin-left: 16px;
+        margin-left: 1rem;
      }
    }
  }
--- a/packages/text-editor/src/components/icons/Attach.svelte
+++ b/packages/text-editor/src/components/icons/Attach.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>

-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M4.82816 10.4853L10.485 4.82845C11.6566 3.65688 13.5561 3.65688 14.7277 4.82845C15.8992 6.00002 15.8992 7.89952 14.7277 9.07109L8.01014 15.7886C7.42436 16.3744 6.47461 16.3744 5.88882 15.7886C5.30304 15.2028 5.30304 14.2531 5.88882 13.6673L11.8992 7.65687C12.0945 7.46161 12.0945 7.14503 11.8992 6.94977C11.704 6.75451 11.3874 6.75451 11.1921 6.94977L5.18172 12.9602C4.20541 13.9365 4.20541 15.5194 5.18172 16.4957C6.15803 17.472 7.74094 17.472 8.71725 16.4957L15.4348 9.77819C16.9969 8.2161 16.9969 5.68344 15.4348 4.12134C13.8727 2.55924 11.34 2.55924 9.77791 4.12134L4.12106 9.77819C3.92579 9.97346 3.92579 10.29 4.12106 10.4853C4.31632 10.6806 4.6329 10.6806 4.82816 10.4853Z"/>
 </svg>
--- a/packages/text-editor/src/components/icons/Emoji.svelte
+++ b/packages/text-editor/src/components/icons/Emoji.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>

-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM7.15467 12.4273C8.66416 13.9463 11.0877 14.0045 12.6671 12.5961L12.8453 12.4273C13.04 12.2314 13.3566 12.2304 13.5524 12.4251C13.7265 12.5981 13.7467 12.8674 13.6123 13.0627L13.5547 13.1322L13.5323 13.1545C11.5691 15.1054 8.39616 15.0953 6.44533 13.1322C6.25069 12.9363 6.25169 12.6197 6.44757 12.4251C6.64344 12.2304 6.96002 12.2314 7.15467 12.4273ZM12.5 7.5C13.0523 7.5 13.5 7.94772 13.5 8.5C13.5 9.05228 13.0523 9.5 12.5 9.5C11.9477 9.5 11.5 9.05228 11.5 8.5C11.5 7.94772 11.9477 7.5 12.5 7.5ZM7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5Z"/>
 </svg>
--- a/packages/text-editor/src/components/icons/GIF.svelte
+++ b/packages/text-editor/src/components/icons/GIF.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>

-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M15.4 3C16.7864 3 17.9194 4.1869 17.9959 5.68238L18 5.84375V14.1562C18 15.6727 16.9148 16.9118 15.5475 16.9955L15.4 17H4.6C3.21357 17 2.0806 15.8131 2.00412 14.3176L2 14.1562V5.84375C2 4.32735 3.08516 3.08816 4.45246 3.0045L4.6 3H15.4ZM15.25 4H4.75C3.82377 4 3.06561 4.793 3.00404 5.79653L3 5.92857V14.0714C3 15.0922 3.71957 15.9277 4.63018 15.9956L4.75 16H15.25C16.1762 16 16.9344 15.207 16.996 14.2035L17 14.0714V5.92857C17 4.90783 16.2804 4.0723 15.3698 4.00445L15.25 4ZM6.85135 7.00214C7.4713 7.00214 7.99907 7.0988 8.43229 7.30058C8.69893 7.42477 8.80624 7.72539 8.67198 7.97203C8.53772 8.21867 8.21272 8.31793 7.94609 8.19374C7.6779 8.06883 7.31378 8.00214 6.85135 8.00214C5.82473 8.00214 5.08108 8.8345 5.08108 10.0011C5.08108 11.1209 5.89403 12 6.85135 12C7.44761 12 7.85273 11.6487 7.91152 11.3268L7.91892 11.2472V10.5011L7.54054 10.5C7.24201 10.5 7 10.2761 7 10C7 9.75454 7.19122 9.55039 7.44338 9.50806L7.54054 9.5L8.45946 9.50107C8.72482 9.50107 8.94552 9.67794 8.99129 9.91119L9 10.0011V11.2472C9 12.1244 8.11351 13 6.85135 13C5.25622 13 4 11.6415 4 10.0011C4 8.31985 5.17727 7.00214 6.85135 7.00214ZM11 7C11.2455 7 11.4496 7.17688 11.4919 7.41012L11.5 7.5V12.5C11.5 12.7761 11.2761 13 11 13C10.7545 13 10.5504 12.8231 10.5081 12.5899L10.5 12.5V7.5C10.5 7.22386 10.7239 7 11 7ZM15.5 7C15.7761 7 16 7.22386 16 7.5C16 7.74546 15.8231 7.94961 15.5899 7.99194L15.5 8H14V10H15.5C15.7761 10 16 10.2239 16 10.5C16 10.7455 15.8231 10.9496 15.5899 10.9919L15.5 11H14V12.5C14 12.7761 13.7761 13 13.5 13C13.2545 13 13.0504 12.8231 13.0081 12.5899L13 12.5V7.5C13 7.22386 13.2239 7 13.5 7H15.5Z"/>
 </svg>
--- a/packages/text-editor/src/components/icons/Send.svelte
+++ b/packages/text-editor/src/components/icons/Send.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: number = 20
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>

-<svg width={size} height={size} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M2.72113 2.05149L18.0756 9.61746C18.3233 9.73952 18.4252 10.0393 18.3031 10.287C18.2544 10.3858 18.1744 10.4658 18.0756 10.5145L2.72144 18.0803C2.47374 18.2023 2.17399 18.1005 2.05193 17.8528C1.99856 17.7445 1.98619 17.6205 2.0171 17.5038L3.9858 10.0701L2.01676 2.62789C1.94612 2.36093 2.10528 2.08726 2.37224 2.01663C2.48893 1.98576 2.61285 1.99814 2.72113 2.05149ZM3.26445 3.43403L4.87357 9.51612L4.93555 9.50412L5 9.5H12C12.2761 9.5 12.5 9.72386 12.5 10C12.5 10.2455 12.3231 10.4496 12.0899 10.4919L12 10.5H5C4.9686 10.5 4.93787 10.4971 4.90807 10.4916L3.26508 16.6976L16.7234 10.066L3.26445 3.43403Z"/>
 </svg>
--- a/packages/text-editor/src/components/icons/TextStyle.svelte
+++ b/packages/text-editor/src/components/icons/TextStyle.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  export let size: string
-  const fill: string = 'var(--theme-caption-color)'
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
 </script>

-<svg class={`class-${size}`} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M14.0872 6.70308C14.9271 5.85998 16.2664 5.81735 17.1568 6.57701L17.2869 6.69697L17.4134 6.83357C18.1376 7.68212 18.1376 8.93671 17.4134 9.78526L17.293 9.91574L10.4167 16.8183C10.2617 16.9739 10.0749 17.0931 9.86988 17.1682L9.71291 17.2161L6.62737 17.9764C6.28827 18.0599 5.98023 17.7813 6.00917 17.4498L6.0236 17.366L6.81558 14.2953C6.86895 14.0883 6.96574 13.8958 7.09885 13.7302L7.20537 13.6112L14.0872 6.70308ZM16.5811 7.40543C16.1201 6.94613 15.393 6.91684 14.898 7.31661L14.7957 7.40884L7.91383 14.317C7.87193 14.359 7.83804 14.408 7.8135 14.4616L7.7839 14.545L7.20061 16.805L9.47368 16.2452C9.51317 16.2354 9.55114 16.221 9.58682 16.2022L9.6385 16.1709L9.70829 16.1126L16.5845 9.20999C17.0806 8.71206 17.0806 7.90677 16.5811 7.40543ZM6.42419 2.22879L6.46607 2.31323L9.448 9.94224L8.676 10.7172L8.004 8.99824H4.007L2.96614 11.678C2.87719 11.9068 2.63835 12.0329 2.40561 11.9879L2.31893 11.9628C2.09015 11.8738 1.96399 11.635 2.00906 11.4023L2.03413 11.3156L5.53436 2.31403C5.6877 1.9197 6.21661 1.89109 6.42419 2.22879ZM6.00061 3.871L4.396 7.99824H7.614L6.00061 3.871Z"/>
 </svg>
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@ -372,6 +372,7 @@ a.no-line {
 /* Text */
 .text-sm { font-size: .75rem; }
 .text-lg { font-size: 1.125rem; }
+.font-medium { font-weight: 500; }
 .fs-title {
  font-weight: 500;
  font-size: 1rem;
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@ -33,6 +33,7 @@

 <style lang="scss">
  .icon-button {
+    flex-shrink: 0;
    color: var(--theme-caption-color);
    border: 1px solid var(--theme-circle-border);
    border-radius: 50%;
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@ -17,7 +17,6 @@
  import { afterUpdate, onDestroy, onMount } from 'svelte'

  export let padding: boolean = false
-  export let isBack: boolean = false

  let mask: 'top' | 'bottom' | 'both' | 'none' = 'bottom'

@ -53,7 +52,8 @@
      const procTop = divScroll.scrollTop / divScroll.scrollHeight
      divBar.style.height = procScroll * proc + 'px'
      divBar.style.top = procTop * (divScroll.clientHeight - 8) + 4 + 'px'
-      divBar.style.visibility = 'visible'
+      if (mask === 'none') divBar.style.visibility = 'hidden'
+      else divBar.style.visibility = 'visible'
    }
  }

@ -82,8 +82,8 @@
    else if (t > 0) mask = 'bottom'
    else if (b > 0) mask = 'top'
    else mask = 'none'
-    if (isBack) checkBack()
-    if (mask !== 'none') checkBar()
+    checkBack()
+    checkBar()
  }

  onMount(() => {
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@ -75,7 +75,7 @@
    </div>
  </div>
 {:else}
-  <Scroller isBack>
+  <Scroller>
    <div class="p-10">
      <slot />
    </div>
--- a/plugins/contact-resources/src/components/ChannelsPopup.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPopup.svelte
@ -42,8 +42,8 @@

 <div class="flex-row-center">
  <CircleButton icon={value.icon} size={'x-large'} />
-  <div class="flex-col caption-color ml-3">
-    <div class="label">{value.label}</div>
+  <div class="flex-col caption-color clear-mins ml-3">
+    <div class="text-sm font-medium">{value.label}</div>
    <div class="overflow-label">{value.value}</div>
  </div>
  <div class="button" on:click|preventDefault={copyLink}>
@ -52,11 +52,8 @@
 </div>

 <style lang="scss">
-  .label {
-    font-weight: 500;
-    font-size: .75rem;
-  }
  .button {
+    flex-shrink: 0;
    margin-left: 1.5rem;
    color: var(--theme-content-dark-color);
    cursor: pointer;
--- a/plugins/task-resources/src/components/state/StatesBar.svelte
+++ b/plugins/task-resources/src/components/state/StatesBar.svelte
@ -92,7 +92,7 @@
        class="flex-row-center overflow-label label"
        style={item._id === state ? `background-color: ${getPlatformColor(item.color)};` : ''}
      >
-        {item.title}
+        &nbsp;&nbsp;&nbsp;{item.title}&nbsp;&nbsp;&nbsp;
      </div>
      <StatesBarElement
        side={'right'}
@ -121,7 +121,7 @@
  }

  .label {
-    padding: 0.5rem 2rem;
+    // padding: 0.5rem 2rem;
    height: 2.25rem;
    max-height: 2.25rem;
    color: var(--theme-caption-color);
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/plugins/telegram-resources/src/components/Chat.svelte
@ -194,11 +194,13 @@
  }
 </script>

-<div class="flex-between header">
-  <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
-  <div class="flex-grow flex-col">
-    <div class="fs-title">Telegram</div>
-    <div class="text-sm content-dark-color">You and {formatName(object.name)}</div>
+<div class="ac-header short mirror-tool divide">
+  <div class="ac-header__wrap-title">
+    <div class="flex-center icon"><TelegramIcon size={'small'} /></div>
+    <div class="ac-header__wrap-description">
+      <span class="ac-header__title">Telegram</span>
+      <span class="ac-header__description">You and {formatName(object.name)}</span>
+    </div>
  </div>
  <ActionIcon
    icon={IconShare}
@ -253,21 +255,13 @@
 </div>

 <style lang="scss">
-  .header {
-    flex-shrink: 0;
-    padding: 0 6rem 0 2.5rem;
-    height: 4rem;
-    color: var(--theme-content-accent-color);
-    border-bottom: 1px solid var(--theme-zone-bg);
-
-    .icon {
-      margin-right: 1rem;
-      width: 2.25rem;
-      height: 2.25rem;
-      color: var(--theme-caption-color);
-      background-color: var(--primary-button-enabled);
-      border-radius: 50%;
-    }
+  .icon {
+    margin-right: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    color: var(--theme-caption-color);
+    background-color: var(--primary-button-enabled);
+    border-radius: 50%;
  }

  .ref-input {