Fix layouts (#606)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-11-27 01:13:27 +03:00 · 2021-12-10 12:39:58 +03:00 · 2021-12-10 12:39:58 +03:00 · 211283948d
commit 211283948d
parent 34d1b7a5a4
10 changed files with 42 additions and 28 deletions
--- a/packages/presentation/src/components/SpaceInfo.svelte
+++ b/packages/presentation/src/components/SpaceInfo.svelte
@ -49,7 +49,6 @@
      color: var(--theme-content-dark-color);
    }
    .title {
-      font-weight: 500;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
--- a/packages/presentation/src/components/UserInfo.svelte
+++ b/packages/presentation/src/components/UserInfo.svelte
@ -41,7 +41,6 @@
      color: var(--theme-content-dark-color);
    }
    .title {
-      font-weight: 500;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@ -44,6 +44,7 @@ button {
  user-select: none;
 }
 input {
+  min-width: 0;
  font: inherit;
  background-color: transparent;
  outline: none;
@ -255,6 +256,12 @@ p:last-child { margin-block-end: 0; }
 }
 .svg-small, .svg-medium, .svg-large { flex-shrink: 0; }

+.svg-mask {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
 .scale-75 {
  transform-origin: center center;
  transform: scale(.75);
@ -304,6 +311,7 @@ a.no-line {
  text-overflow: ellipsis;
  overflow: hidden;
  user-select: none;
+  min-width: 0;
 }

 .focused-button {
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@ -41,6 +41,7 @@

        if ($tooltip.component) {

+          tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.height = ''
          if (rect.bottom + tooltipHTML.clientHeight + 28 < doc.height) {
            tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
            dir = 'bottom'
@ -48,14 +49,14 @@
            tooltipHTML.style.bottom = `calc(${doc.height - rect.y}px + 5px + .25rem)`
            if (tooltipHTML.clientHeight > rect.top - 28) {
              tooltipHTML.style.top = '1rem'
-              tooltipHTML.style.height = rect.top - 28 + 'px'
+              tooltipHTML.style.height = `calc(${rect.top}px - 5px - 1.25rem)`
            }
            dir = 'top'
          } else {
            tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
            if (tooltipHTML.clientHeight > doc.height - rect.bottom - 28) {
              tooltipHTML.style.bottom = '1rem'
-              tooltipHTML.style.height = doc.height - rect.bottom - 28 + 'px'
+              tooltipHTML.style.height = `calc(${doc.height - rect.bottom}px - 5px - 1.25rem)`
            }
            dir = 'bottom'
          }
@ -143,7 +144,7 @@
 </script>

 <svelte:window on:resize={fitTooltip} on:mousemove={(ev) => { whileShow(ev) }} />
-<svg class="mask">
+<svg class="svg-mask">
  <clipPath id="nub-bg"><path d="M7.3.6 4.2 4.3C2.9 5.4 1.5 6 0 6v1h18V6c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2z" /></clipPath>
  <clipPath id="nub-border"><path d="M4.8 5.1 8 1.3s.1 0 .1-.1c.5-.3 1.4-.3 1.9.1L13.1 5l.1.1 1.2.9H18c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2L4.2 4.3C2.9 5.4 1.5 6 0 6h3.6l1.2-.9z" /></clipPath>
 </svg>
@ -168,6 +169,7 @@
  }

  .popup {
+    overflow: hidden;
    position: fixed;
    display: flex;
    flex-direction: column;
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@ -23,8 +23,9 @@
  import { ActivityKey, activityKey, DisplayTx, newActivity } from '../activity'
  import TxView from './TxView.svelte'

-  export let fullSize: boolean = false
  export let object: Doc
+  export let fullSize: boolean = false
+  export let transparent: boolean = false

  let txes: DisplayTx[] = []

@ -54,12 +55,14 @@
  })
 </script>

-{#if fullSize}
-  <div class="flex-row-center header">
-    <div class="flex-center icon"><IconActivity size={'small'} /></div>
-    <div class="fs-title">Activity</div>
-  </div>
-  <div class="flex-col h-full right-content">
+{#if fullSize || transparent}
+  {#if !transparent}
+    <div class="flex-row-center header">
+      <div class="flex-center icon"><IconActivity size={'small'} /></div>
+      <div class="fs-title">Activity</div>
+    </div>
+  {/if}
+  <div class="h-full right-content" class:transparent>
    <ScrollBox vertical stretch>
      {#if txes}
        <Grid column={1} rowGap={1.5}>
@ -70,7 +73,7 @@
      {/if}
    </ScrollBox>
  </div>
-  <div class="ref-input"><ReferenceInput on:message={onMessage} /></div>
+  <div class="ref-input" class:transparent><ReferenceInput on:message={onMessage} /></div>
 {:else}
  <div class="unionSection">
    <ScrollBox vertical stretch noShift>
@ -126,12 +129,23 @@
  .ref-input {
    background-color: var(--theme-bg-accent-color);
    padding: 1.5rem 2.5rem;
+    &.transparent {
+      padding: 1.5rem 0 0;
+      background-color: transparent;
+    }
  }

  .right-content {
    flex-grow: 1;
    padding: 1.5rem 2.5rem 0;
    background-color: var(--theme-dialog-accent);
+    &.transparent {
+      min-height: 0;
+      height: 100%;
+      max-height: 100%;
+      padding: 0;
+      background-color: transparent;
+    }
  }

  .unionSection {
--- a/plugins/chunter-resources/src/components/CommentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentPresenter.svelte
@ -60,6 +60,7 @@
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;  
+    text-overflow: ellipsis;
    overflow: hidden;
  }
 </style>
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@ -94,7 +94,7 @@
        {:else if selected === 1}
          <ToggleWithLabel label={'This vacancy is private'} description={recruit.string.MakePrivateDescription}/>
        {:else if selected === 2}
-          <Component is={activity.component.Activity} props={{object}} />
+          <Component is={activity.component.Activity} props={{object, transparent: true}} />
        {/if}
      </div>
    </div>
@ -176,8 +176,8 @@
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
-    margin: 1rem 0;
-    padding: 1.5rem 2.5rem;
+    margin: 1rem 2rem;
+    padding: 1.5rem .5rem;

    .box {
      margin-right: 1px;
--- a/plugins/telegram-resources/src/components/Message.svelte
+++ b/plugins/telegram-resources/src/components/Message.svelte
@ -97,6 +97,7 @@
      color: var(--theme-content-trans-color);
      font-size: 0.75rem;
      font-style: italic;
+      white-space: nowrap;
    }
  }

--- a/plugins/telegram-resources/src/components/SharedMessages.svelte
+++ b/plugins/telegram-resources/src/components/SharedMessages.svelte
@ -26,6 +26,7 @@

 <style lang="scss">
  .container {
+    padding: 1.25rem 0 1.5rem;
    background-color: var(--theme-bg-accent-color);
    border: 1px solid var(--theme-bg-accent-color);
    border-radius: 0.75rem;
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@ -82,7 +82,7 @@
 </script>

 {#if client}
-  <svg class="mask">
+  <svg class="svg-mask">
    <clipPath id="notify-normal">
      <path d="M0,0v52.5h52.5V0H0z M34,23.2c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8 C39.8,20.7,37.2,23.2,34,23.2z"/>
    </clipPath>
@ -116,12 +116,6 @@
        <NavHeader label={currentApplication.label} />
      {/if}
      <Navigator model={navigatorModel} />
-      <!-- <div class="flex-center safari-gap-2" style="height: 20rem">
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'left'} />
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'top'} />
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'bottom'} />
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'right'} />
-      </div> -->
    </div>
    {/if}
    <div class="panel-component">
@ -143,11 +137,6 @@
 {/if}

 <style lang="scss">
-  .mask {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
  .container {
    display: flex;
    height: 100%;