Fix Activity layout (#351)

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

packages/theme/styles/_layouts.scss

@@ -159,6 +159,14 @@ table {
   &:hover .icon { color: var(--theme-caption-color); }
 }
 
+/* Tables */
+// .activity-table > tr:last-child > .no-icon-cell {
+//   min-height: auto;
+//   height: auto;
+//   &::after { content: none; }
+// }
+
+/* Margins & Paddings */
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 

plugins/activity-resources/src/components/Activity.svelte

@@ -13,6 +13,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import activity, { TxViewlet } from '@anticrm/activity'
   import chunter from '@anticrm/chunter'
@@ -182,16 +183,5 @@
       padding: 1.5rem 2.5rem;
       height: max-content;
     }
-    .activity {
-      background-color: var(--theme-bg-accent-color);
-      &.header {
-        border-bottom: none;
-      }
-      &.content {
-        flex-grow: 1;
-        padding-bottom: 0;
-        background-color: var(--theme-bg-accent-color);
-      }
-    }
   }
 </style>

plugins/activity-resources/src/components/TxView.svelte

@@ -13,6 +13,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import type { TxViewlet } from '@anticrm/activity'
   import contact, { EmployeeAccount, formatName } from '@anticrm/contact'
@@ -91,26 +92,26 @@
         </div>
       </div>
       <div class="flex-grow label">
-        <b>
+        <div class="bold">
           {#if employee}
             {formatName(employee.name)}
           {:else}
             No employee
           {/if}
-        </b>
+        </div>
         {#if viewlet}
-          <Label label={viewlet.label} />
+          <div><Label label={viewlet.label} /></div>
         {/if}
         {#if viewlet === undefined && model.length > 0 && utx}
           {#each model as m}
-            changed {m.label} to
-            <strong><svelte:component this={m.presenter} value={getValue(utx, m.key)} /></strong>
+            <span>changed {m.label} to</span>
+            <div class="strong"><svelte:component this={m.presenter} value={getValue(utx, m.key)} /></div>
           {/each}
         {:else if viewlet && viewlet.display === 'inline' && viewlet.component}
-          <Component is={viewlet.component} props={{ tx: displayTx }} />
+          <div><Component is={viewlet.component} props={{ tx: displayTx }} /></div>
         {/if}
       </div>
-      <div class="content-trans-color"><TimeSince value={tx.modifiedOn} /></div>
+      <div class="time"><TimeSince value={tx.modifiedOn} /></div>
     </div>
     {#if viewlet && viewlet.component && viewlet.display !== 'inline'}
       <div class="content" class:emphasize={viewlet.display === 'emphasized'}>
@@ -123,29 +124,29 @@
 <style lang="scss">
   .msgactivity-container {
     position: relative;
-    &::after {
-      content: '';
+    &::after, &::before {
       position: absolute;
-      top: 2.25rem;
       left: 1.125rem;
-      bottom: 0;
       width: 1px;
       background-color: var(--theme-card-divider);
     }
+    &::before {
+      top: -1.5rem;
+      height: 1.5rem;
+    }
+    &::after {
+      content: '';
+      top: 2.25rem;
+      bottom: 0;
+    }
   }
-  :global(.msgactivity-container + .msgactivity-container::before) {
-    content: '';
-    position: absolute;
-    top: -1.5rem;
-    left: 1.125rem;
-    height: 1.5rem;
-    width: 1px;
-    background-color: var(--theme-card-divider);
-  }
+  :global(.msgactivity-container + .msgactivity-container::before) { content: ''; }
+  // :global(.msgactivity-container > *:last-child::after) { content: none; }
 
   .icon {
     flex-shrink: 0;
     align-self: flex-start;
+    margin-right: 1rem;
     width: 2.25rem;
     height: 2.25rem;
     color: var(--theme-caption-color);
@@ -162,14 +163,23 @@
     border-radius: 0.75rem;
     padding: 1rem;
   }
+  .time {
+    margin-left: 1rem;
+    color: var(--theme-content-trans-color);
+  }
 
   .label {
-    margin: 0 1rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
 
-    b {
+    & > * { margin-right: .5rem; }
+    & > *:last-child { margin-right: 0; }
+    .bold {
+      font-weight: 500;
       color: var(--theme-caption-color);
     }
-    strong {
+    .strong {
       font-weight: 500;
       color: var(--theme-content-accent-color);
     }

plugins/recruit-resources/src/components/activity/TxApplicantUpdate.svelte

@@ -31,25 +31,18 @@
 </script>
   
 {#if tx.operations.state}
-  updated State to
-  {#if statePresenter?.presenter}
-    {#await client.findOne(core.class.State, { _id: tx.operations.state }) then st}
-      {#if st}
-        <Component is={statePresenter.presenter} props={{ value: st }}/>
-      {/if}
-    {/await}
-  {/if}
+  <div class="flex-row-center update-container">
+    <span>updated State to</span>
+    {#if statePresenter?.presenter}
+      {#await client.findOne(core.class.State, { _id: tx.operations.state }) then st}
+        {#if st}
+          <Component is={statePresenter.presenter} props={{ value: st }}/>
+        {/if}
+      {/await}
+    {/if}
+  </div>
 {/if}
 
-<style lang='scss'>
-  .state {
-    display: flex;
-    align-items: center;
-    span {
-      margin-left: 10px;
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
-    }
-  }
+<style lang="scss">
+  .update-container span { margin-right: .5rem; }
 </style>

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

@@ -30,14 +30,14 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: .375rem 1rem;
-    width: min-content;
+    padding: .25rem .75rem;
+    width: fit-content;
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: .5px;
     font-size: .625rem;
     color: #fff;
     border: 1px solid rgba(0, 0, 0, .1);
-    border-radius: .5rem;
+    border-radius: .25rem;
   }
 </style>