Limiting lines and text length (#658)

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

packages/theme/styles/_layouts.scss

@@ -332,6 +332,16 @@ a.no-line {
   user-select: none;
   min-width: 0;
 }
+.lines-limit-2 {
+  min-width: 0;
+  overflow: hidden;
+  visibility: visible;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
 
 .focused-button {
   background-color: var(--theme-button-bg-focused);

packages/ui/src/components/TooltipInstance.svelte

@@ -118,7 +118,7 @@
   }
 
   const hideTooltip = (): void => {
-    tooltipHTML.style.visibility = 'hidden'
+    if (tooltipHTML) tooltipHTML.style.visibility = 'hidden'
     closeTooltip()
   }
 

plugins/chunter-resources/src/components/CreateChannel.svelte

@@ -48,7 +48,7 @@
   on:close={() => { dispatch('close') }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={chunter.string.ChannelName} icon={IconFolder} bind:value={name} placeholder={'Channel'} focus/>
+    <EditBox label={chunter.string.ChannelName} icon={IconFolder} bind:value={name} placeholder={'Channel'} maxWidth={'16rem'} focus/>
     <ToggleWithLabel label={chunter.string.MakePrivate} description={chunter.string.MakePrivateDescription}/>
   </Grid>
 </SpaceCreateCard>

plugins/contact-resources/src/components/CreateOrganizations.svelte

@@ -50,7 +50,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Organizations" focus />
+    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Organizations" maxWidth={'16rem'} focus />
     <ToggleWithLabel label={contact.string.MakePrivate} description={contact.string.MakePrivateDescription} />
   </Grid>
 </SpaceCreateCard>

plugins/contact-resources/src/components/CreatePersons.svelte

@@ -50,7 +50,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Folder" focus />
+    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Folder" maxWidth={'16rem'} focus />
     <ToggleWithLabel label={contact.string.MakePrivate} description={contact.string.MakePrivateDescription} />
   </Grid>
 </SpaceCreateCard>

plugins/lead-resources/src/components/CreateFunnel.svelte

@@ -63,7 +63,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={lead.string.FunnelName} icon={IconFolder} bind:value={name} placeholder={'Funnel name'} focus />
+    <EditBox label={lead.string.FunnelName} icon={IconFolder} bind:value={name} placeholder={'Funnel name'} maxWidth={'16rem'} focus />
     <ToggleWithLabel label={lead.string.MakePrivate} description={lead.string.MakePrivateDescription} />
     <KanbanTemplateSelector folders={[lead.space.FunnelTemplates]} bind:template={templateId}/>
   </Grid>

plugins/lead-resources/src/components/CreateLead.svelte

@@ -97,7 +97,7 @@
       bind:value={title}
       icon={lead.icon.Lead}
       placeholder="The simple lead"
-      maxWidth="39rem"
+      maxWidth={'16rem'}
       focus
     />
     <UserBox _class={contact.class.Contact} title="Customer" caption="Select customer" bind:value={customer} />

plugins/recruit-resources/src/components/CreateCandidates.svelte

@@ -50,7 +50,7 @@
   on:close={() => { dispatch('close') }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'Talent Pool'} focus/>
+    <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'Talent Pool'} maxWidth={'16rem'} focus/>
     <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
   </Grid>
 </SpaceCreateCard>

plugins/recruit-resources/src/components/CreateVacancy.svelte

@@ -62,7 +62,7 @@
   on:close={() => { dispatch('close') }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={recruit.string.VacancyName} bind:value={name} icon={Vacancy} placeholder="Software Engineer" maxWidth="39rem" focus/>
+    <EditBox label={recruit.string.VacancyName} bind:value={name} icon={Vacancy} placeholder="Software Engineer" maxWidth={'16rem'} focus/>
     <Dropdown icon={Company} label={'Company *'} placeholder={'Company'} />
     <KanbanTemplateSelector folders={[recruit.space.VacancyTemplates]} bind:template={templateId}/>
   </Grid>

plugins/recruit-resources/src/components/KanbanCard.svelte

@@ -39,8 +39,8 @@
     <div class="flex-row-center">
       <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
       <div class="flex-col ml-2">
-        <div class="fs-title over-underline" on:click={showCandidate}><Label label={formatName(object.$lookup?.attachedTo?.name)} /></div>
+        <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}><Label label={formatName(object.$lookup?.attachedTo?.name)} /></div>
-        <div class="small-text">{object.$lookup?.attachedTo?.title ?? ''}</div>
+        <div class="small-text lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
       </div>
     </div>
     <ActionIcon label={'More...'} icon={IconMoreH} size={'small'} />

plugins/task-resources/src/components/CreateProject.svelte

@@ -62,7 +62,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={task.string.ProjectName} icon={IconFolder} bind:value={name} placeholder={'Project name'} focus />
+    <EditBox label={task.string.ProjectName} icon={IconFolder} bind:value={name} placeholder={'Project name'} maxWidth={'16rem'} focus />
     <ToggleWithLabel label={task.string.MakePrivate} description={task.string.MakePrivateDescription} />
     <KanbanTemplateSelector folders={[task.space.ProjectTemplates]} bind:template={templateId}/>
   </Grid>

plugins/task-resources/src/components/CreateTask.svelte

@@ -107,7 +107,7 @@
       bind:value={object.name}
       icon={task.icon.Task}
       placeholder="The boring task"
-      maxWidth="39rem"
+      maxWidth={'16rem'}
       focus
     />
     <UserBox

plugins/task-resources/src/components/KanbanCard.svelte

@@ -39,8 +39,8 @@
         <div class="sm-tool-icon step-lr75">
           <TaskPresenter value={object} />
         </div>
-        <div class="fs-title">{object.name}</div>
+        <div class="fs-title lines-limit-2">{object.name}</div>
-        <div class="small-text">{object.description}</div>
+        <div class="small-text lines-limit-2">{object.description}</div>
       </div>
     </div>
   </div>

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

@@ -15,9 +15,7 @@
 -->
 
 <script lang="ts">
-
+  export let value: string
-export let value: string
-
 </script>
 
-{value}
+<span class="lines-limit-2">{value}</span>